/* Paginas interiores de la demo (27-09-2026): hero de pagina, prosa, tarjetas, indice, formularios.
   Mismo lenguaje que la referencia: tokens de style.css, Archivo para titulos, Inter para texto. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
.sivu-hero { padding: calc(var(--rail) + clamp(20px, 3vw, 44px)) 0 clamp(36px, 5vw, 72px) }
.sivu-hero .d-lg { max-width: 18ch }
/* palabras compuestas finesas de 25 letras en un titulo: que partan antes que desbordar el movil */
.sivu-hero h1, .proosa h2, .proosa h3, .kortti h3, .artikkeli-cta .d-md, .sivu-nav-linkki .d-sm, .sivu-cta h2 { overflow-wrap: break-word; hyphens: manual }
/* sin tavutus automatico en titulos: "kes-kustelu" o "yrityk-sesi" partidos a mitad quedan feos en fines.
   Una palabra solo se parte si de verdad no cabe en su linea (movil, compuestos de 25 letras) */
.sivu-hero .korostus { color: var(--muted) }
.sivu-crumb a { color: var(--muted); text-decoration: none }
.sivu-crumb a:hover { color: var(--bone) }
.sivu-crumb .chip { margin: 0 4px }
.sivu-lead { color: #c4c2bd }
.sivu-toimet { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.sivu-toimet.justify-center { justify-content: center }
.sivu-jaa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.sivu-jaa .chip { cursor: pointer }
.sivu-cta .d-lg { max-width: 22ch; margin-inline: auto }

/* prosa: articulos, ciudades, tietosuoja, bloques de producto */
.proosa { font-family: var(--font-text); color: #c4c2bd; font-size: clamp(16px, 1.18vw, 18px); line-height: 1.7 }
.proosa > * + * { margin-top: 1.1em }
.proosa h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -.025em; color: var(--bone); margin-top: 2.2em; scroll-margin-top: 110px }
.proosa h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.2; letter-spacing: -.015em; color: var(--bone); margin-top: 1.8em }
.proosa h2 + *, .proosa h3 + * { margin-top: .7em }
.proosa strong { color: var(--bone); font-weight: 600 }
.proosa a:not(.btn):not(.chip) { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2) }
.proosa a:not(.btn):not(.chip):hover { text-decoration-color: var(--bone) }
.proosa .btn { margin-right: 8px }
.proosa ul, .proosa ol { padding-left: 1.3em }
.proosa li + li { margin-top: .4em }
.proosa blockquote { border-left: 2px solid var(--line-2); padding-left: 1.2em; color: var(--bone) }
.proosa img { max-width: 100%; height: auto; border-radius: 12px }
.proosa table { width: 100%; border-collapse: collapse; font-size: .94em }
.proosa th, .proosa td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
.proosa th { color: var(--bone); font-weight: 600; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase }
.artikkeli-taulukko { overflow-x: auto; -webkit-overflow-scrolling: touch }
.sivu-lista { list-style: none; padding: 0; display: grid; gap: 8px }
.sivu-lista li { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--bone) }

/* articulo */
.artikkeli-kuva { margin: 0 auto; padding-top: 0 }
.artikkeli-kuva img { width: 100%; height: auto; border-radius: 16px; display: block }
.artikkeli-runko { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 96px) }
.artikkeli-runko > * { min-width: 0; max-width: 100% }
.artikkeli-toc li, .proosa { overflow-wrap: anywhere }
.proosa pre { overflow-x: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: .9em }
.proosa table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
@media (min-width: 1024px) { .artikkeli-runko { grid-template-columns: 280px minmax(0, 720px); align-items: start } .artikkeli-toc { position: sticky; top: 110px } }
.artikkeli-toc { padding: 18px 20px }
.artikkeli-toc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--bone) }
.artikkeli-toc summary::-webkit-details-marker { display: none }
.artikkeli-toc ol { margin: 14px 0 0; padding-left: 1.2em; font-family: var(--font-text); font-size: 14px; line-height: 1.45; color: var(--muted) }
.artikkeli-toc li + li { margin-top: 8px }
.artikkeli-toc a { color: inherit; text-decoration: none }
.artikkeli-toc a:hover { color: var(--bone) }
.artikkeli-cta { padding: clamp(22px, 2.6vw, 34px); margin: 2.4em 0 }
.artikkeli-cta .d-md { color: var(--bone) }
.artikkeli-merkit { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--bone) }
.artikkeli-tuote { padding: 22px 24px; margin: 2em 0 }
.artikkeli-tuote > * + * { margin-top: .8em }
.lomake { display: grid; gap: 12px }
.lomake .btn { justify-self: start }
.kentta { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 14px; color: var(--muted) }
.kentta input, .kentta select, .kentta textarea { 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 }
.kentta textarea { min-height: 140px; resize: vertical; line-height: 1.5 }
.kentta input:focus, .kentta select:focus, .kentta textarea:focus { border-color: var(--bone); outline: 2px solid var(--bone); outline-offset: 2px }
.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 }
.kentta select option { background: var(--panel); color: var(--bone) }
.valinta { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.5; color: #c4c2bd; cursor: pointer; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 10px }
.valinta 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 }
.valinta input:checked { background: var(--bone); border-color: var(--bone); box-shadow: inset 0 0 0 3px var(--panel) }
.valinta input:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px }
.valinta:has(input:checked) { border-color: var(--bone); color: var(--bone) }
.valinnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px }
.lomake-tila { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--bone) }
.lomake-tila:empty { display: none }
.suostumus { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: #c4c2bd }
.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 }
.suostumus input:checked { background: var(--bone); border-color: var(--bone); box-shadow: inset 0 0 0 3px var(--panel) }
.suostumus a { color: var(--bone) }

/* tarjetas y rejillas */
.kortti { padding: clamp(18px, 2vw, 26px); display: flex }
.kortti-linkki { display: flex; flex-direction: column; gap: 10px; width: 100%; text-decoration: none }
.kortti h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.2; letter-spacing: -.015em; color: var(--bone); margin: 0 }
.kortti p { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim) }
.kortti p.tx { font-size: 14.5px; letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--muted); flex: 1 }
.kortti .tmeta { margin-top: 6px }
.kortti-linkki:hover .chip { background: var(--bone); color: var(--ink); border-color: var(--bone) }
.kortti:hover { border-color: var(--line-2) }
.sivu-kortti[hidden] { display: none }
.sivu-askeleet { list-style: none; padding: 0; margin: 0; counter-reset: none }
.sivu-askeleet li { padding: clamp(18px, 2vw, 26px) }
.sivu-nav { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px) }
.sivu-nav-linkki { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; text-decoration: none; color: var(--bone) }
.sivu-nav-linkki .d-sm { color: var(--bone) }
.sivu-nav-linkki:hover { border-color: var(--line-2) }
.sivu-nav-linkki:last-child { text-align: right }

