/* =====================================================================================================================
   /isannoitsijalle (WP8, views/landing/v9/managers.php). Pinnat look on the v9 shell (base.css): white sheets with
   soft shadows, Mona Sans 800 at 110 % for H1/H2, Geologica text, nothing under 16 px, no uppercase, no mono.
   The illustration (.m9-stage) is the app's Yhtiöt view; its beats sit on [data-beat] (1-4). The server HTML is beat
   4, so without JS or under reduced motion everything below shows the end state. Only transform and opacity animate;
   anything entering starts at opacity .35 or more.
   Scoped colour copies (from base.css :root and talo.css), contrast on white: ink 16.2, text-2 9.8, muted 6.8,
   Kuusi 9.5, amber text #844A00 6.9; the amber ring #B87516 and the grey ring #6B7773 are non-text (3.0 / 4.7).
   ===================================================================================================================== */
.m9-hero, .m9-how, .m9-imp, .m9-pr, .m9-tv, .m9-jl, .m9-faq, .m9-cl {
  --m9-wall: #D5DDD9; --m9-roof: #A9B6B0; --m9-track: #E3E9E6; --m9-wait: #CBD5D0; --m9-ring: #6B7773;
  --m9-amber: #B87516; --m9-amber-tx: #844A00; --m9-sel: #DDE8E3;
}

/* ------------------------------------------------------------------------------------------------ hero */
.m9-hero { padding-top: 20px; }
.m9-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; padding: 0; list-style: none; font-size: var(--v9-fs-small); color: var(--color-text-2); }
.m9-crumb li { display: flex; align-items: center; gap: 10px; }
.m9-crumb li + li::before {
  content: ""; width: 7px; height: 7px; border-top: 2px solid var(--color-text-muted); border-right: 2px solid var(--color-text-muted);
  transform: rotate(45deg); margin-right: 2px;
}
.m9-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; border-radius: 4px; }
.m9-crumb [aria-current] { color: var(--color-text-2); }

.m9-hero__fit { container-type: inline-size; margin-top: 12px; }
.m9-h1 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 100%; color: var(--color-text);
  font-size: clamp(2rem, 9.4cqi, 3.25rem); line-height: .98; letter-spacing: -.026em;
  overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
}
@media (min-width: 48rem) { .m9-h1 { font-stretch: var(--display-wdth); font-size: clamp(3rem, 7.4cqi, 4.5rem); } }
/* from 1024 px: two lines, line 1 fills the container (the home hero's fit: --m9-fit is line 1's width per 1 cqi) */
@media (min-width: 64rem) {
  .m9-hero__fit { --m9-fit: 6; }
  html[lang="en"] .m9-hero__fit { --m9-fit: 4.9; }
  .m9-h1 { font-size: min(6rem, calc(var(--m9-fit) * 1cqi)); line-height: .94; text-wrap: nowrap; }
  .m9-h1 span { display: block; }
}

.m9-intro { display: grid; gap: 24px; margin-top: 24px; }
.m9-intro__sub { font-size: var(--v9-fs-lead); line-height: 1.55; color: var(--color-text-2); max-width: 36em; text-wrap: pretty; }
.m9-intro__act { display: flex; flex-direction: column; gap: 14px; }
.m9-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.m9-price { font-size: 1.25rem; font-weight: 600; line-height: 1.45; color: var(--color-text); max-width: 30em; text-wrap: pretty; }
.m9-terms { font-size: var(--v9-fs-small); line-height: 1.5; color: var(--color-text-2); }
/* from 1024 px the Yhtiöt view is the first screen (round 2, as on home): H1, then the buttons and the price in one row,
   the stage 24 px under them; the lead and the terms move under the stage */
