/* ==========================================================================
   Upstream hero phone — animated results carousel for the home-2 hero.
   Consumes the site :root tokens (see DESIGN-SYSTEM.md); no brand values here.
   ========================================================================== */

.uhp-wrap{
  /* Status colours come from the brand tokens, lightened for dark grounds. */
  --uhp-good: var(--main, #63a433);
  --uhp-watch: var(--highlight, #c9a92d);
  --uhp-low: var(--move, #e85e3f);
  --uhp-good-l: color-mix(in srgb, var(--uhp-good) 68%, #ffffff);
  --uhp-watch-l: color-mix(in srgb, var(--uhp-watch) 74%, #ffffff);
  --uhp-low-l: color-mix(in srgb, var(--uhp-low) 78%, #ffffff);
  --uhp-glass: rgba(20, 40, 62, .55);
  --uhp-hairline: rgba(255, 255, 255, .15);
  --uhp-screen: #0f2032;

  font-family: var(--paragraph-font, sans-serif);

  /* The Divi row sizes both columns from their content (flex: 0 1 auto).
     Without a cap this widget eats the row and starves the hero copy. */
  max-width: 470px;
  margin-left: auto;
}

.uhp-wrap *{ box-sizing: border-box; }
/* Divi's text module adds bottom padding to every <p>; these are UI, not copy. */
.uhp-wrap p{ padding-bottom: 0; }

.uhp{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

/* ---------- phone ---------- */
.uhp-phone{
  position: relative;
  /* 272 is the floor the results screen needs before its rows start to clip. */
  width: 272px;
  max-width: 100%;
  flex: none;
  aspect-ratio: 272 / 552;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(150deg, #4c5a68 0%, #1c2733 34%, #39485a 62%, #141c26 100%);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.uhp-screen{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  background: var(--uhp-screen);
}
.uhp-notch{
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 24px;
  border-radius: 13px;
  background: #0b141d;
  z-index: 6;
}
.uhp-track{
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform .7s cubic-bezier(.55, .06, .2, 1);
}
.uhp-slide{
  flex: 0 0 100%;
  /* Without this a flex item's automatic minimum size lets wide content push
     the slide past the screen, and the track slides to the wrong offset. */
  min-width: 0;
  height: 100%;
  position: relative;
  background: var(--uhp-screen);
}
.uhp-slide img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- data slide ---------- */
.uhp-slide--data{
  padding: 60px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uhp-kicker{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0;
  color: var(--uhp-good-l);
}
.uhp-name{
  font-family: var(--title-font, serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.3px;
  color: #fff;
  margin: 5px 0 0;
}
.uhp-summary{
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 14px;
}
.uhp-big{
  font-family: var(--title-font, serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.uhp-sub{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-top: 5px;
}

/* Doubled class beats Divi's own `.et_pb_text_inner ul`, which otherwise
   forces a 17px left padding and pushes the rows past the phone screen. */
.uhp-wrap ul.uhp-rows.uhp-rows{
  list-style: none;
  margin: 0;
  padding: 0;
}
.uhp-rows li{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 1px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.uhp-rows .uhp-l{
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, .84);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uhp-rows .uhp-v{
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.uhp-rows .uhp-s{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  width: 48px;
  flex: none;
  text-align: right;
  white-space: nowrap;
}

/* one marker plotted against its optimal band */
.uhp-gauge-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.uhp-gauge-name{ font-size: 12px; font-weight: 600; color: #fff; }
.uhp-gauge-read{ font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.uhp-gauge-bar{
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .13);
}
.uhp-gauge-band{
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--uhp-good) 55%, transparent);
}
.uhp-gauge-pin{
  position: absolute;
  top: -4px;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: #fff;
}
.uhp-gauge-scale{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  font-size: 9.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, .48);
}

/* ---------- status colours ---------- */
.uhp-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
  background: currentColor;
}
.uhp-good{ color: var(--uhp-good-l); }
.uhp-watch{ color: var(--uhp-watch-l); }
.uhp-low{ color: var(--uhp-low-l); }

/* ---------- donut ---------- */
.uhp-donut{ display: block; flex: none; }
.uhp-donut circle{
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.uhp-donut .uhp-track-ring{ stroke: rgba(255, 255, 255, .16); }
.uhp-donut .uhp-arc{ stroke: var(--uhp-good-l); }

/* ---------- side cards ---------- */
.uhp-side{
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 176px;
}
.uhp-card{
  background: var(--uhp-glass);
  border: 1px solid var(--uhp-hairline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 8px;
  padding: 14px 15px;
}
.uhp-card .uhp-k{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin: 0;
}
.uhp-card .uhp-n{
  font-family: var(--title-font, serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.8px;
  color: #fff;
  margin: 8px 0 5px;
  font-variant-numeric: tabular-nums;
}
.uhp-card .uhp-n small{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
}
.uhp-card .uhp-d{
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, .66);
  margin: 0;
}

/* ---------- dot rail ---------- */
.uhp-rail{
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}
.uhp-rail button{
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: transparent;
  width: 24px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 3px;
}
.uhp-rail button::after{
  content: "";
  display: block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .26);
  transition: background .35s ease;
}
.uhp-rail button[aria-current="true"]::after{ background: var(--uhp-good-l); }
.uhp-rail button:focus-visible{
  outline: 2px solid var(--uhp-good-l);
  outline-offset: 2px;
}

/* ---------- responsive ---------- */
/* The Divi columns are content-sized, so below roughly 1280 the hero column is
   no longer wide enough for the phone and the cards side by side and the cards
   drop underneath. (A container query would be the natural tool here, but
   `container-type: inline-size` removes the widget's intrinsic width, which is
   exactly what Divi uses to size the column — it collapses to nothing.) */
@media (max-width: 1280px){
  .uhp{ flex-direction: column; gap: 16px; }
  .uhp-wrap{ max-width: 360px; }
  .uhp-side{
    flex-direction: row;
    max-width: 340px;
    width: 100%;
  }
  .uhp-side .uhp-card{ flex: 1; min-width: 0; }
}

@media (max-width: 980px){
  .uhp-wrap{ margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce){
  .uhp-track{ transition: none; }
  .uhp-rail button::after{ transition: none; }
}

.uhp-rail button.uhp-pause{
  margin-left: 8px;
}
.uhp-rail button.uhp-pause::after{
  width: 4px;
  height: 12px;
  border-radius: 0;
  background: rgba(255, 255, 255, .8);
  box-shadow: 6px 0 0 rgba(255, 255, 255, .8);
  transform: translateX(-3px);
}
.uhp-rail button.uhp-pause.is-paused::after{
  width: 0;
  height: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .8);
}