/* Flow AI -kuvitukset (svg.vm). Generoitu: scripts/gen-visuaalimallit.py + kuvitukset-sivuille.py */
/* Vain tämän sisäisen vertailusivun kuvitusluokat (vm-). */
.vm-h1 { font-size: var(--fs-2xl); }
.vm-note { font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 72ch; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-primary-tint); border-radius: 0 var(--radius) var(--radius) 0; }
.vm-navlabel { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.vm-item { padding: var(--space-9) var(--cell-pad); border-top: var(--hairline); scroll-margin-top: calc(var(--header-h) + 16px); }
.vm-item__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.vm-item__head h2 { font-size: var(--fs-xl); margin-top: var(--space-2); }
.vm-intro { color: var(--color-text-muted); margin-top: var(--space-2); max-width: 60ch; }
.vm-link { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary-ink); text-decoration: none; white-space: nowrap; }
.vm-link:hover { text-decoration: underline; }
.vm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 860px) { .vm-grid { grid-template-columns: 1fr; } }
.vm-card { display: flex; flex-direction: column; background: #fff; border: var(--hairline); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.vm-card:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); }
.vm-stage { background: var(--color-surface); border-bottom: var(--hairline); padding: clamp(8px, 2vw, 16px); }
.vm-meta { padding: var(--space-4) var(--space-5) var(--space-5); }
.vm-kind { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-primary-ink); }
.vm-meta h3 { font-size: var(--fs-md); margin: var(--space-1) 0 var(--space-2); }
.vm-benefit { font-size: var(--fs-sm); color: var(--color-text-muted); }
.vm-benefit strong { color: var(--color-text); }
 svg.vm { display: block; width: 100%; height: auto; overflow: visible; }
