.urovo-stage-wheel {
  --stage-wheel-blue: var(--primary, #00aeef);
  width: 100%;
  min-width: 0;
  color: var(--foreground, #1d2023);
}

.urovo-stage-wheel [hidden] { display: none !important; }
.urovo-stage-wheel.is-enhanced {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
  align-items: center;
  column-gap: clamp(32px, 4.2vw, 80px);
  row-gap: 32px;
}
.urovo-stage-wheel__stage, .urovo-stage-wheel__items, .urovo-stage-wheel__item { min-width: 0; }
.urovo-stage-wheel__items { position: relative; }
.urovo-stage-wheel__nav {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.urovo-stage-wheel__nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dce6ed;
  border-radius: 50%;
  color: var(--foreground, #1d2023);
  background: #fff;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.urovo-stage-wheel__nav button:hover { color: var(--stage-wheel-blue); border-color: var(--stage-wheel-blue); }
.urovo-stage-wheel.is-enhanced .urovo-stage-wheel__eyebrow {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: 116px;
}
.urovo-stage-wheel__wheel { position: relative; width: 100%; max-width: 600px; margin-inline: auto; }
.urovo-stage-wheel__wheel > svg { display: block; width: 100%; height: auto; }
.urovo-stage-wheel__sector { cursor: pointer; outline: none; }
.urovo-stage-wheel__sector-image { transform-box: view-box; transform-origin: 220px 220px; transition: transform .45s; }
.urovo-stage-wheel__shade { fill: #000; opacity: .32; pointer-events: none; transition: opacity .35s; }
.urovo-stage-wheel__sector.is-active .urovo-stage-wheel__shade { opacity: 0; }
.urovo-stage-wheel__sector:not(.is-active):is(:hover, :focus-visible) .urovo-stage-wheel__sector-image { transform: scale(1.06); }
.urovo-stage-wheel__plus { opacity: 0; transition: opacity .2s; }
.urovo-stage-wheel__sector:not(.is-active):is(:hover, :focus-visible) .urovo-stage-wheel__plus { opacity: 1; }
.urovo-stage-wheel__sector:focus-visible .urovo-stage-wheel__shade { fill: var(--stage-wheel-blue); opacity: .3; }
.urovo-stage-wheel__progress {
  color: var(--stage-wheel-blue);
  stroke-dasharray: var(--stage-wheel-sector-length) 100;
}
.urovo-stage-wheel.is-enhanced .urovo-stage-wheel__progress {
  animation: urovo-stage-wheel-progress 8s linear infinite;
}
.urovo-stage-wheel__ticks {
  transform-origin: 220px 220px;
  animation: urovo-stage-wheel-ticks 90s linear infinite;
}
.urovo-stage-wheel[data-animation-paused='true'] :is(.urovo-stage-wheel__progress, .urovo-stage-wheel__ticks) {
  animation-play-state: paused;
}
.urovo-stage-wheel.is-enhanced .urovo-stage-wheel__item:not([hidden]) > :is(.urovo-stage-wheel__eyebrow, .urovo-stage-wheel__content),
.urovo-stage-wheel__center > * {
  animation: urovo-stage-wheel-appear .35s ease;
}
@keyframes urovo-stage-wheel-progress {
  from { stroke-dasharray: 0 100; }
  to { stroke-dasharray: var(--stage-wheel-sector-length) 100; }
}
@keyframes urovo-stage-wheel-ticks {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes urovo-stage-wheel-appear {
  from { opacity: .3; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.urovo-stage-wheel__center {
  position: absolute;
  inset: 28%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
  pointer-events: none;
}
.urovo-stage-wheel__center [data-stage-wheel-icon] { color: var(--stage-wheel-blue); }
.urovo-stage-wheel__center svg { width: clamp(40px, 5vw, 90px); height: auto; }
.urovo-stage-wheel__center svg g { stroke-width: 1.3; }
.urovo-stage-wheel__center strong { max-width: 100%; font-size: clamp(13px, 1.4vw, 24px); line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; font-weight: 500; }
.urovo-stage-wheel__item { overflow-wrap: anywhere; }
.urovo-stage-wheel__eyebrow { margin: 0 0 28px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--stage-wheel-blue); }
.urovo-stage-wheel__content .urovo-rich-text { max-width: none; color: #7b8084; font-size: clamp(14px, 1.1vw, 18px); }
.urovo-stage-wheel__content .urovo-rich-text :is(h3, h4, p:has(> strong:only-child)) { margin: 44px 0 12px; color: var(--foreground, #1d2023); font-size: clamp(20px, 1.5vw, 28px); font-weight: 500; }
.urovo-stage-wheel__content .urovo-rich-text p > strong:only-child { font-weight: 500; }
.urovo-stage-wheel__content .urovo-rich-text > :first-child { margin-top: 0; }
.urovo-stage-wheel__content .urovo-rich-text p { margin: 0; }
.urovo-stage-wheel__tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.urovo-stage-wheel__tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid #e0e8ee;
  border-radius: 30px;
  color: #62707b;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.urovo-stage-wheel__tabs button span { opacity: .7; font-size: 10px; }
.urovo-stage-wheel__tabs button[aria-selected='true'] { color: #fff; background: var(--stage-wheel-blue); border-color: var(--stage-wheel-blue); }
.urovo-stage-wheel__tabs button:hover { border-color: var(--stage-wheel-blue); }
.urovo-stage-wheel :is(button, [role='tabpanel']):focus-visible { outline: 2px solid var(--stage-wheel-blue); outline-offset: 5px; }
.urovo-stage-wheel__playback { grid-column: 1 / -1; text-align: center; margin-top: -16px; }
.urovo-stage-wheel__playback button { color: #62707b; font-size: 12px; cursor: pointer; padding: 6px 12px; }
.urovo-stage-wheel:not(.is-enhanced) .urovo-stage-wheel__item + .urovo-stage-wheel__item { margin-top: 40px; }
@media (max-width: 767px) {
  .urovo-stage-wheel.is-enhanced { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .urovo-stage-wheel__wheel { max-width: 360px; }
  .urovo-stage-wheel__center { gap: 7px; }
  .urovo-stage-wheel__center svg { width: 48px; }
  .urovo-stage-wheel__center strong { font-size: 14px; }
  .urovo-stage-wheel__eyebrow { margin-bottom: 20px; }
  .urovo-stage-wheel__content .urovo-rich-text :is(h3, h4, p:has(> strong:only-child)) { margin-top: 28px; }
  .urovo-stage-wheel__tabs { gap: 8px; }
  .urovo-stage-wheel__tabs button { padding: 10px 12px; }
}