/* =====================================================================================================================
   v9 trust and conversion (WP4): summary .y9, managers .m9, the reused v8 pricer #hinnat (fit only), founder .j9,
   FAQ .q9, closing .c9. Tokens only from base.css :root; read views/landing/v9/README.md.
   Contrast (WCAG 2.x) of the pairs added here:
     white on Kuusi #1F4D47 (markers, filled homes) 9.5        amber #844A00 on white (not-reached text) 6.9
     amber ring #B87516 on white 3.1 (non-text, ≥ 3)          wait ring #6B7773 on white 4.6 (non-text)
     text-2 #3B4549 on white 9.8, on page 8.6                 muted #525D5A on white 6.8 (labels in the document)
   Motion: press feedback (base.css) and the FAQ chevron turn only. Nothing enters on scroll.
   ===================================================================================================================== */

/* ------------------------------------------------------------------------------------------------ markers 1-3 */
.y9__mk {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-action); color: var(--color-on-action); box-shadow: 0 0 0 3px var(--color-surface);
  font: 700 16px/1 var(--font-ui); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------------------------------ 2.4 summary .y9 */
.y9__sheet {
  --y9-pt: 28px; --y9-px: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "doc" "side";
  row-gap: 40px; padding: var(--y9-pt) var(--y9-px) 32px;
}
.y9__head { grid-area: head; display: flex; flex-direction: column; gap: 20px; container-type: inline-size; }
/* sized by its own column: the long compound (Testausyhteenveto) must fit on one line, never break mid-word */
.y9__head .v9-h2 { font-size: max(1.75rem, min(var(--v9-fs-h2), 10.2cqi)); hyphens: manual; }
.y9__doc { grid-area: doc; margin: 0; min-width: 0; }
.y9__side { grid-area: side; min-width: 0; }

/* the page itself: paper on the sheet, set straight */
.y9__page {
  --y9d-pl: 32px;
  position: relative; max-width: 600px; margin-inline: auto; border-radius: 10px; background: var(--color-surface);
  box-shadow: 0 0 0 1px rgb(26 34 37 / .09), 0 2px 6px rgb(26 34 37 / .06), 0 24px 56px -20px rgb(26 34 37 / .30);
}
/* the A4 picture only where its text reads (75rem up); narrower screens get the typeset page (.y9d--alt) */
.y9__page--img { display: none; overflow: visible; }
.y9__page--img img { display: block; width: 100%; height: auto; border-radius: 10px; }
.y9__open { display: block; border-radius: 10px; }
@media (min-width: 75rem) {
  .y9__page--img { display: block; }
  .y9d--alt { display: none; }
}
/* marker positions on public/img/v9/yhteenveto-sivu.webp, as a share of its height: 1 = number and period,
   2 = the untested line, 3 = the saved time (n3: a saved summary cannot be changed) */
.y9__pin { position: absolute; left: -16px; top: var(--y9-m, 10%); }
.y9__pin--1 { --y9-m: 19%; } .y9__pin--2 { --y9-m: 50%; } .y9__pin--3 { --y9-m: 26.2%; }