/* blog: buscador y temas */
.blogi-hallinta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between }
.blogi-haku input { font: inherit; font-family: var(--font-mono); font-size: 15px; color: var(--bone); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 18px; min-width: 260px }
.blogi-haku input:focus { border-color: var(--bone); outline: 2px solid var(--bone); outline-offset: 2px }
.blogi-aiheet { display: flex; flex-wrap: wrap; gap: 8px }
.blogi-aiheet .chip { cursor: pointer }
@media (max-width: 480px) { .blogi-haku, .blogi-haku input { width: 100%; min-width: 0 } .sivu-nav-linkki:last-child { text-align: left } }
@media (prefers-reduced-motion: reduce) { .kentta input, .kentta select, .kentta textarea { transition: none } }

/* Alatunniste (28-09-2026). Mismo lenguaje que la referencia: Archivo para el titular, etiquetas en mono,
   lineas de 1px de ancho completo entre bloques (estructura, no adorno), sin rayas cortas ni numeros. */
.pie { position: relative; z-index: 2; background: var(--ink-deep); border-top: 1px solid var(--line) }
.pie-kutsu { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; padding-block: clamp(64px, 9vw, 136px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line) }
.pie-kutsu-otsikko { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8.4vw, 7.6rem); line-height: .9; letter-spacing: -.05em; color: var(--bone) }
.pie-kutsu-lause { margin: clamp(14px, 1.6vw, 22px) 0 0; font-family: var(--font-text); font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.5; color: var(--muted) }
.pie-napit { display: flex; flex-wrap: wrap; gap: 12px }
.pie-sarakkeet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding-block: clamp(44px, 5vw, 76px) }
.pie-merkki { grid-column: 1 / -1 }
@media (min-width: 1024px) {
  .pie-sarakkeet { grid-template-columns: minmax(0, 3.4fr) repeat(4, minmax(0, 2fr)); gap: 32px }
  .pie-merkki { grid-column: auto }
}
.pie-logo { display: inline-flex }
.pie-logo img { height: 26px; width: auto; display: block }
.pie-iskulause { margin: 20px 0 0; max-width: 16ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.1; letter-spacing: -.025em; color: var(--bone) }
.pie-otsake { margin: 0 0 18px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.pie-sarake ul { list-style: none; margin: 0; padding: 0 }
.pie-sarake li + li { margin-top: 10px }
.pie-sarake a { font-family: var(--font-text); font-size: clamp(15px, 1.08vw, 16px); line-height: 1.4; color: #c4c2bd; text-decoration: none; transition: color .3s }
.pie-sarake a:hover { color: var(--bone) }
.pie-yhteys { margin: 0 }
.pie-yhteys dt { margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.pie-yhteys dt:first-child { margin-top: 0 }
.pie-yhteys dd { margin: 5px 0 0 }
.pie-ala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 22px 28px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.pie-ala p { margin: 0 }
.pie-ala-linkit { display: flex; flex-wrap: wrap; gap: 8px 24px }
.pie-ala a { color: #c4c2bd; text-decoration: none; transition: color .3s }
.pie .totop { color: var(--bone); font-size: 16px }
.pie-ala a:hover { color: var(--bone) }
.pie a:focus-visible, .pie .totop:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; border-radius: 4px }
.pie-napit .btn { white-space: nowrap }
@media (max-width: 640px) {
  .pie-napit { width: 100% }
  .pie-napit .btn { flex: 1 1 0; justify-content: center }
}
@media (max-width: 420px) {
  .pie-napit { flex-direction: column }
  .pie-napit .btn { flex: none; width: 100% }
}
@media (max-width: 640px) {
  .pie-ala { flex-direction: column; align-items: flex-start }
  .pie-ala .totop { align-self: flex-end; margin-top: -46px }
}
@media (prefers-reduced-motion: reduce) { .pie a { transition: none } }

/* conversaciones de ejemplo en /tekoaly-yritykselle/ (28-09-2026, "our own version of revdot.ai"):
   burbujas dibujadas en HTML, sin fotos, siempre con la etiqueta Esimerkki */
.chat { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px) }
.chat-merkki { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px }
.kupla { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45 }
.kupla--asiakas { align-self: flex-end; background: var(--bone); color: #141414; border-bottom-right-radius: 4px }
.kupla--botti { align-self: flex-start; background: var(--panel-2); color: var(--bone); border: 1px solid var(--line); border-bottom-left-radius: 4px }
.sopii-lista { display: grid; gap: 12px; margin-top: 24px }
.sopii-lista li { position: relative; padding-left: 26px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: var(--bone) }
.sopii-lista li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--bone) }

/* /tekoaly-yritykselle/ con la estructura de revdot.ai (28-09-2026, "copy this exact structure for our page
   about our chatbot"): chat de ejemplo arriba, secciones claras y oscuras alternas y ejemplos dibujados en
   HTML en lugar de fotos. Todo lleva el prefijo rv- para no tocar ninguna otra pagina. */
.rv-hero { position: relative; padding: calc(var(--rail) + clamp(36px, 5vw, 72px)) 0 clamp(28px, 3vw, 44px); background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(244, 243, 240, .09), transparent 70%), var(--ink); overflow: hidden }
.rv-hero-in { display: flex; flex-direction: column; align-items: center; text-align: center }
.rv-pill { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1.05em; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-text); font-size: 13.5px; line-height: 1.2; color: var(--bone); background: rgba(255, 255, 255, .03) }
.rv-h1 { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 22ch; text-wrap: balance; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; color: var(--bone); overflow-wrap: break-word }
.rv-chat { width: 100%; max-width: 720px; margin-top: clamp(26px, 3vw, 40px); text-align: left; background: rgba(28, 28, 30, .88); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9); overflow: hidden }
.rv-chat-loki { display: flex; flex-direction: column; gap: 10px; min-height: 150px; max-height: 320px; overflow-y: auto; padding: 20px 20px 12px; scroll-behavior: smooth }
.rv-chat-kentta { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 10px 10px 20px; border-top: 1px solid var(--line) }
.rv-chat-kentta:focus-within { box-shadow: inset 0 0 0 2px var(--bone); border-radius: 0 0 22px 22px }
.rv-chat-kentta input { flex: 1; min-width: 0; font-family: var(--font-text); font-size: 16px; color: var(--bone); background: transparent; border: 0; padding: 12px 0 }
.rv-chat-kentta input::placeholder { color: var(--muted) }
.rv-chat-kentta input:focus { outline: none }
.rv-chat-kentta button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bone); color: var(--ink); cursor: pointer; transition: background .3s }
.rv-chat-kentta button:hover { background: #fff }
.rv-chat-kentta button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.rv-kupla { margin: 0; max-width: 85%; padding: 10px 14px; border-radius: 16px; font-family: var(--font-text); font-size: 15px; line-height: 1.45 }
.rv-kupla--asiakas { align-self: flex-end; background: var(--bone); color: var(--ink); border-bottom-right-radius: 4px }
.rv-kupla--botti { align-self: flex-start; background: var(--panel-2); color: var(--bone); border: 1px solid var(--line); border-bottom-left-radius: 4px }
.rv-kupla--kirjoittaa { display: inline-flex; gap: 5px; padding: 14px 16px }
.rv-kupla--kirjoittaa i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: rv-piste 1s infinite ease-in-out }
.rv-kupla--kirjoittaa i:nth-child(2) { animation-delay: .15s }
.rv-kupla--kirjoittaa i:nth-child(3) { animation-delay: .3s }
@keyframes rv-piste { 0%, 80%, 100% { opacity: .3; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-3px) } }
.rv-chipit { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; max-width: 760px }
.rv-chip { min-height: 40px; padding: .55em 1.1em; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--bone); font-family: var(--font-text); font-size: 14px; line-height: 1.2; cursor: pointer; transition: background .3s, color .3s, border-color .3s }
.rv-chip:hover { background: var(--bone); color: var(--ink); border-color: var(--bone) }
.rv-huom { margin: 14px 0 0; font-family: var(--font-text); font-size: 13px; line-height: 1.5; color: var(--muted) }
.rv-luotto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; border-top: 1px solid var(--line) }
.rv-luotto-otsikko { margin: 0; font-family: var(--font-text); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.rv-logot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, 4vw, 56px) }