@media (min-width: 64rem) {
  .m9-hero > .v9-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); }
  .m9-crumb, .m9-hero__fit { grid-column: 1 / -1; }
  .m9-intro { display: contents; }
  .m9-intro__act { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 24px; }
  .m9-btns { flex-wrap: nowrap; }
  .m9-price { max-width: none; }
  .m9-hero .m9-stage { grid-column: 1 / -1; grid-row: 4; margin-top: 24px; }
  .m9-intro__sub { grid-column: 1 / span 7; grid-row: 5; margin-top: 32px; }
  .m9-terms { grid-column: 9 / -1; grid-row: 5; margin-top: 32px; padding-top: 4px; }
}

/* ------------------------------------------------------------------------------------------------ the illustration */
.m9-stage { container: m9 / inline-size; margin: 40px 0 0; }
.m9-sheet {
  position: relative; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-sheet); box-shadow: var(--shadow-card);
}
.m9-sheet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 20px 12px; }
.m9-sheet__title { font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-wdth); font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em; }
.m9-sheet__lede { margin-top: 6px; font-size: var(--v9-fs-small); line-height: 1.45; color: var(--color-text-2); }
.m9-play { flex: none; }
.m9-play [data-i] { display: none; }
.m9-play[data-state="playing"] [data-i="pause"], .m9-play[data-state="paused"] [data-i="play"], .m9-play[data-state="idle"] [data-i="play"], .m9-play[data-state="ended"] [data-i="replay"] { display: block; }

/* the table (wide) */
.m9-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; line-height: 1.4; }
.m9-t th { padding: 12px 12px; text-align: left; font-weight: 600; color: var(--color-text-2); white-space: nowrap; border-bottom: 1px solid var(--color-border-subtle); }
.m9-t td { padding: 14px 12px; vertical-align: middle; border-bottom: 1px solid var(--color-border-subtle); }
.m9-t tr > :first-child { padding-left: 28px; }
.m9-t tr > :last-child { padding-right: 28px; }
.m9-t__ck { width: 64px; }
.m9-t__num { text-align: right !important; width: 1%; white-space: nowrap; font-size: 1.0625rem; }
.m9-t__name { min-width: 15rem; }
.m9-t__name { display: table-cell; }
.m9-t__name > * { vertical-align: middle; }
.m9-g { display: inline-block; width: 40px; height: 40px; margin-right: 14px; }
.m9-g__wall { fill: var(--m9-wall); }
.m9-g__roof, .m9-g__door { fill: var(--m9-roof); }
.m9-g__ridge { fill: none; stroke: var(--m9-roof); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.m9-g__win rect { fill: var(--color-surface); }
.m9-nm { display: inline-flex; flex-direction: column; }
.m9-nm__t { font-weight: 600; color: var(--color-text); font-size: 1.0625rem; }
.m9-nm__s { color: var(--color-text-2); }

.m9-st { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--color-text); }
.m9-st::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.m9-st[data-k="problem"] { font-weight: 600; }
.m9-st[data-k="problem"]::before { border-radius: 2px; transform: rotate(45deg) scale(.9); background: var(--color-text); }
.m9-st[data-k="attn"] { font-weight: 600; color: var(--m9-amber-tx); }
.m9-st[data-k="attn"]::before { border: 3px solid var(--m9-amber); }
.m9-st[data-k="running"]::before { border: 3px solid var(--color-action); }
.m9-st[data-k="notstarted"]::before { border: 2px solid var(--m9-ring); }
.m9-st[data-k="closed"]::before { background: var(--color-action); }

.m9-t__test { width: 15rem; }
.m9-mb { display: flex; gap: 2px; width: 100%; max-width: 13rem; height: 8px; margin-bottom: 7px; border-radius: 4px; overflow: hidden; }
.m9-mb:empty { background: var(--m9-track); }
.m9-mb i { display: block; flex-basis: 0; min-width: 3px; }
.m9-mb__ok { background: var(--color-action); }
.m9-mb__wait { background: var(--m9-wait); }
.m9-mb__unreached { background: var(--m9-amber); }
.m9-mb__problem { background: var(--color-text); }
.m9-tst { display: block; }
.m9-prog { display: block; color: var(--color-text-2); white-space: nowrap; }
.m9-next { font-weight: 600; color: var(--color-link); white-space: nowrap; }
.m9-calm { color: var(--color-text-muted); white-space: nowrap; }

