:root {
  --sheet: #fafafd;
  --ink: #17191c;
  --soft: #525459;
  --rule: #cecfdc;
  --hair: #e0e2ec;
  --tint: #ebedf8;
  --hot: #006994;
  --hot-deep: #005173;
  --display: Cambria, Cochin, Georgia, Times, serif;
  --copy: "Gill Sans", "Gill Sans MT", Calibri, "Noto Sans", sans-serif;
  --wide: 72rem;
  --gutter: 1.1rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sheet); color: var(--ink); font: 400 1.02rem/1.65 var(--copy); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
a { color: var(--hot-deep); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }

.metsa { position: absolute; left: -100vw; top: .5rem; z-index: 20; padding: .47rem .846rem; background: var(--ink); color: #ffffff; }
.metsa:focus { left: .5rem; }

.c_c232ef { display: inline-block; padding: .705rem 1.175rem; border: 0; background: var(--hot); color: #ffffff; font: 700 .96rem/1.2 var(--copy); letter-spacing: .01em; text-align: center; text-decoration: none; }
.c_c232ef:hover { background: var(--hot-deep); color: #ffffff; }
.c_c232ef-header-login, .c_c232ef-header-register { padding: .564rem .752rem; font-size: .845rem; overflow-wrap: anywhere; }
.c_c232ef-header-login, .c_c232ef-start-login { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.c_c232ef-header-login:hover, .c_c232ef-start-login:hover { background: var(--ink); color: #ffffff; }
.c_c232ef-mid, .c_c232ef-end { display: block; max-width: 22rem; margin: 1.692rem 0; }

.hylly { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) 3rem; }
.aalto { padding: 1.316rem 0 1.128rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.41rem; }
.c_4e1483 { font-size: .768rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.c_4e1483 a { color: var(--soft); }
h1, h2, h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; hyphens: manual; }
h1 { margin: .423rem 0 .658rem; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; }
.aalto-marja { display: flex; flex-wrap: wrap; align-items: center; gap: .282rem 1.128rem; font-size: .816rem; color: var(--soft); }
.aalto-marja p { margin: 0; }
.aalto-meri { font-style: italic; }
.c_8957b9 { margin: 0; padding-left: .752rem; border-left: 3px solid var(--hot); }

h2 { margin: 2.068rem 0 .752rem; padding-top: .658rem; border-top: 3px solid var(--ink); font-size: 1.68rem; font-weight: 700; line-height: 1.15; }
h3 { margin: 1.41rem 0 .376rem; font-size: 1.152rem; line-height: 1.3; }
p { margin: 0 0 .94rem; }
ul, ol { margin: 0 0 1.034rem; padding-left: 1.128rem; }
li { margin-bottom: .329rem; }
li::marker { color: var(--hot); }

.c_39f254 { margin: 0 0 1.316rem; font: 400 1.267rem/1.5 var(--display); color: var(--ink); }
.sali { display: flex; flex-wrap: wrap; gap: .823rem; margin: 0 0 1.692rem; }
.sali .c_c232ef { flex: 1 1 11rem; }

.soppi > h2:first-child { margin-top: .376rem; }
.vana { margin: 1.692rem 0; padding: .376rem 0 .376rem 1.034rem; border-left: 4px solid var(--hot); font: italic 400 1.296rem/1.4 var(--display); color: var(--ink); }
.lasi { display: block; margin: 0 0 .235rem; color: var(--hot-deep); font-size: .749rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.ritila { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .94rem; margin: 1.316rem 0 1.692rem; padding: 0; list-style: none; }
.ritila li { margin: 0; }
.ritila a { display: block; height: 100%; padding: .846rem .94rem .94rem; border-top: 3px solid var(--ink); background: var(--tint); color: var(--ink); text-decoration: none; }
.ritila a:hover { border-top-color: var(--hot); }
.ritila b { display: block; margin-bottom: .282rem; font: 700 1.056rem/1.25 var(--display); }

.seina { min-width: 0; }
.kehys { margin: 2.256rem 0 0; padding: .94rem 0 0; border-top: 3px solid var(--ink); }
.kehys-seppele { margin: 0 0 .47rem; color: var(--hot-deep); font-size: .749rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.kehys-tupa { margin: 0; padding: 0; list-style: none; }
.kehys-tupa li { margin: 0; border-bottom: 1px solid var(--hair); }
.kehys-tupa a { display: block; padding: .564rem 0; color: var(--ink); font: 700 1.008rem/1.3 var(--display); text-decoration: none; }
.kehys-tupa a:hover { color: var(--hot-deep); }
.haara { margin: 1.504rem 0; padding: .94rem 1.034rem; background: var(--tint); font-size: .912rem; }
.haara > :last-child { margin-bottom: 0; }

.kukka { margin: 0 0 1.128rem; }
.kukka img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rauta { margin: 1.316rem 0; }
.rauta img { display: block; width: 100%; border: 1px solid var(--rule); }
.kukka figcaption, .rauta figcaption { margin-top: .376rem; font-size: .787rem; color: var(--soft); }
.linna-pisara picture { border: 1px solid var(--rule); }
.kupla-pisara img { border: 1px solid var(--hair); }
.kaide { padding: .94rem 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); color: var(--hot-deep); }
.kaide svg { display: block; width: 100%; height: auto; }
.linna-pisara figcaption, .kupla-pisara figcaption, .kaide figcaption { margin-top: .376rem; font-size: .787rem; color: var(--soft); }

table { width: 100%; margin: 1.034rem 0 1.41rem; border-collapse: collapse; font-size: .912rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
th, td { padding: .517rem .564rem .517rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
thead th { border-bottom: 2px solid var(--ink); font-size: .768rem; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 39.99rem) {
  table.c_d90fad thead { position: absolute; left: -100vw; }
  table.c_d90fad tr { display: block; padding: .564rem 0; border-bottom: 1px solid var(--rule); }
  table.c_d90fad th, table.c_d90fad td { display: block; padding: .113rem 0; border: 0; }
  table.c_d90fad td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--soft); }
}

.c_07933d { font-weight: 700; white-space: nowrap; }
.c_0ad781 h3 { margin: 0; padding: .94rem 0 .282rem; border-top: 1px solid var(--hair); }
.c_0ad781 h2 + h3 { border-top: 0; }
.c_323305 { margin: 2.256rem 0 0; }
.c_323305 h2 { font-size: 1.152rem; }
.c_323305 ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .47rem .94rem; margin: 0; padding: 0; list-style: none; }
.c_323305 li { margin: 0; }
.c_323305 a { display: block; padding: .47rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-weight: 700; text-decoration: none; }
.c_323305 a:hover { color: var(--hot-deep); }
.c_54c9f6 { margin: 1.692rem 0; padding: .94rem 1.034rem; border-top: 3px solid var(--hot); background: var(--tint); }
.c_54c9f6 ul { margin: 0; padding: 0; list-style: none; }
.c_54c9f6 li { padding: .564rem 0; border-top: 1px solid var(--rule); }
.c_54c9f6 .c_f21962 { display: inline-block; margin-top: .376rem; padding: .517rem .94rem; background: var(--hot); color: #ffffff; font-weight: 700; text-decoration: none; }

@media (min-width: 60rem) {
  :root { --gutter: 2rem; }
  .hylly { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.88rem; align-items: start; }
  .seina { grid-column: 1 / span 8; }
  .kehys { grid-column: 9 / -1; position: sticky; top: 1.5rem; margin-top: 1.41rem; }
  .vanne > .haara { float: right; clear: right; width: 42%; margin: .282rem 0 .94rem 1.316rem; }
  .c_39f254 { font-size: 1.44rem; }
  .vana { margin-left: -2rem; font-size: 1.536rem; }
}

@media (max-width: 47.99rem) {
  .aalto { padding: .752rem 0 .658rem; margin-bottom: .846rem; }
  .aalto-marja { gap: .188rem .94rem; margin-top: .282rem; font-size: .768rem; }
  h1 { max-width: none; }
  h1 { margin: .282rem 0 .423rem; font-size: 1.488rem; }
  .c_39f254 { margin: 0 0 .752rem; font-size: 1.018rem; line-height: 1.45; }
}

@media (min-width: 64rem) {
  .aalto { padding: .94rem 0 .846rem; margin-bottom: 1.128rem; }
  h1 { max-width: 30ch; font-size: 2.4rem; }
  .c_39f254 { font-size: 1.152rem; }
}

@media (min-width: 64rem) {
  .vanne:has(> .c_6b778a + .linna-pisara + .sali) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.175rem; align-items: start; }
  .vanne:has(> .c_6b778a + .linna-pisara + .sali) > * { grid-column: 1 / -1; min-width: 0; }
  .vanne > .c_6b778a:has(+ .linna-pisara + .sali) { grid-column: 1; float: none; width: auto; margin: 0 0 1.41rem; }
  .vanne > .c_6b778a + .linna-pisara:has(+ .sali) { grid-column: 2; float: none; width: auto; margin: 0 0 1.41rem; }
  .vanne > .c_6b778a + .linna-pisara + .sali { grid-column: 3; float: none; clear: none; width: auto; margin: 0 0 1.41rem; padding-left: 1.175rem; border-left: 1px solid var(--rule); }
}

.latu-seppele { position: relative; z-index: 4; background: #fafafd; color: #17191c; font-family: var(--copy); }
:where(.latu-seppele) a:not(.c_c232ef) { color: #17191c; }
.latu-vaippa { display: inline-flex; flex: 0 1 auto; min-width: 0; max-width: 100%; line-height: 0; background: none; }
.latu-vaippa img { display: block; width: auto; max-width: 100%; height: auto; max-height: 3rem; }
.latu-tori { display: flex; flex-wrap: wrap; align-items: center; gap: .376rem; min-width: 0; max-width: 100%; }
.latu-tori .c_c232ef { max-width: 100%; white-space: normal; }
.latu-hela { margin: 0; color: #525459; font-size: .84rem; line-height: 1.35; }
.latu-putki { display: inline-flex; align-items: center; gap: .376rem; font-size: .816rem; line-height: 1.3; text-decoration: none; }
.latu-putki:hover { text-decoration: underline; }
.latu-runko { display: inline-block; padding: .141rem .282rem; border: 1.5px solid currentColor; border-radius: 4.8px; font-size: .691rem; font-weight: 700; line-height: 1; }
.latu-arvo { min-width: 0; font-family: var(--display); }
@media (max-width: 47.99rem) {
  .latu-hela, .latu-tori .c_c232ef-header-register { display: none; }
  .latu-seppele .latu-vaippa img { max-height: 2.5rem; }
}

.latu-sivu { position: relative; background: #17191c; color: #f1f1f8; font-family: var(--copy); font-size: .912rem; line-height: 1.55; }
.latu-sivu a { color: #a0ccff; overflow-wrap: anywhere; }
.latu-sivu ul, .latu-sivu ol { margin: 0; padding: 0; list-style: none; }
.latu-sivu li { margin: 0; }
.latu-sivu p { margin: 0 0 .752rem; }
.latu-sivu a[href^="tel:"] { white-space: nowrap; }
.latu-halli { max-width: 72rem; margin: 0 auto; padding: 1.692rem .94rem 2.068rem; }
.latu-valo { max-width: 70ch; }
.latu-kartta { margin: 0 0 .47rem; color: #f1f1f8; font: 700 .96rem/1.3 var(--display); }
.latu-joki { display: flex; flex-wrap: wrap; align-items: center; gap: .282rem 1.034rem; margin: .94rem 0 0; padding-top: .846rem; border-top: 1px solid #3e4145; color: #bfc1cf; font-size: .84rem; }

.c_6b778a .latu-lovi { font-size: clamp(1.25rem, 5.6vw, 1.85rem); line-height: 1.15; letter-spacing: 0; hyphens: manual; overflow-wrap: normal; }

.latu-lokero { white-space: nowrap; }
.latu-satama { display: grid; grid-template-columns: repeat(2, minmax(0, 11.5rem)); gap: .705rem; margin: .94rem 0 1.41rem; }
.latu-satama > figure { float: none; width: auto; max-width: none; margin: 0; }
.latu-satama > figure img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; margin: 0; object-fit: cover; }
figure img[width] { max-width: min(100%, attr(width px)); }
@media (min-width: 40rem) {
  .latu-satama { grid-template-columns: repeat(3, minmax(0, 11.5rem)); }
}
@media (min-width: 64rem) {
  .latu-satama { grid-template-columns: repeat(4, minmax(0, 11.5rem)); }
}

.latu-jalka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .376rem .94rem; max-width: 72rem; margin: 0 auto; padding: .47rem .94rem; border-bottom: 1px solid #cecfdc; }
.latu-taimi { display: flex; justify-content: center; max-width: 72rem; margin: 0 auto; padding: .94rem .94rem .846rem; }
.latu-taimi .latu-vaippa img { max-height: 3.6rem; }
.latu-taivas { display: flex; justify-content: center; max-width: 72rem; margin: 0 auto; padding: .423rem .94rem .564rem; border-top: 1px solid #cecfdc; text-align: center; }
@media (max-width: 47.99rem) {
  .latu-seppele { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .705rem; padding: 0 .94rem; }
  .latu-jalka { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0; padding: .376rem 0; border-bottom: 0; }
  .latu-taimi { grid-column: 1; grid-row: 1; justify-content: flex-start; min-width: 0; margin: 0; padding: .376rem 0; }
  .latu-taimi .latu-vaippa img { max-height: 2.1rem; }
  .latu-taivas { grid-column: 1 / -1; justify-content: flex-start; min-width: 0; max-width: none; margin: 0; padding: .282rem 0 .376rem; text-align: left; }
}
@media (min-width: 48rem) {
  .latu-taimi { padding: .846rem .94rem .752rem; }
  .latu-taimi .latu-vaippa img { max-height: 3.8rem; }
}

.latu-peili { display: block; padding: .094rem 0 0; text-wrap: balance; }
:where(.latu-peili) a:not(.c_c232ef) { display: inline-block; margin: 0 .376rem .376rem 0; padding: .423rem .799rem; border-radius: 1598.4px; background: #ebedf8; color: #17191c; font-size: .864rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.latu-peili a:hover { text-decoration: underline; }
@media (max-width: 47.99rem) {
  :where(.latu-peili) a:not(.c_c232ef) { margin: 0 .282rem .282rem 0; padding: .301rem .639rem; font-size: .806rem; }
}

.latu-sivu > .latu-ahjo { margin: 0; padding: .9rem max(1rem, calc((100% - 72rem) / 2 + 1rem)); background: #ebedf8; color: #17191c; }
.latu-ahjo a { color: inherit; font-weight: 700; }
.latu-polku { display: flex; flex-wrap: wrap; gap: .282rem 1.128rem; margin: 0 0 1.128rem; }
.latu-joki img { width: 1.375rem; height: 1.375rem; }
.latu-joki span { margin-right: auto; }

.latu-seppele { border-bottom: 2px dashed #006994; }
.latu-sivu { border-top: 2px dashed #006994; }

.c_c232ef.c_c232ef { border-radius: 0; -webkit-mask: none; mask: none; clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem); }

.latu-aitta { display: grid; gap: .94rem; margin: 1.41rem 0 .94rem; padding: 1.316rem 1.175rem 1.175rem; overflow: hidden; border: 1px solid #525459; border-radius: 2rem; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, #a0ccff 26%, transparent), transparent 60%), #17191c; color: #f1f1f8; }
.latu-aitta p { margin: 0; }
.latu-aitta-lasi { color: #a0ccff; font: 700 .78rem/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.latu-aitta-kartta { margin-top: .376rem !important; color: #f1f1f8; font: 900 clamp(1.6rem, .9rem + 2.2vw, 2.4rem)/1.08 var(--display); text-wrap: balance; hyphens: manual; }
.latu-aitta-helle { margin-top: .517rem !important; color: #bfc1cf; font-size: .78rem; line-height: 1.45; }
.latu-aitta .c_c232ef { display: block; max-width: 20rem; margin-top: .94rem; }
.latu-aitta-pisara { display: flex; justify-content: center; }
.latu-aitta-pisara img { width: min(45%, 9rem); border-radius: .96rem; }
.latu-aitta-taite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .47rem; margin: 0; padding: 0; list-style: none; }
.latu-aitta-taite li { margin: 0; padding: .564rem .705rem; border: 1px solid #525459; border-radius: 1.2rem; color: #bfc1cf; font-size: .84rem; line-height: 1.3; }
.latu-aitta-taite strong { display: block; color: #f1f1f8; font: 800 1.104rem/1.2 var(--display); }
@media (min-width: 40rem) {
  .latu-aitta { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); align-items: center; padding: 1.692rem; }
  .latu-aitta-pisara img { width: min(100%, 11rem); transform: rotate(-4deg); }
  .latu-aitta-taite { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .latu-aitta { gap: .658rem; margin: .94rem 0; padding: .94rem .94rem 1.034rem; }
  .latu-aitta-kartta { font-size: 1.344rem; }
  .latu-aitta .c_c232ef { margin-top: .658rem; }
  .latu-aitta-pisara img { width: min(45%, 5.5rem); }
}
@media (min-width: 64rem) {
  .latu-aitta:has(+ figure, + .latu-satama) { grid-template-columns: minmax(0, 1fr); padding: 1.222rem; }
  .latu-aitta:has(+ figure, + .latu-satama) .latu-aitta-pisara { display: none; }
  .latu-aitta:has(+ figure, + .latu-satama) .latu-aitta-taite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.latu-naula { display: none; }
@media (max-width: 47.99rem) {
  body { padding-bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }
  .latu-naula { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: .45rem 1rem calc(.45rem + env(safe-area-inset-bottom, 0px)); background: #fafafd; border-top: 2px solid #006994; }
  .latu-naula .c_c232ef { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.9rem; margin: 0; padding-block: .376rem; font-size: .96rem; line-height: 1.2; }
}

.latu-kisko tbody tr > *::before { display: inline-block; width: 1.1rem; height: 1.1rem; margin: 0 .47rem 0 0; font: 700 .84rem/1.1rem var(--copy); text-align: center; vertical-align: .05em; }
.latu-kisko tbody tr > :first-child::before { content: "+"; background: #17191c; color: #ebedf8; }
.latu-kisko tbody tr > :last-child:not(:first-child)::before { content: "\2212"; border: 1px solid #17191c; background: #ebedf8; color: #17191c; line-height: 1rem; }
@media (max-width: 47.99rem) {
  table.c_d90fad.latu-kisko tbody tr > :first-child::before { content: "+"; }
  table.c_d90fad.latu-kisko tbody tr > :last-child:not(:first-child)::before { content: "\2212"; }
}

.latu-reuna { display: grid; justify-items: start; margin: .94rem 0 1.645rem; }
.latu-reuna > picture { display: block; justify-self: stretch; min-width: 0; overflow: hidden; border-radius: .8rem; }
.latu-reuna img { display: block; width: 100%; height: auto; }
.latu-kilta { position: relative; max-width: calc(100% - 2rem); margin: -1.25rem 0 0 .94rem; padding: .517rem .94rem; border: 2px solid #fafafd; border-radius: .72rem; background: #ebedf8; color: #17191c; font: 800 .864rem/1.2 var(--display); letter-spacing: .02em; }
.latu-reuna > figcaption { justify-self: stretch; margin-top: .564rem; }
.c_6b778a + figure:not(.latu-reuna):has(> picture > :is(img[width="240"], img[width="300"])) img { aspect-ratio: 1; object-fit: cover; object-position: 50% 0; }
@media (min-width: 64rem) {
  .c_6b778a:has(+ .latu-reuna) { float: left; width: calc(52% - .75rem - var(--x-narrow, 0) * 4%); margin-right: calc(1.5rem); }
  .c_6b778a + .latu-reuna, .c_6b778a + .latu-reuna + div:has(> .c_c232ef-start-login, > .c_c232ef-start-register) { float: right; width: calc(48% - .75rem + var(--x-narrow, 0) * 4% - 1px); margin: 0; }
  .c_6b778a + .latu-reuna + div:has(> .c_c232ef-start-login, > .c_c232ef-start-register) { clear: right; margin-top: .823rem; margin-bottom: .823rem; }
  .c_6b778a:has(+ figure:not(.latu-reuna), + .latu-satama) { float: left; width: calc(100% - 18.5rem); }
  .c_6b778a:has(+ figure:not(.latu-reuna) > picture > :is(img[width="450"], img[width="240"], img[width="300"])) { width: calc(100% - 12.5rem); }
  .c_6b778a + :is(figure:not(.latu-reuna), .latu-satama) { float: right; width: 17rem; max-width: 100%; margin: 0; }
  .c_6b778a + figure:not(.latu-reuna):has(> picture > :is(img[width="450"], img[width="240"], img[width="300"])) { width: 11rem; }
  .c_6b778a + figure:not(.latu-reuna):has(> picture > :is(img[width="450"], img[width="240"], img[width="300"])) img { width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
  .c_6b778a + figure:not(.latu-reuna):has(> picture > :is(img[width="240"], img[width="300"])) img { aspect-ratio: 1; }
  .c_6b778a + .latu-satama { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .latu-reuna + *, .c_6b778a + figure + *, .c_6b778a + .latu-satama + *, .c_6b778a + .latu-reuna + div:has(> .c_c232ef-start-login, > .c_c232ef-start-register) + * { clear: both; }
}
@media (min-width: 85rem) {
  .c_6b778a:has(+ figure:not(.latu-reuna) > picture > :is(img[width="450"], img[width="240"], img[width="300"])) { width: calc(100% - 19rem); }
  .c_6b778a + figure:not(.latu-reuna):has(> picture > :is(img[width="450"], img[width="240"], img[width="300"])) { width: 17.5rem; }
  .c_6b778a + figure:not(.latu-reuna):has(> picture > :is(img[width="450"], img[width="240"], img[width="300"])) img { max-width: 100%; }
  .c_6b778a + figure:not(.latu-reuna):has(> picture > img[width="450"]) img { aspect-ratio: 10 / 11; }
}

.latu-alku { display: flex; gap: 1.175rem; margin: 1.175rem 0 1.41rem; padding: 0 0 .47rem; overflow-x: auto; scroll-snap-type: x mandatory; background: linear-gradient(#006994, #006994) 0 35% / 100% 2px no-repeat local; }
.latu-alku > figure { flex: 0 0 64%; margin: 0; scroll-snap-align: start; }
.latu-alku img, .latu-alku svg { display: block; width: 100%; height: auto; }
.latu-alku figcaption { margin-top: .47rem; padding: .329rem .564rem; border-left: 3px solid #006994; background: #fafafd; font-size: .816rem; line-height: 1.4; }
@media (min-width: 48rem) {
  .latu-alku { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.88rem; overflow: visible; }
}

table.latu-silta { width: 100%; margin: 1.175rem 0 1.41rem; border: 1px solid #cecfdc; border-collapse: separate; border-spacing: 0; border-radius: .96rem; overflow: hidden; font-variant-numeric: tabular-nums; }
.latu-silta caption { padding: 0 0 .423rem; text-align: left; font-weight: 700; }
.latu-silta th, .latu-silta td { padding: .564rem .705rem; text-align: left; }
.latu-silta thead th { background: #fafafd; color: #17191c; font: 700 .84rem/1.3 var(--display); }
.latu-silta tbody tr:nth-child(even) { background: color-mix(in srgb, #cecfdc 40%, transparent); }
@media (max-width: 47.99rem) {
  table.latu-silta thead { position: absolute; left: -100vw; }
  table.latu-silta, table.latu-silta tbody, table.latu-silta tr { display: block; }
  table.latu-silta tr { padding: .282rem 0; }
  table.latu-silta th, table.latu-silta td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .705rem; padding: .282rem .705rem; }
  table.latu-silta tbody th::before, table.latu-silta tbody td::before { content: attr(data-label); font-size: .78rem; font-weight: 700; }
}

.latu-patsas { margin: 1.316rem 0 1.692rem; padding: .846rem 1.034rem .94rem; border: 1px solid #525459; border-radius: .96rem; background: #17191c; color: #f1f1f8; font-family: var(--copy); }
.latu-patsas-kartta { margin: 0 0 .47rem; font: 700 .912rem/1.3 var(--display); letter-spacing: .02em; }
.latu-patsas ol { display: grid; gap: .329rem 1.504rem; margin: 0; padding: 0 0 0 1.175rem; }
.latu-patsas li { margin: 0; padding-left: .141rem; }
.latu-patsas a { color: #a0ccff; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 48rem) {
  .latu-patsas ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.latu-ympyra { flex: 1 1 100%; grid-column: 1 / -1; counter-reset: latu-ympyra; display: grid; gap: .423rem; margin: 0 0 1.316rem; padding: 0; list-style: none; font-family: var(--copy); }
.latu-ympyra-kupla { counter-increment: latu-ympyra; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .658rem; align-items: start; margin: 0; padding: .517rem .658rem; border: 1px solid #cecfdc; border-radius: .88rem; background: #fafafd; color: #17191c; }
.latu-ympyra-kupla::before { content: counter(latu-ympyra); grid-row: 1 / span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #006994; color: #fafafd; font: 700 .912rem/1 var(--display); }
.latu-ympyra-kupla b { display: block; font: 700 .941rem/1.25 var(--display); }
.latu-ympyra-kupla span { display: block; margin-top: .094rem; color: #525459; font-size: .845rem; line-height: 1.4; }
.c_arch_card, .c_retention_card { margin: 1.75rem 0; padding: 1.25rem 1.35rem; border: 1px solid rgba(128,128,128,.28); border-radius: .75rem; background: #f8fafc; color: #161b26; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.c_arch_head, .c_calc_head { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(128,128,128,.22); }
.c_pill { display: inline-block; margin: 0 0 .4rem; padding: .2rem .65rem; border-radius: 999px; background: #1e293b; color: #ffffff; font-size: .76rem; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.c_arch_title, .c_calc_head strong, .c_demo_meta strong { display: block; margin: .15rem 0 .25rem; font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: #111827; }
.c_calc_head p, .c_demo_meta p, .c_arch_sub { margin: 0; font-size: .92rem; color: #4b5563; }
.c_preset_row, .c_bank_chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .85rem 0 1rem; }
.c_chip_btn, .c_bank_btn, .c_play_action { appearance: none; padding: .5rem .95rem; border: 1.5px solid #1e293b; border-radius: .5rem; background: #ffffff; color: #111827; font-size: .92rem; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .15s, color .15s; }
.c_chip_btn:hover, .c_bank_btn:hover { background: #e2e8f0; }
.c_chip_btn.active, .c_bank_btn.active, .c_play_action { background: #1e293b; color: #ffffff; }
.c_play_action { padding: .65rem 1.25rem; font-size: .98rem; }
.c_range_row { margin: 0 0 .85rem; font-size: .85rem; color: #4b5563; }
.c_calc_summary, .c_bank_report, .c_arch_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .65rem; margin-top: .75rem; }
.c_stat { padding: .75rem .9rem; border: 1px solid rgba(128,128,128,.24); border-radius: .55rem; background: #ffffff; }
.c_stat span { display: block; font-size: .78rem; color: #4b5563; margin-bottom: .2rem; }
.c_stat strong { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: #111827; }
.c_stat_accent { border-left: 4px solid #1e293b; }
.c_ugc_bars { display: grid; gap: .45rem; margin: .85rem 0 1.1rem; }
.c_ugc_bar_row { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr auto; align-items: center; gap: .65rem; font-size: .88rem; }
.c_ugc_bar_row meter { width: 100%; height: .65rem; }
.c_ugc_cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .85rem; margin: 1rem 0 0; }
.c_ugc_item { margin: 0; padding: .9rem 1rem; border: 1px solid rgba(128,128,128,.24); border-radius: .6rem; background: #ffffff; }
.c_ugc_item blockquote { margin: 0 0 .55rem; padding: 0; font-size: .93rem; line-height: 1.5; color: #1f2937; }
.c_ugc_item footer { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: #4b5563; border-top: 1px solid rgba(128,128,128,.2); padding-top: .45rem; }
.c_demo_splash { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.c_flow_steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .7rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.c_flow_steps li { margin: 0; padding: .75rem .85rem; border: 1px solid rgba(128,128,128,.24); border-radius: .55rem; background: #ffffff; font-size: .9rem; }
.c_flow_steps strong { display: block; margin-bottom: .2rem; }