/* secciones claras y oscuras */
.rv-vaalea { background: var(--bone); color: var(--ink); padding-block: clamp(72px, 9vw, 136px) }
.rv-vaalea--2 { background: #e9e6e0 }
.rv-tumma { background: var(--ink-deep); color: var(--bone); padding-block: clamp(72px, 9vw, 136px) }
.rv-vaalea .btn { background: var(--ink); color: var(--bone); border-color: var(--ink) }
.rv-vaalea .btn:hover { color: #fff; border-color: var(--signal) }
.rv-pieni { margin: 0; font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: #6d6c66 }
.rv-tumma .rv-pieni { color: var(--muted) }
.rv-pieni--vasen { text-align: left }
.rv-iso { margin: 20px auto 0; max-width: 34em; font-family: var(--font-text); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.32; letter-spacing: -.02em; text-align: center; color: var(--ink) }
.rv-iso--tumma { margin: 0; max-width: 30em; text-align: left; color: var(--bone) }
.rv-merkki { margin: 0 0 14px; font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--signal) }
.rv-merkki--vaalea { color: #6d6c66 }
.rv-h2 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.03; letter-spacing: -.035em; overflow-wrap: break-word }
.rv-himmea, .rv-h2 em { font-style: normal; color: var(--muted) }
.rv-vaalea .rv-h2 em { color: #7b7a74 }
.rv-teksti { margin: 16px 0 0; max-width: 36em; font-family: var(--font-text); font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.6; color: #c4c2bd }
.rv-vaalea .rv-teksti { color: #55544f }
.rv-linkki { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; margin-top: 10px; font-family: var(--font-text); font-size: 15px; font-weight: 500; color: var(--bone); text-decoration: none }
.rv-linkki:hover { color: var(--signal) }

/* miksi: parrafo grande, iconos y dos tarjetas desplazadas */
.rv-ikonit { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px clamp(32px, 5vw, 72px); margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; list-style: none }
.rv-ikonit li { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 12em; text-align: center; font-family: var(--font-text); font-size: 15.5px; line-height: 1.35; color: var(--ink) }
.rv-ikonit svg { width: 32px; height: 32px; fill: none; stroke: #6d6c66; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
.rv-kaksi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin: clamp(48px, 6vw, 88px) auto 0; align-items: start }
.rv-kuva { position: relative; margin: 0; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 28px 22px 84px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% 30%, #2a2a2e, #111113 70%) }
.rv-kuva--b { margin-top: 56px }
.rv-kuva figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; font-family: var(--font-text); font-size: 12.5px; font-weight: 500; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; color: var(--bone) }
.rv-kuva .rv-mock--chat { width: 100%; max-width: 330px }
.rv-mock { display: flex; flex-direction: column; gap: 9px; padding: 16px; background: #111113; border: 1px solid var(--line); border-radius: 16px; font-family: var(--font-text) }
.rv-mock .rv-kupla { font-size: 13.5px; padding: 9px 12px }
.rv-mock-otsikko { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--bone) }
.rv-mock-otsikko i { width: 8px; height: 8px; border-radius: 50%; background: var(--bone); opacity: .75 }
.rv-mock--puhelu .rv-mock-otsikko i { background: var(--signal); opacity: 1 }
.rv-puhelin { width: min(230px, 100%); aspect-ratio: 9 / 17; padding: 10px; border-radius: 34px; background: #0a0a0b; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9) }
.rv-puhelin-ruutu { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 10px; border-radius: 26px; background: var(--panel) }
.rv-puhelin .rv-kupla { font-size: 12.5px; padding: 8px 11px; max-width: 90% }
.rv-puhelin-otsikko { display: flex; align-items: center; gap: 6px; margin: 0 0 auto; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--bone) }
.rv-puhelin-otsikko i { width: 7px; height: 7px; border-radius: 50%; background: var(--bone); opacity: .75 }

/* tres maneras: una tarjeta ancha y dos debajo, cada una con su ejemplo */
.rv-omin-paa { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 64px; align-items: end; padding-bottom: clamp(36px, 4vw, 56px); margin-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line) }
.rv-omin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.rv-omin { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 60%), var(--panel); border: 1px solid var(--line); border-radius: 20px }
.rv-omin--levea { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; align-items: center }
.rv-omin-teksti { display: flex; flex-direction: column; gap: 12px }
.rv-omin h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -.025em; color: var(--bone) }
.rv-omin p { margin: 0 }
.rv-omin > p:not([class]), .rv-omin-teksti > p:not([class]) { max-width: 34em; font-family: var(--font-text); font-size: 15.5px; line-height: 1.55; color: #c4c2bd }
.rv-omin > .rv-mock { margin-bottom: 8px }
.rv-tag { font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.rv-omin .rv-mittari { margin-top: auto; padding-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 2.4vw, 2.2rem); letter-spacing: -.03em; color: var(--bone) }
.rv-mittari small { margin-left: .3em; font-family: var(--font-text); font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--muted) }
.rv-mock--varaus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.rv-mock--varaus li { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: #c4c2bd }
.rv-mock--varaus li::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted) }
.rv-mock--varaus li.on { border-color: var(--bone); color: var(--bone) }
.rv-mock--varaus li.on::after { border-color: var(--bone); background: var(--bone); box-shadow: inset 0 0 0 3px #111113 }
.rv-mock-nappi { display: block; margin-top: 4px; padding: 12px; border-radius: 999px; background: var(--bone); color: var(--ink); text-align: center; font-size: 14px; font-weight: 600 }

/* tietopohja y pasos A B C D */
.rv-tieto-paa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px clamp(40px, 6vw, 96px); align-items: center }
.rv-kb { padding: 18px; background: #fff; border: 1px solid #e0ddd6; border-radius: 18px; box-shadow: 0 24px 60px -36px rgba(20, 20, 20, .35); font-family: var(--font-text) }
.rv-kb-otsikko { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6d6c66 }
.rv-kb-otsikko span { font-weight: 500; letter-spacing: .06em }
.rv-kb ul { list-style: none; margin: 0; padding: 0 }
.rv-kb li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 4px; border-top: 1px solid #ecebe6; font-size: 15px; font-weight: 500; color: var(--ink) }
.rv-kb li svg, .rv-lista svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.rv-kb-lisaa { margin: 8px 0 0; padding: 12px 14px; border: 1px solid #e0ddd6; border-radius: 12px; font-size: 14.5px; color: #55544f }
.rv-vaiheet { list-style: none; margin: clamp(56px, 7vw, 104px) 0 0; padding: 0 }
.rv-vaiheet > li { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px 32px; align-items: start; padding-block: clamp(28px, 3vw, 44px); border-top: 1px solid #dcd9d3 }
.rv-kirjain { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 3.2vw, 2.9rem); line-height: .9; color: #b8b5ae }
.rv-vaiheet h3 { margin: 0; padding-top: .35em; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.2; letter-spacing: -.015em; color: var(--ink) }
.rv-vaiheet p { margin: 0; font-family: var(--font-text); font-size: 15.5px; line-height: 1.6; color: #55544f }
.rv-pisteet { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px }
.rv-pisteet li { position: relative; padding-left: 16px; font-family: var(--font-text); font-size: 14.5px; line-height: 1.5; color: #55544f }
.rv-pisteet li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink) }
.rv-vaiheet .rv-huomio { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #e6e3dc; color: var(--ink) }

/* sopiiko sinulle */
.rv-sopii { background-image: radial-gradient(rgba(20, 20, 20, .07) 1px, transparent 1px); background-size: 18px 18px }
.rv-kapea { max-width: 820px }
.rv-sopii .rv-h2 { margin-bottom: clamp(24px, 3vw, 40px) }
.rv-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d6d3cc }
.rv-lista li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #d6d3cc; font-family: var(--font-text); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.35; letter-spacing: -.012em; color: var(--ink) }
.rv-lista li svg { width: 24px; height: 24px }
.rv-sopii .rv-pieni--vasen { margin-top: clamp(32px, 4vw, 48px) }
.rv-alat { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.rv-alat li { padding: .5em 1em; border: 1px solid #d0cdc6; border-radius: 999px; background: rgba(255, 255, 255, .55); font-family: var(--font-text); font-size: 14px; color: var(--ink) }
.rv-cta-rivi { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(32px, 4vw, 48px) }
.rv-cta-rivi p { margin: 0; max-width: 26em; font-family: var(--font-text); font-size: 14.5px; line-height: 1.5; color: #55544f }

/* panel de conversaciones */
.rv-keski { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; text-align: center }
.rv-keski .rv-h2 { margin-top: 18px }
.rv-keski .rv-teksti { margin-inline: auto }
.rv-chipit--staattinen li { padding: .55em 1.1em; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-text); font-size: 14px; color: var(--bone) }
.rv-paneeli { background: radial-gradient(ellipse 60% 40% at 50% 46%, rgba(244, 243, 240, .08), transparent 70%), var(--ink-deep) }
.rv-dash { display: grid; grid-template-columns: 190px minmax(0, 1fr); margin-top: clamp(40px, 5vw, 64px); background: var(--panel); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px -50px #000; font-family: var(--font-text) }
.rv-dash-sivu { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid var(--line) }
.rv-dash-sivu p { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--muted) }
.rv-dash-sivu .rv-dash-logo { margin-bottom: 10px; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; color: var(--bone) }
.rv-dash-sivu .on { background: rgba(255, 255, 255, .06); color: var(--bone) }
.rv-dash-lista { min-width: 0; padding: 18px 20px 8px }
.rv-dash-otsikko { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--bone) }
.rv-dash-otsikko span { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.rv-dash-rivi { display: grid; grid-template-columns: 110px 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); font-size: 14.5px }
.rv-dash-rivi span { font-size: 13.5px; color: var(--muted); white-space: nowrap }
.rv-dash-rivi b { justify-self: start; padding: .35em .8em; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #c4c2bd; white-space: nowrap }
.rv-dash-rivi b.t-siirto { background: var(--bone); border-color: var(--bone); color: var(--ink) }
.rv-dash-rivi p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone) }
.rv-oivallus { display: grid; gap: 36px; margin-top: clamp(56px, 7vw, 96px) }
.rv-oivallus dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; margin: 0 }
.rv-oivallus dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.4vw, 1.3rem); letter-spacing: -.015em; color: var(--bone) }
.rv-oivallus dd { margin: 8px 0 0; font-family: var(--font-text); font-size: 15px; line-height: 1.5; color: var(--muted) }

/* telefonos, calendario del proyecto, "toimii myos" */
.rv-kaksi-sarake { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center }
.rv-puhelinrivi { display: flex; justify-content: center; gap: 12px; padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px); border-radius: 22px; background: radial-gradient(ellipse 80% 60% at 50% 40%, #26262a, #0d0d0d 75%) }
.rv-puhelinrivi .rv-puhelin { width: 32%; padding: 6px; border-radius: 24px }
.rv-puhelinrivi .rv-puhelin-ruutu { gap: 6px; padding: 10px 7px; border-radius: 19px }
.rv-puhelinrivi .rv-kupla { max-width: 94%; padding: 7px 9px; border-radius: 12px; font-size: 11px }
.rv-puhelinrivi .rv-puhelin-otsikko { gap: 5px; padding: 2px 2px 8px; font-size: 10.5px }
.rv-aikajana { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid #dcd9d3 }
.rv-aikajana li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid #dcd9d3 }
.rv-aikajana h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink) }
.rv-aikajana p { margin: 0; font-family: var(--font-text); font-size: 15px; line-height: 1.55; color: #55544f }
.rv-toimii { display: grid; gap: 24px; margin-top: clamp(56px, 7vw, 96px) }
.rv-toimii .rv-teksti { margin-top: 0 }
.rv-turva { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 16px; background: var(--ink); color: var(--bone) }
.rv-turva svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--bone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.rv-turva p { margin: 0; font-family: var(--font-text); font-size: 15px; line-height: 1.5; color: #c4c2bd }
.rv-turva strong { font-weight: 600; color: var(--bone) }

/* cifras */
.rv-luvut-rivi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 900px; margin: 0 auto; text-align: center }
.rv-luvut-rivi dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.04em; color: var(--ink) }
.rv-luvut-rivi dd { margin: 10px 0 0; font-family: var(--font-text); font-size: 15.5px; line-height: 1.45; color: #55544f }
.rv-luvut .rv-iso { margin-top: clamp(48px, 6vw, 80px) }

/* comparacion */
.rv-vert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px) }
.rv-vert-grid figure { margin: 0 }
.rv-selain { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 30% 30%, #2a2a2e, #141416 75%) }
.rv-selain-palkki { display: flex; gap: 6px; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .35) }
.rv-selain-palkki i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3f }
.rv-selain .rv-mock { min-height: 300px; margin: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px); background: rgba(17, 17, 19, .92) }
.rv-napit { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 }
.rv-napit span { padding: .45em .9em; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; color: #c4c2bd }
.rv-vert-grid figcaption { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-family: var(--font-text); font-size: 14.5px; line-height: 1.5; color: var(--muted) }
.rv-vert-grid figcaption strong { display: block; font-weight: 600; color: var(--bone) }
.rv-ei, .rv-kylla { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 13px; font-weight: 400; color: var(--muted) }
.rv-kylla { background: var(--bone); border-color: var(--bone); color: var(--ink) }

/* precios y formulario */
.rv-hinnat .rv-keski { margin-bottom: clamp(8px, 1vw, 16px) }
.rv-demo { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(244, 243, 240, .07), transparent 70%), var(--ink-deep) }
.rv-demo-kortti { max-width: 600px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); text-align: center; background: rgba(28, 28, 30, .8); border: 1px solid var(--line-2); border-radius: 24px }
.rv-demo-kortti .rv-teksti { margin-inline: auto }
.rv-demo-kortti .lomake { margin-top: 24px; text-align: left }
.rv-demo-kortti .lomake .btn { justify-self: center }

