/* =====================================================================================================================
   v9 public site, base (WP0). Tokens, the v8 bridge for the reused pricer, fallback font faces, element base, the
   shared section shell (.v9-*), buttons, clips (.cl9) and the film dialog (.dl9).
   Pinnat look (CLAUDE.md rule 10): white sheets with soft shadows on a calm cool page; Geologica for text, Mona Sans
   800 at 110 % for H1/H2; 12 px controls with 1.5 px edges, 24 px sheets with no outline; nothing under 16 px
   (15 px legal lines only); no uppercase, no mono. Colours only from this :root. Read views/landing/v9/README.md.

   Contrast (WCAG 2.x), every pair used:
     ink #1A2225: page #ECF0EE 14.1, white 16.2, sunken #E3E9E6 13.1, tint #E0EDE7 13.4
     text-2 #3B4549: page 8.6, white 9.8          muted #525D5A: page 6.0, white 6.8 (meta only)
     Kuusi #1F4D47: page 8.3, white 9.5, tint 7.9  white on Kuusi 9.5, on Kuusi hover #183E39 11.8
     mint-tx #A9D4C6 on Kuusi 5.9 (pricer band)   amber label #844A00 on white 6.9
     control edge #727E79 on white 4.2, on the page 3.7 (non-text, ≥ 3)    focus #0B57B0: page 6.1, white 7.0
   ===================================================================================================================== */

/* Fallback faces (local Arial) sized to the web fonts, so text wraps the same way before and after the swap.
   Measured in headless Edge on 2026-10-31 (views/landing/v9/_dev-fonts.php): width ratio on a Finnish sample,
   ascent/descent from the font's own metrics divided by size-adjust. */
@font-face {
  font-family: "Geologica fallback"; src: local("Arial"), local("ArialMT"); font-weight: 300 500;
  size-adjust: 109%; ascent-override: 89.9%; descent-override: 25.7%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geologica fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 501 800;
  size-adjust: 104.7%; ascent-override: 93.6%; descent-override: 26.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Mona Sans fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 800;
  size-adjust: 110%; ascent-override: 99.1%; descent-override: 29.1%; line-gap-override: 0%;
}

:root {
  color-scheme: light;
  /* Pinnat surfaces and text (values from public/css/app/tokens.css; keep in step) */
  --color-canvas: #ECF0EE; --color-surface: #FFFFFF; --color-surface-sunken: #E3E9E6; --color-surface-selected: #DDE8E3;
  --color-text: #1A2225; --color-text-2: #3B4549; --color-text-muted: #525D5A; --color-text-inverse: #FFFFFF;
  --color-border-subtle: #DCE4E0; --color-border-control: #727E79;
  --color-action: #1F4D47; --color-action-hover: #183E39; --color-action-active: #12302C; --color-on-action: #FFFFFF;
  --color-link: #1F4D47; --color-focus: #0B57B0; --color-brand-tint: #E0EDE7;
  --status-wait-line: #6B7773; --status-attn-line: #B87516; --status-attn-fg: #844A00; --status-attn-bg: #FFF3DE;
  /* type */
  --font-ui: "Geologica", "Geologica fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Mona Sans", "Mona Sans fallback", "Geologica", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --display-wdth: 110%;
  --v9-fs-legal: .9375rem;  /* 15: legal lines only */
  --v9-fs-small: 1rem;      /* 16: the floor: labels, captions, meta */
  --v9-fs-body: 1.0625rem;  /* 17 on phones, 18 from 36rem */
  --v9-fs-lead: 1.125rem;   /* 18 on phones, 20 from 36rem */
  --v9-fs-h3: clamp(1.375rem, 1.18rem + .55vw, 1.75rem);   /* 22-28, Mona 700 */
  --v9-fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);         /* 32-56, Mona 800 110 % */
  /* shape, elevation, motion */
  --radius-button: 12px; --radius-control: 12px; --radius-card: 16px; --radius-sheet: 24px;
  --border-w-control: 1.5px;
  --shadow-card: 0 0 0 1px rgb(26 34 37 / .07), 0 1px 2px rgb(26 34 37 / .07), 0 10px 28px -10px rgb(26 34 37 / .18);
  --shadow-raised: 0 1px 2px rgb(26 34 37 / .10), 0 2px 6px -2px rgb(26 34 37 / .10);
  --shadow-overlay: 0 2px 8px rgb(26 34 37 / .10), 0 24px 60px -16px rgb(26 34 37 / .32);
  --shadow-button: 0 1px 0 rgb(255 255 255 / .14) inset, 0 1px 2px rgb(18 48 44 / .28);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-press: 120ms; --dur: 180ms; --dur-slow: 280ms;
  /* layout: container 1312; gutters 16 / 40 / 64 below 1024 / from 1024 / from 1320; sections 72 / 96 / 128 apart */
  --v9-max: 1312px; --v9-gut: 16px; --v9-gap: 16px; --v9-sec: 72px; --v9-hd: 64px;

  /* v8 bridge: ONLY for the reused v8 pricer files (css/v8/parts/hinnat.css, css/v8/port.css). New code uses the
     names above. */
  --page: var(--color-canvas); --sheet: var(--color-surface); --ink: var(--color-text); --ink-2: var(--color-text-2);
  --text-2: var(--color-text-2); --ink-3: var(--color-text-muted);
  --rule: var(--color-border-subtle); --rule-2: rgba(28, 35, 38, .32); --rule-strong: #A3AAA7; --edge: var(--color-border-control);
  --kuusi: var(--color-action); --kuusi-2: #163A35; --mint: #E3EFEA; --mint-tx: #A9D4C6;
  --sunken: var(--color-surface-sunken); --selected: var(--color-surface-selected);
  --f-disp: var(--font-display); --f-sans: var(--font-ui); --f-mono: var(--font-ui); --dw: var(--display-wdth);
  --sh-card: var(--shadow-card); --sh-raised: var(--shadow-raised); --sh-btn: var(--shadow-button);
  --r-btn: 12px; --r-ctl: 12px; --r-card: 20px; --r-sheet: 28px; --r-mark: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1); --gut: var(--v9-gut);
}
@media (min-width: 36rem) { :root { --v9-fs-body: 1.125rem; --v9-fs-lead: 1.25rem; } }
@media (min-width: 48rem) { :root { --v9-sec: 96px; --v9-gap: 24px; } }
@media (min-width: 64rem) { :root { --v9-gut: 40px; --v9-gap: 32px; --v9-sec: 128px; --v9-hd: 72px; } }
@media (min-width: 82.5rem) { :root { --v9-gut: 64px; } }