/* a value that changes at beat 4: both versions in one grid cell, crossfaded */
.m9-x { display: inline-grid; vertical-align: middle; }
.m9-t__test .m9-x { display: grid; }
.m9-x__a { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease-out); }
.m9-t__num .m9-x { justify-items: end; }
.m9-stage[data-beat="4"] .m9-x__a[data-at="pre"], .m9-stage:not([data-beat="4"]) .m9-x__a[data-at="post"] { opacity: 0; visibility: hidden; }
.m9-stage[data-beat="4"] .m9-x__a[data-at="post"] { animation: m9-swap 260ms var(--ease-out); }
@keyframes m9-swap { from { opacity: .35; } }

/* the checkbox (picture of one): ticked on the three picked rows during beats 2 and 3 */
.m9-ck { position: relative; display: block; width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--color-border-control); }
.m9-ck::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-action); opacity: 0; transition: opacity 120ms linear; }
.m9-ck::after {
  content: ""; position: absolute; left: 8.5px; top: 4.5px; width: 6px; height: 11px; border-right: 2.5px solid var(--color-on-action); border-bottom: 2.5px solid var(--color-on-action);
  transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity 120ms linear, transform 220ms var(--ease-out);
}
.m9-stage:is([data-beat="2"], [data-beat="3"]) .m9-r--pick .m9-ck::before { opacity: 1; }
.m9-stage:is([data-beat="2"], [data-beat="3"]) .m9-r--pick .m9-ck::after { opacity: 1; transform: rotate(45deg) scale(1); }
.m9-stage[data-beat="2"].is-playing .m9-r--pick .m9-ck::before,
.m9-stage[data-beat="2"].is-playing .m9-r--pick .m9-ck::after { transition-delay: calc(400ms + var(--i, 0) * 320ms); }

/* the bar under the table: hint (1) · batch actions (2-3) · started (4) */
.m9-foot { position: relative; height: 80px; }
.m9-foot__l {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 28px;
  opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}
.m9-hint { color: var(--color-text-2); font-size: var(--v9-fs-small); }
.m9-stage[data-beat="1"] .m9-hint, .m9-stage:is([data-beat="2"], [data-beat="3"]) .m9-batch, .m9-stage[data-beat="4"] .m9-done {
  opacity: 1; visibility: visible; transition: none; animation: m9-rise 260ms var(--ease-out);
}
@keyframes m9-rise { from { opacity: .35; transform: translateY(8px); } }
.m9-batch { background: var(--m9-sel); }
.m9-batch__n { font-weight: 600; margin-right: 8px; white-space: nowrap; }
.m9-fbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-button);
  background: var(--color-surface); box-shadow: inset 0 0 0 var(--border-w-control) var(--color-border-control);
  font-size: 1rem; font-weight: 600; white-space: nowrap; color: var(--color-text);
  transition: transform var(--dur-press) var(--ease-out);
}
.m9-fbtn--go { background: var(--color-action); color: var(--color-on-action); box-shadow: var(--shadow-button); }
.m9-fbtn.is-pressed { transform: scale(.97); }
.m9-done { color: var(--color-text); font-size: 1.0625rem; line-height: 1.45; }
.m9-done svg { flex: none; width: 26px; height: 26px; color: var(--color-action); }

/* the review panel (beat 3) */
.m9-pv {
  position: absolute; right: 20px; top: 96px; bottom: 100px; width: min(27.5rem, calc(100% - 40px)); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
  opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease-out), visibility 0s linear 220ms;
}
.m9-stage[data-beat="3"] .m9-pv { opacity: 1; visibility: visible; transition: none; animation: m9-enter 360ms var(--ease-out); }
@keyframes m9-enter { from { opacity: .35; transform: translateY(24px); } }
.m9-pv__h { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; }
.m9-pv__k { font-weight: 600; color: var(--color-text-2); }
.m9-pv__l { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.m9-pv__l li { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--radius-control); background: var(--color-canvas); }
.m9-pv__n { font-weight: 600; }
.m9-pv__v { color: var(--color-text-2); }
.m9-pv__note { font-size: var(--v9-fs-small); color: var(--color-text-2); }
.m9-pv__go { margin-top: auto; justify-content: center; white-space: normal; text-align: center; min-height: 52px; line-height: 1.3; padding: 8px 16px; }

