/* =====================================================================================================================
   v9 Ominaisuudet, /features (WP5 2026-10-31, round 2 the same day). Prefix .o9. Pinnat look on the shared shell
   (base.css): tokens only, no colour literals. Text floor 16 px.
   Chapters are not boxes: a big H2 and a lead above the real app at full container width with a soft shadow, then
   one row of facts. The only sheet is the talo's (one level, no stage inside it).
   Motion: button presses (base.css), the talo filling once (talo.css transitions, played by ominaisuudet.js) and a
   200 ms opacity settle when the catalogue filter changes. html.rm and the OS setting stop all of it.
   Contrast (from base.css): ink on white 16.2 / page 14.1; text-2 on white 9.8 / page 8.6 / tint 8.1;
   Kuusi on white 9.5 / page 8.3 / tint 7.9; white on Kuusi 9.5; ink on amber mark #FFF3DE 15.0.
   ===================================================================================================================== */

/* ------------------------------------------------------------------------------------------------ intro */
.o9-intro { padding-top: 16px; }
.o9-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; padding: 0; list-style: none; }
.o9-crumb li { display: inline-flex; align-items: center; gap: 10px; font-size: var(--v9-fs-small); line-height: 1.4; color: var(--color-text-2); }
.o9-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: 4px;
}
.o9-crumb a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-2); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--color-border-control);
}
.o9-crumb a:hover { color: var(--color-text); text-decoration-color: currentColor; }
.o9-crumb [aria-current] { color: var(--color-text); font-weight: 600; }

/* the H1 is sized by its own column (the copy column is the size container), so "Palovaroittimien" always fits */
.o9-intro__copy { container-type: inline-size; min-width: 0; }
.o9-h1 {
  margin-top: 12px;
  font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800;
  font-size: clamp(2.25rem, 11.4cqi, 5.25rem); line-height: 1; letter-spacing: -.028em;
  color: var(--color-text); text-wrap: balance; hyphens: manual; overflow-wrap: break-word;
}
.o9-intro__grid { display: grid; gap: 40px; margin-top: 4px; }
.o9-intro__lead { max-width: 34em; margin-top: 24px; }
.o9-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.o9-acts__go { color: var(--color-link); font-weight: 600; font-size: 18px; }

/* the page index: one wrapped row of chapter links under the first screen */
.o9-toc { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-border-subtle); }
.o9-toc__h { margin-bottom: 4px; font-size: var(--v9-fs-small); font-weight: 600; color: var(--color-text-2); }
.o9-toc__l { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.o9-toc__l a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  color: var(--color-text); text-decoration: none; font-size: 17px; font-weight: 600; line-height: 1.3;
}
.o9-toc__l a svg { width: 18px; height: 18px; flex: none; color: var(--color-action); transition: transform var(--dur) var(--ease-out); }
.o9-toc__l a:hover { color: var(--color-action); }
.o9-toc__l a:hover svg { transform: translateY(2px); }
.o9-toc__all a { color: var(--color-action); }
.o9-toc__n { font-weight: 500; color: var(--color-text-2); }

@media (min-width: 36rem) { .o9-toc__l a { font-size: 18px; } }
@media (min-width: 48rem) {
  .o9-intro { padding-top: 32px; }
  .o9-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; margin-top: 48px; padding-top: 12px; }
  .o9-toc__h { margin: 0; }
}
/* from 1024 px the product is the first screen: copy on the left (6 columns), the live talo on the right (6) */
@media (min-width: 64rem) {
  .o9-intro { padding-top: 24px; }
  .o9-intro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); margin-top: 0; align-items: center; }
  .o9-intro__copy { grid-column: 1 / span 6; }
  .o9-intro .o9-talo { grid-column: 7 / -1; }
  .o9-acts { margin-top: 32px; }
  .o9-toc { margin-top: 40px; }
}
/* laptops up to 860 px tall (1366 x 768, 1280 x 720, 1024 x 768): the whole drawing and both buttons stay in the first
   screen. Smaller windows and floor gaps (labels stay 16 px); the latest event waits for taller screens. */
