jotta ulkoinen
   fonttipyyntö ei estä sivun ensimmäistä piirtoa. */

@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/outfit-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/outfit-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/outfit-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/outfit-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/outfit-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/outfit-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/outfit-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}@font-face{
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/outfit-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@layer properties{@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))){*,::before,::after,::backdrop{ --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-content: ""; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; }}}@layer theme{:root,:host{ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace; --color-black: #000; --spacing: .25rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-3xl: 48rem; --container-4xl: 56rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -.025em; --tracking-wide: .025em; --tracking-widest: .1em; --leading-relaxed: 1.625; --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-display); --default-mono-font-family: var(--font-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-border: var(--border); }}@layer base{*,::after,::before,::backdrop{ box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }::file-selector-button{ box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }html,:host{ text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; }hr{ height: 0px; color: inherit; border-top-width: 1px; }abbr:where([title]){ text-decoration: underline dotted; }h1,h2,h3,h4,h5,h6{ font-size: inherit; font-weight: inherit; }a{ color: inherit; text-decoration: inherit; }b,strong{ font-weight: bolder; }code,kbd,samp,pre{ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; }small{ font-size: 80%; }sub,sup{ vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }sub{ bottom: -0.25em; }sup{ top: -0.5em; }table{ text-indent: 0px; border-color: inherit; border-collapse: collapse; }progress{ vertical-align: baseline; }summary{ display: list-item; }ol,ul,menu{ list-style: none; }img,svg,video,canvas,audio,iframe,embed,object{ vertical-align: middle; display: block; }img,video{ max-width: 100%; height: auto; }button,input,select,optgroup,textarea{ font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }::file-selector-button{ font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }:where(select:is([multiple],[size])) optgroup{ font-weight: bolder; }:where(select:is([multiple],[size])) optgroup option{ padding-inline-start: 20px; }::file-selector-button{ margin-inline-end: 4px; }::placeholder{ opacity: 1; }@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px){::placeholder{ color: currentcolor; }@supports (color: color-mix(in lab, red, red)){::placeholder{ color: color-mix(in oklab, currentcolor, transparent); }}}textarea{ resize: vertical; }::-webkit-search-decoration{ appearance: none; }::-webkit-date-and-time-value{ min-height: 1lh; text-align: inherit; }::-webkit-datetime-edit{ display: inline-flex; }::-webkit-datetime-edit-fields-wrapper{ padding: 0px; }::-webkit-datetime-edit{ padding-block: 0px; }::-webkit-datetime-edit-year-field{ padding-block: 0px; }::-webkit-datetime-edit-month-field{ padding-block: 0px; }::-webkit-datetime-edit-day-field{ padding-block: 0px; }::-webkit-datetime-edit-hour-field{ padding-block: 0px; }::-webkit-datetime-edit-minute-field{ padding-block: 0px; }::-webkit-datetime-edit-second-field{ padding-block: 0px; }::-webkit-datetime-edit-millisecond-field{ padding-block: 0px; }::-webkit-datetime-edit-meridiem-field{ padding-block: 0px; }::-webkit-calendar-picker-indicator{ line-height: 1; }button,input:where([type="button"],[type="reset"],[type="submit"]){ appearance: button; }::file-selector-button{ appearance: button; }::-webkit-inner-spin-button{ height: auto; }::-webkit-outer-spin-button{ height: auto; }[hidden]:where(:not([hidden="until-found"])){ display: none !important; }*{ border-color: var(--color-border); }body{ background-color: var(--color-background); color: var(--color-foreground); font-family: var(--font-display); -webkit-font-smoothing: antialiased; }}@layer components;@layer utilities{.sr-only{ clip-path: inset(50%); white-space: nowrap; border-width: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }.absolute{ position: absolute; }.fixed{ position: fixed; }.relative{ position: relative; }.inset-0{ inset: 0px; }.inset-x-0{ inset-inline: 0px; }.top-0{ top: 0px; }.top-2{ top: calc(var(--spacing) * 2); }.top-\[28\%\]{ top: 28%; }.-right-4{ right: calc(var(--spacing) * -4); }.-left-4{ left: calc(var(--spacing) * -4); }.left-1\/2{ left: 50%; }.left-2{ left: calc(var(--spacing) * 2); }.z-50{ z-index: 50; }.mx-auto{ margin-inline: auto; }.my-4{ margin-block: calc(var(--spacing) * 4); }.-mt-24{ margin-top: calc(var(--spacing) * -24); }.mt-0\.5{ margin-top: calc(var(--spacing) * .5); }.mt-2{ margin-top: calc(var(--spacing) * 2); }.mt-3{ margin-top: calc(var(--spacing) * 3); }.mt-4{ margin-top: calc(var(--spacing) * 4); }.mt-6{ margin-top: calc(var(--spacing) * 6); }.mt-8{ margin-top: calc(var(--spacing) * 8); }.mt-10{ margin-top: calc(var(--spacing) * 10); }.mb-4{ margin-bottom: calc(var(--spacing) * 4); }.mb-8{ margin-bottom: calc(var(--spacing) * 8); }.ml-auto{ margin-left: auto; }.block{ display: block; }.flex{ display: flex; }.grid{ display: grid; }.hidden{ display: none; }.inline-block{ display: inline-block; }.inline-flex{ display: inline-flex; }.aspect-video{ aspect-ratio: var(--aspect-video); }.size-3\.5{ width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); }.size-4{ width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); }.size-5{ width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); }.size-7{ width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); }.size-10{ width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); }.size-full{ width: 100%; height: 100%; }.h-16{ height: calc(var(--spacing) * 16); }.h-\[86vh\]{ height: 86vh; }.h-full{ height: 100%; }.min-h-\[620px\]{ min-height: 620px; }.min-h-screen{ min-height: 100vh; }.w-\[260px\]{ width: 260px; }.w-\[280px\]{ width: 280px; }.w-full{ width: 100%; }.max-w-3xl{ max-width: var(--container-3xl); }.max-w-4xl{ max-width: var(--container-4xl); }.max-w-\[1600px\]{ max-width: 1600px; }.max-w-xl{ max-width: var(--container-xl); }.shrink-0{ flex-shrink: 0; }.-translate-x-1\/2{ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }.cursor-pointer{ cursor: pointer; }.rail{ scrollbar-width: none; scroll-snap-type: x mandatory; overflow-x: auto; }.rail-item{ scroll-snap-align: start; }.list-none{ list-style-type: none; }.flex-col{ flex-direction: column; }.flex-wrap{ flex-wrap: wrap; }.place-items-center{ place-items: center; }.items-center{ align-items: center; }.justify-between{ justify-content: space-between; }.justify-center{ justify-content: center; }.gap-2{ gap: calc(var(--spacing) * 2); }.gap-3{ gap: calc(var(--spacing) * 3); }.gap-4{ gap: calc(var(--spacing) * 4); }.gap-6{ gap: calc(var(--spacing) * 6); }:where(.space-y-2 > :not(:last-child)){ --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); }:where(.space-y-3 > :not(:last-child)){ --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); }.gap-x-6{ column-gap: calc(var(--spacing) * 6); }.gap-y-2{ row-gap: calc(var(--spacing) * 2); }:where(.divide-y > :not(:last-child)){ --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); }:where(.divide-border > :not(:last-child)){ border-color: var(--border); }.overflow-hidden{ overflow: hidden; }.rounded{ border-radius: 0.25rem; }.rounded-full{ border-radius: 3.40282e+38px; }.rounded-lg{ border-radius: var(--radius); }.rounded-md{ border-radius: calc(var(--radius) - 2px); }.rounded-xl{ border-radius: calc(var(--radius) + 4px); }.border{ border-style: var(--tw-border-style); border-width: 1px; }.border-t{ border-top-style: var(--tw-border-style); border-top-width: 1px; }.border-border{ border-color: var(--border); }.border-input{ border-color: var(--input); }.bg-background{ background-color: var(--background); }.bg-background\/85{ background-color: var(--background); }@supports (color: color-mix(in lab, red, red)){.bg-background\/85{ background-color: color-mix(in oklab, var(--background) 85%, transparent); }}.bg-card{ background-color: var(--card); }.bg-card\/90{ background-color: var(--card); }@supports (color: color-mix(in lab, red, red)){.bg-card\/90{ background-color: color-mix(in oklab, var(--card) 90%, transparent); }}.bg-primary{ background-color: var(--primary); }.bg-gradient-to-b{ --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); }.from-background\/90{ --tw-gradient-from: var(--background); }@supports (color: color-mix(in lab, red, red)){.from-background\/90{ --tw-gradient-from: color-mix(in oklab, var(--background) 90%, transparent); }}.from-background\/90{ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }.to-transparent{ --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }.fill-primary-foreground{ fill: var(--primary-foreground); }.object-cover{ object-fit: cover; }.p-2{ padding: calc(var(--spacing) * 2); }.p-6{ padding: calc(var(--spacing) * 6); }.px-2{ padding-inline: calc(var(--spacing) * 2); }.px-3{ padding-inline: calc(var(--spacing) * 3); }.px-4{ padding-inline: calc(var(--spacing) * 4); }.px-5{ padding-inline: calc(var(--spacing) * 5); }.px-6{ padding-inline: calc(var(--spacing) * 6); }.py-0\.5{ padding-block: calc(var(--spacing) * .5); }.py-1{ padding-block: var(--spacing); }.py-2\.5{ padding-block: calc(var(--spacing) * 2.5); }.py-3{ padding-block: calc(var(--spacing) * 3); }.py-4{ padding-block: calc(var(--spacing) * 4); }.py-12{ padding-block: calc(var(--spacing) * 12); }.py-16{ padding-block: calc(var(--spacing) * 16); }.pb-2{ padding-bottom: calc(var(--spacing) * 2); }.pb-16{ padding-bottom: calc(var(--spacing) * 16); }.text-center{ text-align: center; }.text-2xl{ font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); }.text-3xl{ font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); }.text-5xl{ font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); }.text-base{ font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); }.text-sm{ font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }.text-xl{ font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }.text-xs{ font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); }.text-\[11px\]{ font-size: 11px; }.leading-\[1\.05\]{ --tw-leading: 1.05; line-height: 1.05; }.leading-relaxed{ --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); }.font-bold{ --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); }.font-medium{ --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); }.font-semibold{ --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); }.tracking-tight{ --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); }.tracking-wide{ --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); }.tracking-widest{ --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); }.whitespace-nowrap{ white-space: nowrap; }.text-foreground{ color: var(--foreground); }.text-foreground\/80{ color: var(--foreground); }@supports (color: color-mix(in lab, red, red)){.text-foreground\/80{ color: color-mix(in oklab, var(--foreground) 80%, transparent); }}.text-foreground\/90{ color: var(--foreground); }@supports (color: color-mix(in lab, red, red)){.text-foreground\/90{ color: color-mix(in oklab, var(--foreground) 90%, transparent); }}.text-muted-foreground{ color: var(--muted-foreground); }.text-primary{ color: var(--primary); }.text-primary-foreground{ color: var(--primary-foreground); }.uppercase{ text-transform: uppercase; }.opacity-90{ opacity: 0.9; }.shadow-\[var\(--shadow-plan\)\]{ --tw-shadow: var(--shadow-plan); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }.backdrop-blur{ --tw-backdrop-blur: blur(8px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); }.transition{ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }right\,width\]{ transition-property: left, right, width; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }opacity\]{ transition-property: margin, opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }height\,padding\]{ transition-property: width, height, padding; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }.transition-transform{ transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }.duration-500{ --tw-duration: .5s; transition-duration: 0.5s; }.outline-none{ --tw-outline-style: none; outline-style: none; }.group-open\:rotate-180:is(:where(.group):is([open],:popover-open,:open) *){ rotate: 180deg; }@media (hover: hover){.group-hover\:scale-105:is(:where(.group):hover *){ --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); }}.group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible="icon"] *){ margin-top: calc(var(--spacing) * -8); }.group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible="icon"] *){ display: none; }.group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible="icon"] *){ width: calc(var(--spacing) * 8) !important; height: calc(var(--spacing) * 8) !important; }.group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible="icon"] *){ width: var(--sidebar-width-icon); }.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible="icon"] *){ width: calc(var(--sidebar-width-icon) + 1rem); }.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *){ width: calc(var(--sidebar-width-icon) + 1rem + 2px); }.group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible="icon"] *){ overflow: hidden; }.group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible="icon"] *){ padding: 0px !important; }.group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible="icon"] *){ padding: calc(var(--spacing) * 2) !important; }.group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible="icon"] *){ opacity: 0; }.group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *){ right: calc(var(--sidebar-width) * -1); }.group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *){ left: calc(var(--sidebar-width) * -1); }.group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible="offcanvas"] *){ width: 0px; }.group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible="offcanvas"] *){ --tw-translate-x: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); }.group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side="left"] *){ right: calc(var(--spacing) * -4); }.group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side="left"] *){ border-right-style: var(--tw-border-style); border-right-width: 1px; }.group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side="right"] *){ left: 0px; }.group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side="right"] *){ rotate: 180deg; }.group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side="right"] *){ border-left-style: var(--tw-border-style); border-left-width: 1px; }.group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *){ rotate: 180deg; }.group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant="floating"] *){ border-radius: var(--radius); }.group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *){ border-style: var(--tw-border-style); border-width: 1px; }.group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.group)[data-variant="floating"] *){ border-color: var(--sidebar-border); }.group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant="floating"] *){ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }.group-\[\.toast\]\:bg-muted:is(:where(.group).toast *){ background-color: var(--muted); }.group-\[\.toast\]\:bg-primary:is(:where(.group).toast *){ background-color: var(--primary); }.group-\[\.toast\]\:text-muted-foreground:is(:where(.group).toast *){ color: var(--muted-foreground); }.group-\[\.toast\]\:text-primary-foreground:is(:where(.group).toast *){ color: var(--primary-foreground); }.group-\[\.toaster\]\:border-border:is(:where(.group).toaster *){ border-color: var(--border); }.group-\[\.toaster\]\:bg-background:is(:where(.group).toaster *){ background-color: var(--background); }.group-\[\.toaster\]\:text-foreground:is(:where(.group).toaster *){ color: var(--foreground); }.group-\[\.toaster\]\:shadow-lg:is(:where(.group).toaster *){ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }.group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *)::after{ content: var(--tw-content); left: 100%; }@media (hover: hover){.hover\:bg-accent:hover{ background-color: var(--accent); }.hover\:text-foreground:hover{ color: var(--foreground); }.hover\:opacity-80:hover{ opacity: 0.8; }.hover\:opacity-90:hover{ opacity: 0.9; }.group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:is(:where(.group)[data-collapsible="offcanvas"] *):hover{ background-color: var(--sidebar); }}.focus\:ring-2:focus{ --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }.focus\:ring-ring:focus{ --tw-ring-color: var(--ring); }@media (width >= 40rem){.sm\:w-\[320px\]{ width: 320px; }.sm\:w-\[340px\]{ width: 340px; }.sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }.sm\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0px, 1fr)); }.sm\:px-8{ padding-inline: calc(var(--spacing) * 8); }.sm\:text-4xl{ font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); }.sm\:text-7xl{ font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); }.sm\:text-base{ font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); }}@media (width >= 48rem){.md\:grid{ display: grid; }.md\:flex-row{ flex-direction: row; }.md\:items-center{ align-items: center; }.md\:items-end{ align-items: flex-end; }.md\:justify-between{ justify-content: space-between; }}@media (width >= 64rem){.lg\:flex{ display: flex; }.lg\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0px, 1fr)); }.lg\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0px, 1fr)); }}:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir="rtl"],:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),[dir="rtl"]{ rotate: 180deg; }}@property --tw-animation-delay{ syntax: "*"; inherits: false; initial-value: 0s; }@property --tw-animation-direction{ syntax: "*"; inherits: false; initial-value: normal; }@property --tw-animation-duration{ syntax: "*"; inherits: false; }@property --tw-animation-fill-mode{ syntax: "*"; inherits: false; initial-value: none; }@property --tw-animation-iteration-count{ syntax: "*"; inherits: false; initial-value: 1; }@property --tw-enter-blur{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-enter-opacity{ syntax: "*"; inherits: false; initial-value: 1; }@property --tw-enter-rotate{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-enter-scale{ syntax: "*"; inherits: false; initial-value: 1; }@property --tw-enter-translate-x{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-enter-translate-y{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-exit-blur{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-exit-opacity{ syntax: "*"; inherits: false; initial-value: 1; }@property --tw-exit-rotate{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-exit-scale{ syntax: "*"; inherits: false; initial-value: 1; }@property --tw-exit-translate-x{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-exit-translate-y{ syntax: "*"; inherits: false; initial-value: 0; }:root{ --radius: .5rem; --background: oklch(16% .02 275); --foreground: oklch(98% 0 0); --card: oklch(21% .025 275); --card-foreground: oklch(98% 0 0); --popover: oklch(21% .025 275); --popover-foreground: oklch(98% 0 0); --primary: oklch(62% .24 6); --primary-foreground: oklch(99% 0 0); --secondary: oklch(26% .03 275); --secondary-foreground: oklch(98% 0 0); --muted: oklch(26% .03 275); --muted-foreground: oklch(72% .02 275); --accent: oklch(30% .04 275); --accent-foreground: oklch(98% 0 0); --destructive: oklch(62% .24 27); --destructive-foreground: oklch(99% 0 0); --border: oklch(100% 0 0 / .12); --input: oklch(100% 0 0 / .15); --ring: oklch(62% .24 6); --chart-1: oklch(62% .24 6); --chart-2: oklch(60% .118 184.704); --chart-3: oklch(39.8% .07 227.392); --chart-4: oklch(82.8% .189 84.429); --chart-5: oklch(76.9% .188 70.08); --sidebar: oklch(19% .02 275); --sidebar-foreground: oklch(98% 0 0); --sidebar-primary: oklch(62% .24 6); --sidebar-primary-foreground: oklch(99% 0 0); --sidebar-accent: oklch(26% .03 275); --sidebar-accent-foreground: oklch(98% 0 0); --sidebar-border: oklch(100% 0 0 / .1); --sidebar-ring: oklch(62% .24 6); --font-display: "Outfit", system-ui, sans-serif; --gradient-hero: linear-gradient(to bottom,
    oklch(16% .02 275 / 0) 0%,
    oklch(16% .02 275 / .65) 55%,
    oklch(16% .02 275) 100%); --shadow-plan: 0 24px 60px oklch(0% 0 0 / .55); }@property --tw-translate-x{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-translate-y{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-translate-z{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-rotate-x{ syntax: "*"; inherits: false; }@property --tw-rotate-y{ syntax: "*"; inherits: false; }@property --tw-rotate-z{ syntax: "*"; inherits: false; }@property --tw-skew-x{ syntax: "*"; inherits: false; }@property --tw-skew-y{ syntax: "*"; inherits: false; }@property --tw-space-y-reverse{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-space-x-reverse{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-divide-y-reverse{ syntax: "*"; inherits: false; initial-value: 0; }@property --tw-border-style{ syntax: "*"; inherits: false; initial-value: solid; }@property --tw-gradient-position{ syntax: "*"; inherits: false; }@property --tw-gradient-from{ syntax: "<color>"; inherits: false; initial-value: #0000; }@property --tw-gradient-via{ syntax: "<color>"; inherits: false; initial-value: #0000; }@property --tw-gradient-to{ syntax: "<color>"; inherits: false; initial-value: #0000; }@property --tw-gradient-stops{ syntax: "*"; inherits: false; }@property --tw-gradient-via-stops{ syntax: "*"; inherits: false; }@property --tw-gradient-from-position{ syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }@property --tw-gradient-via-position{ syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }@property --tw-gradient-to-position{ syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }@property --tw-leading{ syntax: "*"; inherits: false; }@property --tw-font-weight{ syntax: "*"; inherits: false; }@property --tw-tracking{ syntax: "*"; inherits: false; }@property --tw-ordinal{ syntax: "*"; inherits: false; }@property --tw-slashed-zero{ syntax: "*"; inherits: false; }@property --tw-numeric-figure{ syntax: "*"; inherits: false; }@property --tw-numeric-spacing{ syntax: "*"; inherits: false; }@property --tw-numeric-fraction{ syntax: "*"; inherits: false; }@property --tw-shadow{ syntax: "*"; inherits: false; initial-value: 0 0 #0000; }@property --tw-shadow-color{ syntax: "*"; inherits: false; }@property --tw-shadow-alpha{ syntax: "<percentage>"; inherits: false; initial-value: 100%; }@property --tw-inset-shadow{ syntax: "*"; inherits: false; initial-value: 0 0 #0000; }@property --tw-inset-shadow-color{ syntax: "*"; inherits: false; }@property --tw-inset-shadow-alpha{ syntax: "<percentage>"; inherits: false; initial-value: 100%; }@property --tw-ring-color{ syntax: "*"; inherits: false; }@property --tw-ring-shadow{ syntax: "*"; inherits: false; initial-value: 0 0 #0000; }@property --tw-inset-ring-color{ syntax: "*"; inherits: false; }@property --tw-inset-ring-shadow{ syntax: "*"; inherits: false; initial-value: 0 0 #0000; }@property --tw-ring-inset{ syntax: "*"; inherits: false; }@property --tw-ring-offset-width{ syntax: "<length>"; inherits: false; initial-value: 0; }@property --tw-ring-offset-color{ syntax: "*"; inherits: false; initial-value: #fff; }@property --tw-ring-offset-shadow{ syntax: "*"; inherits: false; initial-value: 0 0 #0000; }@property --tw-outline-style{ syntax: "*"; inherits: false; initial-value: solid; }@property --tw-blur{ syntax: "*"; inherits: false; }@property --tw-brightness{ syntax: "*"; inherits: false; }@property --tw-contrast{ syntax: "*"; inherits: false; }@property --tw-grayscale{ syntax: "*"; inherits: false; }@property --tw-hue-rotate{ syntax: "*"; inherits: false; }@property --tw-invert{ syntax: "*"; inherits: false; }@property --tw-opacity{ syntax: "*"; inherits: false; }@property --tw-saturate{ syntax: "*"; inherits: false; }@property --tw-sepia{ syntax: "*"; inherits: false; }@property --tw-drop-shadow{ syntax: "*"; inherits: false; }@property --tw-drop-shadow-color{ syntax: "*"; inherits: false; }@property --tw-drop-shadow-alpha{ syntax: "<percentage>"; inherits: false; initial-value: 100%; }@property --tw-drop-shadow-size{ syntax: "*"; inherits: false; }@property --tw-backdrop-blur{ syntax: "*"; inherits: false; }@property --tw-backdrop-brightness{ syntax: "*"; inherits: false; }@property --tw-backdrop-contrast{ syntax: "*"; inherits: false; }@property --tw-backdrop-grayscale{ syntax: "*"; inherits: false; }@property --tw-backdrop-hue-rotate{ syntax: "*"; inherits: false; }@property --tw-backdrop-invert{ syntax: "*"; inherits: false; }@property --tw-backdrop-opacity{ syntax: "*"; inherits: false; }@property --tw-backdrop-saturate{ syntax: "*"; inherits: false; }@property --tw-backdrop-sepia{ syntax: "*"; inherits: false; }@property --tw-duration{ syntax: "*"; inherits: false; }@property --tw-ease{ syntax: "*"; inherits: false; }@property --tw-scale-x{ syntax: "*"; inherits: false; initial-value: 1; }@property --tw-scale-y{ syntax: "*"; inherits: false; initial-value: 1; }@property --tw-scale-z{ syntax: "*"; inherits: false; initial-value: 1; }@property --tw-content{ syntax: "*"; inherits: false; initial-value: ""; }@keyframes pulse{ 
  50% { opacity: 0.5; }
}@keyframes enter{ 
  0% { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0)); filter: blur(var(--tw-enter-blur, 0)); }
}@keyframes exit{ 
  100% { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0)); filter: blur(var(--tw-exit-blur, 0)); }
}@keyframes accordion-down{ 
  0% { height: 0px; }
  100% { height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))))); }
}@keyframes accordion-up{ 
  0% { height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))))); }
  100% { height: 0px; }
}@keyframes caret-blink{ 
  0%, 70%, 100% { opacity: 1; }
  20%, 50% { opacity: 0; }
}/* ------------------------------------------------------------------ *
 *  Viaplay-static – jaetut komponentit
 *  Käytetään etusivulla ja kaikilla osiosivuilla (tools/build.py).
 * ------------------------------------------------------------------ */