/* steps under the sheet */
.m9-ctl { margin-top: 12px; }
.m9-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.m9-step {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 2px 4px; border: 0; border-radius: 8px;
  background: none; color: var(--color-text-2); font-size: 1rem; font-weight: 600; text-align: left; white-space: nowrap;
}
.m9-step[aria-pressed="true"] { color: var(--color-text); }
.m9-step__line { position: relative; display: block; height: 3px; border-radius: 2px; background: var(--color-border-subtle); overflow: hidden; }
.m9-step__line i { position: absolute; inset: 0; background: var(--color-action); transform-origin: 0 50%; transform: scaleX(0); }
.m9-stage[data-beat="1"] .m9-step:nth-child(-n+1) .m9-step__line i,
.m9-stage[data-beat="2"] .m9-step:nth-child(-n+2) .m9-step__line i,
.m9-stage[data-beat="3"] .m9-step:nth-child(-n+3) .m9-step__line i,
.m9-stage[data-beat="4"] .m9-step .m9-step__line i { transform: none; }
.m9-stage.is-playing .m9-step[aria-pressed="true"] .m9-step__line i { transform: scaleX(var(--p, 0)); }
.m9-stage__cap { margin-top: 8px; font-size: var(--v9-fs-small); line-height: 1.5; color: var(--color-text-2); }
.m9-stage--instant *, .m9-stage--instant *::before, .m9-stage--instant *::after { transition: none !important; animation: none !important; }

/* middle widths: Vastaamatta and Viat leave the table */
@container m9 (max-width: 68rem) {
  .m9-t th.m9-t__num, .m9-t td.m9-t__num { display: none; }
  .m9-batch .m9-fbtn--x:not(:first-of-type) { display: none; }
  .m9-t__test { width: 13rem; }
}
@container m9 (min-width: 48rem) {
  .m9-sheet__top { padding: 28px 28px 16px; }
  .m9-sheet__title { font-size: 1.75rem; }
  .m9-sheet__lede { font-size: 1.0625rem; }
}