.y9d { padding: 24px 20px 24px var(--y9d-pl); color: var(--color-text); font-size: 16px; line-height: 1.5; container-type: inline-size; }
.y9d p { margin: 0; }
.y9d__blk { position: relative; }
.y9d__blk > .y9__mk { position: absolute; top: calc(var(--y9-mt, 0px) - 4px); left: calc(-1 * var(--y9d-pl) - 16px); }
.y9d__top { padding-bottom: 16px; border-bottom: 1px solid var(--color-border-subtle); }
.y9d__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.y9d__scope { margin-top: 4px; color: var(--color-text-2); }
.y9d__top + .y9d__blk { margin-top: 18px; }
.y9d__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.y9d__meta dt { color: var(--color-text-muted); }
.y9d__meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* a narrow page (320 px phones): one column, so "Yhteenvedon numero" and the number never squeeze past each other */
@container (max-width: 15.5rem) { .y9d__meta { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.y9d__result { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border-subtle); }
.y9d__fig {
  font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: 56px; line-height: 1;
  letter-spacing: -.02em; color: var(--color-action);
}
.y9d__line { margin-top: 10px; color: var(--color-text-2); }
.y9d__bar { display: block; height: 8px; margin-top: 14px; border-radius: 4px; background: var(--color-surface-sunken); overflow: hidden; }
.y9d__bar span { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 4px; background: var(--color-action); }
.y9d__fact { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.y9d__fact svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--color-action); }
.y9d__un { --y9-mt: 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border-subtle); }
.y9d__h { font-weight: 700; }
.y9d__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.y9d__apt {
  display: inline-grid; place-items: center; min-width: 56px; min-height: 36px; padding: 0 10px; border-radius: 8px;
  background: var(--color-surface); box-shadow: inset 0 0 0 2.5px var(--status-attn-line);
  color: var(--status-attn-fg); font-weight: 700; white-space: nowrap;
}
.y9d__row p { color: var(--color-text-2); }
.y9d__k { display: block; font-weight: 600; color: var(--color-text); }
.y9d__ft { --y9-mt: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-border-subtle); }
.y9d__ft p { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.y9d__ft svg { width: 20px; height: 22px; flex: none; margin-top: 1px; color: var(--color-action); }

/* the notes and the actions */
.y9__notes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.y9__notes li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0;
  border-top: 1px solid var(--color-border-subtle); font-size: var(--v9-fs-body); font-weight: 500; line-height: 1.5;
}
.y9__notes li:last-child { border-bottom: 1px solid var(--color-border-subtle); }
.y9__notes li > span:last-child { padding-top: 3px; }
.y9__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.y9__pdf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.y9__pdf svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 29.99rem) { .y9__acts .v9-btn { width: 100%; } }
@media (min-width: 48rem) {
  .y9__sheet { --y9-pt: 40px; --y9-px: 40px; padding-bottom: 40px; }
  .y9__page { --y9d-pl: 44px; }
  .y9d { padding: 32px 32px 32px var(--y9d-pl); }
  .y9d__title { font-size: 22px; }
  .y9d__fig { font-size: 64px; }
}
@media (min-width: 64rem) {
  .y9__sheet {
    --y9-pt: 56px; --y9-px: 56px;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "doc head" "doc side";
    grid-template-rows: auto 1fr; column-gap: calc(var(--v9-gap) * 2 + 16px); row-gap: 40px; padding-bottom: 56px;
  }
  /* the page crosses the sheet's top edge by 40 px */
  .y9__doc { margin-top: calc(-1 * var(--y9-pt) - 40px); align-self: start; }
  .y9__page { max-width: none; }
  .y9__side { align-self: end; }
}