/* la cabecera de la web esta hecha para fondo oscuro: en esta pagina, sobre una seccion clara, pasa a
   fundido claro y logo oscuro (la clase rv-vaalealla la pone rv-sivu.js). La vineta de los bordes, que
   oscurece la pantalla, se quita aqui porque sobre fondo claro se ve como una mancha gris. */
body:has(.rv-hero) .vignette { display: none }
body:has(.rv-hero) .hdr .mark img { transition: filter .3s }
.hdr.rv-vaalealla::before { background: linear-gradient(180deg, rgba(244, 243, 240, .94), rgba(244, 243, 240, 0)) }
.hdr.rv-vaalealla .mark img { filter: invert(1) }
.hdr.rv-vaalealla .navchain a:not([aria-current]), .hdr.rv-vaalealla .burger { background: rgba(20, 20, 20, .9) }
.hdr.rv-vaalealla .navchain a[aria-current="true"] { background: rgba(62, 62, 66, .95) }
.hdr.rv-vaalealla .nav-ryhma:not([open]) > summary:not(:hover) { background: rgba(20, 20, 20, .9) }

@media (max-width: 900px) {
  .rv-omin-paa, .rv-omin--levea, .rv-tieto-paa, .rv-kaksi-sarake, .rv-omin-grid, .rv-vert-grid { grid-template-columns: minmax(0, 1fr) }
  .rv-vaiheet > li { grid-template-columns: 48px minmax(0, 1fr) }
  .rv-vaiheet > li > div { grid-column: 2 }
  .rv-oivallus dl { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rv-dash { grid-template-columns: minmax(0, 1fr) }
  .rv-dash-sivu { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line) }
  .rv-dash-sivu .rv-dash-logo { margin: 0 8px 0 0 }
}
@media (max-width: 640px) {
  .rv-kaksi, .rv-pisteet, .rv-oivallus dl, .rv-luvut-rivi, .rv-aikajana li { grid-template-columns: minmax(0, 1fr) }
  .rv-kuva--b { margin-top: 0 }
  .rv-kuva { aspect-ratio: auto; min-height: 420px }
  .rv-dash-rivi { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px }
  .rv-dash-rivi p { grid-column: 1 / -1; white-space: normal }
  .rv-luvut-rivi { gap: 28px }
  .rv-puhelinrivi .rv-puhelin { width: 47% }
  .rv-puhelinrivi .rv-puhelin:nth-child(3) { display: none }
  .rv-chat-loki { max-height: 280px }
  .rv-chip { min-height: 44px; font-size: 14.5px }
  .rv-lista li { align-items: flex-start }
  .rv-luotto, .rv-logot { justify-content: center }
  .rv-luotto { text-align: center }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.rv-hero) .hdr .mark img { transition: none }
  .rv-kupla--kirjoittaa i { animation: none; opacity: .7 }
  .rv-chat-loki { scroll-behavior: auto }
  .rv-chip, .rv-chat-kentta button { transition: none }
}