/* phones: every row becomes a two-line card; the running and closed rows leave (the beats never touch them) */
@container m9 (max-width: 47.99rem) {
  .m9-t, .m9-t tbody { display: block; }
  .m9-t thead, .m9-t tr.m9-r--wide { display: none; }
  .m9-t tr {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--color-border-subtle);
  }
  .m9-t td { display: block; padding: 0 !important; border: 0; }
  .m9-t td.m9-t__num, .m9-t td.m9-t__next { display: none; }
  .m9-t td.m9-t__ck { grid-column: 1; grid-row: 1; align-self: center; width: auto; }
  .m9-t td.m9-t__name { grid-column: 2 / -1; grid-row: 1; min-width: 0; display: flex; align-items: center; }
  .m9-t td.m9-t__st { grid-column: 2; grid-row: 2; }
  .m9-t td.m9-t__test { grid-column: 3; grid-row: 2; width: auto; justify-self: end; }
  .m9-t__test .m9-mb { display: none; }
  .m9-tst { display: block; }
  .m9-g { width: 32px; height: 32px; margin-right: 10px; flex: none; }
  .m9-nm { min-width: 0; flex-direction: row; flex-wrap: wrap; column-gap: 8px; align-items: baseline; }
  .m9-nm__t { font-size: 1rem; }
  .m9-st { gap: 8px; }
  .m9-foot { height: 100px; }
  .m9-foot__l { padding: 0 16px; }
  .m9-batch .m9-fbtn--x { display: none; }
  .m9-batch { justify-content: space-between; }
  .m9-done { align-items: flex-start; }
  .m9-pv { inset: 112px 10px auto auto; width: min(28rem, calc(100% - 20px)); padding: 18px; gap: 8px; }
  .m9-pv__go { margin-top: 8px; }
  .m9-pv__k { display: none; }
  .m9-pv__l { gap: 8px; }
  .m9-pv__l li { padding: 8px 12px; }
  .m9-pv__h { font-size: 1.25rem; }
}
@container m9 (max-width: 22rem) {
  .m9-t td.m9-t__st { padding-left: 0 !important; }
  .m9-g { display: none; }
  /* 320-360 px: the status and the progress no longer fit side by side ("Needs attention" + "6/8 · day 18") */
  .m9-t td.m9-t__test { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
}
/* narrow phones: four step labels ("Esikatselu", "Companies") do not fit in one row */
@container m9 (max-width: 25rem) {
  .m9-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
}
/* the wide table in a narrow container (landscape phones, small tablets): no house icon, the next step may wrap */
@container m9 (min-width: 48rem) and (max-width: 56rem) {
  .m9-g { display: none; }
  .m9-t__name { min-width: 12rem; }
  .m9-next { white-space: normal; }
}

/* ------------------------------------------------------------------------------------------------ how it works (#salkku) */
.m9-how__grid { display: grid; gap: 32px; }
.m9-how__head { display: flex; flex-direction: column; gap: 20px; max-width: 46rem; }
.m9-how__list { counter-reset: m9; margin: 0; padding: 0; list-style: none; }
.m9-how__list li { counter-increment: m9; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 24px 0; border-top: 1px solid var(--color-border-subtle); }
.m9-how__list li:first-child { border-top: 0; padding-top: 0; }
.m9-how__list li::before {
  content: counter(m9); grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-wdth);
  font-size: 1.5rem; line-height: 1.2; color: var(--color-action);
}
.m9-how__t { font-family: var(--font-display); font-weight: 700; font-size: var(--v9-fs-h3); line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; }
.m9-how__list p { margin-top: 8px; color: var(--color-text-2); max-width: 36em; text-wrap: pretty; }
.m9-how__all { margin-top: 8px; margin-left: 52px; }
.m9-how__clip { --cl9-r: 20px; }
@media (min-width: 64rem) {
  .m9-how__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); row-gap: 56px; }
  .m9-how__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--v9-hd) + 32px); }
  .m9-how__body { grid-column: 7 / -1; }
  .m9-how--clip .m9-how__head { grid-column: 1 / span 8; position: static; }
  .m9-how--clip .m9-how__clip { grid-column: 1 / span 7; align-self: start; position: sticky; top: calc(var(--v9-hd) + 32px); }
  .m9-how--clip .m9-how__body { grid-column: 8 / -1; padding-left: 24px; }
}

/* ------------------------------------------------------------------------------------------------ import (#tuonti) */
.m9-imp__sheet { display: grid; gap: 32px; padding: 28px 20px; }
.m9-imp__main { display: flex; flex-direction: column; gap: 20px; }
.m9-imp__p { color: var(--color-text-2); max-width: 36em; }
.m9-imp__p strong { color: var(--color-text); font-weight: 600; }
.m9-imp__side { display: flex; flex-direction: column; gap: 20px; }
.m9-imp__joel { display: flex; align-items: center; gap: 16px; font-weight: 600; }
.m9-imp__joel img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--color-surface-sunken); }
.m9-imp__self { font-size: var(--v9-fs-small); line-height: 1.55; color: var(--color-text-2); }
.m9-addr { font-size: var(--v9-fs-small); line-height: 1.5; color: var(--color-text-2); }
.m9-addr .v9-a { font-weight: 600; }
.m9-imp__side .m9-addr { margin-top: -8px; }
@media (min-width: 48rem) { .m9-imp__sheet { padding: 48px; } }
@media (min-width: 64rem) {
  .m9-imp__sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); padding: 64px; align-items: center; }
  .m9-imp__main { grid-column: 1 / span 7; }
  .m9-imp__side { grid-column: 9 / -1; }
}