svg.vm text { font-family: var(--font-body); font-size: 12px; fill: #111; }
svg.vm .l { font-size: 10px; letter-spacing: .1em; font-weight: 600; fill: var(--color-text-muted); }
svg.vm .m { font-size: 11px; fill: var(--color-text-muted); }
svg.vm .mu { fill: var(--color-text-muted); }
svg.vm .sm { font-size: 12px; }
svg.vm .xs { font-size: 10.5px; }
svg.vm .xxs { font-size: 9px; }
svg.vm .b { font-weight: 700; }
svg.vm .h { font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
svg.vm .mono { font-family: var(--font-mono); font-size: 11px; }
svg.vm .w, svg.vm text.w { fill: #fff; }
svg.vm .lw { fill: #BDBDBD; }
svg.vm .lwr { fill: #6B6B6B; }
svg.vm .a { fill: var(--color-primary); }
svg.vm .ai, svg.vm text.ai { fill: var(--color-primary-ink); }
svg.vm .box { fill: #fff; stroke: var(--color-line-strong); stroke-width: 1; }
svg.vm .boxa { fill: #fff; stroke: var(--color-primary); stroke-width: 1.5; }
svg.vm .sf { fill: var(--color-surface-2); }
svg.vm .tint { fill: var(--color-primary-tint); }
svg.vm .dark { fill: #111; }
svg.vm .gry { fill: #DCDCDC; }
svg.vm .ghost { fill: none; stroke: var(--color-line-strong); stroke-dasharray: 3 3; }
svg.vm .hatch { fill: var(--color-hatch); }
svg.vm .none { fill: none; }
svg.vm .okt { fill: var(--color-success); }
svg.vm .okbg { fill: #E4F3EA; }
svg.vm .errt { fill: var(--color-error); }
svg.vm .errbg { fill: #FCE8E6; }
svg.vm .ckw { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.vm .ln { fill: none; stroke: var(--color-line-strong); stroke-width: 1.25; }
svg.vm .lnd { stroke-dasharray: 4 4; }
svg.vm .lnk { fill: none; stroke: #111; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.vm .lna { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
svg.vm .errl { fill: none; stroke: var(--color-error); stroke-width: 2.5; stroke-linejoin: round; }
svg.vm .flg { fill: none; stroke: #D4D4D4; stroke-linecap: butt; opacity: .9; }
svg.vm .fla { fill: none; stroke: var(--color-primary); opacity: .85; }
svg.vm .fd, svg.vm .fd2 { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 22; }
svg.vm .fd2 { stroke: var(--color-primary); stroke-width: 2; stroke-dasharray: 2 16; }
svg.vm .ring { fill: none; stroke: var(--color-primary); stroke-width: 1.5; }
svg.vm .ringok { fill: none; stroke: var(--color-success); stroke-width: 1.5; }
svg.vm .ring0 { fill: none; stroke: var(--color-line-strong); }
svg.vm .ringa { fill: none; stroke: var(--color-primary-line); stroke-width: 2; stroke-dasharray: 6 8; }
svg.vm .ringbg { fill: none; stroke: var(--color-surface-2); stroke-width: 16; }
svg.vm .prep { fill: none; stroke: var(--color-primary); stroke-width: 16; opacity: .9; }
svg.vm .prepk { fill: var(--color-primary); }
svg.vm .venn { fill: #EDEDED; stroke: var(--color-line-strong); mix-blend-mode: multiply; }
svg.vm .rad-c { fill: rgba(0,0,0,.06); stroke: #9A9A9A; stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.vm .rad-y { fill: rgba(245,73,39,.14); stroke: var(--color-primary); stroke-width: 2.5; stroke-linejoin: round; }
svg.vm .sweep { fill: var(--color-primary); opacity: .16; }
svg.vm .grid0 { stroke: #EFEFEF; stroke-width: 1; }
svg.vm .k { font-family: var(--font-heading); font-weight: 800; font-size: 40px; letter-spacing: -.03em; }
svg.vm .hum { fill: none; stroke: #BDBDBD; stroke-width: 16; }
svg.vm .water { fill: #EEF3F6; }
svg.vm .ice { fill: #fff; stroke: #9FB3C0; stroke-width: 1.25; opacity: .9; }
svg.vm .dn-a, svg.vm .dn-1, svg.vm .dn-2, svg.vm .dn-3 { fill: none; stroke-width: 24; }
svg.vm .dn-a { stroke: var(--color-primary); } svg.vm .dn-1 { stroke: #111; } svg.vm .dn-2 { stroke: #9A9A9A; } svg.vm .dn-3 { stroke: #D4D4D4; }
svg.vm .sw-dn-a { color: var(--color-primary); } svg.vm .sw-dn-1 { color: #111; } svg.vm .sw-dn-2 { color: #9A9A9A; } svg.vm .sw-dn-3 { color: #D4D4D4; }
svg.vm .gauge-bg { fill: none; stroke: var(--color-surface-2); stroke-width: 18; }
svg.vm .gauge { fill: none; stroke: var(--color-success); stroke-width: 18; stroke-dashoffset: .12 !important; }
.js .is-in svg.vm .gauge { stroke-dashoffset: .12; }
svg.vm .strike { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; }
 @keyframes vm-dash { to { stroke-dashoffset: -48; } }
@keyframes vm-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes vm-spin { to { transform: rotate(360deg); } }
@keyframes vm-blink { 50% { opacity: 0; } }
@keyframes vm-wob { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(6deg); } }
@keyframes vm-wob2 { 0% { transform: rotate(-120deg); } 100% { transform: rotate(0); } }
@keyframes vm-slide { 0%, 15% { transform: translate(0, 0); opacity: 1; } 55%, 80% { transform: translate(232px, 96px); opacity: 1; } 100% { transform: translate(232px, 96px); opacity: 0; } }
@keyframes vm-drip { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  svg.vm .fd, svg.vm .fd2 { animation: vm-dash 1.8s linear infinite; }
  svg.vm .pulse { transform-box: fill-box; transform-origin: center; animation: vm-pulse 2.2s ease-out infinite; }
  svg.vm .spin { animation: vm-spin 40s linear infinite; }
  svg.vm .spin.fast { animation-duration: 4s; }
  svg.vm .spin.slow { animation-duration: 60s; }
  svg.vm .wob { animation: vm-wob 5s ease-in-out infinite; }
  .is-in svg.vm .wob2 { animation: vm-wob2 1.6s var(--ease) both; }
  svg.vm .slide { animation: vm-slide 5s var(--ease) infinite; }
  svg.vm .blink { animation: vm-blink 1s steps(1) infinite; }
  svg.vm .drip { transform-box: fill-box; animation: vm-drip 1.6s ease-in infinite; }
  .js svg.vm .pop { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0ms); }
  .js .is-in svg.vm .pop { opacity: 1; transform: none; }
  .js svg.vm .grow { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .8s var(--ease); transition-delay: var(--d, 0ms); }
  .js svg.vm .grow-x { transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: var(--d, 0ms); }
  .js .is-in svg.vm .grow, .js .is-in svg.vm .grow-x { transform: none; }
  .js svg.vm .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
  .js .is-in svg.vm .draw { stroke-dashoffset: 0; }
  .js svg.vm .strike { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset .6s var(--ease); transition-delay: var(--d, 0ms); }
  .js .is-in svg.vm .strike { stroke-dashoffset: 0; }
}

/* Kuvituskaruselli tuote- ja palvelusivuilla */
.vm-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 440px); gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-4); scrollbar-width: thin; }
.vm-carousel > .vm-card { scroll-snap-align: start; }
@media (max-width: 639px) { .vm-carousel { grid-auto-columns: 86%; } }
.vm-inline { margin: var(--space-6) 0; }
.vm-inline .vm-stage { border: var(--hairline); border-radius: var(--radius-lg); }
.vm-inline figcaption { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-2); }