/* =====================================================================================================================
   v9 hero "Talo täyttyy" (WP1, views/landing/v9/_hero.php, v9-spec.md §2.1). Prefix .h9 / .h9-*.
   Layout: < 768 one player card (switch, view, steps) between the H1 and the CTA; 768–1023 phone | building with the
   board's count above and the newest event below; ≥ 1024 the product is the hero: a two-line H1 that fills the width,
   then a stage as tall as the rest of the first screen (phone past its left edge | the building, big | the board),
   then one band (byline, terms, law line, manager door). The summary takes the phone's slot at the end.
   Motion: transform and opacity only; the window fill is talo.css (260 ms). Reduced motion: base.css kills it all.

   Scoped tokens (base.css :root carries the page tokens). Contrast, every pair used here:
     rim #1A2225 (non-text)            on-ok #FFFFFF on Kuusi #1F4D47 9.5 (window numbers)
     ink #1A2225 on white 16.2, on canvas #ECF0EE 14.1        text-2 #3B4549 on white 9.8, canvas 8.6
     muted #525D5A on white 6.8, canvas 6.0                   Kuusi #1F4D47 on white 9.5, on ok-bg #E5F0EA 8.4
     white on Kuusi 9.5 (phone buttons, active step)          attn-tx #844A00 on white 6.9
     track #DCE4E0 vs white 1.3 (decorative, progress fill Kuusi 9.5)
   ===================================================================================================================== */
.h9 {
  --h9-rim: #1A2225; --h9-rim-2: #0D1213; --h9-on-ok: #FFFFFF; --h9-ok-bg: #E5F0EA; --h9-track: #DCE4E0;
  --h9-shadow-phone: 0 0 0 1px rgb(13 18 19 / .55), 0 2px 4px rgb(26 34 37 / .16), 0 22px 44px -18px rgb(26 34 37 / .42), 0 48px 90px -40px rgb(26 34 37 / .40);
  --h9-shadow-doc: 0 0 0 1px rgb(26 34 37 / .07), 0 2px 4px rgb(26 34 37 / .06), 0 24px 48px -20px rgb(26 34 37 / .30);
  --h9-ease: cubic-bezier(.2, .8, .2, 1);
  --h9-pad: 16px; --h9-over: 48px;
  padding-top: 20px;
}

/* ------------------------------------------------------------------------------------------------ hero text */
.h9__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.h9__grid > * { min-width: 0; }
.h9__h1 {
  container-type: inline-size; color: var(--color-text);
  font-family: var(--font-display); font-weight: 800; font-stretch: 100%; letter-spacing: -.028em; line-height: .94;
  --fit: 10.4; --max: 40px;
}
.h9__h1 span { display: block; font-size: min(var(--max), calc(var(--fit) * 1cqi)); white-space: nowrap; }
html[lang="en"] .h9__h1 { --fit: 9.6; }
.h9__act { display: contents; }
.h9__sub { font-size: var(--v9-fs-body); line-height: 1.6; color: var(--color-text-2); max-width: 36em; text-wrap: pretty; }
.h9__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.h9__cta .h9-i { width: 20px; height: 20px; }
.h9__price { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--color-text); }
.h9__terms { font-size: var(--v9-fs-small); line-height: 1.55; color: var(--color-text-2); max-width: 40em; }
.h9__by { display: flex; align-items: center; gap: 14px; font-size: var(--v9-fs-small); line-height: 1.5; color: var(--color-text-2); }
.h9__by img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; background: var(--color-surface-sunken); }
.h9__note { font-size: var(--v9-fs-small); line-height: 1.5; color: var(--color-text-muted); }
.h9__law { font-size: var(--v9-fs-small); line-height: 1.55; color: var(--color-text-2); max-width: 46em; text-wrap: pretty; }
.h9__door { font-size: 17px; font-weight: 600; color: var(--color-link); }
.h9__door .v9-go { color: inherit; text-decoration: none; }
.h9__door .v9-go:hover { text-decoration: underline; text-underline-offset: 4px; }

/* phones: H1, the stage card, then CTA, price, terms, sub-line, byline, door, law line, note */
.h9__h1 { order: 1; }
.h9-stage { order: 2; }
.h9__ctas { order: 3; margin-top: 4px; }
.h9__price { order: 4; margin-top: -8px; }
.h9__terms { order: 5; }
.h9__sub { order: 6; }
.h9__by { order: 7; }
.h9__door { order: 8; }
.h9__law { order: 9; }
.h9__note { order: 10; }
@media (max-width: 29.99rem) { .h9__ctas .v9-btn { flex: 1 1 100%; } }

/* ------------------------------------------------------------------------------------------------ stage: the sheet */
.h9-stage { position: relative; min-width: 0; }
.h9-sheet {
  position: relative; display: grid; min-width: 0;
  background: var(--color-surface); border-radius: var(--radius-sheet); box-shadow: var(--shadow-card);
  padding: 14px var(--h9-pad) 6px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sw" "view" "a" "b" "c" "st";
  grid-template-rows: auto auto auto auto auto auto;
}
.h9-sw { grid-area: sw; }
.h9-view { grid-area: view; }
.h9-slot { grid-area: a / 1 / c / 2; }
.h9-bd { grid-area: b; }
.h9-lg { display: contents; }
.h9-count { grid-area: a; }
.h9-log { grid-area: c; }
.h9-kicker, .h9-key, .h9-lg__h, .h9-lg__sub, .h9-steps__tag { display: none; }
.h9-steps { grid-area: st; }

