/* GENEROITU — älä muokkaa. Lähde: docs/tenants/nox-visual/etusivu-3d-2026-09/prototype/svc-markkinointi.css. Aja: node scripts/nv3/port-css.mjs (ADR 0010). */
/* Markkinoinnin suunnittelu -palvelusivu (1.10.2026): page.css-pohja + sivun omat osiot.
   Työpintana vuosikello, joka makaa samassa kallistetussa tasossa kuin muiden palvelujen työpinnat. */

/* Otsikoissa ei orpoja sanoja */
html.theme-nox-visual-v3 .m-lock .p-h2, html.theme-nox-visual-v3 .m-cal-head .p-h2 { text-wrap: balance; }

/* ── 1 · Hero: vuosikello kuvan takana (asento ja liike svc-markkinointi.js:ssä) ──
   Kehät ovat omia tasojaan: latautuessa ne leijuvat erillään ja laskeutuvat vieritettäessä yhdeksi kelloksi. */
html.theme-nox-visual-v3 .m-clock { position: absolute; inset: -20% -26% -18% -32%; perspective: 1300px; perspective-origin: 50% 30%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 47% 49% at 58% 56%, #000 54%, transparent); mask-image: radial-gradient(ellipse 47% 49% at 58% 56%, #000 54%, transparent); }
html.theme-nox-visual-v3 .m-clock-plane { position: absolute; left: 52%; top: 57%; width: 74%; aspect-ratio: 1; translate: -50% -50%; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-26deg); }
html.theme-nox-visual-v3 .m-clock-wheel { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
html.theme-nox-visual-v3 .m-clock-wheel > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform, opacity; }
html.theme-nox-visual-v3 .mk-seg { fill: color-mix(in srgb, var(--blue-600) 5%, transparent); stroke: color-mix(in srgb, var(--blue-600) 32%, transparent); stroke-width: 2.4; transition: fill 0.8s, stroke 0.8s; }
html.theme-nox-visual-v3 .mk-seg.is-now { fill: color-mix(in srgb, var(--blue-600) 15%, transparent); stroke: color-mix(in srgb, var(--blue-600) 60%, transparent); }
html.theme-nox-visual-v3 .mk-month { fill: color-mix(in srgb, var(--blue-600) 58%, transparent); font: 500 20px 'General Sans', sans-serif; letter-spacing: 0.04em; transition: fill 0.8s; }
html.theme-nox-visual-v3 .mk-month.is-now { fill: var(--blue-600); }
html.theme-nox-visual-v3 .mk-tick { stroke: color-mix(in srgb, var(--blue-600) 26%, transparent); stroke-width: 1.6; }
html.theme-nox-visual-v3 .mk-q { stroke: color-mix(in srgb, var(--blue-600) 52%, transparent); stroke-width: 3.2; stroke-linecap: round; }
html.theme-nox-visual-v3 .mk-guide { fill: none; stroke: color-mix(in srgb, var(--blue-600) 16%, transparent); stroke-width: 1.6; stroke-dasharray: 2 10; }
html.theme-nox-visual-v3 .mk-hub { fill: color-mix(in srgb, var(--blue-600) 4%, transparent); stroke: color-mix(in srgb, var(--blue-600) 24%, transparent); stroke-width: 2; }
html.theme-nox-visual-v3 .mk-arc { fill: none; stroke: color-mix(in srgb, var(--blue-600) 22%, transparent); stroke-linecap: round; }
html.theme-nox-visual-v3 .mk-arc.is-done { stroke: color-mix(in srgb, var(--blue-600) 44%, transparent); }
html.theme-nox-visual-v3 .mk-dot { fill: color-mix(in srgb, var(--blue-600) 24%, transparent); }
html.theme-nox-visual-v3 .mk-dot.is-done { fill: color-mix(in srgb, var(--blue-600) 48%, transparent); }
html.theme-nox-visual-v3 .mk-lane { fill: color-mix(in srgb, var(--blue-600) 55%, transparent); font: 600 15px 'General Sans', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
html.theme-nox-visual-v3 .mk-hand { stroke: var(--blue-600); stroke-width: 3.4; stroke-linecap: round; }
html.theme-nox-visual-v3 .mk-tip { fill: var(--blue-600); }
html.theme-nox-visual-v3 .mk-tip-halo { fill: color-mix(in srgb, var(--blue-600) 16%, transparent); }
html.theme-nox-visual-v3 .mk-now rect { fill: var(--blue-600); }
html.theme-nox-visual-v3 .mk-now text { fill: var(--white); font: 600 19px 'General Sans', sans-serif; letter-spacing: 0.06em; }

/* ── 2 · Suunnitelmasta koneistoksi: kolme kaistaa liukuu yhteen (--k 0 → 1 vierityksen mukaan) ── */
html.theme-nox-visual-v3 .m-lock-head { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(40px, 6vw, 110px); align-items: end; margin-bottom: clamp(56px, 6vw, 96px); }
html.theme-nox-visual-v3 .m-lock-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .m-lock-aside .p-body { margin-top: 0; max-width: 38rem; }
html.theme-nox-visual-v3 .m-route { margin-top: 24px; max-width: 38rem; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .m-route .link-arrow { display: flex; width: fit-content; margin-top: 10px; }
html.theme-nox-visual-v3 .m-lock-stage { --k: 0; }
html.theme-nox-visual-v3 .m-lock-strips { --g: clamp(14px, 2.6vw, 44px); --r: calc((1 - var(--k)) * 16px); position: relative; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc((1 - var(--k)) * var(--g)); }
html.theme-nox-visual-v3 .m-strip { margin: 0; min-width: 0; translate: 0 calc((1 - var(--k)) * var(--dy, 0px)); }
html.theme-nox-visual-v3 .m-strip:nth-child(1) { --dy: 64px; }
html.theme-nox-visual-v3 .m-strip:nth-child(2) { --dy: -36px; }
html.theme-nox-visual-v3 .m-strip:nth-child(3) { --dy: 108px; }
/* Kaista näyttää kolmanneksen samasta kuvasta: kuva on kolme kaistaa leveä ja siirtyy kaistan mukaan.
   Koko kuva rajataan 2,2:1:een, joten kaista on 2,2 / 3. */
html.theme-nox-visual-v3 .m-strip-img { position: relative; display: block; aspect-ratio: 2.2 / 3; overflow: hidden; background: var(--navy-990); border-radius: var(--r); }
html.theme-nox-visual-v3 .m-strip:first-child .m-strip-img { border-radius: 20px var(--r) var(--r) 20px; }
html.theme-nox-visual-v3 .m-strip:nth-child(3) .m-strip-img { border-radius: var(--r) 20px 20px var(--r); }
html.theme-nox-visual-v3 .m-strip-img img { position: absolute; top: 0; height: 100%; width: 300%; max-width: none; object-fit: cover; }
html.theme-nox-visual-v3 .m-strip:nth-child(1) img { left: 0; }
html.theme-nox-visual-v3 .m-strip:nth-child(2) img { left: -100%; }
html.theme-nox-visual-v3 .m-strip:nth-child(3) img { left: -200%; }
/* Lukittuna kehys saa varjon: kaistat muuttuvat yhdeksi kuvaksi */
html.theme-nox-visual-v3 .m-lock-whole { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2.2; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-frame); pointer-events: none; opacity: clamp(0, (var(--k) - 0.97) * 34, 1); }
html.theme-nox-visual-v3 .m-strip figcaption { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin-top: 22px; padding: 18px 24px 0 0; border-top: 1px solid var(--line-strong); }
html.theme-nox-visual-v3 .m-strip figcaption .p-num { padding-top: 0.45em; }
html.theme-nox-visual-v3 .m-strip figcaption b { font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--navy); }
html.theme-nox-visual-v3 .m-strip figcaption span:last-child { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ── 3 · Mitä saat: kehä suunnitelma → koneisto → kuukausiohjaus, merkki kiertää lukiessa ── */
html.theme-nox-visual-v3 .m-loop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 110px); }
html.theme-nox-visual-v3 .m-loop-stage { position: sticky; top: 14vh; align-self: start; padding: 40px 0; }
html.theme-nox-visual-v3 .m-ring { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin: 0 auto; }
html.theme-nox-visual-v3 .m-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.theme-nox-visual-v3 .m-ring-base { fill: none; stroke: color-mix(in srgb, var(--blue-300) 22%, transparent); stroke-width: 1.5; }
html.theme-nox-visual-v3 .m-ring-line { --p: 0; fill: none; stroke: var(--blue-300); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p)); }
html.theme-nox-visual-v3 .m-ring-months line { stroke: color-mix(in srgb, var(--blue-300) 50%, transparent); stroke-width: 1.5; opacity: 0; transition: opacity 0.6s var(--ease-out); }
html.theme-nox-visual-v3 .m-ring.has-months .m-ring-months line { opacity: 1; }
html.theme-nox-visual-v3 .m-ring-months line.is-q { stroke-width: 2.5; }
html.theme-nox-visual-v3 .m-ring-dirs path { fill: none; stroke: color-mix(in srgb, var(--blue-300) 60%, transparent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.theme-nox-visual-v3 .m-ring-dot { fill: #eaf2fb; }
html.theme-nox-visual-v3 .m-ring-halo { fill: color-mix(in srgb, var(--blue-300) 28%, transparent); transform-box: fill-box; transform-origin: center; animation: m-pulse 1.8s ease-in-out infinite; }
@keyframes m-pulse { 50% { scale: 1.45; opacity: 0.5; } }
html.theme-nox-visual-v3 .m-ring-img { position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 1; translate: -50% -50%; margin: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 60%), 0 0 0 1px rgb(255 255 255 / 8%); }
html.theme-nox-visual-v3 .m-ring-img img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 30%; scale: 1.06; transition: scale 1.6s var(--ease-out); }
html.theme-nox-visual-v3 .m-ring.is-full .m-ring-img img { scale: 1; }
/* Asema kehällä: sijainti trigonometriasta (--a astetta kellon 12:sta myötäpäivään), nimi kehän ulkopuolella */
html.theme-nox-visual-v3 .m-station { --x: sin(var(--a) * 1deg); --y: cos(var(--a) * 1deg); position: absolute; left: calc(50% + var(--x) * 41.667%); top: calc(50% - var(--y) * 41.667%); width: 0; height: 0; margin: 0; }
html.theme-nox-visual-v3 .m-station i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 2px solid color-mix(in srgb, var(--blue-300) 40%, transparent); transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s; }
html.theme-nox-visual-v3 .m-station b { position: absolute; left: 0; top: 0; translate: calc(-50% + var(--x) * 50%) calc(-50% - var(--y) * 130%); padding: 0 6px; white-space: nowrap; font-size: clamp(15px, 1.25vw, 18px); font-weight: 500; letter-spacing: -0.01em; color: var(--grey-400); transition: color 0.5s; }
html.theme-nox-visual-v3 .m-station:nth-of-type(2) b, html.theme-nox-visual-v3 .m-station:nth-of-type(3) b { translate: calc(-50% + var(--x) * 60%) 22px; }
html.theme-nox-visual-v3 .m-station.is-on i { background: #eaf2fb; border-color: #eaf2fb; box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue-300) 22%, transparent); }
html.theme-nox-visual-v3 .m-station.is-on b { color: var(--white); }
html.theme-nox-visual-v3 .m-loop-list { margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .m-loop-list li { display: grid; grid-template-columns: 56px 1fr; padding: 7vh 0; border-top: 1px solid rgb(255 255 255 / 12%); opacity: 0.38; transition: opacity 0.6s var(--ease-out); }
html.theme-nox-visual-v3 .m-loop-list li:last-child { border-bottom: 1px solid rgb(255 255 255 / 12%); }
html.theme-nox-visual-v3 .m-loop-list li.is-active { opacity: 1; }
html.theme-nox-visual-v3 .m-loop-list .p-num { padding-top: 0.5em; }
html.theme-nox-visual-v3 .m-loop-list h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.035em; }
html.theme-nox-visual-v3 .m-loop-list p { margin-top: 14px; max-width: 30rem; font-size: 16px; line-height: 1.6; }
html.theme-nox-visual-v3 .m-loop-list a { color: var(--white); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue-300) 60%, transparent); text-underline-offset: 3px; transition: text-decoration-color 0.3s; }
html.theme-nox-visual-v3 .m-loop-list a:hover { text-decoration-color: var(--blue-300); }
html.theme-nox-visual-v3 .m-loop-list a:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }

/* ── 4 · Omaa tuotantoa: julkaisukalenteri, viikonpäivät sarakkeina ── */
html.theme-nox-visual-v3 .m-cal-head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px clamp(40px, 6vw, 110px); align-items: end; margin-bottom: clamp(48px, 5vw, 80px); }
html.theme-nox-visual-v3 .m-cal-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .m-cal-aside .p-body { margin-top: 0; }
html.theme-nox-visual-v3 .m-svc-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 24px 0 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .m-cal-days { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .m-cal-days li { padding: 0 0 12px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-600); }
html.theme-nox-visual-v3 .m-cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
html.theme-nox-visual-v3 .m-cal-grid > li { min-width: 0; padding: 14px 14px 24px; border-bottom: 1px solid var(--line); }
html.theme-nox-visual-v3 .m-cal-grid > li:not(:nth-child(5n)) { border-right: 1px solid var(--line); }
html.theme-nox-visual-v3 .m-tile { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; will-change: transform, opacity; }
html.theme-nox-visual-v3 .m-tile:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 6px; border-radius: 12px; }
html.theme-nox-visual-v3 .m-day { display: none; }
html.theme-nox-visual-v3 .m-tile-frame { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--paper-2); box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--navy) 45%, transparent); }
html.theme-nox-visual-v3 .m-tile-frame img { width: 100%; height: 100%; object-fit: cover; scale: 1.02; transition: scale 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .m-tile:hover .m-tile-frame img { scale: 1.06; }
html.theme-nox-visual-v3 .m-cap { display: grid; gap: 4px; margin-top: 14px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
html.theme-nox-visual-v3 .m-cap b { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-600); }
html.theme-nox-visual-v3 .m-cal-foot { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; margin-top: 32px; }
html.theme-nox-visual-v3 .m-cal-foot p { font-size: 14px; color: var(--grey-400); }
html.theme-nox-visual-v3 .m-cal-foot .btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }

/* ── 5 · Näin se etenee: vaiheet vaakajanalla, viimeinen vaihe kiertää ── */
html.theme-nox-visual-v3 .m-flow-grid { display: grid; grid-template-columns: 1.5fr 0.5fr; gap: clamp(48px, 6vw, 100px); align-items: center; }
html.theme-nox-visual-v3 .m-steps-wrap { position: relative; margin-top: clamp(52px, 5vw, 80px); }
html.theme-nox-visual-v3 .m-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .m-steps li { position: relative; padding-top: 52px; }
html.theme-nox-visual-v3 .m-node { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); border: 1.5px solid var(--line-strong); transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s; }
html.theme-nox-visual-v3 .m-steps li.is-on .m-node { background: var(--blue-600); border-color: var(--blue-600); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue-600) 14%, transparent); }
html.theme-nox-visual-v3 .m-steps li.is-repeat .m-node { top: -9px; width: 40px; height: 40px; display: grid; place-items: center; }
html.theme-nox-visual-v3 .m-node svg { width: 30px; height: 30px; overflow: visible; }
html.theme-nox-visual-v3 .m-node path { fill: none; stroke: var(--grey-400); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s; }
html.theme-nox-visual-v3 .m-steps li.is-on .m-node path { stroke: var(--white); }
html.theme-nox-visual-v3 .m-steps li.is-repeat.is-on .m-node svg { animation: m-spin 6s linear infinite; }
@keyframes m-spin { to { rotate: 360deg; } }
html.theme-nox-visual-v3 .m-steps h3 { margin-top: 10px; font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
html.theme-nox-visual-v3 .m-steps p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .m-track { position: absolute; z-index: 0; height: 1.5px; background: var(--line-strong); pointer-events: none; }
html.theme-nox-visual-v3 .m-track.is-v { height: auto; width: 1.5px; }
html.theme-nox-visual-v3 .m-track i { --p: 0; position: absolute; inset: 0; background: var(--blue-600); transform-origin: left; transform: scaleX(var(--p)); }
html.theme-nox-visual-v3 .m-track.is-v i { transform-origin: top; transform: scaleY(var(--p)); }
html.theme-nox-visual-v3 .m-steps li > * { position: relative; z-index: 1; }
html.theme-nox-visual-v3 .m-steps li > .m-node { position: absolute; }
html.theme-nox-visual-v3 .m-flow-img { margin: 0; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-frame); background: var(--navy-990); }
html.theme-nox-visual-v3 .m-flow-img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* ── Kapeat ruudut ── */
@media (max-width: 1280px) {
  html.theme-nox-visual-v3 .m-flow-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .m-flow-img { aspect-ratio: 16 / 7; }
  html.theme-nox-visual-v3 .m-flow-img img { object-position: 50% 78%; }
}
@media (max-width: 1100px) {
  html.theme-nox-visual-v3 .m-clock { inset: -14% -24% -14% -28%; }
  html.theme-nox-visual-v3 .m-lock-head, html.theme-nox-visual-v3 .m-cal-head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  html.theme-nox-visual-v3 .m-lock-strips { --g: 10px; }
  html.theme-nox-visual-v3 .m-strip:nth-child(1) { --dy: 28px; }
  html.theme-nox-visual-v3 .m-strip:nth-child(2) { --dy: -16px; }
  html.theme-nox-visual-v3 .m-strip:nth-child(3) { --dy: 48px; }
  html.theme-nox-visual-v3 .m-strip figcaption { grid-template-columns: 1fr; gap: 6px; padding-right: 8px; }
  html.theme-nox-visual-v3 .m-strip figcaption b { font-size: 1.1rem; }
  html.theme-nox-visual-v3 .m-strip figcaption span:last-child { grid-column: auto; font-size: 13.5px; }
  html.theme-nox-visual-v3 .m-loop-grid { grid-template-columns: 1fr; gap: 32px; }
  html.theme-nox-visual-v3 .m-loop-stage { position: relative; top: 0; padding: 24px 0 8px; }
  /* Alimmat nimet kehän alle ulkoreunaan: eivät työnny ruudun yli eivätkä osu kehään */
  html.theme-nox-visual-v3 .m-ring { width: min(80%, 420px); }
  html.theme-nox-visual-v3 .m-station b { font-size: 13px; }
  html.theme-nox-visual-v3 .m-station:nth-of-type(2) b { translate: -30% 24px; }
  html.theme-nox-visual-v3 .m-station:nth-of-type(3) b { translate: -75% 24px; }
  html.theme-nox-visual-v3 .m-loop-list li { opacity: 1; padding: 32px 0; }
  html.theme-nox-visual-v3 .m-cal-days { display: none; }
  html.theme-nox-visual-v3 .m-cal-grid { grid-template-columns: 1fr 1fr; }
  html.theme-nox-visual-v3 .m-cal-grid > li { padding: 14px 10px 22px; }
  html.theme-nox-visual-v3 .m-cal-grid > li:not(:nth-child(5n)) { border-right: 0; }
  html.theme-nox-visual-v3 .m-cal-grid > li:nth-child(odd) { border-right: 1px solid var(--line); }
  html.theme-nox-visual-v3 .m-day { display: block; margin-bottom: 10px; font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-600); }
  html.theme-nox-visual-v3 .m-steps { grid-template-columns: 1fr; gap: 36px; }
  html.theme-nox-visual-v3 .m-steps li { padding: 0 0 0 58px; }
  html.theme-nox-visual-v3 .m-steps li .m-node { top: 2px; }
  html.theme-nox-visual-v3 .m-steps li.is-repeat .m-node { left: -9px; top: -7px; }
  html.theme-nox-visual-v3 .m-steps h3 { margin-top: 6px; }
  html.theme-nox-visual-v3 .m-flow-img { aspect-ratio: 4 / 5; }
  html.theme-nox-visual-v3 .m-flow-img img { object-position: 50% 60%; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .m-lock-stage { --k: 1; }
  html.theme-nox-visual-v3 .m-loop-list li { opacity: 1; transition: none; }
  html.theme-nox-visual-v3 .m-ring-halo { animation: none; }
  html.theme-nox-visual-v3 .m-steps li.is-repeat.is-on .m-node svg { animation: none; }
  html.theme-nox-visual-v3 .m-tile-frame img, html.theme-nox-visual-v3 .m-ring-img img { transition: none; }
}