.vp-wrap{ margin-inline: auto; max-width: 1600px; padding-inline: 1rem; }@media (min-width: 640px){.vp-wrap{ padding-inline: 2rem; }}/* --- Osion otsikkorivi --------------------------------------------- */
.vp-row{ padding-block: 1.25rem; }.vp-row-head{ display: flex; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }.vp-row-title{ font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }@media (min-width: 768px){.vp-row-title{ font-size: 1.375rem; }}.vp-row-more{
  margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--muted-foreground);
  white-space: nowrap; transition: color .15s;
}.vp-row-more:hover{ color: var(--foreground); }/* --- Vaakasuuntainen karuselli ------------------------------------- */
.vp-rail-shell{ position: relative; }.vp-rail{
  display: flex; gap: .625rem; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; scroll-snap-type: x proximity;
  padding-block: .25rem; scroll-padding-left: 1rem;
}.vp-rail::-webkit-scrollbar{ display: none; }.vp-rail > *{ scroll-snap-align: start; flex: 0 0 auto; }.vp-nav{
  position: absolute; top: 0; bottom: 2.25rem; width: 3rem; z-index: 5;
  display: none; place-items: center; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(to right, oklch(16% .02 275 / .85), oklch(16% .02 275 / 0));
  opacity: 0; transition: opacity .2s;
}.vp-nav svg{ width: 1.5rem; height: 1.5rem; }.vp-nav.is-next{ right: 0; transform: scaleX(-1); }.vp-nav.is-prev{ left: 0; }.vp-rail-shell:hover .vp-nav{ opacity: 1; }.vp-nav[disabled]{ opacity: 0 !important; pointer-events: none; }@media (min-width: 1024px){.vp-nav{ display: grid; }}/* --- Kortit -------------------------------------------------------- */
.vp-card{ position: relative; display: block; width: 100%; }.vp-card-img{
  position: relative; overflow: hidden; border-radius: .5rem; background: var(--card);
  background-size: cover; background-position: center; box-shadow: 0 6px 22px oklch(0% 0 0 / .45);
  transition: transform .25s ease, box-shadow .25s ease;
}.vp-card:hover .vp-card-img{ transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 34px oklch(0% 0 0 / .6); }.vp-card-img::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .08);
}.vp-land{ width: 17.5rem; }.vp-land .vp-card-img{ aspect-ratio: 16 / 9; }.vp-port{ width: 9.5rem; }.vp-port .vp-card-img{ aspect-ratio: 2 / 3; }@media (min-width: 768px){.vp-land{ width: 20.5rem; }.vp-port{ width: 11rem; }}.vp-card-title{
  margin-top: .5rem; font-size: .8125rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}.vp-card-meta{
  margin-top: .125rem; font-size: .6875rem; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}/* Merkinnät (Uusi kausi,Vain meillä,hinta …) */