/* the building-type switch: a sunken track, the chosen type a white key */
.h9-sw {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 3px; justify-self: center; max-width: 100%;
  border-radius: 14px; background: var(--color-surface-sunken);
}
.h9-sw a {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
  border-radius: 11px; color: var(--color-text-2); font-size: 16px; font-weight: 500; line-height: 1.2; text-decoration: none;
  white-space: nowrap; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur) linear;
}
.h9-sw a:hover { color: var(--color-text); }
.h9-sw a:active { transform: scale(.97); }
.h9-sw a[aria-current] { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-raised), 0 0 0 1px rgb(26 34 37 / .06); }

/* the phone-width card names its view */
.h9-view { display: grid; margin: 14px 0 10px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--color-text-2); }
.h9-view span { grid-area: 1 / 1; opacity: .35; visibility: hidden; transition: opacity 120ms linear, visibility 0s linear 120ms; }
.h9-stage[data-view="phone"] .h9-view [data-v="phone"],
.h9-stage[data-view="board"] .h9-view [data-v="board"],
.h9-stage[data-view="sum"] .h9-view [data-v="sum"] { opacity: 1; visibility: visible; transition: opacity 180ms linear 130ms, visibility 0s linear 130ms; }

/* ------------------------------------------------------------------------------------------------ the phone */
.h9-slot { position: relative; display: grid; min-width: 0; }
.h9-slot > * { grid-area: 1 / 1; min-width: 0; }
.h9-ph { position: relative; display: block; }
.h9-ph__screen {
  position: relative; display: grid; overflow: hidden; border-radius: 18px; background: var(--color-canvas);
  box-shadow: inset 0 0 0 1px rgb(26 34 37 / .06);
}
.h9-ph__island { display: none; }
/* phone screens change in two steps, so two screens are never readable at once: the old screen fades to .35 and is
   hidden at 120 ms, then the next one comes in from .35 with a short 14 px move inside the screen's own clip */
.h9-scr {
  grid-area: 1 / 1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px;
  background: var(--color-canvas); visibility: hidden; opacity: .35; transform: translateX(14px);
  transition: opacity 110ms linear, transform 0s linear 120ms, visibility 0s linear 120ms;
}
.h9-ph[data-screen="mail"] .h9-scr--mail, .h9-ph[data-screen="test"] .h9-scr--test,
.h9-ph[data-screen="done"] .h9-scr--done, .h9-ph[data-screen="inbox"] .h9-scr--inbox {
  z-index: 2; visibility: visible; opacity: 1; transform: none;
  transition: opacity 200ms linear 130ms, transform 280ms var(--h9-ease) 130ms, visibility 0s linear 130ms;
}
.h9-scr--mail, .h9-scr--inbox { background: var(--color-surface); }
.h9-i { width: 20px; height: 20px; flex: none; }

/* mail */
.h9-ml__bar { display: flex; align-items: center; gap: 4px; margin: 0 0 4px -6px; font-size: 16px; font-weight: 600; color: var(--color-link); }
.h9-ml__bar .h9-i { width: 22px; height: 22px; }
.h9-ml__from { display: flex; align-items: center; gap: 10px; min-width: 0; }
.h9-ml__av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--color-action); }
.h9-ml__av svg { width: 22px; height: 20px; }
.h9-ml__who { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.h9-ml__date { margin-left: auto; font-size: 16px; line-height: 1.3; color: var(--color-text-muted); white-space: nowrap; }
.h9-ml__subj { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.22; letter-spacing: -.01em; color: var(--color-text); margin-top: 4px; }
.h9-ml__p { font-size: 16px; line-height: 1.45; color: var(--color-text-2); }
.h9-ml__p--m { color: var(--color-text-muted); }

/* the two buttons the resident presses: real buttons, so the visitor can press them too */
.h9-ph__btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 4px; padding: 8px 14px;
  border: 0; border-radius: 12px; background: var(--color-action); color: var(--color-on-action); box-shadow: var(--shadow-button);
  font-size: 16px; font-weight: 600; line-height: 1.25; text-align: center;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) linear;
}
.h9-ph__btn:hover { background: var(--color-action-hover); }
.h9-ph__btn:active, .h9-ph__btn.is-press { transform: scale(.97); background: var(--color-action-active); }

