/* Artikkelit-osio (/artikkelit/): listaus, suodattimet ja artikkelisivu.
   Ladataan vain artikkelisivuilla styles.css:n jälkeen. Käyttää styles.css:n tokeneita. */

/* ---------- Suodattimet ---------- */
.art-filters { display: grid; gap: var(--space-5); padding: var(--space-6) var(--cell-pad); border-top: var(--hairline); }
.art-filters[hidden] { display: none; }
.art-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.art-filters legend { padding: 0; margin-bottom: var(--space-3); }
.art-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.art-chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.art-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: var(--hairline-strong); border-radius: var(--radius-pill); background: #fff;
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); cursor: pointer; user-select: none;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.art-chip:hover { border-color: var(--color-black); }
.art-chip.is-zero { color: var(--color-text-subtle); border-style: dashed; }
.art-chip--check::before { content: "+" / ""; font-family: var(--font-mono); color: var(--color-text-muted); }
.art-chip__count { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; color: var(--color-text-muted); }
.art-chip__input:checked + .art-chip { background: #000; border-color: #000; color: #fff; }
.art-chip__input:checked + .art-chip .art-chip__count,
.art-chip__input:checked + .art-chip::before { color: #CFCFCF; }
.art-chip__input:checked + .art-chip--check::before { content: "\2713" / ""; }
.art-chip__input:focus-visible + .art-chip { outline: 2px solid var(--color-black); outline-offset: 3px; }
.art-filters__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline); }
.art-status { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.art-status strong { color: var(--color-black); }
@media (max-width: 639px) {
  /* Mobiili: vaakavieritettävät rivit (kategoriat 1 rivi, aiheet 2 riviä) – paneeli pysyy matalana */
  .art-chip { min-height: 44px; white-space: nowrap; }
  .art-chips {
    display: grid; grid-auto-flow: column; grid-template-rows: auto; justify-content: start;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    margin-inline: calc(var(--cell-pad) * -1); padding: 4px var(--cell-pad) var(--space-2);
    scroll-padding-inline: var(--cell-pad);
  }
  .art-chips--rows { grid-template-rows: auto auto; }
}

/* ---------- Lista ---------- */
.art-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.art-list > [hidden] { display: none; }
.art-fill { display: none; }
@media (min-width: 640px) and (max-width: 899px) { .art-fill--2 { display: block; } }
@media (min-width: 900px) { .art-fill--3 { display: block; } }
.art-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.art-card__date { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.art-card .tag-list { margin-top: auto; }
.art-card .service-card__footer { margin-top: 0; }
.art-empty { display: grid; justify-items: center; gap: var(--space-4); padding: var(--section-y) var(--cell-pad); text-align: center; border-top: var(--hairline); }
.art-empty[hidden] { display: none; }
.art-empty p { color: var(--color-text-muted); max-width: 48ch; }

/* ---------- Artikkelisivu ---------- */
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.art-meta a.badge { text-decoration: none; }
.art-meta a.badge:hover { background: #000; color: #fff; }
a.tag { text-decoration: none; display: inline-block; }
a.tag:hover { border-color: var(--color-black); color: var(--color-black); }
a.tag--kategoria { color: var(--color-black); font-weight: 600; border-color: var(--color-line-strong); }
.art-layout { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .art-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-9); align-items: start; }
  .art-aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
.art-aside { display: grid; gap: var(--space-5); }
.art-box { border: var(--hairline); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-4); background: #fff; }
.art-box--related { border-top: 3px solid var(--color-primary); }
.art-box h2 { margin: 0; }
.art-related { list-style: none; margin: 0; padding: 0; display: grid; }
.art-related li + li { border-top: var(--hairline); }
.art-related a { display: grid; gap: 2px; padding: var(--space-3) 0; text-decoration: none; }
.art-related a:hover .art-related__name { color: var(--color-primary-ink); }
.art-related__type { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.art-related__name { font-weight: 700; color: var(--color-black); }
.art-related__desc { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---------- Kuvitus: artikkelien visualisoinnit ----------
   Kaikki kuvat ovat <figure class="fig"> + <figcaption>. Sisältö on HTML/CSS-komponentteja (vz-*, mock, wf)
   tai inline-SVG (.vz-svg). Asettelu vaihtuu kuvalaatikon leveyden mukaan (container query), ei ruudun. */
.prose .fig { margin: var(--space-6) 0; font-size: var(--fs-sm); line-height: 1.45; }
.fig__box { container-type: inline-size; border: var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-4); }
.fig__label { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
.fig__label b { color: #000; font-weight: 600; }
.fig figcaption { margin-top: var(--space-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.fig figcaption strong { color: var(--color-text); }
.fig__note { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-line-strong); border-radius: var(--radius); background: #fff; color: var(--color-text-muted); font-size: var(--fs-sm); }
.fig__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text-muted); }
.prose .fig__legend li + li { margin-top: 0; }
.fig__legend i { display: inline-block; width: 22px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.5px solid var(--color-primary); }
.fig__legend i.is-grey { border-top: 2px dashed var(--color-secondary); }
.fig__legend i.is-fc { border-top: 3px dotted var(--color-primary); }
.fig__legend i.is-dark { border-top: 2px dotted #111; }
.prose .vz-list { list-style: none; margin: 0; padding: 0; }
.prose .vz-list > li + li { margin-top: 0; }

/* Solmut */
.vz-node { display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--space-3); background: #fff; border: var(--hairline-strong); border-radius: var(--radius); }
.vz-node__k { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.vz-node__t { font-weight: 700; color: #000; }
.vz-node__d { font-size: .8125rem; color: var(--color-text-muted); }
.vz-node--accent { background: var(--color-primary-tint); border-color: var(--color-primary); }
.vz-node--accent .vz-node__k { color: var(--color-primary-ink); }
.vz-node--dark { background: #111; border-color: #111; }
.vz-node--dark .vz-node__t { color: #fff; }
.vz-node--dark .vz-node__k, .vz-node--dark .vz-node__d { color: #CFCFCF; }
.vz-node--warn { background: #FDF0EE; border-color: var(--color-error); }
.vz-node--warn .vz-node__k { color: var(--color-error); }
.vz-node--ok { background: #EEF8F2; border-color: var(--color-success); }
.vz-node--ok .vz-node__k { color: var(--color-success); }
.vz-node--muted { background: var(--color-surface-2); border-style: dashed; }

/* Chipit (tila kerrotaan aina myös tekstinä, ei vain värillä) */
.vz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: #fff; font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; color: var(--color-text); white-space: nowrap; }
.vz-chip--ok { color: var(--color-success); border-color: currentColor; background: #EEF8F2; }
.vz-chip--err { color: var(--color-error); border-color: currentColor; background: #FDF0EE; }
.vz-chip--warn { color: #8A5A00; border-color: currentColor; background: #FFF4DC; }
.vz-chip--accent { color: var(--color-primary-ink); border-color: var(--color-primary-line); background: var(--color-primary-tint); }
.vz-chip--dark { color: #fff; border-color: #111; background: #111; }

/* Prosessi: pystysuunta oletuksena, vaakasuunta (--h) kun laatikko on riittävän leveä */
.vz-flow { display: grid; gap: var(--space-5); }
.vz-flow > li { position: relative; display: grid; }
.vz-flow > li + li::before { content: ""; position: absolute; left: 50%; top: calc(var(--space-5) * -1); height: var(--space-5); border-left: 1.5px solid var(--color-secondary); }
.vz-flow > li + li::after { content: ""; position: absolute; left: 50%; top: -6px; width: 7px; height: 7px; margin-left: -4px; border-right: 1.5px solid var(--color-secondary); border-bottom: 1.5px solid var(--color-secondary); transform: rotate(45deg); }
.vz-split { display: grid; gap: var(--space-3); }
@container (min-width: 560px) {
  .vz-flow--h { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-6); }
  .vz-flow--h > li + li::before { left: calc(var(--space-6) * -1); top: 50%; width: var(--space-6); height: 0; border-left: 0; border-top: 1.5px solid var(--color-secondary); }
  .vz-flow--h > li + li::after { left: -6px; top: 50%; margin: -4px 0 0; border: 0; border-top: 1.5px solid var(--color-secondary); border-right: 1.5px solid var(--color-secondary); transform: rotate(45deg); }
  .vz-split { grid-template-columns: 1fr 1fr; }
}

/* Vertailu ennen / jälkeen */
.vz-compare { display: grid; gap: var(--space-4); }
@container (min-width: 560px) { .vz-compare { grid-template-columns: 1fr 1fr; } }
.vz-side { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: var(--hairline-strong); border-radius: var(--radius); }
.vz-side__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface-2); border-bottom: var(--hairline); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.vz-side__body { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-3); flex: 1; }
.vz-side--after { border-color: var(--color-primary); }
.vz-side--after .vz-side__head { background: var(--color-primary-tint); border-bottom-color: var(--color-primary-line); color: var(--color-primary-ink); }
.vz-step { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.vz-step__t { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); }
.vz-step__d { min-width: 0; }
.vz-step__d .vz-chip { margin-top: 4px; }
.vz-ticks { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.prose .vz-ticks li + li { margin-top: 0; }
.vz-ticks li { position: relative; padding-left: 1.5em; }
.vz-ticks li::before { content: "\2713" / ""; position: absolute; left: 0; font-weight: 700; color: var(--color-success); }
.vz-ticks--no li::before { content: "\2192" / ""; color: var(--color-primary-ink); }

/* Aikajana */
.vz-time { display: grid; }
.vz-time > li { position: relative; padding: 0 0 var(--space-4) var(--space-6); min-width: 0; }
.vz-time > li:last-child { padding-bottom: 0; }
.vz-time > li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #111; border-radius: 50%; background: #fff; }
.vz-time > li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: -2px; width: 1.5px; background: var(--color-line-strong); }
.vz-time > li:last-child::after { display: none; }
.vz-time > li.is-accent::before { background: var(--color-primary); border-color: var(--color-primary); }
.vz-time > li.is-now::before { background: #111; }
.vz-time__when { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-ink); }
.vz-time__t { display: block; font-weight: 700; color: #000; }
.vz-time__d { display: block; font-size: .8125rem; color: var(--color-text-muted); }
@container (min-width: 560px) {
  .vz-time--h { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-4); }
  .vz-time--h > li { padding: var(--space-6) var(--space-2) 0 0; }
  .vz-time--h > li:last-child { padding-right: 0; }
  .vz-time--h > li::before { top: 0; }
  .vz-time--h > li::after { display: block; left: 14px; right: calc(var(--space-4) * -1); top: 6px; bottom: auto; width: auto; height: 1.5px; }
  .vz-time--h > li:last-child::after { display: none; }
}

/* Mockup-kehys */
.mock { min-width: 0; overflow: hidden; background: #fff; border: var(--hairline-strong); border-radius: var(--radius); }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-3); background: var(--color-surface-2); border-bottom: var(--hairline); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); }
.mock__bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-line-strong); }
.mock__bar span { margin-left: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.mock__body { display: grid; gap: var(--space-3); padding: var(--space-3); }
.mock-row { display: grid; gap: 6px; padding: var(--space-3); background: #fff; border: var(--hairline); border-radius: var(--radius); }
.mock-row__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--space-3); }
.mock-row__name { font-weight: 700; color: #000; }
.mock-row__text { font-size: .8125rem; color: var(--color-text-muted); }
.mock-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mock-btn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid #111; border-radius: var(--radius-pill); background: #fff; font-size: var(--fs-xs); font-weight: 700; color: #111; }
.mock-btn--dark { background: #111; color: #fff; }
.mock-btn--accent { background: var(--color-primary); border-color: var(--color-primary); color: #000; }
.mock-input { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--hairline-strong); border-radius: var(--radius-pill); background: #fff; font-family: var(--font-mono); font-size: .8125rem; color: var(--color-text); overflow-wrap: anywhere; }
.mock-input b { flex: none; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-primary); color: #000; font-family: var(--font-body); font-size: var(--fs-xs); }
.mock-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mock-cols { display: grid; gap: var(--space-3); }
@container (min-width: 560px) { .mock-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Chat */
.mock-chat { display: grid; gap: var(--space-2); }
.bubble { max-width: 90%; padding: 8px 12px; border-radius: 12px; font-size: .84375rem; line-height: 1.45; }
.bubble--bot { justify-self: start; background: var(--color-surface-2); border-bottom-left-radius: 4px; }
.bubble--user { justify-self: end; background: #111; color: #fff; border-bottom-right-radius: 4px; }
.bubble__src { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-line-strong); font-size: var(--fs-xs); color: var(--color-text-muted); }
.bubble__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 8px; }
.prose .bubble__list { margin: 6px 0 0; padding-left: 1.4em; }
.prose .bubble__list li + li { margin-top: 2px; }
.bubble__list .is-you { font-weight: 700; color: var(--color-primary-ink); }

/* Sähköposti */
.mail__head { display: grid; gap: 2px; padding: var(--space-3); border-bottom: var(--hairline); }
.mail__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); }
.mail__subject { font-weight: 700; color: #000; }
.mail__body { display: grid; gap: var(--space-3); padding: var(--space-3); }
.mail__prod { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-2); border: var(--hairline); border-radius: var(--radius); }
.mail__img { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--color-surface-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Lankakehykset */
.wf { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); background: #fff; border: var(--hairline-strong); border-radius: var(--radius); }
.wf__title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 1rem; line-height: 1.2; letter-spacing: -0.02em; color: #000; }
.wf__line { height: 7px; width: var(--w, 100%); border-radius: 4px; background: var(--color-line); }
.wf__block { display: grid; gap: 6px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.wf__block b { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--color-text); }
.wf__btn { justify-self: start; display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; color: #000; }
.wf__link { font-size: var(--fs-xs); color: var(--color-text-muted); text-decoration: underline; }

/* Vuoto */
.vz-funnel { display: grid; gap: var(--space-3); }
.vz-funnel__row { display: grid; gap: 4px; }
.vz-funnel__name { font-weight: 700; color: #000; }
.vz-funnel__bar { height: 18px; width: var(--w); border-radius: 4px; background: var(--color-primary); }
.vz-funnel__leak { position: relative; margin: 0; padding-left: 1.4em; font-size: .8125rem; color: var(--color-error); }
.vz-funnel__leak::before { content: "\2193" / ""; position: absolute; left: 0; font-weight: 700; }

/* Päätöspuu */
.vz-tree { display: grid; gap: var(--space-2); }
.vz-tree > li { display: grid; gap: var(--space-2); align-items: stretch; }
.vz-tree > li + li::before { content: attr(data-yes) " \2193"; grid-column: 1 / -1; padding-left: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-success); }
.vz-out { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--color-line-strong); border-radius: var(--radius); background: #fff; color: var(--color-text-muted); }
.vz-out strong { color: var(--color-text); }
@container (min-width: 560px) { .vz-tree > li:not(.vz-final) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Tarkistuslista */
.vz-check { display: grid; margin: 0; padding: 0; list-style: none; background: #fff; border: var(--hairline-strong); border-radius: var(--radius); }
.vz-check > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); }
.vz-check > li + li { border-top: var(--hairline); }
.vz-check__box { width: 18px; height: 18px; margin-top: 2px; box-sizing: border-box; border: 1.5px solid #111; border-radius: 4px; }
.vz-check__t { display: block; font-weight: 700; color: #000; }
.vz-check__d { display: block; font-size: .8125rem; color: var(--color-text-muted); }
.vz-check__meta { display: flex; flex-wrap: wrap; gap: 2px var(--space-5); margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); }
.vz-blank { display: inline-flex; align-items: baseline; gap: 6px; }
.vz-blank::after { content: ""; display: inline-block; width: 4.5rem; border-bottom: 1px solid #111; }

/* Kirjausrunko (taulukko muuttuu korteiksi kapealla) */
.vz-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .8125rem; }
.vz-table th, .vz-table td { padding: 8px 10px; border-bottom: var(--hairline); text-align: left; vertical-align: top; }
.vz-table th { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface-2); }
.vz-table tr:last-child td { border-bottom: 0; }
@container (max-width: 559px) {
  .vz-table, .vz-table tbody, .vz-table tr, .vz-table td { display: block; }
  .vz-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vz-table tr { margin-bottom: var(--space-3); border: var(--hairline-strong); border-radius: var(--radius); overflow: hidden; }
  .vz-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-2); }
  .vz-table td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
}

/* Portaat (koulutustasot) */
.vz-steps { display: grid; gap: var(--space-3); }
.vz-steps > li { display: grid; }
.vz-steps .vz-node { gap: var(--space-2); }
@container (min-width: 560px) {
  .vz-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .vz-steps > li:nth-child(1) { min-height: 11rem; }
  .vz-steps > li:nth-child(2) { min-height: 13.5rem; }
  .vz-steps > li:nth-child(3) { min-height: 16rem; }
}

/* SVG */
.vz-svg { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.vz-svg text { font-family: var(--font-body); font-size: 16px; fill: var(--color-text-muted); }
.vz-svg .vz-svg__b { font-weight: 700; fill: #111; }
.vz-svg .vz-svg__a { fill: var(--color-primary-ink); font-weight: 700; }
.vz-svg__axis { stroke: var(--color-line-strong); stroke-width: 1; fill: none; }
.vz-svg__grid { stroke: var(--color-line); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.vz-svg__act { stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.vz-svg__fc { stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 6; fill: none; }
.vz-svg__tgt { stroke: var(--color-secondary); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.vz-svg__bud { stroke: #111; stroke-width: 1.5; stroke-dasharray: 2 4; fill: none; }
.vz-svg__shape { fill: var(--color-primary-tint); stroke: var(--color-primary); stroke-width: 1.5; }

/* ---------- Artikkelin herokuva ja myynti-CTA ---------- */
.art-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; margin: 0 0 var(--space-6); border: var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface); }
.prose .art-cta { padding: var(--space-5); border-left-width: 4px; display: grid; gap: var(--space-3); }
.prose .art-cta > p { margin: 0; }
.prose .art-cta__title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; color: #000; }
.prose .art-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prose .art-cta .btn { text-decoration: none; }
.prose .art-cta .btn-primary, .prose .art-cta .btn-primary:hover { color: #fff; }
.prose .art-cta .btn-ghost { color: var(--color-text); }
.prose .table-wrap { margin: var(--space-5) 0; font-size: var(--fs-sm); line-height: 1.45; }
.prose .table th[scope="row"] { text-align: left; font-weight: 700; }
/* Inline-kuvitukset (svg.vm) artikkelissa: animaatioiden alkutila näkyviin myös ilman .vm-card-käärettä */
.prose .vm-inline { margin: var(--space-6) 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .vm-inline.is-in svg.vm .pop { opacity: 1; transform: none; }
  .js .vm-inline.is-in svg.vm .grow, .js .vm-inline.is-in svg.vm .grow-x { transform: none; }
  .js .vm-inline.is-in svg.vm .draw { stroke-dashoffset: 0; }
  .js .vm-inline.is-in svg.vm .strike { stroke-dashoffset: 0; }
  .js .vm-inline.is-in svg.vm .wob2 { animation: vm-wob2 1.6s var(--ease) both; }
}


/* ---------- Listaus: kaksi korttia rivillä, kuva otsikon yläpuolella, ensimmäinen artikkeli isona (hyväksytty 2026-10-04) ---------- */
.am-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap, 28px); padding-inline: var(--cell-pad); margin-top: var(--space-6); border-top: 0; }
@media (max-width: 760px) { .am-list { grid-template-columns: 1fr; } }
.am-list > li { display: flex; }
.am-card { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; padding: 0 0 var(--space-5); border: var(--hairline); border-radius: var(--radius-lg); background: #fff; overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); position: relative; }
.am-card:hover { box-shadow: var(--shadow-float); transform: translateY(-3px); }
.am-card > :not(.am-media) { margin-left: var(--space-5); margin-right: var(--space-5); }
.am-media { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--color-surface); }
.am-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.am-card:hover .am-media img { transform: scale(1.04); }
.am-card .service-card__title { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.am-card .service-card__title a::after { content: ""; position: absolute; inset: 0; }
.am-card .art-card__meta { margin-top: var(--space-2); }
.am-card .tag-list { margin-top: auto; }
@media (min-width: 761px) {
  .am-featured { grid-column: 1 / -1; }
  .am-featured .am-card { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto auto 1fr auto; column-gap: var(--space-6); padding: 0; }
  .am-featured .am-media { grid-row: 1 / -1; aspect-ratio: auto; height: 100%; border-right: var(--hairline); }
  .am-featured .am-card > :not(.am-media) { margin: 0 var(--space-6) 0 0; }
  .am-featured .am-card > .art-card__meta { margin-top: var(--space-6); }
  .am-featured .service-card__title { font-size: var(--fs-xl); }
  .am-featured .am-card > .service-card__footer { margin-bottom: var(--space-6); }
}

/* ---------- Artikkelisivun otsikko 30 % pienemmäksi ---------- */
main:has(.art-hero-img) h1#page-title { font-size: clamp(1.5rem, 1.05rem + 1.96vw, 2.625rem); }