/* ------------------------------------------------------------------------------------------------ price (#hinnat) */
.m9-pr__grid { display: grid; gap: 32px; }
.m9-pr__grid > * { min-width: 0; }
.m9-pr__head { display: flex; flex-direction: column; gap: 20px; }
.m9-pr__terms { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-width: 34em; }
.m9-pr__terms li { position: relative; padding-left: 30px; color: var(--color-text-2); }
.m9-pr__terms li::before {
  content: ""; position: absolute; left: 3px; top: .45em; width: 7px; height: 12px;
  border-right: 2.5px solid var(--color-action); border-bottom: 2.5px solid var(--color-action); transform: rotate(45deg);
}
.m9-pr__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
.m9-pr__sheet { padding: 8px 20px; }
.m9-pt { width: 100%; border-collapse: collapse; }
.m9-pt th, .m9-pt td { padding: 18px 8px; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--color-border-subtle); }
.m9-pt tbody tr:last-child > * { border-bottom: 0; }
.m9-pt thead th { padding-top: 16px; padding-bottom: 12px; font-size: var(--v9-fs-small); font-weight: 600; color: var(--color-text-2); }
.m9-pt__r { text-align: right !important; }
.m9-pt__n, .m9-pt__big, .m9-sheet__title, .m9-how__list li::before { font-variant-numeric: proportional-nums lining-nums; }
.m9-pt__n { font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-wdth); font-size: 1.75rem; line-height: 1.1; }
.m9-pt__plan { font-weight: 600; }
.m9-pt__big { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; white-space: nowrap; }
.m9-pt__f { display: block; margin-top: 4px; font-size: var(--v9-fs-small); color: var(--color-text-2); white-space: nowrap; }
.m9-pt__per { color: var(--color-text-2); white-space: nowrap; }
@media (max-width: 29.99rem) {
  .m9-pt th, .m9-pt td { padding-left: 4px; padding-right: 4px; }
  .m9-pt thead th:nth-child(2), .m9-pt tbody td.m9-pt__plan { display: none; }
  .m9-pr__sheet { padding: 4px 12px; }
  .m9-pt__f { white-space: normal; }
}
/* 320 px: the table no longer fits with the formula line; the rule itself is printed in the hero above */
@media (max-width: 22.49rem) {
  .m9-pt__f { display: none; }
  .m9-pr__sheet { padding: 4px 8px; }
}
@media (min-width: 48rem) { .m9-pr__sheet { padding: 16px 40px; } .m9-pt__big { font-size: 1.75rem; } }
.m9-pr__aside { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 64rem) {
  .m9-pr__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--v9-gap); row-gap: 32px; align-items: start; }
  .m9-pr__head { grid-column: 1 / span 5; grid-row: 1; }
  .m9-pr__aside { grid-column: 1 / span 5; grid-row: 2; }
  .m9-pr__sheet { grid-column: 7 / -1; grid-row: 1 / span 2; }
}