/* portal: the test page, one detector at a time */
.h9-pt__brand { display: block; width: 78px; height: auto; margin-bottom: 2px; }
.h9-pt__h { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.12; letter-spacing: -.015em; color: var(--color-text); }
.h9-pt__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; line-height: 1.35; color: var(--color-text-2); }
.h9-pt__done { color: var(--color-text-muted); white-space: nowrap; }
.h9-dets { display: grid; }
.h9-det {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px;
  background: var(--color-surface); box-shadow: 0 0 0 1px rgb(26 34 37 / .06), 0 1px 2px rgb(26 34 37 / .06), 0 6px 14px -8px rgb(26 34 37 / .18);
  opacity: .35; visibility: hidden; transform: translateX(24px);
  transition: opacity 120ms linear, transform 120ms linear, visibility 0s linear 120ms;
}
/* the next detector comes in after the last has gone (no double exposure) */
.h9-ph[data-screen="test"][data-card="1"] .h9-det[data-i="1"],
.h9-ph[data-screen="test"][data-card="2"] .h9-det[data-i="2"], .h9-ph[data-screen="test"][data-card="3"] .h9-det[data-i="3"] {
  opacity: 1; visibility: visible; transform: none; transition: opacity 180ms linear 130ms, transform 260ms var(--h9-ease) 130ms, visibility 0s linear 130ms;
}
.h9-ph[data-card="2"] .h9-det[data-i="1"], .h9-ph[data-card="3"] .h9-det[data-i="1"], .h9-ph[data-card="3"] .h9-det[data-i="2"] { transform: translateX(-24px); }
/* the first detector arrives with its screen, not after it */
.h9-ph[data-screen="test"][data-ans="0"] .h9-det[data-i="1"] { transition: visibility 0s linear 130ms; }
.h9-det__lg { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.h9-det__lg .h9-i { width: 22px; height: 22px; color: var(--color-text-muted); }
.h9-ch {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px; margin: 0;
  border: 0; border-radius: 12px; background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-border-control);
  font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--color-text); text-align: left;
  transition: background-color 160ms linear, box-shadow 160ms linear, transform var(--dur-press) var(--ease-out);
}
button.h9-ch:active { transform: scale(.98); }
.h9-ch__r { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-border-control); background: var(--color-surface); }
.h9-ch__r::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-action); transform: scale(0); transition: transform 180ms var(--h9-ease); }
.h9-ph[data-ans="1"] .h9-det[data-i="1"] .h9-ch--pass,
.h9-ph[data-ans="2"] .h9-det:is([data-i="1"], [data-i="2"]) .h9-ch--pass,
.h9-ph[data-ans="3"] .h9-det .h9-ch--pass { background: var(--h9-ok-bg); box-shadow: inset 0 0 0 2px var(--color-action); }
.h9-ph[data-ans="1"] .h9-det[data-i="1"] .h9-ch--pass .h9-ch__r,
.h9-ph[data-ans="2"] .h9-det:is([data-i="1"], [data-i="2"]) .h9-ch--pass .h9-ch__r,
.h9-ph[data-ans="3"] .h9-det .h9-ch--pass .h9-ch__r { box-shadow: inset 0 0 0 2px var(--color-action); }
.h9-ph[data-ans="1"] .h9-det[data-i="1"] .h9-ch--pass .h9-ch__r::after,
.h9-ph[data-ans="2"] .h9-det:is([data-i="1"], [data-i="2"]) .h9-ch--pass .h9-ch__r::after,
.h9-ph[data-ans="3"] .h9-det .h9-ch--pass .h9-ch__r::after { transform: none; }
.h9-ph__save { margin-top: auto; }
.h9-ph[data-ans="0"] .h9-ph__save { background: var(--color-surface-sunken); color: var(--color-text-2); box-shadow: inset 0 0 0 1.5px var(--color-border-control); }

/* done */
.h9-dn__ok { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 6px; border-radius: 50%; background: var(--color-action); color: var(--color-on-action); }
.h9-dn__ok .h9-i { width: 24px; height: 24px; }
.h9-dn__banner { padding: 10px 12px; border-radius: 12px; background: var(--h9-ok-bg); color: var(--color-action); font-size: 16px; font-weight: 600; line-height: 1.4; }
.h9-dn__p { font-size: 16px; line-height: 1.45; color: var(--color-text-2); }
.h9-dn__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.35; color: var(--color-text-2); }
.h9-dn__list li { display: flex; align-items: flex-start; gap: 8px; }
.h9-dn__list .h9-i { width: 20px; height: 20px; margin-top: 1px; color: var(--color-action); }
.h9-dn__list b { font-weight: 600; color: var(--color-text); }

/* inbox (beat 3): the same request again, the newer one unread */
.h9-ib__h { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--color-text); margin-bottom: 4px; }
.h9-ib { display: grid; margin: 0 -16px; padding: 0; list-style: none; }
.h9-ib__row { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; }
.h9-ib__row + .h9-ib__row { box-shadow: inset 0 1px 0 var(--color-border-subtle); }
.h9-ib__row.is-new { background: var(--h9-ok-bg); }
.h9-ib__txt { display: grid; gap: 2px; min-width: 0; }
.h9-ib__top { display: flex; align-items: baseline; gap: 8px; }
.h9-ib__subj { font-size: 16px; line-height: 1.35; color: var(--color-text); }
.h9-ib__row.is-new .h9-ib__subj, .h9-ib__row.is-new .h9-ml__date { font-weight: 600; color: var(--color-text); }
.h9-ib__pre { font-size: 16px; line-height: 1.4; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h9-ib__row:not(.is-new) .h9-ib__subj { color: var(--color-text-2); }

/* ------------------------------------------------------------------------------------------------ the summary */
.h9-sum {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px;
  background: var(--color-surface); box-shadow: inset 0 0 0 1px rgb(26 34 37 / .08);
}
.h9-sum__ref { font-size: 16px; line-height: 1.35; color: var(--color-text-muted); }
.h9-sum__h { font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; color: var(--color-text); }
.h9-sum__big { margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.12; letter-spacing: -.015em; color: var(--color-action); }
.h9-sum__det { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--color-text); }
.h9-sum__un { padding-top: 12px; box-shadow: inset 0 1px 0 var(--color-border-subtle); font-size: 16px; line-height: 1.5; color: var(--color-text-2); }
.h9-sum__saved { display: flex; gap: 10px; align-items: flex-start; margin-top: auto; padding: 12px; border-radius: 12px; background: var(--color-surface-sunken); font-size: 16px; line-height: 1.45; color: var(--color-text); }
.h9-sum__saved .h9-i { width: 20px; height: 20px; margin-top: 2px; color: var(--color-action); }