.vp-badge{
  position: absolute; left: .5rem; top: .5rem; z-index: 2; border-radius: 999px;
  padding: .1875rem .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; background: var(--primary); color: var(--primary-foreground);
}.vp-badge.is-muted{ background: oklch(16% .02 275 / .85); color: #fff; backdrop-filter: blur(4px); }.vp-badge.is-live{ background: oklch(62% .24 27); }/* Top-lista: iso järjestysnumero */
.vp-top{ display: flex; align-items: flex-end; width: 14rem; }@media (min-width: 768px){.vp-top{ width: 16rem; }}.vp-top-num{
  flex: 0 0 auto; min-width: 2.25rem; font-size: 5.5rem; line-height: .78; font-weight: 800;
  letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px oklch(100% 0 0 / .55);
  margin-right: -.75rem; padding-bottom: 1.75rem;
}/* ensimmäinen järjestysnumero mahtuu kokonaan näkyviin */
.vp-rail.is-top{ padding-left: 1.75rem; scroll-padding-left: 1.75rem; }@media (min-width: 640px){.vp-rail.is-top{ padding-left: 2.75rem; scroll-padding-left: 2.75rem; }}@media (min-width: 768px){.vp-top-num{ font-size: 7rem; min-width: 3rem; }}.vp-top .vp-card{ width: 8.5rem; }@media (min-width: 768px){.vp-top .vp-card{ width: 10rem; }}.vp-top .vp-card-img{ aspect-ratio: 2 / 3; }/* --- Ruudukot ------------------------------------------------------ */
.vp-grid{ display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }@media (min-width: 640px){.vp-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}@media (min-width: 1024px){.vp-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }}@media (min-width: 1440px){.vp-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }}.vp-grid .vp-card,.vp-grid .vp-land,.vp-grid .vp-port{ width: 100%; }/* Kokoelmalaatat (list-featurebox) */
.vp-tiles{ display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }@media (min-width: 768px){.vp-tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}@media (min-width: 1280px){.vp-tiles{ grid-template-columns: repeat(5, minmax(0, 1fr)); }}.vp-tile{ position: relative; display: block; overflow: hidden; border-radius: .625rem; aspect-ratio: 16 / 9;
  background-size: cover; background-position: center; transition: transform .25s ease; }.vp-tile:hover{ transform: scale(1.03); }.vp-tile span{
  position: absolute; inset: auto 0 0 0; padding: 1.5rem .75rem .625rem;
  background: linear-gradient(to top, oklch(0% 0 0 / .8), transparent);
  font-size: .8125rem; font-weight: 700;
}/* --- Sivun sankariosa (featurebox) --------------------------------- */
.vp-hero{ position: relative; min-height: 34rem; height: 72vh; overflow: hidden; }@media (max-width: 767px){.vp-hero{ height: auto; min-height: 30rem; }}.vp-hero-media{ position: absolute; inset: 0; }.vp-hero-media img,.vp-hero-media video{ width: 100%; height: 100%; object-fit: cover; }.vp-hero-fade{ position: absolute; inset: 0; background: var(--gradient-hero); }.vp-hero-fade::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, oklch(16% .02 275 / .85), oklch(16% .02 275 / .15) 60%, transparent);
}.vp-hero-body{
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-height: inherit; padding-block: 6rem 3rem;
}.vp-hero .vp-hero-title{ font-size: 2.5rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; max-width: 46rem; }@media (min-width: 768px){.vp-hero .vp-hero-title{ font-size: 4rem; }}.vp-hero p{ margin-top: .875rem; max-width: 34rem; color: oklch(98% 0 0 / .82); font-size: .9375rem; }.vp-hero-actions{ margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }.vp-hero-logo{ max-width: 22rem; max-height: 9rem; width: auto; height: auto; object-fit: contain; }.vp-btn{
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
  padding: .75rem 1.5rem; font-size: .875rem; font-weight: 700; transition: opacity .15s, transform .15s;
  background: var(--primary); color: var(--primary-foreground); border: 0; cursor: pointer;
}.vp-btn:hover{ opacity: .9; }.vp-btn.is-ghost{ background: oklch(100% 0 0 / .14); color: var(--foreground); backdrop-filter: blur(6px); }/* --- Promo-banneri (singleProductPromo) ---------------------------- */
.vp-promo{
  position: relative; overflow: hidden; border-radius: .875rem; min-height: 22rem;
  display: flex; align-items: flex-end; background-size: cover; background-position: center;
}.vp-promo::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(16% .02 275 / .95), oklch(16% .02 275 / .35) 55%, transparent),
              linear-gradient(to right, oklch(16% .02 275 / .8), transparent 70%);
}.vp-promo-body{ position: relative; padding: 1.75rem; max-width: 36rem; }.vp-promo-kicker{ font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }.vp-promo h3{ margin-top: .375rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }.vp-promo p{ margin-top: .625rem; font-size: .875rem; color: oklch(98% 0 0 / .78); }/* --- Urheilun aikataulu -------------------------------------------- */
.vp-day{ margin-top: 1.5rem; }.vp-day-label{
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-foreground); padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}.vp-event{
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; align-items: center;
  padding: .875rem .25rem; border-bottom: 1px solid var(--border); transition: background .15s;
}.vp-event:hover{ background: oklch(100% 0 0 / .04); }.vp-event-time{ font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9375rem; }.vp-event-name{ font-weight: 600; font-size: .9375rem; }.vp-event-sub{ font-size: .75rem; color: var(--muted-foreground); margin-top: .125rem; }.vp-event-tag{ font-size: .6875rem; font-weight: 700; text-transform: uppercase; color: var(--muted-foreground); }@media (max-width: 640px){.vp-event{ grid-template-columns: 4.25rem 1fr; }.vp-event-tag{ display: none; }}/* --- Lajilogot ------------------------------------------------------ */
.vp-logos{ display: grid; gap: .625rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }@media (min-width: 640px){.vp-logos{ grid-template-columns: repeat(5, minmax(0, 1fr)); }}@media (min-width: 1024px){.vp-logos{ grid-template-columns: repeat(7, minmax(0, 1fr)); }}.vp-logo{
  display: grid; place-items: center; aspect-ratio: 1; border-radius: .625rem;
  background: var(--card); border: 1px solid var(--border); padding: .875rem;
  font-size: .75rem; font-weight: 700; text-align: center; transition: background .15s, transform .15s;
}.vp-logo:hover{ background: var(--accent); transform: translateY(-2px); }.vp-logo img{ max-width: 100%; max-height: 3.5rem; object-fit: contain; }/* --- Mobiilivalikko ------------------------------------------------- */
.vp-mobile-menu{ display: none; border-top: 1px solid var(--border); background: var(--background); }.vp-mobile-menu.is-open{ display: block; }.vp-mobile-menu a{ display: block; padding: .875rem 1rem; font-size: .9375rem; font-weight: 600; border-bottom: 1px solid var(--border); }@media (min-width: 1024px){.vp-mobile-menu,.vp-burger{ display: none !important; }}/* --- Sivun sisältöalue --------------------------------------------- */
.vp-section-intro{ padding-block: 2.5rem 0; }.vp-section-intro h1{ font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }@media (min-width: 768px){.vp-section-intro h1{ font-size: 2.75rem; }}.vp-section-intro p{ margin-top: .75rem; max-width: 46rem; color: var(--muted-foreground); font-size: .9375rem; }/* --- Esittelyvideo (koko leveydeltä,häivytetty ylä- ja alareunasta) ---- */
.vp-showreel{ position: relative; margin-inline: auto; max-width: 1990px; }.vp-showreel-media{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--card); }.vp-showreel video{ display: block; width: 100%; height: 100%; object-fit: cover; }.vp-showreel-media::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--background) 0%, oklch(16% .02 275 / 0) 16%),
    linear-gradient(to top, var(--background) 0%, oklch(16% .02 275 / 0) 20%);
}.vp-showreel-credit{
  position: absolute; left: .375rem; top: 12%; z-index: 2; margin: 0;
  writing-mode: vertical-rl; font-size: .5rem; letter-spacing: .03em;
  color: oklch(100% 0 0 / .45); pointer-events: none;
}@media (max-width: 640px){.vp-showreel-credit{ display: none; }}/* --- Urheilupaketti: keskitetty otsikko,logot ja painike rinnakkain ---- */
.vp-sport-head{ text-align: center; }.vp-sport-head h2{
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--primary);
}.vp-sport-head p{ margin-top: .5rem; font-size: 1.0625rem; font-weight: 700; }@media (min-width: 768px){.vp-sport-head p{ font-size: 1.25rem; }}.vp-sport-body{
  margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 2rem 3rem;
}.vp-sport-cta{ flex: 0 0 auto; width: 15rem; text-align: center; }.vp-sport-cta p{ margin-top: .875rem; font-size: .8125rem; color: var(--muted-foreground); }/* --- Kilpailujen logot -------------------------------------------------- */
.vp-leagues{
  flex: 1 1 30rem; max-width: 60rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem .75rem; align-items: center; justify-items: center;
}@media (min-width: 640px){.vp-leagues{ grid-template-columns: repeat(6, minmax(0, 1fr)); }}@media (min-width: 1024px){.vp-leagues{ grid-template-columns: repeat(8, minmax(0, 1fr)); }}.vp-league{ display: grid; place-items: center; }.vp-league img{
  height: 3.25rem; width: auto; max-width: 100%; object-fit: contain;
  opacity: .92; transition: opacity .2s ease, transform .2s ease;
}@media (min-width: 768px){.vp-league img{ height: 3.5rem; }}.vp-league img:hover{ opacity: 1; transform: scale(1.06); }/* --- Murupolku ---------------------------------------------------------- */
.vp-crumbs{ padding-top: 5.25rem; font-size: .8125rem; color: var(--muted-foreground); }.vp-crumbs a{ transition: color .15s; }.vp-crumbs a:hover{ color: var(--foreground); }.vp-crumbs span[aria-current]{ color: var(--foreground); }.vp-crumb-sep{ margin-inline: .5rem; opacity: .5; }/* --- Artikkeli ---------------------------------------------------------- */
.vp-article{ padding-block: 1.5rem 2rem; }.vp-prose{ max-width: 46rem; }.vp-prose h1{
  margin-top: .5rem; font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
}.vp-prose h2{
  margin-top: 2.75rem; margin-bottom: .75rem; font-size: 1.5rem;
  font-weight: 700; letter-spacing: -.01em; scroll-margin-top: 5rem;
}.vp-prose p{ margin-bottom: 1rem; line-height: 1.75; color: oklch(98% 0 0 / .84); }.vp-kicker{
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--primary);
}.vp-lead{ margin-top: 1rem; font-size: 1.0625rem; line-height: 1.7; color: oklch(98% 0 0 / .92); }.vp-byline{ margin-top: 1rem; font-size: .8125rem; color: var(--muted-foreground); }.vp-figure{ margin-block: 1.75rem; }.vp-figure img{ width: 100%; height: auto; border-radius: .75rem; display: block; }.vp-toc{
  margin-block: 1.75rem; border: 1px solid var(--border); border-radius: .75rem;
  background: var(--card); padding: 1.125rem 1.25rem;
}.vp-toc p{ margin: 0 0 .625rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }.vp-toc ol{ margin: 0; padding-left: 1.125rem; display: grid; gap: .375rem; }.vp-toc a{ font-size: .9375rem; color: oklch(98% 0 0 / .85); transition: color .15s; }.vp-toc a:hover{ color: var(--primary); }.vp-steps{ margin: 0 0 1.25rem; padding-left: 1.375rem; display: grid; gap: .625rem; list-style: decimal; }/* Tailwindin preflight poistaa listamerkit (ol,ul { list-style: none }); oppaiden vaiheet
   ovat numeroitu lista,joten numerot palautetaan tässä. */