/* ------------------------------------------------------------------------------------------------ terms sheet (#tiedot) */
.m9-tv__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 24px; }
.m9-tv__head .v9-head { margin-bottom: 32px; }
.m9-tv__print { margin-bottom: 32px; }
html:not(.js) .m9-tv__print { display: none; }
.m9-tv__sheet { overflow: hidden; }
.m9-tv__bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; padding: 24px 20px;
  border-bottom: 1px solid var(--color-border-subtle); background: var(--color-canvas);
}
.m9-tv__title { font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-wdth); font-size: 1.375rem; line-height: 1.2; margin-right: auto; }
.m9-tv__co, .m9-tv__date { font-size: var(--v9-fs-small); color: var(--color-text-2); }
.m9-tv__body { padding: 8px 20px 0; }
.m9-tv__grp { padding: 24px 0; border-bottom: 1px solid var(--color-border-subtle); break-inside: avoid; }
.m9-tv__h { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
.m9-tv__src { margin-top: 4px; font-size: var(--v9-fs-small); color: var(--color-text-muted); }
.m9-tv__dl { display: grid; gap: 14px; margin-top: 16px; }
.m9-tv__dl > div { display: grid; gap: 2px; }
.m9-tv__dl dt { font-weight: 600; color: var(--color-text); }
.m9-tv__dl dd { color: var(--color-text-2); text-wrap: pretty; }
.m9-tv__docs { padding: 20px; font-size: var(--v9-fs-small); color: var(--color-text-2); }
.m9-tv__more { display: none; }
/* phones: the sheet opens with its first parts and a button for the rest (JS only; without JS all of it shows) */
@media (max-width: 47.99rem) {
  html.js .m9-tv__sheet:not(.is-open) .m9-tv__body { position: relative; max-height: 52rem; overflow: hidden; }
  html.js .m9-tv__sheet:not(.is-open) .m9-tv__body::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9rem; pointer-events: none;
    background: linear-gradient(rgb(255 255 255 / 0), var(--color-surface) 85%);
  }
  html.js .m9-tv__sheet:not(.is-open) .m9-tv__more { display: block; padding: 4px 20px 4px; }
}
@media (min-width: 48rem) {
  .m9-tv__bar { padding: 28px 40px; }
  .m9-tv__body { padding: 8px 40px 0; }
  .m9-tv__dl > div { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 20px; }
  .m9-tv__docs { padding: 24px 40px 32px; }
}
@media (min-width: 64rem) {
  .m9-tv__body { columns: 2; column-gap: 64px; padding: 16px 56px 0; }
  .m9-tv__grp { display: inline-block; width: 100%; }
  .m9-tv__bar { padding: 28px 56px; }
  .m9-tv__docs { padding: 24px 56px 40px; }
  .m9-tv__dl > div { grid-template-columns: 10rem minmax(0, 1fr); }
}
/* 1024-1279: two columns leave the answers ~20 characters wide, so each term stacks its label over its answer */
@media (min-width: 64rem) and (max-width: 79.99rem) { .m9-tv__dl > div { grid-template-columns: minmax(0, 1fr); } }
/* print: only the sheet, in normal flow, two columns at 10 pt (two A4 pages = one sheet printed on both sides) */
@media print {
  @page { size: A4; margin: 12mm; }
  html.m9-print body > *:not(.v9-main), html.m9-print .v9-main > *:not(#tiedot),
  html.m9-print #tiedot .m9-tv__head, html.m9-print .m9-tv__more, html.m9-print .m9-tv__body::after { display: none !important; }
  html.m9-print body * { visibility: visible !important; }
  html.m9-print, html.m9-print body { background: #fff !important; }
  html.m9-print { font-size: 13.3px !important; }
  html.m9-print #tiedot { padding: 0 !important; margin: 0 !important; }
  html.m9-print .m9-tv__sheet { position: static !important; box-shadow: none; border-radius: 0; }
  html.m9-print .m9-tv__sheet * { font-size: 1rem !important; line-height: 1.35 !important; }
  html.m9-print .m9-tv__title, html.m9-print .m9-tv__h { font-size: 1.25rem !important; }
  html.m9-print .m9-tv__body { columns: 2; column-gap: 24px; padding: 6px 0 0 !important; max-height: none !important; overflow: visible !important; }
  html.m9-print .m9-tv__bar { padding: 8px 0 !important; }
  html.m9-print .m9-tv__docs { padding: 4px 0 0 !important; }
  html.m9-print .m9-tv__grp { padding: 8px 0 !important; }
  html.m9-print .m9-tv__dl { gap: 5px !important; margin-top: 6px !important; }
  html.m9-print .m9-tv__dl > div { break-inside: avoid; }
}

/* ------------------------------------------------------------------------------------------------ Joel (#kuka) */
.m9-jl__sheet { display: grid; gap: 28px; padding: 20px; }
.m9-jl__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface-sunken); }
.m9-jl__pic { max-width: 14rem; }
@media (min-width: 48rem) { .m9-jl__pic { max-width: 20rem; } }
.m9-jl__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.m9-jl__letter { color: var(--color-text-2); }
.m9-jl__sig { display: flex; flex-direction: column; }
.m9-jl__name { font-weight: 600; color: var(--color-text); }
.m9-jl__sig span + span { color: var(--color-text-2); font-size: var(--v9-fs-small); }
.m9-jl__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 16px 24px; width: 100%; padding-top: 20px; border-top: 1px solid var(--color-border-subtle); }
.m9-jl__facts dt { font-size: var(--v9-fs-small); color: var(--color-text-muted); }
.m9-jl__facts dd { margin-top: 2px; font-weight: 600; }
.m9-jl__facts dd .v9-a { font-weight: 600; }
@media (min-width: 48rem) { .m9-jl__sheet { padding: 40px; } }
@media (min-width: 64rem) {
  .m9-jl__sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); padding: 56px; align-items: start; }
  .m9-jl__pic { grid-column: 1 / span 4; max-width: none; }
  .m9-jl__text { grid-column: 6 / -1; }
}