@media (min-width: 64rem) and (max-height: 53.75rem) {
  .o9-intro { padding-top: 16px; }
  .o9-h1 { font-size: clamp(2.25rem, 10.4cqi, 4.5rem); }
  .o9-intro__lead { margin-top: 20px; }
  .o9-acts { margin-top: 24px; }
  .o9-intro .o9-talo__sheet { padding-block: 18px 14px; gap: 22px; }
  .o9-intro .o9-talo__log { display: none; }
  .o9-intro .o9-tl.tl9--xl { --uw0: 68px; --gy: 6px; --labgap: 3px; --roof: 12px; --door-h: 34px; }
}
/* ------------------------------------------------------------------------------------------------ chapters */
.o9-chs { display: grid; gap: 80px; margin-top: 72px; }
.o9-ch { min-width: 0; scroll-margin-top: calc(var(--v9-hd) + 16px); }
.o9-ch__head { display: grid; gap: 12px; }
.o9-ch__h {
  font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -.024em;
  color: var(--color-text); text-wrap: balance; hyphens: manual; overflow-wrap: break-word; max-width: 18em;
}
.o9-ch__lead { max-width: 40em; font-size: var(--v9-fs-lead); line-height: 1.5; color: var(--color-text-2); text-wrap: pretty; }

/* the app: full width, soft shadow, no stage around it */
.o9-ch__media { display: grid; gap: 40px; margin-top: 32px; min-width: 0; }
.o9-clip { --cl9-r: 20px; }
.o9-clip .cl9__frame { box-shadow: var(--shadow-card); }
/* the pause/replay button sits in the caption row under the picture, never on the app (it covered "Valikko") */
.o9-clip .cl9__frame { overflow: visible; margin-bottom: 0; }
.o9-clip .cl9__poster, .o9-clip .cl9__video { border-radius: inherit; overflow: hidden; }
.o9-clip .cl9__btn { top: calc(100% + 10px); bottom: auto; right: 0; }
.o9-clip .cl9__cap { min-height: 44px; margin-top: 10px; padding: 10px 60px 0 2px; }
html:not(.js) .o9-clip .cl9__cap { padding-right: 0; }

.o9-ch--duo .o9-ch__media { justify-content: center; }
.o9-ch--duo .o9-clip .cl9__frame { aspect-ratio: 4 / 5; }