.vp-steps li{ line-height: 1.65; color: oklch(98% 0 0 / .84); padding-left: .25rem; }.vp-steps li::marker{ color: var(--primary); font-weight: 700; }details.vp-faq{
  border-bottom: 1px solid var(--border); padding-block: .875rem;
}details.vp-faq summary{
  cursor: pointer; font-weight: 600; list-style: none; display: flex;
  align-items: center; gap: .75rem;
}details.vp-faq summary::-webkit-details-marker{ display: none; }details.vp-faq summary::after{
  content: "+"; margin-left: auto; color: var(--primary); font-size: 1.25rem; line-height: 1;
}details.vp-faq[open] summary::after{ content: "–"; }details.vp-faq p{ margin: .75rem 0 0; font-size: .9375rem; color: var(--muted-foreground); }.vp-cta-box{
  margin-top: 2.5rem; border: 1px solid var(--border); border-radius: .875rem;
  background: var(--card); padding: 1.75rem; text-align: center;
}.vp-cta-box h2{ margin-top: 0; font-size: 1.375rem; }.vp-cta-box p{ color: var(--muted-foreground); font-size: .9375rem; }/* --- Artikkelikortit ---------------------------------------------------- */
.vp-posts{
  display: grid; gap: 1.25rem; grid-template-columns: repeat(1, minmax(0, 1fr));
}@media (min-width: 640px){.vp-posts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (min-width: 1024px){.vp-posts{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}.vp-post{
  display: grid; gap: .5rem; border: 1px solid var(--border); border-radius: .875rem;
  overflow: hidden; background: var(--card); padding-bottom: 1.125rem;
  transition: transform .2s ease, border-color .2s ease;
}.vp-post:hover{ transform: translateY(-3px); border-color: oklch(100% 0 0 / .25); }.vp-post img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }.vp-post-cat{
  margin: .75rem 1.125rem 0; font-size: .625rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary);
}.vp-post-title{ margin-inline: 1.125rem; font-size: 1rem; font-weight: 700; line-height: 1.35; }.vp-post-desc{ margin-inline: 1.125rem; font-size: .8125rem; color: var(--muted-foreground); line-height: 1.55; }.vp-tagline{ margin-top: .75rem; font-size: .8125rem; color: var(--muted-foreground); }/* --- Puuttuvat Tailwind-apuluokat ---------------------------------------
   Etusivun alkuperäinen käännös ei sisältänyt näitä,koska niitä ei silloin
   käytetty. Generoidut sivut tarvitsevat ne,joten ne on lisätty tähän. */