/* ------------------------------------------------------------------------------------------------ FAQ (#kysymykset) */
.m9-faq__in { max-width: 47.5rem; }
.m9-faq__list { margin-top: 40px; border-bottom: 1px solid var(--color-border-subtle); }
.m9-q { border-top: 1px solid var(--color-border-subtle); }
.m9-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0;
  cursor: pointer; list-style: none; font-size: 1.1875rem; font-weight: 600; line-height: 1.4; color: var(--color-text); border-radius: 8px;
}
.m9-q summary::-webkit-details-marker { display: none; }
.m9-q__mk { position: relative; flex: none; width: 20px; height: 20px; }
.m9-q__mk::before, .m9-q__mk::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: var(--color-action);
  transition: transform var(--dur) var(--ease-out);
}
.m9-q__mk::after { transform: rotate(90deg); }
.m9-q[open] .m9-q__mk::after { transform: rotate(0deg); }
.m9-q__a { padding: 0 44px 24px 0; color: var(--color-text-2); }
.m9-q__a > * + * { margin-top: .75em; }
.m9-faq__more { margin-top: 20px; color: var(--color-text-2); }
.m9-faq__more + .m9-faq__more { margin-top: 8px; }

/* ------------------------------------------------------------------------------------------------ closing (#aloita) */
.m9-cl__sheet { display: grid; gap: 40px; padding: 28px 20px; overflow: hidden; }
.m9-cl__sheet > *, .m9-jl__sheet > *, .m9-imp__sheet > *, .m9-how__grid > * { min-width: 0; }
.m9-cl__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.m9-cl__street { display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.m9-cl__house { flex: 0 1 auto; min-width: 0; }
.m9-cl__house--kerrostalo { width: 34%; max-width: 8.5rem; }
.m9-cl__house--rivitalo { width: 42%; max-width: 10.5rem; }
.m9-cl__house--omakotitalot { width: 30%; max-width: 9rem; }
@media (max-width: 29.99rem) {
  .m9-cl__street { gap: 10px; }
  .m9-cl__house--kerrostalo { width: 30%; } .m9-cl__house--rivitalo { width: 38%; } .m9-cl__house--omakotitalot { width: 28%; }
}
@media (min-width: 48rem) { .m9-cl__sheet { padding: 48px; } }
@media (min-width: 64rem) {
  .m9-cl__sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); padding: 64px; align-items: end; }
  .m9-cl__text { grid-column: 1 / span 6; }
  .m9-cl__street { grid-column: 7 / -1; justify-content: flex-end; }
}

/* Phones and tablets (judge r3 #5, 2026-10-31): the Yhtiöt list comes before the long lead, so the first screen shows the product. */
@media (max-width:63.99rem){.m9-hero>.v9-wrap{display:flex;flex-direction:column}.m9-intro{display:contents}.m9-hero .m9-stage{order:2;margin-top:24px}.m9-intro__act{order:3;margin-top:24px}.m9-intro__sub{order:4;margin-top:24px}.m9-terms{order:5;margin-top:12px}}