/* ------------------------------------------------------------------------------------------------ element base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--color-canvas);
  scroll-padding-top: calc(var(--v9-hd) + 16px);
}
body {
  margin: 0; min-width: 320px; background: var(--color-canvas); color: var(--color-text);
  font-family: var(--font-ui); font-size: var(--v9-fs-body); font-weight: 400; line-height: 1.6;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.v9-main { display: block; padding-bottom: var(--v9-sec); outline: none; }

/* ------------------------------------------------------------------------------------------------ section shell */
.v9-wrap {
  width: 100%; max-width: calc(var(--v9-max) + 2 * var(--v9-gut)); margin-inline: auto; padding-inline: var(--v9-gut);
}
.v9-sec { position: relative; }
.v9-sec + .v9-sec { margin-top: var(--v9-sec); }
.v9-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v9-gap); }
.v9-grid > * { grid-column: 1 / -1; min-width: 0; }
.v9-head { display: flex; flex-direction: column; gap: 20px; max-width: 52rem; margin-bottom: 48px; }
.v9-h2 {
  font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: var(--v9-fs-h2);
  line-height: 1.02; letter-spacing: -.022em; color: var(--color-text); text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
.v9-h3 {
  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;
}
.v9-lead { font-size: var(--v9-fs-lead); line-height: 1.55; color: var(--color-text-2); max-width: 40em; text-wrap: pretty; }
.v9-text { max-width: 40em; text-wrap: pretty; }
.v9-text > * + * { margin-top: 1em; }
.v9-small { font-size: var(--v9-fs-small); line-height: 1.5; color: var(--color-text-2); }
.v9-legal { font-size: var(--v9-fs-legal); line-height: 1.5; color: var(--color-text-2); }
.v9-sheet { background: var(--color-surface); border-radius: var(--radius-sheet); box-shadow: var(--shadow-card); }
.v9-pad { padding: 24px 20px; }
@media (min-width: 48rem) { .v9-pad { padding: 40px; } .v9-head { margin-bottom: 56px; } }
@media (min-width: 64rem) { .v9-pad { padding: 56px; } .v9-head { margin-bottom: 64px; } }
.v9-num { font-variant-numeric: tabular-nums; }
.v9-nb { white-space: nowrap; }

/* buttons: 56 px primary (Kuusi), secondary (white, 1.5 px edge), 48 px small; press scale .97 for 120 ms */
.v9-btn, .cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 26px;
  border: 0; border-radius: var(--radius-button); background: var(--color-action); color: var(--color-on-action);
  box-shadow: var(--shadow-button); font-family: var(--font-ui); font-size: 18px; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) linear;
}
.v9-btn:hover, .cta:hover { background: var(--color-action-hover); }
.v9-btn:active, .cta:active { transform: scale(.97); background: var(--color-action-active); }
.v9-btn svg, .cta svg { width: 20px; height: 20px; flex: none; }
.v9-btn--2 { background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 var(--border-w-control) var(--color-border-control); }
.v9-btn--2:hover { background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-text); }
.v9-btn--2:active { background: var(--color-surface-sunken); }
.v9-btn--sm { min-height: 48px; padding: 0 20px; font-size: 17px; }
.v9-btn--block { display: flex; width: 100%; }
@media (max-width: 29.99rem) { .v9-btn { white-space: normal; } }
.v9-a {
  color: var(--color-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  border-radius: 4px;
}
.v9-a:hover { text-decoration-thickness: 2.5px; }
/* a stand-alone text link with an arrow, at least 44 px tall */
.v9-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.v9-go::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-left: 2px; border-top: 2.2px solid currentColor; border-right: 2.2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur) var(--ease-out);
}
.v9-go:hover::after { transform: translateX(3px) rotate(45deg); }