/* the live talo (the intro's right column): one white sheet, the count and the latest event above the drawing */
.o9-talo { margin: 0; min-width: 0; }
.o9-talo__sheet {
  display: grid; gap: 20px; padding: 24px 16px 20px; border-radius: var(--radius-sheet);
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.o9-talo__draw { min-width: 0; }
.o9-talo__side { display: grid; align-content: start; gap: 4px; min-width: 0; padding-inline: 4px; }
.o9-talo__k { font-size: var(--v9-fs-body); font-weight: 600; color: var(--color-text-2); }
.o9-talo__n {
  font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.06; letter-spacing: -.02em; color: var(--color-text); text-wrap: balance;
}
.o9-talo__log { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 6px; font-size: var(--v9-fs-body); line-height: 1.45; color: var(--color-text); }
.o9-talo__log time { font-weight: 600; color: var(--color-action); font-variant-numeric: tabular-nums; }
.o9-talo__cap { padding-inline: 2px; }
.o9-tl .tl9__legend { font-size: 17px; }
/* facts: one row of short items, then the catalogue link and the reading */
.o9-ch__foot { display: grid; gap: 32px; margin-top: 36px; }
.o9-facts { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.o9-facts li { display: grid; align-content: start; gap: 4px; }
.o9-facts strong { font-weight: 650; font-size: 1.1875rem; line-height: 1.35; color: var(--color-text); }
.o9-facts span { font-size: var(--v9-fs-body); line-height: 1.5; color: var(--color-text-2); text-wrap: pretty; }
.o9-ch__links { display: grid; justify-items: start; align-content: start; gap: 14px; min-width: 0; }
.o9-more svg { width: 18px; height: 18px; }
.o9-read { display: grid; margin: 0; padding: 0; list-style: none; }
/* base .v9-go: inline-flex, 44 px tall; a wrapped label stays one flex item, so the chevron never drops to its own line */
.o9-read .v9-go { padding: 4px 0; color: var(--color-link); font-weight: 600; font-size: var(--v9-fs-body); line-height: 1.4; text-decoration: none; }
.o9-read .v9-go:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

@media (min-width: 48rem) {
  .o9-chs { gap: 104px; margin-top: 96px; }
  .o9-ch__head { gap: 16px; }
  .o9-ch__media { margin-top: 40px; }
  .o9-ch--duo .o9-ch__media { grid-template-columns: repeat(2, minmax(0, 35rem)); gap: 24px; align-items: start; }
  .o9-talo__sheet { padding: 28px 32px 24px; }
  .o9-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
  .o9-ch__links { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px 32px; }
  .o9-read { grid-auto-flow: column; gap: 0 28px; }
}
@media (min-width: 64rem) {
  .o9-chs { gap: 88px; margin-top: 104px; }
  .o9-mid { margin-block: -32px; }
  .o9-ch__media { margin-top: 36px; }
  .o9-talo__sheet { padding: 24px 32px 20px; gap: 16px; }
}
/* from 1200 px: facts in 9 columns, the catalogue link and reading in the last 3; the talo drawn at 1.4x */
@media (min-width: 75rem) {
  .o9-ch--duo .o9-ch__media { gap: 32px; }
  .o9-ch__foot { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); margin-top: 32px; }
  .o9-facts { grid-column: 1 / span 9; }
  .o9-ch__links { grid-column: 10 / -1; grid-auto-flow: row; justify-items: start; gap: 12px; }
  .o9-read { grid-auto-flow: row; }
}

/* the slim trial sheet after chapter 3 */
.o9-mid {
  display: grid; gap: 20px; justify-items: start; padding: 24px 20px;
  border-radius: var(--radius-sheet); background: var(--color-brand-tint);
}
.o9-mid__t { display: grid; gap: 4px; }
.o9-mid__t strong {
  font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -.016em; color: var(--color-text);
}
.o9-mid__t span { font-size: var(--v9-fs-lead); color: var(--color-text-2); }
@media (min-width: 48rem) {
  .o9-mid { grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 32px 40px; }
}
@media (min-width: 64rem) { .o9-mid { padding: 36px 56px; } }

/* ------------------------------------------------------------------------------------------------ catalogue */
.o9-cat { margin-top: 104px; scroll-margin-top: calc(var(--v9-hd) + 8px); outline: none; }
.o9-cat__head { display: grid; gap: 16px; margin-bottom: 32px; }
.o9-cat__head .v9-lead { max-width: 46em; }
.o9-cat__h {
  font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -.024em; color: var(--color-text); text-wrap: balance;
}
.o9-cat__total { white-space: nowrap; }
.o9-side { display: grid; gap: 24px; min-width: 0; margin-bottom: 40px; scroll-margin-top: calc(var(--v9-hd) + 16px); }

.o9-f { display: grid; gap: 20px; }
.o9-f__lab { display: block; margin: 0 0 8px; padding: 0; font-size: var(--v9-fs-small); font-weight: 600; color: var(--color-text); }
.o9-q { position: relative; }
.o9-q__mg { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--color-text-2); pointer-events: none; }
.o9-q__in {
  width: 100%; min-height: 56px; padding: 0 52px 0 50px; border: 0; border-radius: var(--radius-control);
  background: var(--color-surface); box-shadow: inset 0 0 0 var(--border-w-control) var(--color-border-control);
  font-size: 18px; color: var(--color-text); -webkit-appearance: none; appearance: none;
}
.o9-q__in::placeholder { color: var(--color-text-muted); opacity: 1; }
.o9-q__in:hover { box-shadow: inset 0 0 0 2px var(--color-text-2); }
.o9-q__in:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--color-text); }
.o9-q__in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.o9-q__x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--color-text-2);
}
.o9-q__x:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.o9-q__x svg { width: 20px; height: 20px; }