/* ------------------------------------------------------------------------------------------------ 2.5 managers .m9 */
.m9__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "side"; row-gap: 40px; }
.m9__head { grid-area: head; display: flex; flex-direction: column; gap: 20px; }
.m9__vis { grid-area: vis; min-width: 0; }
.m9__side { grid-area: side; min-width: 0; }
.m9__clip { --cl9-r: 24px; }
/* the pause/replay button in the caption row under the picture, never on the app (phones: base.css) */
@media (min-width: 48rem) {
  .m9__clip .cl9__frame { overflow: visible; }
  .m9__clip .cl9__poster, .m9__clip .cl9__video { border-radius: inherit; overflow: hidden; }
  .m9__clip .cl9__btn { top: calc(100% + 10px); bottom: auto; right: 0; }
  html.js .m9__clip .cl9__cap { min-height: 44px; margin-top: 10px; padding: 10px 60px 0 2px; }
}
.m9__fig { margin: 0; }
/* the list lays out by its own width (it is 7/12 of the grid on laptops), not the viewport's */
.m9__list { overflow: hidden; container-type: inline-size; }
.m9__lh { padding: 18px 20px; border-bottom: 1px solid var(--color-border-subtle); font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; }
.m9__rows { margin: 0; padding: 0; list-style: none; }
.m9__row {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "homes" "n"; gap: 12px;
  padding: 20px; border-top: 1px solid var(--color-border-subtle);
}
.m9__row:first-child { border-top: 0; }
.m9__id { grid-area: id; min-width: 0; }
.m9__t { font-size: 18px; font-weight: 600; line-height: 1.35; }
.m9__s { margin-top: 2px; font-size: 16px; line-height: 1.45; color: var(--color-text-2); }
.m9__homes { grid-area: homes; display: grid; grid-template-columns: repeat(var(--cols, 16), minmax(0, 14px)); gap: 5px 4px; align-content: start; }
.m9__homes i { display: block; width: 100%; height: auto; aspect-ratio: 14 / 11; border-radius: 3px; background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--status-wait-line); }
.m9__homes i[data-s="ok"] { background: var(--color-action); box-shadow: none; }
.m9__homes i[data-s="un"] { box-shadow: inset 0 0 0 2.5px var(--status-attn-line); }
.m9__n { grid-area: n; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--color-text); }
.m9__row[data-state="un"] .m9__n { color: var(--status-attn-fg); }
.m9__row[data-state="ok"] .m9__n { font-weight: 400; color: var(--color-text-2); }

.m9__facts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.m9__facts li { position: relative; padding-left: 26px; }
.m9__facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 3px; background: var(--color-action); }
.m9__price { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-border-subtle); font-weight: 600; line-height: 1.55; max-width: 34em; }
.m9__go { margin-top: 16px; }

@media (min-width: 36rem) {
  .m9__homes { grid-template-columns: repeat(var(--cols, 16), minmax(0, 16px)); gap: 6px 5px; }
  .m9__homes i { aspect-ratio: 16 / 12; }
  .m9__lh { padding: 20px 28px; }
  .m9__row { padding: 22px 28px; }
}
@container (min-width: 36rem) {
  .m9__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id n" "homes homes"; column-gap: 24px; }
  .m9__n { text-align: right; max-width: 16em; }
}
@media (min-width: 64rem) {
  .m9__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "vis head" "vis side";
    grid-template-rows: auto 1fr; column-gap: calc(var(--v9-gap) * 2 + 16px); row-gap: 40px;
  }
  .m9__vis { align-self: start; }
}

/* ------------------------------------------------------------------------------------------------ 2.6 the v8 pricer, fitted */
body.v9 .v9-sec + #hinnat.hn, body.v9 #hinnat.hn + .v9-sec { margin-top: var(--v9-sec); }
body.v9 #hinnat.hn { padding-bottom: 0; }
body.v9 #hinnat .hn__h2 { font-weight: 800; font-stretch: var(--display-wdth); font-size: var(--v9-fs-h2); line-height: 1.02; letter-spacing: -.022em; }
/* the 16 px floor: v8 set these four at 15 px */
body.v9 #hinnat .hn__ticks, body.v9 #hinnat .hn__quick, body.v9 #hinnat .hn__qb, body.v9 #hinnat .hn__zone { font-size: 16px; }
/* 44 px targets for the quick values */
body.v9 #hinnat .hn__quick { align-items: center; }
body.v9 #hinnat .hn__qb { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; }
/* the shared focus ring (3 px) */
body.v9 #hinnat :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
body.v9 #hinnat .hn__track:focus-visible .hn__thumb { outline: 3px solid var(--color-focus); outline-offset: 3px; }
body.v9 #hinnat .hn9__terms { max-width: 40em; line-height: 1.6; }
@media (min-width: 75rem) { body.v9 #hinnat .hn9__terms { align-self: center; } }

/* ------------------------------------------------------------------------------------------------ 2.7 founder .j9 */
.j9__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.j9__pic { margin: 0; width: min(100%, 20rem); }
.j9__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sheet); box-shadow: var(--shadow-card); }
.j9__body { min-width: 0; }
.j9__letter { margin-top: 28px; }
.j9__sig { display: flex; flex-direction: column; margin-top: 24px; }
.j9__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; }
.j9__role { font-size: 16px; color: var(--color-text-2); }
.j9__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--color-border-subtle); }
.j9__facts dt { font-size: 16px; color: var(--color-text-2); }
.j9__facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.j9__not { padding: 24px 20px; border-radius: var(--radius-card); background: var(--color-surface-sunken); }
.j9__not ul { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.j9__not li { position: relative; padding-left: 26px; }
/* the same 10 px rounded square as the managers facts (never a dash) */
.j9__not li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 3px; background: var(--color-action); }
.j9__more { margin-top: 24px; }
@media (min-width: 48rem) {
  .j9__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(var(--v9-gap) * 2); align-items: start; }
  .j9__pic { width: 100%; }
  .j9__not { padding: 28px 32px; }
}
@media (min-width: 64rem) {
  .j9__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(var(--v9-gap) * 3); }
  .j9__body { max-width: 46rem; }
  /* the four facts on one line only where the letter column is wide enough (at 768 "Sähköposti" ran past its cell) */
  .j9__facts { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; column-gap: 40px; }
  .j9__not { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 40px; }
  .j9__not ul { margin: 4px 0 0; }
}