.gap-8{ gap: 2rem; }.mb-3{ margin-bottom: .75rem; }.mt-5{ margin-top: 1.25rem; }.mt-16{ margin-top: 4rem; }.p-8{ padding: 2rem; }.size-6{ width: 1.5rem; height: 1.5rem; }@media (min-width: 40rem){.sm\:block{ display: block; }.sm\:text-3xl{ font-size: 1.875rem; line-height: 2.25rem; }}@media (min-width: 48rem){.md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (min-width: 64rem){.lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}/* --- Ylapalkki: pidempi sanamerkki ei saa rivittyä ----------------------- */
header[data-vp-header] .text-xl{ white-space: nowrap; }header[data-vp-header] nav > ul a{ white-space: nowrap; }header[data-vp-header] nav > div a{ white-space: nowrap; }@media (min-width: 1024px) and (max-width: 1279px){header[data-vp-header] > nav{ gap: 1rem; }header[data-vp-header] nav > ul{ gap: 1rem; }header[data-vp-header] nav > ul a{ font-size: .8125rem; }}/* --- Etusivun sankarikuvan varjostin ------------------------------------
   Kuva on vaalea,joten tasainen tummennus söi sen. Tilalla pystysuora
   häivytys taustaväriin ja vasemmalta tuleva lukuvarjostin otsikolle. */
.vp-hero-scrim{
  pointer-events: none;
  background:
    linear-gradient(to right,
      oklch(16% .02 275 / .92) 0%,
      oklch(16% .02 275 / .72) 28%,
      oklch(16% .02 275 / .28) 55%,
      oklch(16% .02 275 / .12) 100%),
    linear-gradient(to bottom,
      oklch(16% .02 275 / .55) 0%,
      oklch(16% .02 275 / 0) 22%,
      oklch(16% .02 275 / 0) 55%,
      oklch(16% .02 275 / .95) 100%);
}@media (max-width: 767px){.vp-hero-scrim{
    background:
      linear-gradient(to bottom,
        oklch(16% .02 275 / .6) 0%,
        oklch(16% .02 275 / .35) 35%,
        oklch(16% .02 275 / .8) 78%,
        oklch(16% .02 275) 100%);
  }}/* --- Pakettikorttien apuluokat ------------------------------------------
   Nämä puuttuivat alkuperäisestä käännöksestä,koska niitä ei silloin käytetty. */
.-top-3{ top: -.75rem; }.text-4xl{ font-size: 2.25rem; line-height: 2.5rem; }.ring-2{ box-shadow: 0 0 0 2px var(--tw-ring-color, var(--ring)); }.ring-primary{ --tw-ring-color: var(--primary); }.ring-2.shadow-\[var\(--shadow-plan\)\]{
  box-shadow: 0 0 0 2px var(--primary), var(--shadow-plan);
}/* --- 404-sivu ------------------------------------------------------------ */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}.vp-404-search{ display: flex; gap: .625rem; margin: 1.5rem 0 2.5rem; max-width: 34rem; }.vp-404-search input{
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border); border-radius: 9999px;
  background: var(--card); padding: .75rem 1.125rem; font: inherit; font-size: .9375rem;
  color: var(--foreground);
}.vp-404-search input::placeholder{ color: var(--muted-foreground); }.vp-404-search input:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }.vp-404-search .vp-btn{ flex: 0 0 auto; }.vp-404-links{
  display: grid; gap: .5rem 1.5rem; padding: 0; margin: 0 0 1rem; list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}@media (min-width: 640px){.vp-404-links{ grid-template-columns: repeat(4, minmax(0, 1fr)); }}.vp-404-links a{
  display: block; padding: .625rem .875rem; border: 1px solid var(--border);
  border-radius: .5rem; background: var(--card); font-size: .875rem; font-weight: 600;
  transition: border-color .15s, color .15s;
}.vp-404-links a:hover{ border-color: var(--primary); color: var(--primary); }joten lisätään alleviivaus. */
.vp-prose p a,.vp-prose li a{ text-decoration: underline; text-underline-offset: 3px; }.mb-6{ margin-bottom: 1.5rem; }.max-w-\[80ch\]{ max-width: 80ch; }.hover\:border-primary:hover{ border-color: var(--primary); }