/* phone leaves, summary arrives (data-off / data-sum on the stage) */
.h9-ph { transition: opacity 220ms var(--h9-ease), transform 220ms var(--h9-ease), visibility 0s; }
.h9-stage[data-off="1"] .h9-ph { opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity 220ms var(--h9-ease), transform 220ms var(--h9-ease), visibility 0s linear 220ms; }
.h9-sum { opacity: .35; visibility: hidden; transform: translateY(24px); transition: opacity 360ms var(--h9-ease), transform 360ms var(--h9-ease), visibility 0s linear 360ms; }
.h9-stage[data-sum="1"] .h9-sum { opacity: 1; visibility: visible; transform: none; transition: opacity 360ms var(--h9-ease), transform 360ms var(--h9-ease), visibility 0s; }

/* ------------------------------------------------------------------------------------------------ building and board */
.h9-bd { min-width: 0; }
.h9-bd__talo { min-width: 0; }
.h9 .tl9 { --tl9-min: 0px; }
/* kerrostalo: the number sits inside its window, so six floors stay low enough for the stage */
.h9 .tl9--kerrostalo { --gy: 9px; --door-h: 30px; --pad: 16px; }
.h9 .tl9--kerrostalo .tl9-u { gap: 0; }
.h9 .tl9--kerrostalo .tl9-u__no {
  position: absolute; z-index: 1; top: 0; left: 0; width: var(--uw); height: var(--uh);
  display: grid; place-items: center; pointer-events: none;
}
/* the number stays above the fill and turns white exactly where the Kuusi layer has reached: its colour is a two-tone
   image (ink above, white below) clipped to the glyphs, moved with the same 260 ms curve as the fill, so no frame shows
   a grey or half-hidden number */
.h9 .tl9--kerrostalo .tl9-u__no {
  --lc: var(--tl9-ink);
  color: var(--lc);
  background: linear-gradient(to bottom, var(--lc) 50%, var(--h9-on-ok) 50%) 0 0 / 100% 200% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: background-position 260ms var(--tl9-ease);
}
.h9 .tl9--kerrostalo .tl9-u[data-s="unreached"] .tl9-u__no { --lc: var(--tl9-attn-tx); }
.h9 .tl9--kerrostalo .tl9-u[data-s="ok"] .tl9-u__no { color: var(--h9-on-ok); background-position: 0 100%; }
.h9 .tl9--kerrostalo .tl9-u[data-s="part"] .tl9-u__no { background-position: 0 50%; }
.h9 .tl9--instant .tl9-u__no, html.rm .h9 .tl9-u__no { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .h9 .tl9--kerrostalo .tl9-u__no { transition: none; } }
@media (forced-colors: active) { .h9 .tl9--kerrostalo .tl9-u__no { background: none; -webkit-text-fill-color: currentColor; } }
.h9 .tl9--rivitalo { --gx: 14px; }

.h9-kicker { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--color-text-2); }
.h9-count { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0; line-height: 1; color: var(--color-text); }
.h9-count__n { font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -.03em; }
.h9-count__w { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.h9-key {
  --tl9-ok: var(--color-action); --tl9-wait: var(--status-wait-line); --tl9-attn: var(--status-attn-line);
  flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.3; color: var(--color-text-2);
}
.h9-key li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.h9-key b { font-weight: 600; color: var(--color-text); }
.h9-lg__h { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--color-text); }

/* log: newest first; with JS the rows are placed by transform (no layout shift), newest 18 px 600 */
.h9-log { --h9-logn: 1; position: relative; display: grid; row-gap: 14px; margin: 0; padding: 0; list-style: none; }
.h9-log__row { display: block; font-size: 16px; line-height: 1.45; color: var(--color-text-2); }
.h9-log__d { display: block; font-weight: 600; color: var(--color-text-muted); }
.h9-log__row.is-new .h9-log__t { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--color-text); }
/* with JS the list is a fixed-height box that clips: rows pushed past the last shown one slide out under its bottom
   edge, rows still to come wait at the top, hidden; nothing ever lays out or reads outside the box */
.h9-js .h9-log { display: grid; overflow: hidden; overflow: clip; }
.h9-js .h9-log__row {
  position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden;
  transition: transform 380ms var(--h9-ease), opacity 180ms linear, visibility 0s linear 380ms;
}
/* a row that arrives waits until the others have moved down (no frame where it sits on top of another row) */
.h9-js .h9-log__row.is-on { opacity: 1; visibility: visible; transition: transform 380ms var(--h9-ease), opacity 220ms linear 200ms, visibility 0s linear 200ms; }
.h9-js .h9-log.h9-measure .h9-log__row { position: static; visibility: hidden; }
.h9-js .h9-log.h9-inst .h9-log__row { transition: none; }
.h9-js .h9-log.h9-measure { height: auto !important; align-content: start; }