/* round 44 px icon button (pause/replay and similar) */
.v9-ibtn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-raised), inset 0 0 0 1.5px rgb(26 34 37 / .12);
  transition: transform var(--dur-press) var(--ease-out);
}
.v9-ibtn:active { transform: scale(.94); }
.v9-ibtn svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------------------------------------ clips (.cl9) */
.cl9 { margin: 0; min-width: 0; }
.cl9__frame {
  position: relative; overflow: hidden; aspect-ratio: var(--cl9-ar, 16 / 9);
  border-radius: var(--cl9-r, 16px); background: var(--color-surface-sunken);
  box-shadow: 0 0 0 1px rgb(26 34 37 / .08);
}
@media (max-width: 47.99rem) { .cl9__frame { aspect-ratio: var(--cl9-ar-m, var(--cl9-ar, 16 / 9)); } }
.cl9__poster, .cl9__poster img, .cl9__video, .cl9__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl9__poster img, .cl9__video, .cl9__fallback img { object-fit: cover; object-position: 50% 0; }
.cl9__fallback img { width: 100%; height: 100%; }
.cl9__video { opacity: 0; }
.cl9.is-live .cl9__video { opacity: 1; }
.cl9__btn { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.cl9__btn [data-i] { display: none; }
.cl9[data-state="playing"] .cl9__btn [data-i="pause"],
.cl9[data-state="paused"] .cl9__btn [data-i="play"],
.cl9[data-state="idle"] .cl9__btn [data-i="play"],
.cl9[data-state="ended"] .cl9__btn [data-i="replay"] { display: block; }
html:not(.js) .cl9__btn { display: none; }
/* phones: the button sits under the frame (on the frame it covered the app's own "Valikko" tab in the 4:5 clips) */
@media (max-width: 47.99rem) {
  .cl9__frame { overflow: visible; margin-bottom: 56px; }
  .cl9__poster, .cl9__video { border-radius: inherit; overflow: hidden; }
  .cl9__btn { top: calc(100% + 8px); bottom: auto; right: 0; }
}
.cl9__cap { margin-top: 12px; font-size: var(--v9-fs-small); line-height: 1.5; color: var(--color-text-2); }

/* ------------------------------------------------------------------------------------------------ film dialog (.dl9) */
.dl9 {
  width: min(1120px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0;
  border-radius: var(--radius-sheet); background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-overlay); overflow: auto; overscroll-behavior: contain;
}
.dl9:not([open]) { display: none; }
.dl9::backdrop { background: rgb(26 34 37 / .62); }
.dl9[open] { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@starting-style { .dl9[open] { opacity: .35; transform: translateY(12px); } }
.dl9__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 24px; }
.dl9__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; }
.dl9__close {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: var(--radius-button);
  background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-border-control);
  font-size: 17px; font-weight: 600; transition: transform var(--dur-press) var(--ease-out);
}
.dl9__close:active { transform: scale(.97); }
.dl9__close svg { width: 20px; height: 20px; }
.dl9__video { width: 100%; aspect-ratio: 16 / 9; height: auto; background: #1A2225; }
.dl9__text { padding: 8px 24px 24px; }
.dl9__text summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  font-weight: 600; color: var(--color-link); list-style: none;
}
.dl9__text summary::-webkit-details-marker { display: none; }
.dl9__text summary::before {
  content: ""; width: 8px; height: 8px; border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur) var(--ease-out);
}
.dl9__text[open] summary::before { transform: rotate(45deg); }
.dl9__text ol { margin: 8px 0 0; padding-left: 1.4em; display: grid; gap: 6px; max-width: 46em; color: var(--color-text-2); }
html:has(.dl9[open]) { overflow: hidden; }
/* phones: the dialog goes edge to edge; with the 4:5 cut (data-narrow) the film fills the width at a readable size */
@media (max-width: 47.99rem) {
  .dl9 { width: 100%; max-height: 100dvh; border-radius: 0; }
  .dl9__top { padding-left: 16px; }
  .dl9__text { padding-inline: 16px; }
  .dl9__video[data-narrow] { aspect-ratio: 4 / 5; max-height: calc(100svh - 112px); }
}

/* ------------------------------------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
html.rm *, html.rm *::before, html.rm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }

/* ------------------------------------------------------------------------------------------------ development only */
.v9-ph {
  display: grid; place-content: center; gap: 8px; min-height: 360px; padding: 32px; text-align: center;
  border-radius: var(--radius-sheet); background: repeating-linear-gradient(135deg, var(--color-surface) 0 18px, var(--color-surface-sunken) 18px 36px);
  box-shadow: inset 0 0 0 2px var(--color-border-control); color: var(--color-text-2);
}
.v9-ph strong { font-family: var(--font-display); font-size: 28px; color: var(--color-text); }