/* Three explanatory scenes only. The page artwork and navigation stay static. */
#process {
  --process-ink: #a8bdb1;
  --process-accent: #b8ec83;
  --process-cyan: #86cbbc;
  --process-device: #172c26;
  --process-screen: #06130f;
  --process-edge: #577563;
}
#process .process-grid.product-path { gap: 14px !important; }
#process .process-grid.product-path > .process-animated-step {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: start;
  gap: 10px !important;
  position: relative;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  text-align: left;
}
#process .process-animated-step > b {
  position: absolute !important;
  inset: 14px auto auto 14px !important;
  width: 25px !important;
  height: 25px !important;
  display: grid !important;
  place-items: center;
  font-size: 12px !important;
  line-height: 1 !important;
  border: 1px solid var(--process-edge);
  border-radius: 50%;
  color: var(--process-accent);
  z-index: 1;
}
#process .process-animated-step > :is(h3, p) {
  grid-column: 1 !important;
  grid-row: auto !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
  max-width: none !important;
}
#process .process-animated-step > h3 { font-size: 15px !important; line-height: 1.3 !important; }
#process .process-animated-step > p { font-size: 13px !important; line-height: 1.55 !important; }
#process .process-demo {
  width: 100%;
  min-width: 0;
  aspect-ratio: 320 / 190;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 56% 64%, rgb(153 219 145 / .09), transparent 65%);
}
#process .process-demo > svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#process .process-demo :is(path, rect, circle) { stroke-width: 2; }
#process .process-metal { fill: var(--process-device); stroke: var(--process-edge); }
#process .process-glass { fill: var(--process-screen); stroke: var(--process-edge); }
#process .process-shadow { fill: #000; opacity: .2; }
#process .process-orbit { stroke: var(--process-edge); stroke-dasharray: 3 8; opacity: .4; }
#process :is(.process-rule, .process-edge) { stroke: var(--process-edge); }
#process :is(.process-accent-fill, .process-spark) { fill: var(--process-accent); }
#process .process-seal-body { fill: var(--process-screen); stroke: var(--process-accent); }
#process :is(.process-check, .process-signature, .process-phone-check, .process-power, .process-profile-key) { stroke: var(--process-accent); stroke-width: 3; }
#process :is(.process-download-arrow, .process-progress, .process-ring) { stroke: var(--process-accent); stroke-width: 4; }
#process :is(.process-progress-track, .process-ring-track) { stroke: var(--process-edge); stroke-width: 4; }
#process .process-camera { fill: var(--process-cyan); }
#process .process-notch { stroke: var(--process-edge); stroke-width: 3; }
#process .process-phone-ring { stroke: var(--process-cyan); }
#process .process-connection { stroke: var(--process-cyan); stroke-dasharray: 4 6; }
#process .process-laptop-base { stroke-width: 1; }
#process .process-motion-control { min-height: 44px; margin-top: 18px; }
#process .process-motion-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--process-edge);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
#process .process-motion-toggle[hidden] { visibility: hidden; }
#process .process-motion-toggle:focus-visible { outline: 2px solid var(--process-accent); outline-offset: 3px; }
#process .process-motion-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }
#process .process-motion-toggle .process-play-icon { display: none; }
#process .process-motion-toggle[aria-pressed="true"] .process-play-icon { display: block; }
#process .process-motion-toggle[aria-pressed="true"] .process-pause-icon { display: none; }

/* Override the legacy page-wide animation:none only on named scene parts. */
#process .process-demo .process-signature { animation: process-sign 5.4s ease-in-out infinite !important; stroke-dasharray: 120; }
#process .process-demo .process-seal { animation: process-seal 5.4s ease-in-out infinite !important; transform-origin: 248px 114px; }
#process .process-demo .process-spark { animation: process-spark 5.4s ease-in-out infinite !important; }
#process .process-demo .process-spark.second { animation-delay: -2.7s !important; }
#process .process-demo .process-package { animation: process-package 5.4s ease-in-out infinite !important; }
#process .process-demo .process-download-arrow { animation: process-arrow 5.4s ease-in-out infinite !important; }
#process .process-demo .process-progress { animation: process-progress 5.4s ease-in-out infinite !important; stroke-dasharray: 96; }
#process .process-demo .process-profile { animation: process-profile 5.4s ease-in-out infinite !important; }
#process .process-demo .process-ring { animation: process-ring 5.4s ease-in-out infinite !important; stroke-dasharray: 176; transform-origin: 159px 105px; }
#process .process-demo .process-phone-check { animation: process-phone 5.4s ease-in-out infinite !important; }
#process .process-demo .process-connection { animation: process-flow 1.2s linear infinite !important; }
#process .process-demo[data-playing="false"] * { animation-play-state: paused !important; }
@keyframes process-sign { 0%, 12% { stroke-dashoffset: 120; } 42%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 120; } }
@keyframes process-seal { 0%, 25% { transform: scale(.88); opacity: .45; } 45%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.88); opacity: .45; } }
@keyframes process-spark { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
@keyframes process-package { 0%, 15% { transform: translateY(-7px); } 60%, 85% { transform: translateY(7px); } 100% { transform: translateY(-7px); } }
@keyframes process-arrow { 0%, 20% { transform: translateY(-5px); opacity: .35; } 55%, 75% { transform: translateY(7px); opacity: 1; } 100% { transform: translateY(-5px); opacity: .35; } }
@keyframes process-progress { 0%, 20% { stroke-dashoffset: 96; } 72%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 96; } }
@keyframes process-profile { 0%, 12% { transform: translate(0, 0); opacity: 1; } 58%, 82% { transform: translate(-22px, 65px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes process-ring { 0%, 20% { stroke-dashoffset: 176; } 65%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 176; } }
@keyframes process-phone { 0%, 40% { opacity: .2; } 65%, 85% { opacity: 1; } 100% { opacity: .2; } }
@keyframes process-flow { to { stroke-dashoffset: -20; } }
html[data-theme="light"] #process {
  --process-ink: #496450;
  --process-accent: #3e7332;
  --process-cyan: #2a766c;
  --process-device: #e2ede3;
  --process-screen: #f8fcf8;
  --process-edge: #83a18d;
}
@media (max-width: 620px) {
  #process .process-grid.product-path { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  #process .process-demo { width: min(100%, 320px); justify-self: center; }
  #process .process-animated-step > p { font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #process .process-demo[data-process-demo] * { animation: none !important; }
}