/* /verkkokauppa-yritykselle/ con la estructura de ecosta.fi/verkkokauppa-yritykselle (28-09-2026, "make it our
   own"): usa las piezas rv- de la pagina del chat y anade las suyas con el prefijo vk-. Sin fotos: el panel de
   pedidos del hero esta dibujado en HTML y lleva la etiqueta Esimerkki. */
.vk-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px clamp(40px, 5vw, 80px); align-items: center }
.vk-h1 { margin: 0; max-width: 16ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.035em; color: var(--bone); text-wrap: balance; overflow-wrap: break-word }
.vk-lead { margin-top: 20px }
.vk-paneeli { padding: 18px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: 0 40px 90px -50px #000; font-family: var(--font-text) }
.vk-paneeli-yla { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px }
.vk-paneeli-yla p { margin: 0; font-size: 16px; font-weight: 600; color: var(--bone) }
.vk-paneeli-yla span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.vk-luvut { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px }
.vk-luvut div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02) }
.vk-luvut span { display: block; font-size: 12.5px; color: var(--muted) }
.vk-luvut b { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; color: var(--bone) }
.vk-tilaukset { list-style: none; margin: 0; padding: 0 }
.vk-tilaukset li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line); font-size: 14px; color: #c4c2bd }
.vk-tilaukset b { font-weight: 600; color: var(--bone); white-space: nowrap }
.vk-tilaukset i { padding: .3em .75em; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; font-style: normal; white-space: nowrap }
.vk-tilaukset i.t-maksettu { background: var(--bone); border-color: var(--bone); color: var(--ink) }
.vk-hero-ala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 5vw, 64px) }
.vk-ominaisuudet { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0; padding: 0; list-style: none }
.vk-ominaisuudet li { display: flex; align-items: center; gap: 10px; font-family: var(--font-text); font-size: 15px; color: var(--bone) }
.vk-ominaisuudet svg, .vk-kortti svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.vk-hintakortti { display: grid; gap: 4px; min-width: 250px; padding: 16px 20px; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(28, 28, 30, .85); font-family: var(--font-text); text-decoration: none; transition: border-color .3s }
.vk-hintakortti:hover { border-color: var(--bone) }
.vk-hk-nimi { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.vk-hk-hinta { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -.03em; color: var(--bone) }
.vk-hk-hinta small { font-family: var(--font-text); font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--muted) }
.vk-hk-selite { font-size: 13px; color: #c4c2bd }
.vk-hk-linkki { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--bone) }
.vk-miksi .rv-h2 { max-width: 20ch }
.vk-kaksi-palsta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line) }
.vk-kaksi-palsta .rv-teksti { margin: 0 }
.vk-rivit { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; border-top: 1px solid #d6d3cc }
.vk-rivit li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 48px; padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid #d6d3cc }
.vk-rivit h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.7rem); letter-spacing: -.02em; color: var(--ink) }
.vk-rivit p { margin: 0; max-width: 34em; font-family: var(--font-text); font-size: 16px; line-height: 1.55; color: #55544f }
.vk-kaksi-sarake { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start }
.vk-kortit { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }
.vk-kortti { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: #f7f6f3; border: 1px solid #dcd9d3; border-radius: 16px; color: var(--ink) }
.vk-kortti h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.015em }
.vk-kortti p { margin: 0; font-family: var(--font-text); font-size: 15px; line-height: 1.55; color: #55544f }
.vk-askeleet { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.vk-askeleet li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line) }
.vk-askeleet .rv-kirjain { color: var(--dim) }
.vk-askeleet h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: -.015em; color: var(--bone) }
.vk-askeleet p { margin: 8px 0 0; font-family: var(--font-text); font-size: 15.5px; line-height: 1.55; color: #c4c2bd }
.vk-hinta-rivi { display: grid; grid-template-columns: minmax(0, 520px); justify-content: center; margin-top: clamp(32px, 4vw, 48px) }
.vk-syyt { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d6d3cc }
.vk-syyt li { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid #d6d3cc }
.vk-syyt svg { flex: none; width: 24px; height: 24px; margin-top: 2px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.vk-syyt h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.015em; color: var(--ink) }
.vk-syyt p { margin: 6px 0 0; font-family: var(--font-text); font-size: 15.5px; line-height: 1.55; color: #55544f }
@media (max-width: 900px) {
  .vk-hero-in, .vk-kaksi-sarake { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .vk-kaksi-palsta, .vk-rivit li { grid-template-columns: minmax(0, 1fr) }
  .vk-tilaukset li { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px }
  .vk-tilaukset li > span:nth-child(2) { display: none }
  .vk-hero-ala { flex-direction: column; align-items: stretch }
  .vk-hintakortti { min-width: 0 }
}
@media (prefers-reduced-motion: reduce) { .vk-hintakortti { transition: none } }

/* /hakukoneoptimointi/ con la estructura de ecosta.fi/hakukoneoptimointi (28-09-2026, "use this as example"): las
   mismas piezas rv- y vk- que el chat y la tienda, mas un resultado de busqueda dibujado en HTML (sin el logo de
   Google, con la etiqueta Esimerkki) y la rejilla de lo que puede incluir. Prefijo hk-. */
.hk-haku { position: relative; padding: 18px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: 0 40px 90px -50px #000; font-family: var(--font-text) }
.hk-hakukentta { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #111113; font-size: 15px; color: var(--bone) }
.hk-hakukentta svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round }
.hk-kartta { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02) }
.hk-kartta-kuva { display: block; width: 100%; height: 100%; min-height: 120px; border-radius: 10px; background: #232327 }
.hk-kartta-kuva .tie { fill: none; stroke: #3a3a40; stroke-width: 7; stroke-linecap: round }
.hk-kartta-kuva .tie.ohut { stroke-width: 3.5 }
.hk-kartta-kuva .pinni { fill: var(--signal) }
.hk-kartta-kuva circle { fill: #fff }
.hk-yritys p { margin: 0; font-size: 13px; line-height: 1.45; color: #c4c2bd }
.hk-yritys .hk-nimi { margin-bottom: 2px; font-size: 16px; font-weight: 600; color: var(--bone) }
.hk-yritys .hk-auki { color: var(--bone) }
.hk-yritys .hk-napit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.hk-napit span { padding: .4em .8em; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; color: var(--bone) }
.hk-tulos { margin-top: 14px; padding: 4px 4px 2px }
.hk-tulos p { margin: 0 }
.hk-tulos .hk-url { font-size: 12.5px; color: var(--muted) }
.hk-tulos .hk-otsikko { margin-top: 4px; font-size: 17px; font-weight: 500; color: var(--bone) }
.hk-tulos .hk-kuvaus { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #c4c2bd }
.hk-merkki { position: absolute; top: -11px; right: 18px; padding: .35em .85em; border-radius: 999px; background: var(--bone); color: var(--ink); font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase }
.rv-vaalea .vk-kaksi-palsta { border-top-color: #d6d3cc }
.hk-palsta .rv-teksti + .rv-teksti { margin-top: 16px }
.hk-pisteet { grid-template-columns: minmax(0, 1fr); margin-top: 0 }
.hk-pisteet li { font-size: 16px; color: var(--ink) }
.hk-kanavat { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.hk-kanavat li { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: -.015em; color: var(--bone) }
.hk-kanavat svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--bone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.hk-paikka .rv-teksti + .rv-teksti { margin-top: 12px }
.hk-myynti .rv-teksti { font-size: clamp(17px, 1.4vw, 20px) }
.hk-mallit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px) }
.hk-malli { padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line-2); border-radius: 18px; background: rgba(255, 255, 255, .02) }
.hk-malli h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -.015em; color: var(--bone) }
.hk-malli p { margin: 0; font-family: var(--font-text); font-size: 15.5px; line-height: 1.6; color: #c4c2bd }
.hk-kortit { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.hk-kortti h3 { font-size: 1.15rem }
.hk-ukk .faq { border-color: #d6d3cc }
.hk-ukk .faq .q { color: var(--ink) }
.hk-ukk .faq.open .q { color: var(--signal) }
.hk-ukk .faq .pm i { background: var(--ink) }
.hk-ukk .faq.open .pm i { background: var(--signal) }
.hk-ukk .faq .body p { padding-left: 0; font-family: var(--font-text); font-size: 16px; line-height: 1.6; color: #55544f }
@media (max-width: 900px) {
  .hk-kartta, .hk-mallit { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .hk-kortit { grid-template-columns: minmax(0, 1fr) }
}

/* /verkkosivut-yritykselle/ con la estructura de ecosta.fi/verkkosivut-yritykselle (29-09-2026, "use this as an
   example. but make it our own"): las piezas vk- de la tienda, con una web de ejemplo dibujada en HTML en lugar de
   la foto. Prefijo vs-. */
.vs-selain { position: relative; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); box-shadow: 0 40px 90px -50px #000; font-family: var(--font-text) }
.vs-palkki { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0; background: rgba(0, 0, 0, .3) }
.vs-palkki i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3f }
.vs-palkki span { margin-left: 10px; padding: .3em .9em; border-radius: 999px; background: rgba(255, 255, 255, .05); font-size: 12px; color: var(--muted) }
.vs-sivu { padding: 18px 20px 22px; border-radius: 0 0 18px 18px; background: linear-gradient(160deg, #26262b, #151517 70%) }
.vs-sivu p { margin: 0 }
.vs-sivu .vs-nav { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #c4c2bd }
.vs-nav b { margin-right: auto; font-size: 13px; font-weight: 700; color: var(--bone) }
.vs-sivu .vs-otsikko { max-width: 12em; margin-top: 34px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: -.03em; color: var(--bone) }
.vs-sivu .vs-teksti { margin-top: 10px; font-size: 13px; color: #c4c2bd }
.vs-sivu .vs-napit { display: flex; gap: 8px; margin-top: 16px }
.vs-nappi { padding: .6em 1.1em; border-radius: 999px; background: var(--bone); color: var(--ink); font-size: 12px; font-weight: 600 }
.vs-nappi--haamu { background: transparent; border: 1px solid var(--line-2); color: var(--bone) }
.vs-sivu .vs-kortit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 26px }
.vs-kortit span { padding: 26px 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 12px; color: var(--bone) }
.rv-vaalea .btn.btn--vaalea-haamu { background: transparent; color: var(--ink); border-color: rgba(20, 20, 20, .35) }
.rv-vaalea .btn.btn--vaalea-haamu:hover { color: #fff; border-color: var(--signal) }
@media (max-width: 640px) {
  .vs-sivu .vs-nav span { display: none }
}

/* /raataloidyt-ohjelmistot/ con la estructura de ecosta.fi/web-sovellukset (29-09-2026): las piezas vk-, con una
   herramienta interna de ejemplo (los trabajos del dia) dibujada en HTML. Prefijo oh-. */
.oh-tyot { list-style: none; margin: 0; padding: 0 }
.oh-tyot li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); font-size: 14px; color: #c4c2bd }
.oh-aika { font-variant-numeric: tabular-nums; color: var(--muted) }
.oh-tyot b { display: block; font-weight: 600; color: var(--bone) }
.oh-tyot div span { font-size: 13px; color: var(--muted) }
.oh-tyot i { padding: .3em .75em; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; font-style: normal; white-space: nowrap }
.oh-tyot i.t-alku { background: var(--bone); border-color: var(--bone); color: var(--ink) }
.vk-hk-hinta--teksti { font-size: 1.5rem }
.oh-tuotteet { margin: 28px 0 0; text-align: center }
.rv-vaalea .rv-linkki { color: var(--ink) }
.rv-vaalea .rv-linkki:hover { color: var(--signal) }
.vk-prosessi .rv-teksti + .rv-teksti { margin-top: 12px }
.oh-huom { color: var(--bone) }

/* /yritysilme/ y /verkkosivujen-yllapito/ (29-09-2026): Ecosta no tiene estas paginas, asi que van en el mismo
   molde vk- que las demas, con un tablero de marca (yi-) y el estado de una web (yp-) dibujados en HTML */
.yi-taulu { position: relative; display: grid; gap: 12px; padding: 18px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: 0 40px 90px -50px #000; font-family: var(--font-text) }
.yi-logo { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 150px; border-radius: 14px; background: var(--bone); color: var(--ink) }
.yi-logo b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.04em }
.yi-symboli { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink) }
.yi-symboli::after { content: ""; position: absolute; right: -10px; top: 7px; width: 18px; height: 20px; border-radius: 4px; background: var(--signal) }
.yi-rivi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.yi-ruutu { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02) }
.yi-ruutu p { margin: 0; font-size: 12px; color: var(--muted) }
.yi-ruutu .yi-varit { display: flex; gap: 6px; margin-top: 12px }
.yi-varit span { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2) }
.yi-varit .v1 { background: var(--ink) }
.yi-varit .v2 { background: var(--bone) }
.yi-varit .v3 { background: var(--signal) }
.yi-ruutu .yi-aa { margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--bone) }
.yi-ruutu .yi-pieni { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--bone) }
.yi-pieni .yi-symboli { width: 12px; height: 12px; background: var(--bone) }
.yi-pieni .yi-symboli::after { right: -4px; top: 3px; width: 6px; height: 7px; border-radius: 2px }
.yi-pieni b { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: -.02em }
.yp-tila { list-style: none; margin: 0; padding: 0 }
.yp-tila li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-top: 1px solid var(--line); font-size: 14px }
.yp-tila b { font-weight: 600; color: var(--bone) }
.yp-tila i { padding: .3em .75em; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; font-style: normal; color: #c4c2bd; white-space: nowrap }
.yp-tila i.t-ok { background: var(--bone); border-color: var(--bone); color: var(--ink) }

/* Paginas de producto (29-09-2026, "for all the services and products we needs these pages"): el mismo molde que
   las paginas de servicio (rv- y vk-) mas lo propio del producto. El dibujo de ejemplo del hero se compone con filas,
   listas de eleccion, un buscador y campos de formulario, todo en HTML. Prefijo tu-. */
.tu-takaisin { margin: 0 0 18px; font-family: var(--font-text); font-size: 14px }
.tu-takaisin a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); text-decoration: none; transition: color .3s }
.tu-takaisin a:hover { color: var(--bone) }
.tu-ala { margin: -4px 0 12px; font-size: 13px; color: var(--muted) }
.tu-rivit { list-style: none; margin: 0; padding: 0 }
.tu-rivit li { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-top: 1px solid var(--line); font-size: 14px; color: #c4c2bd }
.tu-rivit li > div { flex: 1 1 auto; min-width: 0 }
.tu-rivit b { display: block; font-weight: 600; color: var(--bone) }
.tu-rivit small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted) }
.tu-aika { flex: none; width: 46px; font-variant-numeric: tabular-nums; color: var(--muted) }
.tu-arvo { flex: none; font-weight: 600; color: var(--bone); white-space: nowrap; font-variant-numeric: tabular-nums }
.tu-rivit i { flex: none; padding: .3em .75em; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; font-style: normal; white-space: nowrap }
.tu-rivit i.t-on { background: var(--bone); border-color: var(--bone); color: var(--ink) }
.tu-valinnat { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px }
.tu-valinnat li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: #c4c2bd }
.tu-valinnat li > span { flex: 1 1 auto; min-width: 0 }
.tu-valinnat small { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.tu-valinnat li::after { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted) }
.tu-valinnat li.on { border-color: var(--bone); color: var(--bone) }
.tu-valinnat li.on::after { border-color: var(--bone); background: var(--bone); box-shadow: inset 0 0 0 3px var(--panel) }
.tu-napit { display: flex; justify-content: flex-end; margin: 14px 0 0 }
.tu-nappi { padding: 9px 18px; border-radius: 999px; background: var(--bone); color: var(--ink); font-size: 14px; font-weight: 600 }
.tu-haku { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #111113; font-size: 15px; color: var(--bone) }
.tu-haku svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round }
.tu-luvut { margin: 12px 0 0 }
.tu-luvut b { white-space: nowrap }
.tu-chat { display: flex; flex-direction: column; gap: 10px; padding: 2px }
.tu-kentat { display: grid; gap: 12px }
.tu-kentta span { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--muted) }
.tu-kentta p { margin: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; color: var(--bone) }
.tu-kentta .tu-kuva-rivi { display: flex; align-items: center; gap: 12px }
.tu-kuva { flex: none; width: 48px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #3d3d42, #202023) }
.tu-kuva-rivi b { font-size: 13.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px }
.tu-tuttu-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-top: clamp(20px, 2.6vw, 32px) }
.tu-tuttu-in--yksi { grid-template-columns: minmax(0, 1fr) }
.tu-iso { margin: 0; max-width: 32ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.05rem); line-height: 1.22; letter-spacing: -.02em; color: var(--bone); text-wrap: pretty }
.tu-tuttu-in .rv-teksti { margin: 0 }
.tu-lista { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; border-top: 1px solid #d6d3cc }
.tu-lista li { display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; border-bottom: 1px solid #d6d3cc; font-family: var(--font-text); font-size: 17px; line-height: 1.45; color: var(--ink) }
.tu-lista svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.tu-kohdat .vk-rivit { margin-top: 0 }
.tu-kohdat .vk-rivit h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.7rem); letter-spacing: -.02em; color: var(--ink) }
@media (max-width: 900px) {
  .tu-tuttu-in { grid-template-columns: minmax(0, 1fr); align-items: start }
}
@media (max-width: 640px) {
  .tu-luvut b { font-size: 1.3rem }
  .tu-lista { grid-template-columns: minmax(0, 1fr) }
  .tu-lista li { font-size: 16px }
}
@media (prefers-reduced-motion: reduce) { .tu-takaisin a { transition: none } }

/* Home: el carrusel de servicios y productos (29-09-2026, "here our products and services should move instead of
   what ever is here"). Las tarjetas del cilindro son enlaces con el dibujo de ejemplo de cada pagina en pequeño,
   el mismo HTML que el hero de la pagina, reducido. Prefijo kk-. */
.cw.cw--kk { height: clamp(440px, 33vw, 480px) }
.cw--kk .qcard { gap: 10px; padding-top: clamp(14px, 1.3vw, 18px); justify-content: flex-start; text-decoration: none; color: inherit; cursor: pointer }
.cw--kk .qcard:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px }
/* la capa del cilindro queda delante de las tarjetas de lado en 3D: no recoge el raton, las tarjetas si */
.cw--kk .cw-in { pointer-events: none }
.cw--kk .qcard { pointer-events: auto; -webkit-user-drag: none }
.cw--kk .qcard .qt { font-size: 14.5px; line-height: 1.5 }
.kk-kuva { position: relative; width: 100%; height: clamp(150px, 12.5vw, 180px); overflow: hidden; border-radius: 12px; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent) }
.kk-kuva > * { width: calc(100% / .72); transform: scale(.72); transform-origin: 0 0; box-shadow: none }
.kk-kuva .hk-merkki { display: none }
.kk-laji { margin-top: 4px; font-family: var(--font-text); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.kk-linkki { margin-top: auto; font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--bone) }
@media (max-width: 640px) {
  .cw.cw--kk { height: 440px }
  .cw--kk ~ .cw-nav .cw-dots { display: none }
}

/* La raiz de nordsur.net (29-09-2026): lo que necesitan los scripts de la web publicada que la raiz sigue usando
   (assets/app.js en contacto, varaa.js en la reserva, audit.js en el analisis, chat.js en la esquina). Esos scripts
   cambian las clases ellos mismos, asi que aqui van con su nombre. En la demo no hacen nada. */
.lomake[hidden] { display: none }
.form-status, .audit-status, .bk-status { margin: 12px 0 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--bone) }
.form-status:empty, .audit-status:empty, .bk-status:empty { display: none }
.form-status.error, .audit-status.err, .bk-status.err { color: var(--signal) }
.score { padding: 20px 14px; border: 1px solid var(--line-2); border-radius: 12px; text-align: center }
.score__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--bone) }
.score__label { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--muted) }
.score.good .score__num { color: #7fc79a }
.score.ok .score__num { color: #e0b36a }
.score.bad .score__num { color: var(--signal) }
.valinnat.bk-days { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) }
.valinnat.bk-slots { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) }
.bk-day, .bk-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 10px 6px; font: inherit; font-family: var(--font-text); font-size: 14px; color: var(--bone); background: transparent; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s }
.bk-day:hover, .bk-slot:hover { border-color: var(--bone) }
.bk-day:focus-visible, .bk-slot:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px }
.bk-slot { flex-direction: row; justify-content: center; gap: 6px }
.bk-slot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8 }
.bk-day__wd, .bk-day__mo { font-size: 12px; color: var(--muted) }
.bk-day__num { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.1 }
.bk-day.is-active, .bk-slot.is-active { background: var(--bone); color: var(--ink); border-color: var(--bone) }
.bk-day.is-active .bk-day__wd, .bk-day.is-active .bk-day__mo { color: var(--ink) }
.bk-chosen, .bk-when { text-transform: capitalize }
/* el chat de la esquina: fuera mientras el intro o el cajon del menu bloquean la pagina, y en el movil mientras se
   ve el aviso de cookies, como en la web publicada */
body.is-locked .nsx { display: none }
@media (max-width: 640px) { #cookie:not([hidden]) ~ .nsx .nsx-launch { display: none } }
@media (prefers-reduced-motion: reduce) { .bk-day, .bk-slot { transition: none } }