.o9-plan { margin: 0; padding: 0; border: 0; min-width: 0; }
.o9-plan__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.o9-plan__o { position: relative; display: block; min-width: 0; }
.o9-plan__o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.o9-plan__o > span {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; height: 100%; padding: 8px 14px;
  border-radius: var(--radius-control); background: var(--color-surface);
  box-shadow: inset 0 0 0 var(--border-w-control) var(--color-border-control);
  font-size: var(--v9-fs-small); font-weight: 600; line-height: 1.25; color: var(--color-text);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) linear;
}
.o9-plan__n { font-weight: 500; color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.o9-plan__o:hover > span { box-shadow: inset 0 0 0 2px var(--color-text-2); }
.o9-plan__o:active > span { transform: scale(.97); }
.o9-plan__o input:checked + span { background: var(--color-action); color: var(--color-on-action); box-shadow: var(--shadow-button); }
.o9-plan__o input:checked + span .o9-plan__n { color: var(--color-on-action); }
.o9-plan__o input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.o9-asel__f { position: relative; }
.o9-asel select {
  width: 100%; min-height: 56px; padding: 0 48px 0 16px; border: 0; border-radius: var(--radius-control);
  background: var(--color-surface); box-shadow: inset 0 0 0 var(--border-w-control) var(--color-border-control);
  font-size: 18px; font-weight: 500; color: var(--color-text); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.o9-asel select:hover { box-shadow: inset 0 0 0 2px var(--color-text-2); }
.o9-asel__f svg { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--color-text); pointer-events: none; }
.o9-f__n { font-size: var(--v9-fs-small); font-weight: 600; color: var(--color-text); }
.o9-f__n:empty { display: none; }

/* the topic index: anchors without JS, filter buttons with it (from 1024 px; phones and tablets use the select) */
.o9-ix ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.o9-ix a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px;
  border-radius: 10px; color: var(--color-text); text-decoration: none; font-size: var(--v9-fs-small); font-weight: 500; line-height: 1.3;
}
.o9-ix a:hover { background: var(--color-surface-sunken); }
.o9-ix__c { font-weight: 500; color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.o9-ix li[hidden] { display: none; }
html:not(.js) .o9-ix ul { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: 16px; }
html.js .o9-ix { display: none; }

/* the topics: two columns from 768 px, three from 1200; a filter turns them into one full-width list */
.o9-areas { display: grid; gap: 56px 48px; min-width: 0; }
.o9-areas.is-fx { animation: o9-settle 200ms var(--ease-out); }
@keyframes o9-settle { from { opacity: .35; } }
.o9-none { display: grid; justify-items: start; gap: 16px; padding: 32px; border-radius: var(--radius-sheet); background: var(--color-surface); box-shadow: var(--shadow-card); }
.o9-none p { font-size: var(--v9-fs-lead); color: var(--color-text); }

.o9-a { min-width: 0; scroll-margin-top: calc(var(--v9-hd) + 16px); }
.o9-a__hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.o9-a__h {
  font-family: var(--font-display); font-weight: 700; font-size: var(--v9-fs-h3); line-height: 1.15; letter-spacing: -.012em;
  color: var(--color-text); text-wrap: balance;
}
.o9-a__n { font-size: var(--v9-fs-small); font-weight: 500; color: var(--color-text-2); white-space: nowrap; }
.o9-it { display: grid; gap: 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.o9-i { display: grid; align-content: start; gap: 4px; }
.o9-i__n { font-family: var(--font-ui); font-size: var(--v9-fs-body); font-weight: 650; line-height: 1.35; color: var(--color-text); }
.o9-i__l { font-size: var(--v9-fs-small); line-height: 1.55; color: var(--color-text-2); max-width: 40em; text-wrap: pretty; }
.o9-i__p { margin-top: 2px; font-size: var(--v9-fs-small); font-weight: 600; color: var(--color-action); }
.o9-i__p--starter { color: var(--color-text-2); }
mark.o9-m { padding: 0 1px; border-radius: 3px; background: var(--status-attn-bg); color: inherit; box-shadow: 0 1px 0 var(--status-attn-line); }

/* "Näytä kaikki N" under a topic's first three items */
.o9-a__t {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 18px; padding: 0 16px 0 18px;
  border: 0; border-radius: var(--radius-button); background: var(--color-surface); color: var(--color-text);
  box-shadow: inset 0 0 0 var(--border-w-control) var(--color-border-control); font-size: var(--v9-fs-small); font-weight: 600;
  transition: transform var(--dur-press) var(--ease-out);
}
.o9-a__t:hover { box-shadow: inset 0 0 0 2px var(--color-text-2); }
.o9-a__t:active { transform: scale(.97); }
.o9-a__t svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.o9-a__t[aria-expanded="true"] svg { transform: rotate(180deg); }

/* phones with JS and no filter: each topic is one row that opens (the heading holds the button, built by the JS) */
.o9-a__hb {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; letter-spacing: inherit;
}
.o9-a__hb .o9-a__ht { flex: 1 1 auto; min-width: 0; }
.o9-a__hb .o9-a__hc { flex: none; font-family: var(--font-ui); font-size: var(--v9-fs-small); font-weight: 500; letter-spacing: 0; color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.o9-a__hb svg { flex: none; width: 22px; height: 22px; color: var(--color-action); transition: transform var(--dur) var(--ease-out); }
.o9-a__hb[aria-expanded="true"] svg { transform: rotate(180deg); }
.o9--rows .o9-areas { gap: 0; }
.o9--rows .o9-a { border-bottom: 1px solid var(--color-border-subtle); }
.o9--rows .o9-a:first-of-type { border-top: 1px solid var(--color-border-subtle); }
.o9--rows .o9-a__hd { display: block; }
.o9--rows .o9-a__n { display: none; }
.o9--rows .o9-it { margin: 4px 0 24px; }

@media (min-width: 48rem) {
  .o9-cat { margin-top: 128px; }
  .o9-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o9-areas > .o9-none, .o9-areas.is-filtered > .o9-a { grid-column: 1 / -1; }
  .o9-areas.is-filtered .o9-it { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; gap: 24px 40px; }
  .o9-plan__opts { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; }
}
@media (min-width: 64rem) {
  .o9-cat { margin-top: 128px; }
  .o9-cat__head { margin-bottom: 40px; }
  .o9-side { margin-bottom: 56px; }
  .o9-f { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--v9-gap); align-items: end; }
  .o9-f__n { grid-column: 1 / -1; }
  html.js .o9-ix { display: block; }
  html.js .o9-asel { display: none; }
  .o9-ix ul, html:not(.js) .o9-ix ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .o9-ix a {
    gap: 10px; padding: 8px 14px; border-radius: var(--radius-control); background: var(--color-surface);
    box-shadow: inset 0 0 0 var(--border-w-control) var(--color-border-control); font-weight: 600;
    transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) linear;
  }
  .o9-ix a:hover { background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-text-2); }
  .o9-ix a:active { transform: scale(.97); }
  .o9-ix a[aria-current="true"] { background: var(--color-action); color: var(--color-on-action); box-shadow: var(--shadow-button); }
  .o9-ix a[aria-current="true"] .o9-ix__c { color: var(--color-on-action); }
  .o9-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 48px; }
}
@media (min-width: 75rem) {
  .o9-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 40px; }
  .o9-areas.is-filtered .o9-it { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------------------------------------ closing */
.o9-end__sheet { display: grid; gap: 28px; padding: 28px 20px; }
.o9-end__copy { display: grid; gap: 16px; }
.o9-end__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.o9-end__acts .v9-go { color: var(--color-link); font-weight: 600; font-size: 18px; }
@media (min-width: 48rem) { .o9-end__sheet { padding: 48px 40px; } }
@media (min-width: 64rem) {
  .o9-end__sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); align-items: end; padding: 64px 56px; }
  .o9-end__copy { grid-column: 1 / span 7; }
  .o9-end__acts { grid-column: 9 / -1; flex-direction: column; align-items: stretch; }
  .o9-end__acts .v9-go { align-self: flex-start; }
}
@media (max-width: 29.99rem) {
  .o9-end__acts .v9-btn, .o9-mid .v9-btn { width: 100%; }
}