/* ------------------------------------------------------------------------------------------------ steps + pause */
.h9-steps { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; }
.h9-steps__list { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.h9-step {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 52px; padding: 12px 2px 6px;
  border-radius: 8px; color: var(--color-text-2); text-decoration: none; font-size: 16px; line-height: 1.25;
}
.h9-step__bar { position: absolute; top: 4px; left: 2px; right: 2px; height: 3px; overflow: hidden; border-radius: 2px; background: var(--h9-track); }
.h9-step__bar i { display: block; height: 100%; background: var(--color-action); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.h9-step__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h9-step__date { color: var(--color-text-muted); white-space: nowrap; }
.h9-step[aria-current] .h9-step__name { color: var(--color-text); }
.h9-step:hover .h9-step__name { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.h9-pp { flex: none; }
.h9-pp [data-i] { display: none; }
.h9-pp[data-state="playing"] [data-i="pause"], .h9-pp[data-state="paused"] [data-i="play"], .h9-pp[data-state="ended"] [data-i="replay"] { display: grid; }
@media (max-width: 47.99rem) {
  .h9-step__date { display: none; }
  .h9-stage[data-view] .h9-step { min-height: 44px; }
}

/* ------------------------------------------------------------------------------------------------ phones: one card */
@media (max-width: 47.99rem) {
  .h9 .tl9--xl { --uw0: 66px; --uhr: .38; --gx: 10px; --gy: 7px; --pad: 12px; --roof: 10px; --wr: 10px;
    --door-w: 34px; --door-h: 26px; --door-fs: 16px; --mk: 22px; --rdoor-h: 24px; --rdoor-w: 18px; }
  .h9 .tl9__tag { display: none; }
  .h9-count { justify-content: center; margin-bottom: 14px; }
  .h9-count__n { font-size: 44px; }
  .h9-count__w { font-size: 18px; }
  .h9-log { margin-top: 14px; }
  .h9-log__row { text-align: center; }
  .h9-log__d { display: inline; }
  .h9-log__row.is-new .h9-log__t { font-size: 17px; }
  /* views: phone, board, summary share one cell; the stage's data-view picks one (no JS: the summary) */
  .h9-slot, .h9-count, .h9-bd, .h9-log {
    opacity: .35; visibility: hidden; transition: opacity 120ms linear, visibility 0s linear 120ms;
  }
  .h9-stage[data-view="phone"] .h9-slot, .h9-stage[data-view="sum"] .h9-slot,
  .h9-stage[data-view="board"] :is(.h9-count, .h9-bd, .h9-log) {
    opacity: 1; visibility: visible; transition: opacity 180ms linear 130ms, visibility 0s linear 130ms;
  }
  .h9-sum { transform: none; }
  .h9-stage[data-off="1"] .h9-ph { transform: none; }
}

/* ------------------------------------------------------------------------------------------------ ≥ 768: phone | building */
@media (min-width: 48rem) {
  .h9 { --h9-pad: 32px; padding-top: 40px; }
  .h9__grid { row-gap: 24px; }
  .h9__h1 { --fit: 9.7; --max: 72px; font-stretch: var(--display-wdth); }
  html[lang="en"] .h9__h1 { --fit: 9.1; }
  .h9__h1, .h9__sub, .h9__ctas, .h9__price, .h9__terms, .h9__by, .h9-stage, .h9__note, .h9__law, .h9__door { order: 0; }
  .h9__act { display: flex; flex-direction: column; gap: 20px; }
  .h9__price { margin-top: -6px; }
  .h9__sub { font-size: var(--v9-fs-lead); line-height: 1.55; }
  .h9-stage { margin-top: calc(var(--h9-over) + 12px); }
  .h9-sheet {
    --h9-ptop: 28px; padding: var(--h9-ptop) var(--h9-pad) 22px; column-gap: 32px; row-gap: 18px;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas: "slot sw" "slot kick" "slot cnt" "slot key" "slot bd" "slot c" "st st";
    grid-template-rows: auto auto auto auto 1fr auto auto;
  }
  .h9-view { display: none; }
  .h9-sw { grid-area: sw; }
  .h9-kicker { display: flex; justify-content: center; grid-area: kick; text-align: center; }
  .h9-count { grid-area: cnt; justify-content: center; margin: -10px 0 10px; }
  .h9-log { grid-area: c; --h9-logn: 1; text-align: center; }
  .h9-key { display: flex; grid-area: key; justify-content: center; margin: -6px 0 12px; }
  .h9-log__row { text-align: center; }
  .h9-bd { grid-area: bd; align-self: center; }
  .h9-steps { grid-area: st; margin-top: 0; }

  /* the phone: 300 x 580, 10 px rim, rises 48 px above the sheet */
  .h9-slot { grid-area: slot; align-self: start; width: 300px; height: 580px; margin-top: calc(-1 * (var(--h9-ptop) + var(--h9-over))); display: block; }
  .h9-slot > * { position: absolute; top: 0; left: 0; width: 300px; }
  .h9-ph { height: 580px; padding: 10px; border-radius: 42px; background: var(--h9-rim); box-shadow: var(--h9-shadow-phone), inset 0 0 0 1.5px rgb(255 255 255 / .09); }
  .h9-ph::before, .h9-ph::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: var(--h9-rim-2); }
  .h9-ph::before { right: -3px; top: 150px; height: 70px; }
  .h9-ph::after { left: -3px; top: 118px; height: 44px; box-shadow: 0 58px 0 var(--h9-rim-2); }
  .h9-ph__screen { height: 100%; border-radius: 32px; box-shadow: none; }
  .h9-ph__island { display: block; position: absolute; z-index: 3; top: 11px; left: 50%; width: 86px; height: 25px; margin-left: -43px; border-radius: 13px; background: var(--h9-rim-2); }
  .h9-scr { padding: 48px 16px 16px; }
  .h9-sum { top: calc(var(--h9-ptop) + var(--h9-over)); min-height: 420px; padding: 26px 24px 22px; border-radius: 22px; box-shadow: var(--h9-shadow-doc); }
  .h9-sum__h { font-size: 26px; }
  .h9-sum__big { font-size: 28px; }

  .h9-step { padding-top: 14px; }
}

/* ------------------------------------------------------------------------------------------------ ≥ 1024: the product is the hero
   The H1 is two lines that fill the container ("Asukkaat testaavat palovaroittimet." / "Alarmi pitää kirjaa."). The
   stage starts right under the buttons and fills the rest of the first screen; terms, byline, law line and the
   manager door sit in one band under it. Every size comes from the container width: the grid is an inline-size
   container, --h9-hfs is the H1 size (line 1 fills the width), --h9-h the stage height (the screen minus what stands
   above it, 480–720 px) and --h9-bd the building's height inside the stage. */
@media (min-width: 64rem) {
  .h9 { padding-top: 24px; }
  .h9__grid {
    container-type: inline-size;
    --h9-fit: 5.5; --h9-hfs: min(96px, calc(var(--h9-fit) * 1cqi));
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); row-gap: 0;
  }
  html[lang="en"] .h9__grid { --h9-fit: 5.9; }
  .h9__h1 {
    grid-column: 1 / -1; grid-row: 1; align-self: start; container-type: normal;
    font-size: var(--h9-hfs); line-height: .94; letter-spacing: -.028em; white-space: nowrap;
  }
  .h9__h1 span { font-size: inherit; }
  .h9__h1 span:nth-child(-n+2) { display: inline; }

  /* the CTA row under the H1: trial, film, price */
  .h9__act { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 20px; }
  .h9__ctas { flex-wrap: nowrap; }
  .h9__price { margin: 0; font-size: 20px; }

  .h9-stage {
    grid-column: 1 / -1; grid-row: 3; margin-top: 24px;
    --h9-above: calc(var(--v9-hd) + 24px + 1.88 * var(--h9-hfs) + 20px + 56px + 24px + 12px);
    --h9-h: clamp(430px, calc(100vh - var(--h9-above)), 720px);
    --h9-h: clamp(430px, calc(100svh - var(--h9-above)), 720px);
  }

  /* the band under the stage: byline | terms + note | law line | manager door; the sub-line above it (1024–1279) */
  .h9__sub { grid-column: 1 / 9; grid-row: 4; margin-top: 32px; font-size: var(--v9-fs-body); line-height: 1.55; max-width: 44em; }
  .h9__by { grid-column: 1 / 4; grid-row: 5; align-self: start; margin-top: 28px; }
  .h9__terms { grid-column: 4 / 7; grid-row: 5; margin-top: 28px; max-width: none; }
  .h9__note { grid-column: 4 / 7; grid-row: 6; margin-top: 8px; }
  .h9__law { grid-column: 7 / 11; grid-row: 5 / 7; margin-top: 28px; max-width: none; }
  .h9__door { grid-column: 11 / -1; grid-row: 5; margin-top: 20px; justify-self: start; text-align: left; }
}
/* ≥ 1150 px of container (Finnish): the buttons and the price stand on the empty right of the H1's second line */
@container (min-width: 71.875rem) {
  html[lang="fi"] .h9__act {
    grid-row: 1; justify-self: end; align-self: start; flex-direction: column; align-items: flex-end; gap: 10px;
    margin-top: calc(var(--h9-hfs) * .94 + 4px);
  }
  html[lang="fi"] .h9-stage { margin-top: 22px; --h9-above: calc(var(--v9-hd) + 24px + .94 * var(--h9-hfs) + 4px + 98px + 22px + 12px); }
}

/* ------------------------------------------------------------------------------------------------ ≥ 1024: the stage
   phone (sticks out past the sheet's left edge) | the building, big | the board: count, legend, the current event.
   1024–1279: the type switch on top; ≥ 1280: the sub-line and the switch head the board column. */
@media (min-width: 64rem) {
  .h9 { --h9-pad: 28px; --h9-out: min(56px, calc(var(--v9-gut) - 8px)); }
  .h9-sheet {
    --h9-ptop: 24px; --h9-pbot: 18px;
    height: var(--h9-h); padding: var(--h9-ptop) var(--h9-pad) var(--h9-pbot);
    column-gap: 32px; row-gap: 16px;
    grid-template-areas: "slot sw sw" "slot bd cnt" "slot bd key" "slot bd c" "slot st st";
    grid-template-rows: auto auto auto 1fr auto;
    /* the building's box: the stage minus its padding, the switch row and the steps row */
    --h9-bd: calc(var(--h9-h) - var(--h9-ptop) - var(--h9-pbot) - 50px - 62px - 32px);
    /* the kerrostalo window width the height allows, and the building column fixed to that drawing, so the board
       column keeps its width when the type changes */
    --h9-kw: clamp(52px, calc((var(--h9-bd) - 139px) / 2.52), 100px);
    grid-template-columns: calc(300px - var(--h9-out)) calc(3 * var(--h9-kw) + 118px) minmax(0, 1fr);
  }
  .h9-sw { justify-self: start; }
  .h9-bd { grid-area: 2 / 2 / 5 / 3; align-self: center; }
  .h9-lg { display: contents; }
  .h9-kicker, .h9-lg__h { display: none; }
  .h9-count { grid-area: cnt; justify-content: flex-start; margin: 0; flex-direction: column; align-items: flex-start; row-gap: 4px; }
  .h9-count__n { font-size: 56px; }
  .h9-key { display: flex; grid-area: key; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; margin: 0; }
  .h9-log { grid-area: c; --h9-logn: 1; text-align: left; align-self: start; }
  .h9-log__row { text-align: left; }
  .h9-log__row.is-new .h9-log__t { font-size: 18px; }
  .h9-steps { grid-area: st; margin-top: 0; }
  .h9-steps__tag { display: block; flex: none; font-size: 16px; color: var(--color-text-muted); }

  /* the phone: 300 wide, as tall as the stage allows (484–580; its tallest screen needs 484), centred on the stage's
     height and standing out past its left edge */
  .h9-slot {
    grid-area: 1 / 1 / -1 / 2; align-self: center; margin: -60px 0 -60px calc(-1 * var(--h9-out)); /* the negative block margins keep the phone from stretching the rows */
    width: 300px; height: clamp(484px, calc(var(--h9-h) - 24px), 580px);
  }
  .h9-ph { height: 100%; }
  .h9-sum { top: 0; bottom: 0; height: fit-content; margin-block: auto; min-height: 0; }

  /* the building: windows sized by the height they have (100 x 42 at most), the number in the window */
  .h9 .tl9--xl { --lab: 20px; --lvl: 56px; --lvl-fs: 18px; --mk: 30px; }
  .h9 .tl9--kerrostalo { --gx: 16px; --gy: 10px; --pad: 16px; --roof: 14px; --door-w: 52px; --door-h: 34px; --door-fs: 20px;
    --uw0: var(--h9-kw); }
  .h9 .tl9--rivitalo { --uw0: clamp(48px, calc((var(--h9-bd) - 268px) / .85), 84px); --gx: 14px; }
  .h9 .tl9--omakotitalot { --hw0: clamp(64px, calc((var(--h9-bd) - 68px) / 2.3), 112px); }
  .h9 .tl9__tag { display: none; }
}

/* ------------------------------------------------------------------------------------------------ ≥ 1280: the sub-line heads the board
   column; the type switch joins the steps in one control row under the picture */
@media (min-width: 80rem) {
  .h9 { --h9-pad: 32px; }
  .h9-sheet {
    grid-template-areas: "slot bd sub" "slot bd cnt" "slot bd key" "slot bd c" "slot st st";
    grid-template-rows: auto auto auto 1fr auto;
    --h9-bd: calc(var(--h9-h) - var(--h9-ptop) - var(--h9-pbot) - 62px - 16px);
    grid-template-columns: calc(300px - var(--h9-out)) calc(3 * var(--h9-kw) + 174px) minmax(0, 1fr);
  }
  .h9-sw { grid-area: st; justify-self: end; align-self: center; }
  .h9-steps { margin-right: 352px; }
  html[lang="en"] .h9-steps { margin-right: 300px; }
  .h9-steps__tag { display: none; }
  .h9 .h9__sub { display: none; }
  .h9-lg__sub { display: block; grid-area: sub; margin-bottom: 4px; font-size: var(--v9-fs-body); line-height: 1.5; color: var(--color-text-2); text-wrap: pretty; }
  .h9-bd { grid-area: 1 / 2 / 5 / 3; }
  .h9-count { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 12px; margin-top: 4px; }
  .h9-count__n { font-size: 72px; }
  .h9-key { flex-direction: row; flex-wrap: wrap; gap: 6px 20px; }
  .h9-log__row.is-new .h9-log__t { font-size: 20px; line-height: 1.35; }
}
/* tall screens (the stage near its 720 px): the number goes under its window, as the app draws it */
@media (min-width: 80rem) and (min-height: 61rem) {
  .h9-sheet { --h9-kw: clamp(52px, calc((var(--h9-bd) - 295px) / 2.52), 100px); }
  .h9 .tl9--kerrostalo .tl9-u { gap: 6px; }
  .h9 .tl9--kerrostalo .tl9-u__no {
    position: static; width: auto; height: auto; display: block; background: none;
    -webkit-text-fill-color: currentColor; color: var(--tl9-ink);
  }
  .h9 .tl9--kerrostalo .tl9-u[data-s="ok"] .tl9-u__no { color: var(--tl9-ink); }
  .h9 .tl9--kerrostalo .tl9-u[data-s="unreached"] .tl9-u__no { color: var(--tl9-attn-tx); }
}

/* jumps (first frame, a step, a type switch): no transitions at all */
.h9-inst, .h9-inst * { transition: none !important; }

/* the type switch crossfade: out to .35 in 120 ms, in from .35 in 180 ms */
.h9-sheet [data-part] { transition-property: opacity; }
.h9-stage.h9-swap-out :is(.h9-slot, .h9-bd, .h9-lg > *) { opacity: .35 !important; transition: opacity 120ms linear !important; }
.h9-stage.h9-swap-in :is(.h9-slot, .h9-bd, .h9-lg > *) { animation: h9-in 180ms linear; }
@keyframes h9-in { from { opacity: .35; } }
html.rm .h9-stage :is(.h9-slot, .h9-bd, .h9-lg > *) { animation: none !important; }

/* the tag under the drawing: plain words next to the ringed window, no chip */
.h9 .tl9__tag { min-height: 28px; margin-top: 10px; }
.h9 .tl9__tagt { min-height: 28px; padding: 0; border-radius: 0; background: none; color: var(--color-text); font-size: 17px; font-weight: 600; }

/* hidden layers keep their children hidden too (a child's own visibility: visible would show through) */
.h9-stage[data-off="1"] .h9-ph .h9-scr { visibility: hidden; transition: visibility 0s linear 220ms; }
@media (max-width: 47.99rem) {
  .h9-stage[data-view="board"] .h9-slot .h9-scr,
  .h9-stage:not([data-view="board"]) .h9-bd :is(.tl9-u__m, .tl9__tagt),
  .h9-stage:not([data-view="board"]) .h9-log .h9-log__row { visibility: hidden; transition: visibility 0s linear 120ms; }
  /* steps: four bars like a progress line, each a 44 px target; names stay for screen readers */
  .h9-steps__list { gap: 4px; }
  .h9-step { min-height: 44px; padding: 0; justify-content: center; }
  .h9-step__bar { position: static; height: 4px; }
  .h9-step__name, .h9-step__date {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .h9-sw a { padding: 0 8px; }
  .h9-sw { gap: 0; padding: 3px; }
  .h9-scr { padding: 14px; gap: 8px; }
}
@media (max-width: 47.99rem) {
  .h9 { padding-top: 16px; }
  .h9__grid { row-gap: 16px; }
  .h9__ctas { margin-top: 0; }
  .h9-view { margin: 10px 0 8px; }
  .h9-sum { gap: 8px; padding: 16px; }
  .h9-sum__h { font-size: 22px; }
  .h9-sum__big { margin-top: 2px; font-size: 24px; }
  .h9-sum__det { font-size: 17px; }
  .h9-sum__un { padding-top: 10px; }
  .h9-sum__saved { padding: 10px 12px; }
}
@media (max-width: 23.74rem) {
  .h9-sheet { --h9-pad: 12px; }
  .h9-sw a { padding: 0 6px; }
}
.h9-dn__close { margin-top: auto; font-size: 16px; line-height: 1.45; color: var(--color-text-muted); }
/* without JS the log shows only its newest row, as with JS */
.h9-stage:not(.h9-js) .h9-log__row:not(.is-new) { display: none; }

/* ------------------------------------------------------------------------------------------------ review fixes (2026-10-31) */
/* the phone-width card says it is an illustration, on the view row (no extra height) */
.h9-view::after { content: attr(data-tag); grid-area: 1 / 1; justify-self: end; font-weight: 500; color: var(--color-text-muted); }
/* the envelope keeps its icon while it leaves (talo.css sets the icon only while a mark is on, so the mask fell to an ink square) */
.h9 .tl9-u__m { --tl9-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M4 7.5l8 6 8-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* the phone's other answers are links to the page's own answers */
a.h9-ch { text-decoration: none; }
a.h9-ch:hover { box-shadow: inset 0 0 0 1.5px var(--color-text-2); }
a.h9-ch:active { transform: scale(.98); }
/* log rows that come next wait at .35, so an entering row never starts from 0 */
.h9-js .h9-log__row.is-next { opacity: .35; }
/* phones: the H1 fills its column (38 px at 390) */
@media (max-width: 47.99rem) { .h9__h1 { letter-spacing: -.04em; --fit: 10.62; } }
/* 768–1023: the legend's three counts as a short list, never a wrapped orphan */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .h9-key { display: grid; justify-content: center; row-gap: 4px; }
}
/* landscape phones: the H1 leaves room for the CTA and the stage */
@media (min-width: 48rem) and (max-height: 31rem) {
  .h9 { padding-top: 16px; }
  .h9__grid { row-gap: 14px; }
  .h9__h1 { --max: 44px; }
  .h9__act { gap: 14px; }
  .h9__sub { font-size: var(--v9-fs-body); }
}
/* numbers in Mona Sans: base.css sets tabular figures, which in Mona Sans draw a slashed 0 and a footed 1; the hero's
   display numbers use the plain figures the rest of the site shows */
.h9-count__n, .h9-sum__big, .h9-sum__h, .h9-sum__ref, .h9-ml__subj, .h9-pt__h, .h9-ib__h, .h9__h1 { font-variant-numeric: proportional-nums lining-nums; font-feature-settings: "zero" 0; }
/* the kicker, sub-line and price sit in display: contents wrappers on some widths; their text has its own box, so it
   is measured against itself (layout is unchanged: one flex item that wraps like the paragraph did) */
.h9__sub, .h9__price { display: flex; justify-content: flex-start; }
.h9-kicker > span, .h9__sub > span, .h9__price > span { min-width: 0; }
@media (min-width: 80rem) { .h9-kicker { justify-content: flex-start; } }

/* ≥ 1280 on short screens (laptops at 768–832 px): the board column tightens so it never pushes the steps out of
   the stage; the count stays the biggest thing in it */
@media (min-width: 80rem) and (max-height: 52rem) {
  .h9-sheet { row-gap: 12px; --h9-bd: calc(var(--h9-h) - var(--h9-ptop) - var(--h9-pbot) - 62px - 12px); }
  .h9-count__n { font-size: 60px; }
  .h9-log__d { display: inline; margin-right: 8px; }
  .h9-log__row.is-new .h9-log__t { font-size: 19px; }
}
/* 1024–1279: a little less air above the stage, the price beside the buttons */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .h9 { padding-top: 16px; }
  .h9__act { margin-top: 16px; gap: 12px 24px; }
  .h9__price { font-size: 18px; }
  .h9-stage { margin-top: 20px; --h9-above: calc(var(--v9-hd) + 16px + 1.88 * var(--h9-hfs) + 16px + 56px + 20px + 12px); }
}

/* 1024–1279: the board column needs the width more than the floor labels do */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .h9-sheet { column-gap: 24px; }
  .h9 .tl9--floors { --lvl: 0px; }
  .h9 .tl9--floors .tl9__lvl { display: none; }
  .h9 .tl9--floors .tl9__floor { justify-content: center; }
  .h9 .tl9--floors .tl9__plinth { padding-left: 0; }
  .h9-key { gap: 4px; }
  .h9-log__row.is-new .h9-log__t { font-size: 17px; }
}
/* ≥ 1280 on the shortest laptops (720 px): the sub-line steps out of the stage to the band under it */
@media (min-width: 80rem) and (max-height: 46rem) {
  .h9 .h9__sub { display: flex; }
  .h9-lg__sub { display: none; }
}