/* ------------------------------------------------------------------------------------------------ 2.8 FAQ .q9 */
.q9__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
.q9__list { overflow: hidden; }
.q9__item + .q9__item { border-top: 1px solid var(--color-border-subtle); }
.q9__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px;
  cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; line-height: 1.4;
}
.q9__item summary::-webkit-details-marker { display: none; }
.q9__item summary:hover .q9__q { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.q9__item summary:focus-visible { outline-offset: -4px; border-radius: 12px; }
.q9__mk { width: 22px; height: 22px; flex: none; color: var(--color-text-2); transition: transform var(--dur) var(--ease-out); }
.q9__item[open] .q9__mk { transform: rotate(180deg); }
.q9__a { padding: 0 20px 24px; color: var(--color-text-2); max-width: 44em; }
.q9__a p + p { margin-top: .8em; }
.q9__a .q9__more { margin-top: 1em; }
.q9__a .v9-a { overflow-wrap: anywhere; }
.q9__ask { color: var(--color-text-2); }
@media (min-width: 48rem) {
  .q9__item summary { padding: 18px 28px; font-size: 19px; }
  .q9__a { padding: 0 28px 28px; }
}
@media (min-width: 64rem) {
  .q9__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: calc(var(--v9-gap) * 2); align-items: start; }
  .q9__in > .v9-h2 { grid-column: 1; grid-row: 1 / span 2; }
  .q9__list, .q9__ask { grid-column: 2; max-width: 760px; }
  .q9__ask { margin-top: -8px; }
}

/* ------------------------------------------------------------------------------------------------ 2.9 closing .c9 */
.c9__sheet { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding: 32px 20px; }
.c9__copy { min-width: 0; }
.c9__fact { margin-top: 20px; }
.c9__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.c9__board { margin: 20px 0 0; }
.c9__fig { margin: 0; min-width: 0; }
/* the closing talo at about 80 % of md: the page's last picture is a quiet echo, not a second hero (labels stay 16 px) */
.c9__fig .tl9--md { --uw0: 45px; --gx: 10px; --gy: 7px; --pad: 11px; --mk: 20px; --hw0: 56px; --door-w: 30px; --door-h: 24px; }
.c9__cap { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--color-text-2); text-align: center; text-wrap: balance; }
@media (max-width: 29.99rem) { .c9__acts .v9-btn { width: 100%; } }
@media (min-width: 48rem) { .c9__sheet { padding: 48px 40px; } }
@media (min-width: 64rem) {
  .c9__sheet { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--v9-gap) * 2); align-items: center; padding: 64px; }
}
/* the slider is a 44 px target too (v8: 40) */
body.v9 #hinnat .hn__track { height: 44px; }