/* the talo before and while it plays: the latest event (the story's last) waits at .35 until the windows are done */
.o9-talo__log { transition: opacity 280ms var(--ease-out); }
.o9-talo.is-ready:not(.is-done) .o9-talo__log { opacity: .35; }

/* the folded catalogue (JS, nothing filtered, from 768 px): each topic lists its first three features, each with its
   one line (round 2: names alone read like a sitemap); "Näytä kaikki N" opens the topic with every item and plan. */
.o9-areas.is-brief .o9-a:not(.is-open) .o9-i__p { display: none; }
.o9-areas.is-brief .o9-a:not(.is-open) .o9-it { gap: 0; margin-top: 12px; }
.o9-areas.is-brief .o9-a:not(.is-open) .o9-i { padding: 12px 0 14px; border-top: 1px solid var(--color-border-subtle); }
.o9-areas.is-brief .o9-a:not(.is-open) .o9-i__n { font-size: var(--v9-fs-body); font-weight: 600; }
.o9-areas.is-brief .o9-a:not(.is-open) .o9-a__t { margin-top: 12px; }
.o9-areas.is-brief .o9-a__n { display: none; }
.o9-areas.is-brief .o9-a.is-open { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .o9-areas.is-brief .o9-a.is-open .o9-it { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
}
@media (min-width: 75rem) {
  .o9-areas.is-brief .o9-a.is-open .o9-it { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones: the two Testaus clips stack at full width (side by side the grid took its width from the captions) */
@media (max-width: 47.99rem) { .o9-ch--duo .o9-ch__media { grid-template-columns: minmax(0, 1fr); } }

/* Phones and tablets (judge r3 #5, 2026-10-31): the live talo comes right after the H1, before the lead; container-type keeps the H1 size. */
@media (max-width:63.99rem){.o9-intro__grid{container-type:inline-size;display:flex;flex-direction:column;gap:0}.o9-intro__copy{display:contents}.o9-intro .o9-talo{order:1;margin-top:24px}.o9-intro__lead{order:2;margin-top:24px}.o9-acts{order:3}}