/* Urgent care billing page (v2/specialties/urgent-care-billing.blade.php). Loaded
   after behavioral-health-v2.css, mental-health-v2.css, dermatology-v2.css and
   dme-v2.css: the page reuses their sections (the wrapper carries .bh-v2, .mh-v2
   and .derm-v2 too). Everything here is scoped to .uc-v2 or uses uc-* classes,
   so the other pages are unaffected. */

/* ============================================================= */
/* Hero — Figma node 11472:13 (Hero Section 11472:95, 1440 x 796) */
/* The BH / MH hero with a 539px copy column, the form 48px below  */
/* and BH's 42.33px bottom padding; the claim-monitor artwork.     */
/* ============================================================= */
.uc-v2 .bh-hero {
  padding-bottom: 42.33px;
}

.uc-v2 .bh-hero-top {
  min-height: 539px;
  margin-bottom: 48px;
}

/* Figma 11538:178's slot: 516 wide at 724 / 41.5 in the 1240 box (right edge on
   the 1240 line); the claim-monitor motion (#ucv) fills it. */
.uc-hero-art {
  position: absolute;
  top: 41.5px;
  right: 0;
  /* Narrow desktops (1200-1270px) shrink it to stay clear of the 622px copy. */
  width: min(516px, calc(100% - 646px));
  pointer-events: none;
  animation: bh-brain-in 1.2s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* ---------- Claim-monitor motion (#ucv) ---------- */
/* Blobs breathe, three beads ride the dashed orbit, the ECG trace runs, and the
   page script walks one visit at a time through Check-in > Paid: steps tick, the
   track fills, code chips land, status cards light up, the PAID stamp drops and
   "Collected today" counts up, then the next visit swaps in. */
.ucv {
  --navy: #26346f;
  --navy-deep: #141b42;
  --coral: #f45b5b;
  --coral-soft: #ffe6e5;
  --teal: #2fd3c0;
  --teal-deep: #14a596;
  --ink: #26346f;
  --muted: #6b7394;
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 1 / 0.9;
  container-type: inline-size;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ucv *,
.ucv *::before,
.ucv *::after {
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .ucv {
    aspect-ratio: 1 / 1.12;
  }
}

/* backdrop shapes */
.ucv-blob {
  position: absolute;
  border-radius: 50%;
  animation: ucvBreathe 9s ease-in-out infinite;
}

.ucv-blob--navy {
  top: 8%;
  left: 5%;
  width: 36%;
  aspect-ratio: 1;
  background: var(--navy);
}

.ucv-blob--coral {
  right: 5%;
  bottom: 5%;
  width: 40%;
  aspect-ratio: 1;
  background: var(--coral);
  animation-delay: -4.5s;
}

.ucv-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* the monitor */
.ucv-monitor {
  position: absolute;
  top: 15%;
  right: 12%;
  bottom: 15%;
  left: 12%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4cqw;
  padding: 3cqw 3.4cqw;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(110% 70% at 85% 0%, #33468f 0%, rgba(51, 70, 143, 0) 60%),
    linear-gradient(165deg, #22306a 0%, var(--navy-deep) 100%);
  border: 5px solid #fff;
  border-radius: 24px;
  box-shadow: 0 34px 60px -22px rgba(20, 27, 66, 0.6);
}

.ucv-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(8.5px, 1.9cqw, 12px);
}

.ucv-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #ff9b9a;
}

.ucv-live i {
  width: 7px;
  height: 7px;
  background: var(--coral);
  border-radius: 50%;
  animation: ucvBlink 1.4s ease-in-out infinite;
}

.ucv-top-title {
  color: rgba(255, 255, 255, 0.72);
}

.ucv-claim-id {
  margin-left: auto;
  padding: 2px 9px;
  font-weight: 500;
  color: #d6dcf7;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  transition: opacity 0.3s;
}

.ucv-visit {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.35s, transform 0.35s;
}

.ucv-visit-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(28px, 7cqw, 42px);
  aspect-ratio: 1;
  background: var(--coral);
  border-radius: 11px;
}

.ucv-visit-ic svg {
  width: 55%;
  height: 55%;
}

.ucv-visit b {
  display: block;
  font-size: clamp(11px, 2.7cqw, 17px);
  font-weight: 600;
  line-height: 1.25;
}

.ucv-visit small {
  display: block;
  font-size: clamp(8.5px, 1.85cqw, 11.5px);
  color: rgba(255, 255, 255, 0.66);
}

.ucv-payer {
  flex: none;
  margin-left: auto;
  padding: 3px 9px;
  font-size: clamp(8px, 1.7cqw, 11px);
  color: #cfd6f5;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.ucv-ecg {
  position: relative;
  padding: 1.2cqw 1.6cqw 0.6cqw;
  background-color: rgba(255, 255, 255, 0.035);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.ucv-ecg-head {
  display: flex;
  justify-content: space-between;
  font-size: clamp(8px, 1.75cqw, 11px);
  color: rgba(255, 255, 255, 0.6);
}

.ucv-status {
  font-weight: 500;
  color: #ffd3d2;
}

.ucv-ecg svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2px;
}

.ucv-base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2;
  stroke-linejoin: round;
}

.ucv-trace {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240 760;
  filter: drop-shadow(0 0 4px rgba(255, 120, 120, 0.9));
  animation: ucvTrace 2.4s linear infinite;
}

.ucv-rise {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 0.8s ease-out;
}

.ucv-end {
  fill: var(--teal);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s 0.6s;
}

.is-paid .ucv-rise {
  stroke-dashoffset: 0;
}

.is-paid .ucv-end {
  opacity: 1;
  animation: ucvPulse 1.6s ease-out infinite;
}

.ucv-stamp {
  position: absolute;
  top: 40%;
  right: 16%;
  padding: 1px 10px;
  font-weight: 700;
  font-size: clamp(12px, 3.4cqw, 22px);
  letter-spacing: 0.14em;
  color: var(--teal);
  background: rgba(20, 27, 66, 0.75);
  border: 2.5px solid var(--teal);
  border-radius: 8px;
  opacity: 0;
  transform: rotate(-12deg) scale(2.2);
  transition: opacity 0.25s, transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.is-paid .ucv-stamp {
  opacity: 1;
  transform: rotate(-12deg) scale(1);
}

.ucv-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  transition: opacity 0.35s;
}

.ucv-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  font-size: clamp(8.5px, 1.85cqw, 11.5px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s;
}

.ucv-chip em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.55);
}

.ucv-chip b {
  font-weight: 600;
}

.ucv-chip--icd b {
  color: #ffb6b5;
}

.is-coded .ucv-chip {
  opacity: 1;
  transform: none;
}

.is-coded .ucv-chip:nth-child(2) {
  transition-delay: 0.12s;
}

.is-coded .ucv-chip:nth-child(3) {
  transition-delay: 0.24s;
}

.ucv-steps {
  --dot: clamp(11px, 2.6cqw, 16px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.ucv-track {
  position: absolute;
  top: calc(var(--dot) / 2 - 1.5px);
  right: 10%;
  left: 10%;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.ucv-track-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  border-radius: 3px;
  transition: width 0.6s ease;
}

.ucv-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ucv-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  background: #1b2454;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: background 0.3s, border-color 0.3s;
}

.ucv-dot svg {
  width: 70%;
  height: 70%;
  color: var(--navy-deep);
  opacity: 0;
  transition: opacity 0.2s;
}

.ucv-lbl {
  font-size: clamp(7.5px, 1.65cqw, 11px);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  transition: color 0.3s;
}

.ucv-step.is-done .ucv-dot {
  background: var(--teal);
  border-color: var(--teal);
}

.ucv-step.is-done .ucv-dot svg {
  opacity: 1;
}

.ucv-step.is-active .ucv-dot {
  background: var(--coral);
  border-color: #fff;
}

.ucv-step.is-active .ucv-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--coral);
  border-radius: 50%;
  animation: ucvRing 1.2s ease-out infinite;
}

.ucv-step.is-done .ucv-lbl,
.ucv-step.is-active .ucv-lbl {
  color: #fff;
}

.ucv-foot {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 6px;
}

.ucv-foot div {
  padding: 1.1cqw 1.5cqw;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.ucv-foot small {
  display: block;
  font-size: clamp(7.5px, 1.6cqw, 10.5px);
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.ucv-foot b {
  display: block;
  font-size: clamp(11px, 2.8cqw, 18px);
  font-weight: 600;
  line-height: 1.3;
}

.ucv-foot .ucv-good {
  color: var(--teal);
}

/* the urgent care badge */
.ucv-badge {
  position: absolute;
  top: calc(15% - clamp(15px, 3.2cqw, 22px));
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 15px 5px 5px;
  font-weight: 600;
  font-size: clamp(10px, 2.3cqw, 14px);
  white-space: nowrap;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 28px -10px rgba(38, 52, 111, 0.35);
  transform: translateX(-50%);
}

.ucv-badge-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(22px, 5cqw, 32px);
  aspect-ratio: 1;
  background: var(--coral);
  border-radius: 50%;
}

.ucv-badge-ic svg {
  width: 55%;
  height: 55%;
}

.ucv-badge-ic::before,
.ucv-badge-ic::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--coral);
  border-radius: 50%;
  animation: ucvRing 2.2s ease-out infinite;
}

.ucv-badge-ic::after {
  animation-delay: 1.1s;
}

/* floating status cards */
.ucv-card {
  position: absolute;
  z-index: 3;
  width: 38%;
  animation: ucvFloat 6s ease-in-out infinite;
}

.ucv-card--a { top: 0; left: 0; }
.ucv-card--b { top: 4%; right: 0; animation-delay: -1.5s; }
.ucv-card--c { bottom: 3%; left: 1%; animation-delay: -3s; }
.ucv-card--d { right: 0; bottom: 0; animation-delay: -4.5s; }

.ucv-card-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: clamp(7px, 1.6cqw, 11px);
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 14px;
  box-shadow: 0 14px 34px -12px rgba(38, 52, 111, 0.32);
  opacity: 0.72;
  transform: scale(0.94);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.4s;
}

.ucv-card.is-on .ucv-card-in {
  border-color: rgba(20, 165, 150, 0.4);
  opacity: 1;
  transform: scale(1);
}

.ucv-card-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(24px, 5.4cqw, 34px);
  aspect-ratio: 1;
  color: var(--navy);
  background: #eef1fb;
  border-radius: 10px;
  transition: background 0.4s, color 0.4s;
}

.ucv-card-ic svg {
  width: 58%;
  height: 58%;
}

.ucv-card.is-on .ucv-card-ic {
  color: var(--coral);
  background: var(--coral-soft);
}

.ucv-card-tx {
  flex: 1;
  min-width: 0;
}

.ucv-card-tx b {
  display: block;
  font-size: clamp(9px, 2.05cqw, 13px);
  font-weight: 600;
  line-height: 1.25;
}

.ucv-card-tx small {
  display: block;
  overflow: hidden;
  font-size: clamp(8px, 1.7cqw, 11px);
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ucv-ok {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(14px, 3.2cqw, 20px);
  aspect-ratio: 1;
  color: #fff;
  background: var(--teal-deep);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) 0.15s;
}

.ucv-ok svg {
  width: 62%;
  height: 62%;
}

.ucv-card.is-on .ucv-ok {
  transform: scale(1);
}

/* visit swap */
.is-swap .ucv-visit,
.is-swap .ucv-codes {
  opacity: 0;
  transform: translateY(-4px);
}

.is-swap .ucv-claim-id {
  opacity: 0;
}

@container (max-width: 440px) {
  .ucv-card small,
  .ucv-payer,
  .ucv-chip em,
  .ucv-ecg-head span:first-child {
    display: none;
  }

  .ucv-ecg-head {
    justify-content: flex-end;
  }

  .ucv-chip {
    padding: 2px 8px;
  }

  .ucv-monitor {
    gap: 1.8cqw;
  }

  .ucv-foot {
    grid-template-columns: 1.3fr 1fr;
  }

  .ucv-foot div:last-child {
    display: none;
  }
}

@keyframes ucvTrace {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes ucvFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes ucvBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes ucvRing {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.1); opacity: 0; }
}

@keyframes ucvPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}

@keyframes ucvBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (max-width: 1199px) {
  .uc-v2 .bh-hero-top {
    min-height: 0;
    margin-bottom: 48px;
  }

  .uc-hero-art {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 516px;
    margin: 32px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc-hero-art,
  .ucv,
  .ucv *,
  .ucv *::before,
  .ucv *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================= */
/* Why urgent care practices lose more — Figma 11472:255          */
/* A 609px copy column on the left and the 572 x 528 clinic photo  */
/* card (11575:124, 18px corners) on the right edge of the 1240    */
/* box, both centred vertically; the "What You Get" card           */
/* (11475:126) sits 20px into the photo's top-left corner.         */
/* ============================================================= */
.uc-why {
  position: relative;
  overflow: hidden;
  background: var(--c-white);
}

.uc-why-layout {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.uc-why-copy {
  display: flex;
  flex: 0 1 609px;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  min-width: 0;
}

.uc-why-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.9px;
  color: var(--c-blue);
  text-transform: none;
}

.uc-why-title .accent {
  color: var(--c-orange);
}

/* Figma separates the paragraphs with an empty 28px line. */
.uc-why-text p {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--c-blue);
}

.uc-why-text p + p {
  margin-top: 28px;
}

/* Figma 11575:124: 572 x 528, white, 18px corners, clipping the photo. */
.uc-why-media {
  position: relative;
  flex: none;
  width: 572px;
  height: 528px;
  overflow: hidden;
  background: var(--c-white);
  border-radius: 18px;
}

/* Figma 11538:49: the photo fills 104.54% x 113.25% of the card, 4.55% / 5.25% in. */
.uc-why-photo {
  position: absolute;
  top: -5.25%;
  left: -4.55%;
  display: block;
  width: 104.54%;
  max-width: none;
  height: 113.25%;
}

/* ---------- "What You Get" card (Figma 11475:126, 326 x 273) ---------- */
.uc-why-card {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  width: 326px;
  max-width: calc(100% - 40px);
  overflow: hidden;
  background: var(--c-white);
  border-radius: 14px;
}

.uc-why-card-inner {
  display: flex;
  flex-direction: column;
  gap: 4.401px;
  align-items: flex-start;
  padding: 14.964px 13.204px 8.802px 16.725px;
  border: 0.88px solid var(--c-bg-blue, #eff2ff);
  border-radius: 6.162px;
}

.uc-why-card-title {
  margin: 0;
  padding: 5px 8px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14.084px;
  line-height: 14.084px;
  color: var(--c-white);
  white-space: nowrap;
  background: var(--c-blue);
  border-radius: 7px;
}

.uc-why-card-list {
  display: flex;
  flex-direction: column;
  gap: 8.802px;
  width: 292px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-why-card-list li {
  position: relative;
  display: flex;
  gap: 12.323px;
  align-items: center;
  height: 29.341px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12.323px;
  line-height: 12.323px;
  color: var(--c-text);
}

.uc-why-card-list li + li::before {
  content: "";
  position: absolute;
  top: -4.401px;
  left: 0;
  right: -0.07px;
  height: 0.88px;
  background: var(--c-light-grey, #e5e7eb);
  translate: 0 -50%;
}

.uc-why-card-list b {
  font-weight: inherit;
}

.uc-why-card-tick {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 12.323px;
  height: 12.323px;
  font-family: "Inter", var(--font-primary);
  font-weight: 700;
  font-size: 8.802px;
  line-height: 12.323px;
  color: var(--c-white);
  background: var(--c-blue);
  border-radius: 6.162px;
}

/* ---------- Animation (script-v2.js .is-armed / .is-in) ---------- */
/* Copy rises line by line; the photo card wipes in as the photo settles from
   a slight zoom; the "What You Get" card rises, its rows slide in with the
   ticks popping and the figures counting; the card then floats gently. */
@keyframes uc-why-rise {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes uc-why-reveal {
  from { opacity: 0; clip-path: inset(0 0 0 100% round 18px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0 round 18px); }
}

@keyframes uc-why-zoom {
  from { scale: 1.12; }
  to   { scale: 1; }
}

@keyframes uc-why-from-right {
  from { opacity: 0; translate: 22px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes uc-why-pop {
  0%   { opacity: 0; scale: 0.6; }
  70%  { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

.uc-why.is-armed:not(.is-in) :is(.uc-why-copy > *, .uc-why-text p, .uc-why-media, .uc-why-card, .uc-why-card-list li) {
  opacity: 0;
}

.uc-why.is-in .uc-why-copy > *,
.uc-why.is-in .uc-why-text p {
  animation: uc-why-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-why.is-in .uc-why-copy > :nth-child(2) { animation-delay: 0.08s; }
.uc-why.is-in .uc-why-copy > :nth-child(3) { animation: none; }
.uc-why.is-in .uc-why-text p:nth-child(1) { animation-delay: 0.18s; }
.uc-why.is-in .uc-why-text p:nth-child(2) { animation-delay: 0.28s; }
.uc-why.is-in .uc-why-text p:nth-child(3) { animation-delay: 0.38s; }

.uc-why.is-in .uc-why-media {
  animation: uc-why-reveal 1.1s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-why.is-in .uc-why-photo {
  animation: uc-why-zoom 1.8s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-why.is-in .uc-why-card {
  animation: uc-why-rise 0.8s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-why.is-in .uc-why-card-list li {
  animation: uc-why-from-right 0.5s calc(0.7s + var(--i, 0) * 0.09s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-why.is-in .uc-why-card-tick {
  animation: uc-why-pop 0.45s calc(0.8s + var(--i, 0) * 0.09s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* The card keeps a slow float once it has landed (or always without the script). */
.uc-why.is-in .uc-why-card-inner,
.uc-why:not(.is-armed) .uc-why-card-inner {
  animation: bh-float 6s 1.6s ease-in-out infinite;
}

/* Between 1200 and 1270px the 609px copy gives way so the photo keeps its size. */
@media (max-width: 1199px) {
  /* Copy first, then the photo card under it. */
  .uc-why-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .uc-why-copy {
    flex: none;
  }

  .uc-why-media {
    width: 100%;
    max-width: 572px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 572 / 528;
  }
}

@media (max-width: 767px) {
  .uc-why-title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.5px;
  }
}

/* Phones — Figma 11560:2 (440 wide): 40px above the copy and none below; 20px
   gutters; a 24 / 35 heading and 14 / 24 #3d3d3d copy; the clinic photo runs
   edge to edge at the foot (378px tall at 440, fading in from white at the
   top) with a scaled 250px "What You Get" card centred over it. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-why {
    padding-top: 40px;
    padding-bottom: 0;
  }

  .uc-why .container-page {
    --page-gutter: 20px;
  }

  .uc-why-layout {
    gap: 20px;
  }

  .uc-why-copy {
    gap: 15.1px;
  }

  .uc-why .derm-why-pill {
    height: 26px;
    font-size: 10px;
  }

  .uc-why-title {
    padding-top: 6.9px;
    font-size: 24px;
    line-height: 35px;
    letter-spacing: -1.6px;
  }

  .uc-why-text p {
    font-size: 14px;
    line-height: 24px;
    color: var(--c-text);
  }

  .uc-why-text p + p {
    margin-top: 24px;
  }

  /* Figma 11560:11: full-bleed, 440 x 378 (clipping a 440 x 396 image box). */
  .uc-why-media {
    width: auto;
    max-width: none;
    height: auto;
    margin: 0 calc(-1 * var(--page-gutter));
    aspect-ratio: 440 / 378;
    background: none;
    border-radius: 0;
  }

  /* The photo fills 104.51% x 107.62% of the 440 x 396 box, 4.55% in. */
  .uc-why-photo {
    top: 0.05%;
    left: -4.55%;
    width: 104.51%;
    height: auto;
    aspect-ratio: 459.844 / 426.175;
    object-fit: fill;
    border-radius: 0;
  }

  /* White at the top (1.5%) fading out by 94% of the 396px image box. */
  .uc-why-media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: calc(100% * 396 / 378);
    background: linear-gradient(180deg, #fff 1.515%, rgba(255, 255, 255, 0) 94.066%);
    pointer-events: none;
  }

  /* Figma 11560:17: 250px wide, centred, 99px down at 440 (26.19%). */
  /* Centred with auto margins: the rise animation drives `translate`. */
  .uc-why-card {
    top: 26.19%;
    right: 0;
    left: 0;
    z-index: 1;
    width: 250px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    border-radius: 10.736px;
  }

  .uc-why-card-inner {
    gap: 3.375px;
    padding: 11.476px 10.125px 6.75px 12.826px;
    border-width: 0.675px;
    border-radius: 4.725px;
  }

  .uc-why-card-title {
    padding: 3.834px 6.135px;
    font-size: 10px;
    line-height: 10.8px;
    border-radius: 5.368px;
  }

  .uc-why-card-list {
    gap: 6.75px;
    width: 223.926px;
  }

  .uc-why-card-list li {
    gap: 9.45px;
    height: 22.501px;
    font-size: 9px;
    line-height: 9.45px;
  }

  .uc-why-card-list li + li::before {
    top: -3.375px;
    height: 0.675px;
  }

  .uc-why-card-tick {
    width: 9.45px;
    height: 9.45px;
    font-size: 6.75px;
    line-height: 9.45px;
    border-radius: 4.725px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc-why * {
    animation: none !important;
  }
}


/* ============================================================= */
/* CTA bar — Figma 11472:4775 (1240 x 128, 60px below the why     */
/* section). Shield badge, a 74px rule, the headline and note,     */
/* and the 260 x 50 "Start Scaling Revenue" link.                  */
/* ============================================================= */
.uc-ctabar-inner {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 128px;
  padding: 22px 24px;
  overflow: hidden;
  background: var(--c-bg-blue, #eff2ff);
  border-radius: 10px;
  box-shadow: 0 2px 15.1px rgba(0, 0, 0, 0.15);
}

/* Figma's 2px dashed border (12 / 12 dashes) shades from navy (held for the
   first 30%) to coral; a CSS dashed border can't take a gradient, so it is an
   SVG rect stroked with one, inside the box's edge. */
.uc-ctabar-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.uc-ctabar-outline rect {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke: url(#uc-ctabar-outline-grad);
  stroke-width: 2;
  stroke-dasharray: 12 12;
}

.uc-ctabar-main {
  display: flex;
  flex: 0 1 802px;
  gap: 20px;
  align-items: center;
  min-width: 0;
}

.uc-ctabar-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 0 10.9px rgba(0, 0, 0, 0.11);
}

.uc-ctabar-icon img {
  display: block;
}

/* Figma's "Line 85" (74 x 1) stood on end. */
.uc-ctabar-rule {
  position: relative;
  flex: none;
  width: 1px;
  height: 74px;
}

.uc-ctabar-rule img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  translate: -50% -50%;
  rotate: -90deg;
}

.uc-ctabar-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.uc-ctabar-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: var(--c-blue);
  text-transform: none;
}

.uc-ctabar-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--c-text);
}

.uc-ctabar-btn {
  position: relative;
  display: inline-flex;
  flex: none;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 50px;
  padding: 8px 14px;
  overflow: hidden;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  line-height: 20.8px;
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
  background: var(--c-orange);
  border-radius: 75px;
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}

/* Light sweep across the button every few seconds. */
.uc-ctabar-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.uc-ctabar-btn:hover,
.uc-ctabar-btn:focus-visible {
  color: var(--c-white);
  translate: 0 -2px;
  box-shadow: 0 12px 20px rgba(252, 93, 97, 0.35);
}

.uc-ctabar-btn-icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 50%;
}

.uc-ctabar-btn-icon img {
  display: block;
  transition: translate 0.3s ease;
}

.uc-ctabar-btn:hover .uc-ctabar-btn-icon img,
.uc-ctabar-btn:focus-visible .uc-ctabar-btn-icon img {
  translate: 2px 0;
}

/* ---------- Animation (script-v2.js .is-armed / .is-in) ---------- */
@keyframes uc-ctabar-rise {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes uc-ctabar-pop {
  0%   { opacity: 0; scale: 0.5; rotate: -20deg; }
  70%  { opacity: 1; scale: 1.1; rotate: 4deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}

@keyframes uc-ctabar-grow {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

@keyframes uc-ctabar-from-right {
  from { opacity: 0; translate: 28px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes uc-ctabar-ping {
  0%       { box-shadow: 0 0 10.9px rgba(0, 0, 0, 0.11), 0 0 0 0 rgba(39, 55, 117, 0.25); }
  70%, 100% { box-shadow: 0 0 10.9px rgba(0, 0, 0, 0.11), 0 0 0 12px rgba(39, 55, 117, 0); }
}

@keyframes uc-ctabar-shine {
  0%, 70% { translate: -120% 0; }
  100%    { translate: 320% 0; }
}

.uc-ctabar.is-armed:not(.is-in) :is(.uc-ctabar-inner, .uc-ctabar-icon, .uc-ctabar-rule, .uc-ctabar-copy > *, .uc-ctabar-btn) {
  opacity: 0;
}

.uc-ctabar.is-in .uc-ctabar-inner {
  animation: uc-ctabar-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-ctabar.is-in .uc-ctabar-icon {
  animation:
    uc-ctabar-pop 0.7s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    uc-ctabar-ping 2.6s 1.2s ease-out infinite;
}

.uc-ctabar.is-in .uc-ctabar-rule {
  animation: uc-ctabar-grow 0.5s 0.4s ease-out backwards;
}

.uc-ctabar.is-in .uc-ctabar-copy > * {
  animation: uc-ctabar-rise 0.6s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-ctabar.is-in .uc-ctabar-copy > :nth-child(2) { animation-delay: 0.55s; }

.uc-ctabar.is-in .uc-ctabar-btn {
  animation: uc-ctabar-from-right 0.7s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* The dashed outline slowly marches round the bar. */
@keyframes uc-ctabar-march {
  to { stroke-dashoffset: -240; }
}

.uc-ctabar-outline rect {
  animation: uc-ctabar-march 24s linear infinite;
}

.uc-ctabar.is-in .uc-ctabar-btn::after,
.uc-ctabar:not(.is-armed) .uc-ctabar-btn::after {
  animation: uc-ctabar-shine 4s 1.6s ease-in-out infinite;
}

@media (max-width: 991px) {
  .uc-ctabar-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
  }

  .uc-ctabar-main {
    flex: none;
  }

  .uc-ctabar-btn {
    align-self: flex-start;
    margin-left: 107px; /* under the copy: 66 badge + 2 x 20 gap + 1 rule */
  }
}

@media (max-width: 767px) {
  .uc-ctabar-title {
    font-size: 20px;
    line-height: 26px;
  }

  .uc-ctabar-btn {
    margin-left: 0;
  }
}

@media (max-width: 575px) {
  .uc-ctabar-inner {
    padding: 20px;
  }

  .uc-ctabar-main {
    flex-wrap: wrap;
    gap: 16px;
  }

  .uc-ctabar-rule {
    display: none;
  }

  .uc-ctabar-copy {
    flex-basis: 100%;
  }

  .uc-ctabar-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc-ctabar *,
  .uc-ctabar *::after {
    animation: none !important;
  }
}

/* ============================================================= */
/* Urgent care billing services — Figma 11472:3979 (1440 x 1205;  */
/* tab states 11472:4178 / 4375 / 4573). White frame, 60px padding */
/* and 60px below the CTA bar: centred head, then the 380px tab    */
/* column and the service card, 28px apart.                        */
/* ============================================================= */
.uc-svc {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  background: var(--c-white);
}

.uc-svc .container-page {
  position: relative;
  z-index: 1;
}

/* ---------- Decorations (placed against the 1440px frame) ---------- */
.uc-svc-ring,
.uc-svc-bead,
.uc-svc-glow,
.uc-svc-plus {
  position: absolute;
  pointer-events: none;
}

.uc-svc-ring {
  border: 1px solid #dce3f2;
  border-radius: 50%;
}

.uc-svc-ring--a {
  top: -220px;
  left: calc(50% - 720px - 180px);
  width: 560px;
  height: 560px;
}

.uc-svc-ring--b {
  top: -160px;
  left: calc(50% - 720px - 120px);
  width: 440px;
  height: 440px;
  border: 1px dashed #e1e7f4;
}

.uc-svc-ring--c {
  right: calc(50% - 720px - 60px);
  bottom: -60px;
  width: 300px;
  height: 300px;
}

.uc-svc-bead {
  border-radius: 50%;
}

.uc-svc-bead--a {
  top: 62px;
  left: calc(50% - 720px + 88px);
  width: 12px;
  height: 12px;
  background: var(--c-orange);
}

.uc-svc-bead--b {
  top: 212px;
  left: calc(50% - 720px + 236px);
  width: 8px;
  height: 8px;
  background: var(--c-blue);
  opacity: 0.55;
}

.uc-svc-bead--c {
  top: 268px;
  left: calc(50% - 720px + 30px);
  width: 16px;
  height: 16px;
  background: var(--c-blue);
}

/* Figma 11472:3985: radial #e3e9f8 -> transparent at 70%, 20% opacity. */
.uc-svc-glow {
  top: -120px;
  right: calc(50% - 720px - 140px);
  width: 520px;
  height: 520px;
  background: radial-gradient(closest-side, #e3e9f8 0%, rgba(227, 233, 248, 0) 70%);
  border-radius: 50%;
  opacity: 0.2;
}

/* Figma 11472:3986: a 64px white tile turned -8deg, 120 / 70 from the frame's top right. */
.uc-svc-plus {
  top: 70px;
  right: calc(50% - 720px + 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--c-white);
  border-radius: 18px;
  filter: drop-shadow(0 14px 15px rgba(39, 55, 117, 0.1));
  rotate: -8deg;
}

.uc-svc-plus img {
  display: block;
}

/* ---------- Head ---------- */
.uc-svc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.uc-svc-pill {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 9px 20px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  color: var(--c-blue);
  white-space: nowrap;
  background: var(--c-white);
  border: 1px solid #e1e7f4;
  border-radius: 999px;
  filter: drop-shadow(0 6px 9px rgba(39, 55, 117, 0.06));
}

.uc-svc-pill img {
  display: block;
  flex: none;
}

.uc-svc-title {
  margin: 21px 0 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 45px;
  letter-spacing: -0.8px;
  color: var(--c-blue);
  text-transform: none;
}

.uc-svc-title .accent {
  color: var(--c-orange);
}

.uc-svc-bars {
  display: flex;
  gap: 6px;
  margin-top: 18px;
}

.uc-svc-bars span {
  display: block;
  width: 44px;
  height: 4px;
  background: var(--c-orange);
  border-radius: 4px;
}

.uc-svc-bars span + span {
  width: 12px;
  background: var(--c-blue);
}

.uc-svc-lead {
  max-width: 900px;
  margin: 18.75px 0 0;
  padding: 0 3.27px 0 3.25px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 17px;
  line-height: 29.75px;
  color: var(--c-text);
}

/* ---------- Tabs (380px column, 18px apart) ---------- */
.uc-svc-body {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: 56px;
}

.uc-svc-tabs {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 18px;
  width: 380px;
}

.uc-svc-tab {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 165.5px;
  padding: 20px 22px;
  overflow: hidden;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey, #e5e7eb);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(39, 55, 117, 0.05);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, translate 0.3s ease;
}

/* Orange marker on the active tab (Figma 11472:4024): 4px, 18px from the top. */
.uc-svc-tab::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 17.41px;
  left: 0;
  width: 4px;
  background: var(--c-orange);
  border-radius: 0 4px 4px 0;
  scale: 1 0;
  transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.uc-svc-tab:hover {
  border-color: #c9d5f0;
  translate: 4px 0;
}

.uc-svc-tab:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
}

.uc-svc-tab.is-active {
  background: var(--c-bg-blue, #eff2ff);
  border-color: #c9d5f0;
  box-shadow: 0 16px 34px rgba(39, 55, 117, 0.12);
  translate: 0 0;
}

.uc-svc-tab.is-active::before {
  scale: 1 1;
}

.uc-svc-tab-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--c-white);
  border-radius: 50%;
  filter: drop-shadow(0 8px 10px rgba(39, 55, 117, 0.1));
  transition: scale 0.3s ease;
}

.uc-svc-tab-icon img {
  display: block;
}

.uc-svc-tab:hover .uc-svc-tab-icon {
  scale: 1.06;
}

.uc-svc-tab-label {
  flex: 0 1 204px;
  padding-bottom: 0.695px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 17px;
  line-height: 23.8px;
  color: var(--c-blue);
}

.uc-svc-tab-go {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  background: var(--c-white);
  border-radius: 50%;
  filter: drop-shadow(0 4px 6px rgba(39, 55, 117, 0.1));
  transition: background-color 0.3s ease;
}

.uc-svc-tab-chev {
  display: block;
  transition: translate 0.3s ease, opacity 0.3s ease;
}

.uc-svc-tab-chev--on {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  opacity: 0;
}

.uc-svc-tab.is-active .uc-svc-tab-go {
  background: var(--c-blue);
}

.uc-svc-tab.is-active .uc-svc-tab-chev {
  opacity: 0;
}

.uc-svc-tab.is-active .uc-svc-tab-chev--on {
  opacity: 1;
}

.uc-svc-tab:hover .uc-svc-tab-chev:not(.uc-svc-tab-chev--on) {
  translate: 2px 0;
}

/* ---------- Service card ---------- */
.uc-svc-panels {
  flex: 1 1 0;
  min-width: 0;
}

.uc-svc-panel:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 4px;
  border-radius: 24px;
}

.uc-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 33px;
  align-items: flex-start;
  padding: 28px 32px 36px;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey, #e5e7eb);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(39, 55, 117, 0.08);
}

.uc-svc-card-blob {
  position: absolute;
  right: -30px;
  bottom: -29.99px;
  width: 230px;
  height: 230px;
  background: #f3f6fc;
  border-radius: 50%;
  pointer-events: none;
}

/* Figma 11472:4061: the 110 x 136 note, turned 6deg, centred 89 / 102 from the corner. */
.uc-svc-note {
  position: absolute;
  right: 34px;
  bottom: 34px;
  width: 110px;
  height: 136px;
  background: var(--c-white);
  border: 1px solid #e1e7f4;
  border-radius: 14px;
  filter: drop-shadow(0 14px 15px rgba(39, 55, 117, 0.1));
  rotate: 6deg;
  pointer-events: none;
}

.uc-svc-note-line {
  position: absolute;
  left: 14px;
  height: 4.997px;
  background: #e1e7f4;
  border-radius: 4px;
}

.uc-svc-note-line--head {
  top: 18px;
  width: 39.999px;
  height: 6.003px;
  background: var(--c-blue);
  opacity: 0.8;
}

.uc-svc-note-line--1 { top: 33px; width: 72.004px; }
.uc-svc-note-line--2 { top: 47px; width: 59.999px; }
.uc-svc-note-line--3 { top: 60.99px; width: 65.992px; height: 5.008px; }

.uc-svc-note-badge {
  position: absolute;
  bottom: 18px;
  left: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.996px;
  height: 33.996px;
  background: var(--c-orange);
  border-radius: 10px;
}

.uc-svc-note-badge img {
  display: block;
}

/* ---------- Status strip ---------- */
.uc-svc-stats {
  position: relative;
  display: grid;
  grid-template-columns: var(--cols, repeat(4, minmax(0, 1fr)) 230px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fbfcff;
  border: 1px solid var(--c-light-grey, #e5e7eb);
  border-radius: 18px;
}

.uc-svc-stat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
  min-width: 0;
  padding: 18px 16px 34.18px;
  border-right: 1px solid #e6ebf5;
}

.uc-svc-stat--tight {
  padding-right: 10px;
  padding-left: 10px;
}

.uc-svc-stat-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-bg-blue, #eff2ff);
  border-radius: 50%;
}

.uc-svc-stat-icon img {
  display: block;
}

.uc-svc-stat-slot {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.uc-svc-stat-slot img {
  position: absolute;
  max-width: none;
}

.uc-svc-stat-label {
  display: block;
  padding-bottom: 0.8px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 16.8px;
  color: var(--c-text);
  white-space: nowrap; /* Figma lets "Patient Cost-Share" run past its 111px cell */
}

/* The value follows the label 1.99px down, after a 6px orange dot. */
.uc-svc-stat-value {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: -7.01px;
  padding-bottom: 1px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  color: var(--c-blue);
  white-space: nowrap;
}

.uc-svc-stat-value::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--c-orange);
  border-radius: 50%;
}

.uc-svc-stat--kpi {
  gap: 0;
  padding: 15px 18px 16px;
  border-right: 0;
}

.uc-svc-stat--kpi .uc-svc-stat-label {
  width: 100%;
}

.uc-svc-kpi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding-top: 2px;
}

.uc-svc-kpi-value {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 35.2px;
  color: var(--c-blue);
  white-space: nowrap;
}

.uc-svc-kpi-value b {
  font-weight: inherit;
}

.uc-svc-live {
  margin-bottom: 6px;
  padding: 3px 8px 4px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  line-height: normal;
  color: var(--c-orange);
  white-space: nowrap;
  background: #ffe9ea;
  border-radius: 999px;
}

.uc-svc-spark {
  display: block;
  width: 194px;
  max-width: 100%;
  height: auto;
  margin-top: 8px;
}

/* ---------- Copy ---------- */
.uc-svc-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  width: 720px;
  max-width: 100%;
}

.uc-svc-copy--wide {
  width: 765px;
}

.uc-svc-card-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 28px;
  line-height: 36.4px;
  letter-spacing: -0.3px;
  color: var(--c-blue);
  text-transform: none;
}

.uc-svc-num {
  color: var(--c-orange);
}

.uc-svc-text {
  margin: 0;
  padding-bottom: 8px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--c-text);
}

/* Tab 1's callout hugs its one-line text; the others span the 720px column. */
.uc-svc-callout {
  display: flex;
  gap: 14px;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 12px 22px 12px 12px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 15px;
  line-height: 21.75px;
  color: var(--c-blue);
  background: var(--c-bg-blue, #eff2ff);
  border: 1px solid #dde4f4;
  border-radius: 999px;
}

.uc-svc-copy--wide .uc-svc-callout {
  align-self: flex-start;
}

.uc-svc-callout-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--c-orange);
  border-radius: 50%;
}

.uc-svc-callout-icon img {
  display: block;
}

.uc-svc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 10px 0 20px;
  list-style: none;
}

.uc-svc-list li {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
}

.uc-svc-list img {
  display: block;
  flex: none;
}

.uc-svc-cta {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  padding: 10px 10px 10px 26px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: var(--c-white);
  text-decoration: none;
  background: var(--c-blue);
  border-radius: 999px;
  filter: drop-shadow(0 14px 15px rgba(39, 55, 117, 0.28));
  transition: translate 0.3s ease, filter 0.3s ease;
}

.uc-svc-cta > img {
  display: block;
  flex: none;
}

.uc-svc-cta span:not(.uc-svc-cta-go) {
  padding: 1px 0;
}

.uc-svc-cta:hover,
.uc-svc-cta:focus-visible {
  color: var(--c-white);
  translate: 0 -2px;
  filter: drop-shadow(0 18px 18px rgba(39, 55, 117, 0.34));
}

.uc-svc-cta-go {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--c-orange);
  border-radius: 50%;
}

.uc-svc-cta-go img {
  display: block;
  transition: translate 0.3s ease;
}

.uc-svc-cta:hover .uc-svc-cta-go img,
.uc-svc-cta:focus-visible .uc-svc-cta-go img {
  translate: 3px 0;
}

/* ---------- Animation (script-v2.js .is-armed / .is-in) ---------- */
/* Head, then the tabs, then the active card: strip cells pop, the KPI's
   sparkline draws, copy and checklist rise. Switching tabs replays the card
   (script-v2.js reapplies .is-active, .is-switched drops the reveal delay). */
@keyframes uc-svc-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes uc-svc-from-left {
  from { opacity: 0; translate: -28px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes uc-svc-pop {
  0%   { opacity: 0; scale: 0.6; }
  70%  { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}

@keyframes uc-svc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes uc-svc-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes uc-svc-bar {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes uc-svc-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

@keyframes uc-svc-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 12px 10px; }
}

@keyframes uc-svc-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.uc-svc.is-armed:not(.is-in) :is(.uc-svc-head > *, .uc-svc-tab, .uc-svc-panel) {
  opacity: 0;
}

.uc-svc.is-in .uc-svc-head > * {
  animation: uc-svc-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-svc.is-in .uc-svc-head > :nth-child(2) { animation-delay: 0.08s; }
.uc-svc.is-in .uc-svc-head > :nth-child(4) { animation-delay: 0.22s; }

.uc-svc.is-in .uc-svc-bars span {
  transform-origin: 0 50%;
  animation: uc-svc-bar 0.6s 0.3s ease-out backwards;
}

.uc-svc.is-in .uc-svc-bars span + span { animation-delay: 0.5s; }

.uc-svc.is-in .uc-svc-tab {
  animation: uc-svc-from-left 0.6s calc(0.25s + var(--i, 0) * 0.08s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-svc-panel { --d: 0s; }
.uc-svc.is-in .uc-svc-panel { --d: 0.45s; }
.uc-svc.is-in .uc-svc-panel.is-switched { --d: 0s; }

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-card {
  animation: uc-svc-rise 0.65s var(--d) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-stat {
  animation: uc-svc-rise 0.5s calc(var(--d) + 0.2s + var(--s, 0) * 0.07s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-stat-icon {
  animation: uc-svc-pop 0.5s calc(var(--d) + 0.3s + var(--s, 0) * 0.07s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-spark {
  animation: uc-svc-draw 1.1s calc(var(--d) + 0.6s) cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-copy > * {
  animation: uc-svc-rise 0.55s calc(var(--d) + 0.35s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-copy > :nth-child(2) { animation-delay: calc(var(--d) + 0.42s); }
.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-copy > :nth-child(3) { animation-delay: calc(var(--d) + 0.5s); }
.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-copy > :nth-child(4) { animation: none; }
.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-copy > :nth-child(5) { animation-delay: calc(var(--d) + 0.85s); }

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-list li {
  animation: uc-svc-rise 0.5s calc(var(--d) + 0.55s + var(--n, 0) * 0.07s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-list img {
  animation: uc-svc-pop 0.45s calc(var(--d) + 0.65s + var(--n, 0) * 0.07s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.uc-svc.is-in .uc-svc-panel.is-active .uc-svc-note {
  animation:
    uc-svc-rise 0.7s calc(var(--d) + 0.6s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    uc-svc-float 6s calc(var(--d) + 1.4s) ease-in-out infinite;
}

/* Ambient loops (also run without the script). */
.uc-svc-live {
  animation: uc-svc-blink 1.8s ease-in-out infinite;
}

.uc-svc-plus {
  animation: uc-svc-float 6s ease-in-out infinite;
}

.uc-svc-bead--a { animation: uc-svc-float 5s ease-in-out infinite; }
.uc-svc-bead--b { animation: uc-svc-float 4s 0.8s ease-in-out infinite; }
.uc-svc-bead--c { animation: uc-svc-drift 9s ease-in-out infinite; }
.uc-svc-ring--b { animation: derm-spin-slow 80s linear infinite; }

@media (max-width: 1199px) {
  /* Tabs become a 2 x 2 grid above the card. */
  .uc-svc-body {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }

  .uc-svc-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }

  .uc-svc-tab {
    min-height: 0;
    padding: 18px 20px;
  }

  .uc-svc-tab:hover {
    translate: 0 -2px;
  }

  .uc-svc-tab-label {
    flex: 1 1 auto;
  }

  .uc-svc-copy,
  .uc-svc-copy--wide {
    width: 100%;
    max-width: 720px;
  }

  .uc-svc-copy--wide .uc-svc-callout {
    align-self: stretch;
  }

  /* The strip shares the width evenly (tab 1's hand-sized cells don't fit). */
  .uc-svc-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 212px;
  }

  .uc-svc-stat--tight {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (max-width: 991px) {
  .uc-svc-title {
    font-size: 28px;
    line-height: 38px;
  }

  .uc-svc-lead {
    font-size: 16px;
    line-height: 28px;
  }

  /* Status cells two by two; the KPI spans the row below. */
  .uc-svc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uc-svc-stat {
    padding-bottom: 20px;
    border-bottom: 1px solid #e6ebf5;
  }

  .uc-svc-stat:nth-child(2n) {
    border-right: 0;
  }

  .uc-svc-stat--kpi {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

  .uc-svc-note,
  .uc-svc-card-blob {
    display: none;
  }
}

@media (max-width: 767px) {
  .uc-svc-pill {
    white-space: normal;
  }

  /* Tabs scroll sideways; script-v2.js keeps the active one in view. */
  .uc-svc-tabs {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 0 calc(-1 * var(--page-gutter));
    padding: 4px var(--page-gutter) 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .uc-svc-tabs::-webkit-scrollbar {
    display: none;
  }

  .uc-svc-tab {
    flex: 0 0 260px;
    gap: 14px;
    scroll-snap-align: start;
  }

  .uc-svc-tab-icon {
    width: 48px;
    height: 48px;
  }

  .uc-svc-tab-label {
    font-size: 15px;
    line-height: 21px;
  }

  .uc-svc-card {
    gap: 24px;
    padding: 20px 18px 24px;
    border-radius: 20px;
  }

  .uc-svc-card-title {
    font-size: 22px;
    line-height: 30px;
  }

  .uc-svc-text {
    font-size: 15px;
    line-height: 26px;
  }

  .uc-svc-callout {
    align-items: flex-start;
    padding: 12px 16px 12px 12px;
    font-size: 14px;
    border-radius: 24px;
  }

  .uc-svc-list li {
    align-items: flex-start;
    font-size: 15px;
  }

  .uc-svc-cta {
    gap: 10px;
    padding-left: 18px;
    font-size: 14px;
  }
}

/* The phone area chart only shows on phones. */
.uc-svc-spark-m {
  display: none;
}

/* Phones — Figma 11560:51 (440 wide): an accordion. The tabs stack and the
   open service's card sits right under its tab (the tab list and panels are
   merged into one column with display: contents, tab i ordered 2i and its
   panel 2i + 1), so the tab script and ARIA are unchanged. 40px above,
   48px below, 20px gutters. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-services {
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .uc-svc .container-page {
    --page-gutter: 20px;
  }

  /* Decoration: two orbits off the top-left corner and two dots. */
  .uc-svc-ring--a {
    top: -155px;
    left: -205px;
    width: 360px;
    height: 360px;
  }

  .uc-svc-ring--b {
    top: -125px;
    left: -175px;
    width: 300px;
    height: 300px;
  }

  .uc-svc-bead--a {
    top: 21px;
    left: 28px;
    width: 8px;
    height: 8px;
  }

  .uc-svc-bead--b {
    top: 179px;
    left: 9px;
    width: 10px;
    height: 10px;
    opacity: 1;
  }

  .uc-svc-ring--c,
  .uc-svc-bead--c,
  .uc-svc-glow,
  .uc-svc-plus {
    display: none;
  }

  /* Head: 20px apart, centred. */
  .uc-svc-pill {
    padding: 9px 18px;
    font-size: 12px;
    white-space: nowrap;
  }

  .uc-svc-title {
    margin-top: 20px;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: 0;
  }

  .uc-svc-bars {
    margin-top: 20px;
  }

  .uc-svc-lead {
    margin-top: 20px;
    padding: 0;
    font-size: 14px;
    line-height: 28px;
  }

  /* Tabs and panels in one 14px-gapped column. */
  .uc-svc-body {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    margin-top: 32px;
  }

  .uc-svc-tabs,
  .uc-svc-panels {
    display: contents;
  }

  .uc-svc-tab {
    order: calc(var(--i) * 2);
    flex: none;
    gap: 16px;
    min-height: 96px;
    padding: 20px;
    box-shadow: 0 8px 11px rgba(39, 55, 117, 0.05);
  }

  .uc-svc-tab.is-active {
    box-shadow: 0 8px 11px rgba(39, 55, 117, 0.05);
  }

  .uc-svc-tab:hover {
    translate: none;
  }

  .uc-svc-tab::before {
    top: 15px;
    bottom: 15px;
  }

  .uc-svc-panel {
    order: calc(var(--i) * 2 + 1);
  }

  .uc-svc-tab-icon {
    width: 52px;
    height: 52px;
  }

  .uc-svc-tab-label {
    flex: 1 1 0;
    min-width: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .uc-svc-tab-go {
    width: 32px;
    height: 32px;
  }

  /* Card: 20px padding, groups 24px apart. */
  .uc-svc-card {
    gap: 24px;
    padding: 20px;
    border-radius: 24px;
  }

  /* Status grid: two rows of two (180px + the rest), each row ruled, then the KPI. */
  /* Figma's 180 / 176 split at 440, shrinking together on narrower phones. */
  .uc-svc-stats,
  .uc-v2 .uc-svc-stats {
    grid-template-columns: minmax(0, 180fr) minmax(0, 176fr);
  }

  .uc-svc-stat,
  .uc-svc-stat--tight {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 10px;
    align-content: center;
    align-items: center;
    padding: 14px 10px;
    border-right: 0;
    border-bottom: 1px solid #e1e7f4;
  }

  .uc-svc-stat-icon {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
  }

  .uc-svc-stat-icon > img {
    width: 22px;
    height: 22px;
  }

  .uc-svc-stat-label {
    align-self: end;
    padding: 0;
    line-height: 16px;
    white-space: normal;
  }

  .uc-svc-stat-value {
    min-width: 0;
  }

  .uc-svc-stat-value {
    align-self: start;
    gap: 5px;
    margin-top: 0;
    padding: 0;
    font-size: 14px;
    white-space: nowrap;
  }

  .uc-svc-stat-value::before {
    width: 5px;
    height: 5px;
  }

  .uc-svc-stat--kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: 1 / -1;
    padding: 16px;
    border-bottom: 0;
  }

  .uc-svc-kpi {
    align-items: center;
    padding-top: 0;
  }

  .uc-svc-kpi-value {
    line-height: 40px;
  }

  .uc-svc-live {
    margin-bottom: 0;
    padding: 4px 10px;
    font-weight: 500;
    background: #ffe8ea;
  }

  .uc-svc-spark {
    display: none;
  }

  .uc-svc-spark-m {
    position: relative;
    display: block;
    width: 100%;
    height: 48px;
  }

  .uc-svc-spark-m img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 48px;
  }

  /* The trend line overhangs the 48px box by 2.26% / 2.25% (its stroke). */
  .uc-svc-spark-m img + img {
    top: -2.26%;
    height: 104.51%;
  }

  /* Copy: title and text 16px apart; callout, checks and CTA 24px apart. */
  .uc-svc-copy,
  .uc-svc-copy--wide {
    gap: 24px;
    width: 100%;
  }

  .uc-svc-card-title {
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 0;
  }

  .uc-svc-text {
    margin-top: -8px;
    padding-bottom: 0;
    font-size: 14px;
    line-height: 28px;
  }

  .uc-svc-callout,
  .uc-svc-copy--wide .uc-svc-callout {
    align-self: stretch;
    align-items: center;
    gap: 12px;
    padding: 14px;
    font-size: 14px;
    line-height: 22px;
    border-color: #e1e7f4;
    border-radius: 20px;
  }

  .uc-svc-list {
    gap: 16px;
    padding: 0;
  }

  .uc-svc-list li {
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 25px;
  }

  /* Full width inside the card (padding included); the label may wrap on
     narrow phones so the arrow never leaves the card. */
  .uc-svc-cta {
    box-sizing: border-box;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 12px 10px 12px 16px;
    font-size: 14px;
    line-height: 21px;
  }

  .uc-svc-cta > span:not(.uc-svc-cta-go) {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }

  .uc-svc-cta-go {
    flex: none;
  }
}

/* Figma keeps the top-right label on one line ("Patient Cost-Share"); there's
   room for that from about 430px. */
@media (min-width: 430px) and (max-width: 575px) {
  .uc-svc-stat:nth-child(2) .uc-svc-stat-label {
    white-space: nowrap;
  }
}

/* Narrow phones: a 32px icon and tighter cells so labels and values fit. */
@media (max-width: 400px) {
  .uc-svc-stat,
  .uc-svc-stat--tight {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 3px 8px;
    padding: 12px 8px;
  }

  .uc-svc-stat-icon {
    width: 32px;
    height: 32px;
  }

  .uc-svc-stat-icon > img {
    width: 20px;
    height: 20px;
  }

  .uc-svc-stat-value {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc-svc *,
  .uc-svc-ring,
  .uc-svc-bead,
  .uc-svc-plus {
    animation: none !important;
  }
}

/* ============================================================= */
/* Who we serve / clinic types — Figma 11472:554 (1440 x 397).    */
/* Builds on .bh-sub + .derm-sub (head, icon pop, card cascade) on */
/* white with no decoration: one row of five 140px title-only     */
/* cards.                                                          */
/* ============================================================= */
.uc-v2 .uc-clinic {
  background: var(--c-white);
}

.uc-v2 .uc-clinic .bh-sub-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Figma strokes each card 1px #ccc inside its 140px box; the padding gives
   up that pixel so the icon and title keep Figma's 16 / 20 offsets. */
.uc-v2 .uc-clinic .bh-sub-card {
  height: 140px;
  padding: 15px 19px;
  border: 1px solid #ccc;
}

/* A 46px icon frame; inner-group icons sit at their Figma offset (--x / --y)
   at the SVG's own size. Shared by the tailored-billing cards below. */
.uc-clinic-icon,
.uc-tailor-icon {
  position: relative;
  flex: none;
}

.uc-clinic-icon img,
.uc-tailor-icon img {
  position: absolute;
  top: var(--y, 0);
  left: var(--x, 0);
  display: block;
  max-width: none;
}

@media (max-width: 1199px) {
  .uc-v2 .uc-clinic .bh-sub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uc-v2 .uc-clinic .bh-sub-card {
    height: auto;
    min-height: 140px;
  }
}

@media (max-width: 991px) {
  .uc-v2 .uc-clinic .bh-sub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The cards are short, so phones keep two columns before going single. */
@media (max-width: 767px) {
  .uc-v2 .uc-clinic .bh-sub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .uc-v2 .uc-clinic .bh-sub-card {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .uc-v2 .uc-clinic .bh-sub-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 400px;
  }

  .uc-v2 .uc-clinic .bh-sub-card-body {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
}

/* ============================================================= */
/* Urgent care CPT & ICD-10 codes — Figma 11476:4855 (1440 x 832). */
/* Centred head with the two-tone rule, two tilted widgets either  */
/* side of it, then a 2 x 6 grid of 80px numbered code rows        */
/* (16px / 32px gaps; rows alternate BG-blue and rose tints).       */
/* ============================================================= */
.uc-code {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  font-family: var(--font-primary);
  background: var(--c-white);
}

.uc-code .container-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Decorations, placed against the 1440px frame (Figma 11478:5213). */
.uc-code-ring,
.uc-code-dot,
.uc-tailor-ring,
.uc-tailor-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.uc-code-ring--solid,
.uc-tailor-ring--solid {
  top: -170px;
  left: calc(50% - 720px - 150px);
  width: 420px;
  height: 420px;
  border: 1px solid #e1e7f4;
}

.uc-code-ring--dashed,
.uc-tailor-ring--dashed {
  top: -110px;
  left: calc(50% - 720px - 90px);
  width: 300px;
  height: 300px;
  border: 1px dashed #e1e7f4;
}

.uc-code-dot--orange,
.uc-tailor-dot--orange {
  top: 58px;
  left: calc(50% - 720px + 112px);
  width: 16px;
  height: 16px;
  background: var(--c-orange);
}

.uc-code-dot--blue,
.uc-tailor-dot--blue {
  top: 110px;
  left: calc(50% - 720px + 150px);
  width: 8px;
  height: 8px;
  background: var(--c-blue);
  opacity: 0.55;
}

/* ---------- Head ---------- */
.uc-code-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.uc-code-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 45px;
  letter-spacing: -1px;
  color: var(--c-blue);
  white-space: nowrap;
  text-transform: none;
}

.uc-code-title .accent {
  color: var(--c-orange);
}

.uc-code-rule {
  display: flex;
  gap: 6px;
}

.uc-code-rule i {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--c-orange);
  border-radius: 4px;
  transform-origin: left center;
}

.uc-code-rule i + i {
  width: 14px;
  background: var(--c-blue);
}

.uc-code-lead {
  width: 725px;
  max-width: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--c-text);
}

/* ---------- Code rows ---------- */
.uc-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-code-card {
  display: flex;
  gap: 18px;
  align-items: center;
  box-sizing: border-box;
  min-height: 80.39px;
  padding: 16px 22px 16px 16px;
  background: var(--c-bg-blue);
  border: 1px solid var(--c-light-grey);
  border-radius: 18px;
  transition: translate 0.35s ease, box-shadow 0.35s ease;
}

.uc-code-card--rose {
  background: #fff4f4;
  border-color: #fddcdd;
}

.uc-code-card:hover {
  translate: 0 -4px;
  box-shadow: 0 14px 22px rgba(39, 55, 117, 0.1);
}

.uc-code-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-weight: 700;
  font-size: 13px;
  line-height: normal;
  color: var(--c-white);
  background: var(--c-blue);
  border-radius: 14px;
  filter: drop-shadow(0 8px 9px rgba(39, 55, 117, 0.14));
  transition: rotate 0.35s ease, scale 0.35s ease;
}

.uc-code-num--orange {
  background: var(--c-orange);
}

.uc-code-card:hover .uc-code-num {
  rotate: -6deg;
  scale: 1.06;
}

.uc-code-body {
  flex: 1 1 0;
  min-width: 0;
}

.uc-code-card-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--c-blue);
  text-transform: none;
}

.uc-code-card-title .accent {
  color: var(--c-orange);
}

.uc-code-card-text {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--c-text);
}

.uc-code-check {
  display: block;
  flex: none;
  max-width: none;
}

/* ---------- Floating widgets (Figma 11476:4864 / 11476:4886) ---------- */
/* Each wrapper is the rotated card's bounding box in the 1440px frame. */
.uc-code-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.uc-code-float--encounter {
  top: 131.61px;
  left: calc(50% - 720px + 95.7px);
  width: 204.661px;
  height: 144.356px;
}

.uc-code-float--capture {
  top: 140.28px;
  right: calc(50% - 720px + 96.35px);
  width: 203.384px;
  height: 126.092px;
}

.uc-code-encounter,
.uc-code-capture {
  display: flex;
  flex: none;
  flex-direction: column;
  box-sizing: border-box;
  width: 196px;
  padding: 14px 16px;
  line-height: normal;
  border-radius: 16px;
}

.uc-code-encounter {
  gap: 9.994px;
  background: var(--c-white);
  border: 1px solid #e6ebf5;
  filter: drop-shadow(0 18px 20px rgba(39, 55, 117, 0.12));
  rotate: -4deg;
}

.uc-code-encounter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 12px;
  color: var(--c-blue);
}

.uc-code-encounter-head em {
  padding: 2px 8px 3px;
  font-style: normal;
  font-size: 9px;
  color: var(--c-orange);
  background: #ffe9ea;
  border-radius: 999px;
}

.uc-code-encounter-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-code-encounter-rows li {
  display: flex;
  gap: 8px;
  align-items: center;
}

.uc-code-encounter-rows b {
  flex: none;
  padding: 2px 7px 3px;
  font-weight: 600;
  font-size: 10px;
  color: var(--c-white);
  border-radius: 5px;
}

.uc-code-encounter-rows b.tone-blue   { background: var(--c-blue); }
.uc-code-encounter-rows b.tone-orange { background: var(--c-orange); }
.uc-code-encounter-rows b.tone-light  { color: var(--c-blue); background: #eef2fb; }

.uc-code-encounter-rows span {
  flex: 1 1 0;
  min-width: 0;
  font-size: 10px;
  color: var(--c-text);
}

.uc-code-capture {
  gap: 12px;
  background: var(--c-blue);
  filter: drop-shadow(0 18px 20px rgba(39, 55, 117, 0.28));
  rotate: 4deg;
}

.uc-code-capture-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.uc-code-capture-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--c-orange);
  border-radius: 50%;
}

.uc-code-capture-icon img {
  display: block;
  max-width: none;
}

.uc-code-capture-stat {
  display: flex;
  flex-direction: column;
}

.uc-code-capture-stat small {
  font-size: 11px;
  color: #d7def1;
}

.uc-code-capture-stat b {
  font-weight: 700;
  font-size: 18px;
  line-height: 20.7px;
  color: var(--c-white);
}

.uc-code-capture-bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-code-capture-bars li {
  flex: 1 1 0;
  height: var(--bar-h);
  background: #4e62ae;
  border-radius: 3px;
  transform-origin: bottom center;
}

.uc-code-capture-bars li:last-child {
  background: var(--c-orange);
}

/* ---------- Coding animation (script-v2.js .is-armed / .is-in) ---------- */
/* Head rises, the rule draws, rows cascade two by two, then the widgets
   pop in (encounter rows slide, bars grow, the 100% counts up) and bob. */
.uc-code.is-armed:not(.is-in) :is(.uc-code-head > *, .uc-code-card, .uc-code-float) {
  opacity: 0;
}

.uc-code.is-in .uc-code-head > * {
  animation: derm-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-code.is-in .uc-code-head > :nth-child(2) { animation-delay: 0.1s; }
.uc-code.is-in .uc-code-head > :nth-child(4) { animation-delay: 0.25s; }

.uc-code.is-in .uc-code-rule i {
  animation: mh-grow-x 0.6s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-code.is-in .uc-code-rule i + i {
  animation-delay: 0.4s;
}

.uc-code.is-in .uc-code-card {
  animation: derm-rise 0.6s calc(0.35s + var(--i, 0) * 0.07s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-code.is-in .uc-code-card .uc-code-num {
  animation: derm-pop 0.5s calc(0.55s + var(--i, 0) * 0.07s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.uc-code.is-in .uc-code-float {
  animation:
    derm-pop 0.7s 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    derm-float 6s 1.3s ease-in-out infinite;
}

.uc-code.is-in .uc-code-float--capture {
  animation-delay: 0.6s, 2.2s;
}

.uc-code.is-in .uc-code-encounter-rows li {
  animation: derm-from-right 0.45s calc(0.9s + var(--r, 0) * 0.1s) ease-out backwards;
}

.uc-code.is-in .uc-code-capture-bars li {
  animation: mh-grow-y 0.6s calc(1s + var(--b, 0) * 0.08s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* Without the script the widgets still bob. */
.uc-code:not(.is-armed) .uc-code-float {
  animation: derm-float 6s ease-in-out infinite;
}

.uc-code-ring--dashed,
.uc-tailor-ring--dashed {
  animation: derm-spin-slow 90s linear infinite;
}

.uc-code-dot,
.uc-tailor-dot {
  animation: derm-float 5s ease-in-out infinite;
}

.uc-code-dot--blue,
.uc-tailor-dot--blue {
  animation-delay: -2.5s;
}

/* ---------- Coding responsive ---------- */
/* Below the 1440 layout the widgets would sit on the lead; they drop out. */
@media (max-width: 1199px) {
  .uc-code-float {
    display: none;
  }
}

@media (max-width: 991px) {
  .uc-code {
    padding: 48px 0;
  }

  .uc-code .container-page {
    gap: 40px;
  }

  .uc-code-title {
    font-size: 28px;
    line-height: 38px;
    white-space: normal;
  }

  .uc-code-grid {
    gap: 16px 20px;
  }
}

@media (max-width: 767px) {
  .uc-code-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones — Figma 11567:566 (440 wide): 40px top and bottom, 20px gutters.
   The section becomes a one-column grid (head / widget band / rows) with the
   container's contents laid straight into it, so the two tilted widgets sit
   in a 210px band under the lead (Figma 11567:579) instead of dropping out. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-coding {
    padding: 40px 20px;
  }

  .uc-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 230px auto;
  }

  .uc-code .container-page {
    display: contents;
  }

  .uc-code-head {
    grid-row: 1;
    gap: 12px;
  }

  .uc-code-head .bh-sub-pill {
    font-size: 10px;
    line-height: 14px;
  }

  .uc-code-title {
    font-size: 24px;
    line-height: 40px;
    letter-spacing: -1px;
  }

  .uc-code-title-lead {
    display: block;
  }

  .uc-code-lead {
    margin-top: 8px; /* the intro's 20px gap after the 12px heading gap */
    font-size: 14px;
    line-height: 25px;
  }

  /* The widget band: the encounter card from the band's top-left, the charge
     card 74px lower against the right (Figma 189 / 74 in a 400px band). */
  .uc-code-float,
  .uc-code-float--encounter,
  .uc-code-float--capture {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: flex;
    grid-row: 2;
    grid-column: 1;
    align-self: start;
  }

  .uc-code-float--encounter {
    justify-self: start;
    margin-top: 26px;
  }

  .uc-code-float--capture {
    justify-self: end;
    margin-top: 102px;
    margin-right: 1.9%;
  }

  /* Rows: one column, 16px apart, 104px tall, the code on its own line. */
  .uc-code-grid {
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 28px;
  }

  .uc-code-card {
    gap: 14px;
    min-height: 104px;
    padding: 16px;
  }

  .uc-code-num {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .uc-code-card-title {
    font-size: 16px;
    line-height: 22.4px;
  }

  .uc-code-card-title .accent {
    display: block;
    font-size: 15px;
    line-height: 22px;
  }

  .uc-code-card-text {
    margin-top: 4px;
    font-size: 14px;
    line-height: 21px;
  }

  /* Figma sets lines like "Follow-up visits with applicable criteria" on one
     line in its 272px measure; the browser's Poppins runs a little wider, so
     the copy borrows 6px of the gap before the tick. */
  .uc-code-body {
    margin-right: -6px;
  }

  /* Decoration: two orbits off the top-left and the orange dot. */
  .uc-code-ring--solid {
    top: -230px;
    left: -210px;
    width: 420px;
    height: 420px;
    opacity: 1;
  }

  .uc-code-ring--dashed {
    top: -170px;
    left: -150px;
    width: 300px;
    height: 300px;
    opacity: 1;
  }

  .uc-code-dot--orange {
    top: 26px;
    left: 47px;
    width: 12px;
    height: 12px;
  }

  .uc-code-dot--blue {
    display: none;
  }

  .uc-tailor-ring--solid,
  .uc-tailor-ring--dashed {
    opacity: 0.6;
  }
}

/* ============================================================= */
/* Denial management banner — Figma 11478:5126 (1440 x 563), and  */
/* the AI automation banner — Figma 11482:624 (1440 x 425), which  */
/* is the same layout on the brand blue (.uc-ai). A 600px copy      */
/* column; the photo is 707px from x 733 to the frame's right edge  */
/* under a left-to-right fade into the band colour.                 */
/* ============================================================= */
.uc-denial {
  --uc-band: var(--c-bg-blue);
  --uc-band-clear: rgba(255, 255, 255, 0);
  position: relative;
  padding: 40px 0;
  overflow: hidden;
  font-family: var(--font-primary);
  background: var(--uc-band);
}

.uc-denial .container-page {
  position: relative;
  z-index: 1;
}

.uc-denial-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(50% + 13px);
  overflow: hidden;
}

.uc-denial-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--uc-band), var(--uc-band-clear));
  pointer-events: none;
}

/* Figma: the photo fills the box's height at 119.45% width, 12.52% left. */
.uc-denial-photo {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 64.4% 0;
}

.uc-denial-copy {
  display: flex;
  flex-direction: column;
  gap: 15.1px;
  align-items: flex-start;
  width: 600px;
  max-width: 100%;
}

.uc-denial-title {
  margin: 0;
  padding-top: 6.9px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -1.6px;
  color: var(--c-blue);
  text-transform: none;
}

.uc-denial-title .accent {
  color: var(--c-orange);
}

.uc-denial-bar {
  display: block;
  width: 42px;
  height: 4px;
  background: var(--c-orange);
  border-radius: 3px;
  transform-origin: left center;
}

.uc-denial-text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
}

.uc-denial-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

.uc-denial-list li {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
}

.uc-denial-list img {
  display: block;
  flex: none;
  max-width: none;
}

/* ---------- AI automation (Figma 11482:624) ---------- */
.uc-ai {
  --uc-band: var(--c-blue);
  --uc-band-clear: rgba(39, 55, 117, 0);
}

.uc-ai-photo {
  object-position: 50% 50%;
}

.uc-v2 .uc-ai-pill {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.1);
}

.uc-ai-title {
  line-height: 35px;
  color: var(--c-white);
}

.uc-ai-text {
  color: var(--c-white);
}

/* ---------- Banner animation (script-v2.js .is-armed / .is-in) ---------- */
/* Copy rises line by line, the bar draws, ticks pop in one by one; the
   photo eases in from the right and keeps a slow zoom. */
@keyframes uc-denial-photo-in {
  from { opacity: 0; translate: 40px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes uc-denial-zoom {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}

.uc-denial.is-armed:not(.is-in) :is(.uc-denial-copy > *, .uc-denial-list li, .uc-denial-photo) {
  opacity: 0;
}

.uc-denial.is-in .uc-denial-copy > * {
  animation: derm-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-denial.is-in .uc-denial-copy > :nth-child(2) { animation-delay: 0.1s; }
.uc-denial.is-in .uc-denial-copy > :nth-child(4) { animation-delay: 0.25s; }
.uc-denial.is-in .uc-denial-copy > :nth-child(5) { animation-delay: 0.35s; }

.uc-denial.is-in .uc-denial-bar {
  animation: mh-grow-x 0.6s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-denial.is-in .uc-denial-list li {
  animation: derm-rise 0.5s calc(0.45s + var(--i, 0) * 0.08s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-denial.is-in .uc-denial-list img {
  animation: derm-pop 0.5s calc(0.55s + var(--i, 0) * 0.08s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.uc-denial.is-in .uc-denial-photo {
  animation:
    uc-denial-photo-in 0.9s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    uc-denial-zoom 16s 1.2s ease-in-out infinite;
}

.uc-denial:not(.is-armed) .uc-denial-photo {
  animation: uc-denial-zoom 16s ease-in-out infinite;
}

/* ---------- Banner responsive ---------- */
@media (max-width: 1199px) {
  .uc-denial-copy {
    width: 520px;
  }
}

/* Tablets and phones: the copy runs full width and the photo follows it
   as a band that fades in from the top. */
@media (max-width: 991px) {
  .uc-denial {
    display: flex;
    flex-direction: column;
    padding: 48px 0 0;
  }

  .uc-denial-media {
    position: relative;
    inset: auto;
    order: 2;
    height: 340px;
    margin-top: 32px;
  }

  .uc-denial-media::after {
    background: linear-gradient(to bottom, var(--uc-band), var(--uc-band-clear) 45%);
  }

  .uc-denial-photo {
    object-position: 70% 30%;
  }

  .uc-ai-photo {
    object-position: 70% 50%;
  }

  .uc-denial-copy {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .uc-denial {
    padding-top: 40px;
  }

  .uc-denial-media {
    height: 240px;
    margin-top: 24px;
  }

  .uc-v2 .uc-denial .bh-sub-pill {
    height: auto;
    line-height: 14px;
    white-space: normal;
    text-align: left;
  }

  .uc-denial-title {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -0.8px;
  }

  .uc-denial-text,
  .uc-denial-list li {
    font-size: 15px;
    line-height: 24px;
  }

  .uc-denial-list li {
    gap: 12px;
    align-items: flex-start;
  }
}

/* Denials band on phones — Figma 11560:506 (440 wide): BG Blue, 40px above
   the copy and none below, 20px gutters; a 10px pill, a 24 / 35 heading (no
   bar), 14 / 24 copy and ticks; the dashboard photo runs edge to edge at the
   foot (378px tall at 440, from a 440 x 396 box) fading in from the band. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-denials {
    padding-top: 40px;
    padding-bottom: 0;
  }

  #uc-denials .container-page {
    --page-gutter: 20px;
  }

  .uc-v2 #uc-denials .bh-sub-pill {
    height: 26px;
    font-size: 10px;
    line-height: 9.976px;
    white-space: nowrap;
  }

  #uc-denials .uc-denial-title {
    font-size: 24px;
    line-height: 35px;
    letter-spacing: -1px;
  }

  #uc-denials .uc-denial-bar {
    display: none;
  }

  #uc-denials .uc-denial-text,
  #uc-denials .uc-denial-list li {
    font-size: 14px;
    line-height: 24px;
  }

  #uc-denials .uc-denial-list li {
    gap: 14px;
    align-items: center;
  }

  #uc-denials .uc-denial-media {
    height: auto;
    margin-top: 31px; /* Figma: the photo starts 31px below the tick list */
    aspect-ratio: 440 / 378;
  }

  /* The photo fills the 396px box's height at 119.45% width, 12.52% left. */
  #uc-denials .uc-denial-photo {
    position: absolute;
    top: 0.02%;
    left: -12.52%;
    width: 119.45%;
    height: calc(100% * 396 / 378);
    object-fit: fill;
  }

  #uc-denials .uc-denial-media::after {
    inset: 0 0 auto;
    height: calc(100% * 396 / 378);
    background: linear-gradient(180deg, var(--c-bg-blue) 1.515%, rgba(255, 255, 255, 0) 94.066%);
  }
}

/* ============================================================= */
/* Tailored specialty billing — Figma 11478:5171 (1440 x 737), in */
/* frame 11581:126 directly above the AI band. Builds on .bh-sub + */
/* .derm-sub on BG Blue: 4 x 2 cards that size to their copy (blue */
/* 14 / 20 text), the coding section's top-left rings and dots,    */
/* the clinic band's right-hand glow and ring (11581:125), and a   */
/* capitalised pill as in Figma.                                   */
/* ============================================================= */
.uc-v2 .uc-tailor {
  background: var(--c-bg-blue);
}

.uc-v2 .uc-tailor-pill {
  text-transform: capitalize;
}

.uc-v2 .uc-tailor .bh-sub-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.uc-v2 .uc-tailor .bh-sub-card {
  height: auto;
}

.uc-v2 .uc-tailor .bh-sub-card-text {
  line-height: 20px;
  color: var(--c-blue);
}

/* The tailored cards' dot positions sit 0.36px higher than the coding ones. */
.uc-tailor-ring--solid  { top: -169.64px; }
.uc-tailor-ring--dashed { top: -109.64px; }
.uc-tailor-dot--orange  { top: 58.36px; }
.uc-tailor-dot--blue    { top: 110.36px; }

/* Four columns hold down to tablets (the BH 1199px two-column rule is undone). */
@media (max-width: 1199px) {
  .uc-v2 .uc-tailor .bh-sub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .uc-v2 .uc-tailor .bh-sub-card {
    min-height: 0;
  }
}

@media (max-width: 991px) {
  .uc-v2 .uc-tailor .bh-sub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .uc-v2 .uc-tailor .bh-sub-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc-code *,
  .uc-code-ring,
  .uc-code-dot,
  .uc-denial *,
  .uc-denial-media::after,
  .uc-tailor-ring,
  .uc-tailor-dot {
    animation: none !important;
    transition: none !important;
  }
}



/* ============================================================= */
/* Credentialing — Figma 11472:1282 (1440 x 634). Builds on        */
/* .bh-cred + the MH tuning (280px button, "Weekly" value); the    */
/* step cards are 230px tall (BH 258), so the panel is 554px.      */
/* ============================================================= */
@media (min-width: 768px) {
  .uc-v2 .uc-cred .bh-cred-step {
    height: 230px;
  }
}

/* ============================================================= */
/* Why choose us — Figma 11472:1418 (1440 x 642). Builds on the    */
/* derm block: a 493px copy column, one 413px button, and the      */
/* 695px card grid centred on the copy (Figma's items-center), on  */
/* Figma's BG Blue band with white cards.                          */
/* ============================================================= */
.uc-v2 .uc-choose {
  background: var(--c-bg-blue);
}

.uc-v2 .uc-choose .bh-choose-heading,
.uc-v2 .uc-choose .bh-choose-lead {
  width: 493px;
  max-width: 100%;
}

/* The site's base <p> (grey, 28.8px) overrode the lead's 16 / 25.2 #3d3d3d. */
.uc-v2 .uc-choose .bh-choose-lead p {
  font: inherit;
  line-height: inherit;
  color: inherit;
}

.uc-v2 .uc-choose .bh-choose-card {
  background: var(--c-white);
}

/* Figma sets "Claims are reviewed for errors and payer" on one line in the
   283.5px measure; the browser's Poppins runs ~1.5px wider, so the line
   gets a few px of the card's right padding to keep Figma's two lines. */
.uc-v2 .uc-choose .bh-choose-card-text {
  margin-right: -4px;
}

@media (min-width: 1200px) {
  .uc-v2 .uc-choose .bh-choose-layout {
    align-items: center;
  }
}

/* ============================================================= */
/* Trusted standards — Figma 11472:1507: the BH / MH band as is.   */
/* Case study — Figma 11472:1558 (1240 x 674): the derm card       */
/* (.derm-cases keeps its 1240-1280px squeeze), no privacy note.   */
/* ============================================================= */

/* Figma sets the testimonial at 16 / 23.6 (BH 25.6), as on the MH
   page; that brings the card to Figma's 674px. Phones keep the BH
   size. */
@media (min-width: 768px) {
  .uc-v2 .uc-cases .bh-case-quote blockquote {
    line-height: 23.6px;
  }
}

/* The 4px rule under the photo fades from the brand orange into a soft
   periwinkle in Figma (sampled from the render), not BH's solid orange. */
.uc-v2 .uc-cases .bh-case-photo {
  border-image: linear-gradient(90deg, #fc5d61 0%, #8a99cf 100%) 1;
}

/* Figma strokes the outcome discs' 7px white ring outside the 50px tinted
   disc (64px overall, overhanging the card padding); BH draws it inside. A
   box-shadow ring keeps the 50px slot, so the copy stays at 90px. */
.uc-v2 .uc-cases .bh-case-stat-icon {
  border: 0;
  box-shadow: 0 0 0 7px var(--c-white);
}

/* ============================================================= */
/* Software integrations — Figma 11472:1607 (1440 x 1035). Builds  */
/* on .bh-int: both side cards 260px at y 45.44, a 12px line of    */
/* copy under each card title, a four-line hub, the benefits bar's */
/* gradient dashed outline and an orange CTA 40px below the bar.   */
/* ============================================================= */
@media (min-width: 1240px) {
  .uc-v2 .uc-int .bh-int-card--ehr,
  .uc-v2 .uc-int .bh-int-card--clearing {
    top: 45.44px;
    height: 260px;
  }
}

/* "Clearinghouses & Billing Connections" wraps beside its icon (Figma's
   flex-1 title); the other two titles stay on one line. */
.uc-v2 .uc-int .bh-int-card--clearing .bh-int-card-title {
  flex: 1 1 0;
  min-width: 0;
}

.uc-v2 .uc-int .bh-int-card--clearing .bh-int-card-title h3 {
  white-space: normal;
}

.uc-int-card-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-text);
}

/* Hub: Figma's 154px text block 23.62px into the 194px ring (34.62px from
   the halo's top), mark / title / four lines 10px apart. */
@media (min-width: 576px) {
  .uc-v2 .uc-int .bh-int-hub {
    gap: 10px;
    justify-content: flex-start;
    padding: 34.62px 0 0;
  }

  .uc-v2 .uc-int .bh-int-hub strong {
    font-size: 14px;
    line-height: 15px;
  }

  .uc-v2 .uc-int .bh-int-hub > span:last-child {
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
  }
}

/* Benefits bar: Figma's 1px dashed stroke runs navy to orange (the brand
   gradient); an SVG rect draws it since CSS dashed borders can't. */
.uc-v2 .uc-int .bh-int-benefits {
  position: relative;
}

.uc-int-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.uc-int-outline rect {
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  fill: none;
  stroke: url(#uc-int-outline-grad);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

/* CTA: the credentialing button, hugging Figma's 13px semibold label. */
.uc-v2 .uc-int .uc-int-cta {
  width: auto;
  font-weight: 600;
  font-size: 13px;
}

/* Reveal: each card's copy fades up once its card lands, the CTA rises
   after the benefits bar; the outline's dashes keep marching slowly. */
@keyframes uc-int-march {
  to { stroke-dashoffset: -200; }
}

.uc-int.is-armed:not(.is-in) :is(.uc-int-card-text, .uc-int-cta) {
  opacity: 0;
}

.uc-int.is-in .uc-int-card-text {
  animation: bh-int-rise 0.6s 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-int.is-in .uc-int-cta {
  animation: bh-int-rise 0.7s 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.uc-int-outline rect {
  animation: uc-int-march 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .uc-int .uc-int-card-text,
  .uc-int .uc-int-cta,
  .uc-int .uc-int-cta::after,
  .uc-int-outline rect {
    animation: none !important;
  }
}

/* Phones (MH's stacked diagram): the copy takes its own row in the
   wrapping EHR card, titles wrap, the hub text shrinks into the 180px
   disc, and the bar keeps the gradient outline instead of MH's grey rule. */
@media (max-width: 575px) {
  .uc-v2 .uc-int .bh-int-card-title {
    flex: 1 1 0;
    min-width: 0;
  }

  .uc-v2 .uc-int .bh-int-card-title h3 {
    white-space: normal;
  }

  .uc-v2 .uc-int .bh-int-card--ehr .uc-int-card-text {
    flex-basis: 100%;
  }

  .uc-v2 .uc-int .bh-int-hub strong {
    max-width: 140px;
    font-size: 13px;
    line-height: 16px;
    white-space: normal;
  }

  .uc-v2 .uc-int .bh-int-hub > span:last-child {
    white-space: nowrap;
  }

  .uc-v2 .uc-int .bh-int-benefits {
    border: 0;
  }

  .uc-v2 .uc-int .uc-int-cta {
    width: 100%;
  }
}

/* ============================================================= */
/* Lower page (Figma 11482:705 → 11472:2786). The state map, payer */
/* frame, testimonials, consultation and FAQs reuse the BH / MH /  */
/* derm / DME blocks unchanged; only the differences live here.    */
/* Section spacing is set once at the end of this file.            */
/* ============================================================= */

/* ============================================================= */
/* State services — Figma 11482:705 (1440 x 748). Builds on        */
/* .bh-states + .mh-states (six callouts, right-hand cards pinned  */
/* to the panel edge on 1200–1299px screens). The lead wraps at    */
/* the 921px title width instead of BH's single line.              */
/* ============================================================= */
.uc-v2 .uc-states .bh-states-lead {
  max-width: 921px;
  white-space: normal;
}

/* ============================================================= */
/* Payer expertise — Figma 11472:2251 (1240 x 1287.5). Builds on   */
/* .bh-pay + MH / derm tuning (two-line status pill). Figma spaces */
/* step 1 at 7.3px and step 4 ("Specialty & Niche Plans", a       */
/* two-line title) at 10px; the others keep BH's 7px. Steps and    */
/* arcs share the list, so step 4 is its 7th item.                 */
/* ============================================================= */
.uc-v2 .uc-pay .bh-pay-step:nth-child(1) {
  gap: 7.3px;
}

.uc-v2 .uc-pay .bh-pay-step:nth-child(7) {
  gap: 10px;
}

/* ============================================================= */
/* Testimonials — Figma 11472:2427 (1440 x 1138.6). The DME        */
/* carousel as on the derm page; the reviewer's practice line is   */
/* 10px with no tracking (DME: 11px, 1.1px), so the longer practice */
/* names wrap inside the 137px author column as in Figma.          */
/* ============================================================= */
.uc-v2 .uc-testi .dme-testi-who small {
  font-size: 10px;
  letter-spacing: 0;
}

/* ============================================================= */
/* Book a consultation — Figma 11472:2682 (1440 x 766.6). Builds   */
/* on .bh-consult + MH tuning; the frame has no logo strip, so     */
/* nothing else differs.                                           */
/* ============================================================= */

/* ============================================================= */
/* FAQs — Figma 11472:2786 (1440 x 861.9). Builds on .bh-faq + MH  */
/* tuning. Closed rows are 65px in Figma (40px chip, 12 / 13px     */
/* around it); the open row's header is 55px. The row eases        */
/* between the two as an item opens.                               */
/* ============================================================= */
.uc-v2 .uc-faq .bh-faq-q button {
  min-height: 65px;
  transition: min-height 0.3s ease;
}

.uc-v2 .uc-faq .bh-faq-item.is-open .bh-faq-q button {
  min-height: 55px;
}

@media (max-width: 991px) {
  .uc-v2 .uc-faq .bh-faq-q button {
    min-height: 55px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc-v2 .uc-faq .bh-faq-q button {
    transition: none;
  }
}

/* ============================================================= */
/* Section spacing: every section pads 60px top and bottom and    */
/* none carries a margin, at every width. The selectors outrank   */
/* the BH / MH / derm / DME section rules (and the shared         */
/* strengths band) so this one rule sets the rhythm.              */
/* ============================================================= */
.uc-v2 > section.strengths,
.uc-v2 > section[id],
.uc-v2 > .dme-v2 > section[id] {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* The slim CTA bar sits closer to its neighbours: 20px top and bottom. */
.uc-v2 > section#uc-cta-bar {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Hero "Protect Your Revenue Today" link (content doc): the credentialing
   button, sized to its label, between the bullet list and the badges. */
.uc-v2 .uc-hero-btn {
  width: auto;
  margin-top: 24px;
  padding: 8px 24px;
}

/* In-text links on this page are coral (#fc5d61), turning navy (#273775) on hover. */
/* Links inside the tailored-billing card copy (e.g. "Radiology billing"). */
.uc-v2 .uc-tailor .bh-sub-card-text a {
  color: var(--c-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uc-v2 .uc-tailor .bh-sub-card-text a:hover,
.uc-v2 .uc-tailor .bh-sub-card-text a:focus-visible {
  color: var(--c-blue);
}

/* Inline link in the services lead ("emergency room billing services"). */
.uc-v2 .uc-svc-lead a {
  color: var(--c-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uc-v2 .uc-svc-lead a:hover,
.uc-v2 .uc-svc-lead a:focus-visible {
  color: var(--c-blue);
}

/* Inline link in the coding lead ("urgent care medical coding services"). */
.uc-v2 .uc-code-lead a {
  color: var(--c-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uc-v2 .uc-code-lead a:hover,
.uc-v2 .uc-code-lead a:focus-visible {
  color: var(--c-blue);
}

/* Inline link in a service tab's callout (e.g. insurance verification). */
.uc-v2 .uc-svc-callout a {
  color: var(--c-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uc-v2 .uc-svc-callout a:hover,
.uc-v2 .uc-svc-callout a:focus-visible {
  color: var(--c-blue);
}

/* Service dropdown: keep the full list below the field without a scrollbar. */
.uc-v2 #booking .service-dropdown .field-select-list {
  top: calc(100% + 8px);
  bottom: auto;
  max-height: none;
  overflow: visible;
}

/* The smallest phones (320px): one more notch so "Calculated" fits its cell. */
@media (max-width: 340px) {
  .uc-svc-stat,
  .uc-svc-stat--tight {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 3px 6px;
    padding: 12px 6px;
  }

  .uc-svc-stat-icon {
    width: 28px;
    height: 28px;
  }

  .uc-svc-stat-icon > img {
    width: 18px;
    height: 18px;
  }

  .uc-svc-stat-label {
    font-size: 11px;
  }

  .uc-svc-stat-value {
    font-size: 12px;
  }
}

/* AI automation band on phones — Figma 11569:2313 (440 wide): the brand blue
   band, 40px above the copy and none below, 20px gutters; a 12px pill, a
   24 / 35 white heading with the 42px bar and 14 / 24 white copy; the photo
   at its own 3:2 shape, full width at the foot (294px tall at 440), 71px
   below the copy and fading in from the band colour. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-ai-automation {
    padding-top: 40px;
    padding-bottom: 0;
  }

  #uc-ai-automation .container-page {
    --page-gutter: 20px;
  }

  .uc-v2 #uc-ai-automation .bh-sub-pill {
    height: 26px;
    font-size: 12px;
    line-height: 9.976px;
    white-space: nowrap;
  }

  #uc-ai-automation .uc-denial-title {
    font-size: 24px;
    line-height: 35px;
    letter-spacing: -1.6px;
  }

  #uc-ai-automation .uc-denial-text {
    font-size: 14px;
    line-height: 24px;
  }

  #uc-ai-automation .uc-denial-media {
    height: auto;
    margin-top: 71px; /* Figma: the photo starts 479px down a 773px frame */
    aspect-ratio: 440 / 294;
  }

  /* Figma: the photo fills the box at 100% x 99.77%, 0.1% down. */
  #uc-ai-automation .uc-denial-photo {
    position: absolute;
    top: 0.1%;
    left: 0;
    width: 100%;
    height: 99.77%;
    object-fit: fill;
  }

  #uc-ai-automation .uc-denial-media::after {
    inset: 0;
    height: auto;
    background: linear-gradient(179.43deg, var(--c-blue) 2.643%, rgba(39, 55, 117, 0) 94.838%);
  }
}

/* Credentialing on phones — Figma 11551:1205 (400px content at 440): 40px
   above and below, 20px gutters; the 32 / 35 title, a 270px button; the
   panel at 20px padding with 30px between its parts, the status tile sized
   to its copy beside the shield watermark, the four steps two by two
   (20px apart) and the metrics tile. Undoes the BH / MH one-column phone
   rules for this section only. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-credentialing {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #uc-credentialing .container-page {
    --page-gutter: 20px;
  }

  .uc-v2 #uc-credentialing .bh-cred-title {
    font-size: 32px;
    line-height: 35px;
  }

  .uc-v2 #uc-credentialing .bh-cred-btn {
    width: 270px;
    max-width: 100%;
  }

  .uc-v2 #uc-credentialing .bh-cred-panel {
    gap: 30px;
    padding: 20px;
  }

  .uc-v2 #uc-credentialing .bh-cred-watermark {
    display: block;
    top: 18.18px;
    right: 19px;
  }

  .uc-v2 #uc-credentialing .bh-cred-status {
    width: auto;
    height: 90px;
  }

  .uc-v2 #uc-credentialing .bh-cred-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
  }

  .uc-v2 #uc-credentialing .bh-cred-step {
    gap: 10px;
    height: auto;
    padding: 17px;
  }

  .uc-v2 #uc-credentialing .bh-cred-step-icon {
    width: 64px;
    height: 64px;
  }

  .uc-v2 #uc-credentialing .bh-cred-step-title {
    font-size: 14px;
    line-height: 22.5px;
  }

  .uc-v2 #uc-credentialing .bh-cred-step-text {
    font-size: 12px;
    line-height: 16.25px;
  }
}

/* Integrations on phones — Figma 11551:1518 (a 400px frame with 16px inner
   padding at 440, so content sits 36px from the screen edge): a 10px pill, a
   24 / 32 title and 14 / 20 lead; the EHR logos two by two in 114 x 37
   tiles; a plain 2px navy dashed hub ring with a 15px two-line title; the
   benefits in a white card with a soft shadow (no gradient outline); a
   centred CTA sized to its label. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-integrations {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #uc-integrations .container-page {
    --page-gutter: 36px;
  }

  .uc-v2 #uc-integrations .bh-int-pill {
    padding: 6px 12px;
    font-size: 10px;
    line-height: 14px;
    border-radius: 8px;
  }

  .uc-v2 #uc-integrations .bh-int-title {
    font-size: 24px;
    line-height: 32px;
  }

  .uc-v2 #uc-integrations .bh-int-lead {
    font-size: 14px;
    line-height: 20px;
  }

  /* EHR logos: two 114 x 37 tiles per row, 20px apart, rows 12px apart. */
  .uc-v2 #uc-integrations .bh-int-card--ehr .bh-int-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: center;
    width: 100%;
  }

  .uc-v2 #uc-integrations .bh-int-card--ehr .bh-int-logo {
    width: 114.289px !important; /* over the desktop inline width */
    height: 37px;
    padding: 8.222px;
    border-width: 0.822px;
    border-radius: 8.222px;
  }

  /* Figma draws each logo at 82.2% of its desktop size (Experity 90.4 x 31.2,
     the others 100.3 x 20.6), centred in its tile. */
  .uc-v2 #uc-integrations .bh-int-card--ehr .bh-int-logo {
    padding: 0;
  }

  /* Figma 11569:2497 / 2502: the two logo rows sit 12px apart. */
  .uc-v2 #uc-integrations .bh-int-card--ehr .bh-int-logos + .bh-int-logos {
    margin-top: 4px;
  }

  .uc-v2 #uc-integrations .bh-int-card--ehr .bh-int-logo img {
    flex: none;
    width: 100.311px;
    max-width: none;
    height: 20.556px;
    object-fit: contain;
  }

  .uc-v2 #uc-integrations .bh-int-card--ehr .bh-int-logos:first-of-type .bh-int-logo:first-child img {
    width: 90.444px;
    height: 31.244px;
  }

  /* Hub: a plain navy dashed ring and a 15px two-line title. */
  .uc-v2 #uc-integrations .bh-int-hub-ring {
    inset: 0;
    background: none;
    border: 2px dashed var(--c-blue);
    animation: none;
  }

  .uc-v2 #uc-integrations .bh-int-hub strong {
    max-width: 100px;
    font-size: 15px;
    line-height: normal;
  }

  .uc-v2 #uc-integrations .bh-int-hub > span:last-child {
    font-size: 10px;
    line-height: 14px;
  }

  /* Benefits: a plain white card. */
  .uc-v2 #uc-integrations .uc-int-outline {
    display: none;
  }

  .uc-v2 #uc-integrations .bh-int-benefits {
    gap: 12px;
    padding: 16px;
    background: var(--c-white);
    border: 1px solid var(--c-light-grey, #e5e7eb);
    border-radius: 18px;
    filter: drop-shadow(0 10px 15px rgba(39, 55, 117, 0.08));
  }

  .uc-v2 #uc-integrations .bh-int-benefit span:last-child {
    font-size: 14px;
    font-weight: 500;
  }

  .uc-v2 #uc-integrations .uc-int-cta {
    align-self: center;
    width: auto;
    padding: 8px 14px 8px 30px;
    font-size: 14px;
    font-weight: 600;
  }
}

/* State services on phones: 20px above and below. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-states {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Payer expertise on phones — Figma 11551:2144 (a 400px dashed frame at 440,
   20px inside): the logo part (40px top and bottom) with a 24 / 35 title,
   14 / 29.25 lead, a 3-column logo grid in Figma's phone order and a
   rounded status bar; the "Many Payers" banner on solid brand blue with its
   five steps in one column joined by alternating side arcs (as on the MH
   page); then "The Right Payer" (20px top and bottom). The frame's dashed
   outline shades navy to coral (an SVG, shown on phones only). */
.uc-pay-outline {
  display: none;
}

@media (max-width: 575px) {
  .uc-v2 > section#uc-payers {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #uc-payers .container-page {
    --page-gutter: 20px;
  }

  .uc-v2 #uc-payers .bh-pay-frame {
    position: relative;
    gap: 40px;
    padding: 20px;
    border-color: transparent;
  }

  .uc-v2 #uc-payers .uc-pay-outline {
    position: absolute;
    inset: -1px;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    overflow: visible;
    pointer-events: none;
  }

  .uc-v2 #uc-payers .uc-pay-outline rect {
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    fill: none;
    stroke: url(#uc-pay-outline-grad);
    stroke-width: 1;
    stroke-dasharray: 6 4;
  }

  /* Part 1 */
  .uc-v2 #uc-payers .bh-pay-top {
    gap: 20px;
    padding: 40px 0;
  }

  .uc-v2 #uc-payers .bh-pay-intro {
    gap: 20px;
  }

  .uc-v2 #uc-payers .bh-pay-pill {
    font-size: 10px;
    line-height: 9.976px;
  }

  .uc-v2 #uc-payers .bh-pay-title,
  .uc-v2 #uc-payers .bh-pay-title--sm {
    width: auto;
    font-size: 24px;
    line-height: 35px;
  }

  .uc-v2 #uc-payers .bh-pay-bar {
    width: 48px;
    border-radius: 0;
  }

  .uc-v2 #uc-payers .bh-pay-lead {
    font-size: 14px;
    line-height: 29.25px;
    color: #4b5563;
  }

  .uc-v2 #uc-payers .bh-pay-network {
    gap: 24px;
  }

  .uc-v2 #uc-payers .bh-pay-network-title {
    font-size: 16px;
    line-height: 20px;
  }

  .uc-v2 #uc-payers .bh-pay-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 60px;
    gap: 12px;
  }

  .uc-v2 #uc-payers .bh-pay-logo {
    order: var(--i);
    min-width: 0;
  }

  .uc-v2 #uc-payers .bh-pay-logo img {
    max-width: 100%;
    height: auto;
  }

  /* Figma's phone order: Cigna before Anthem, TRICARE after Medicare. */
  .uc-v2 #uc-payers .bh-pay-logo:nth-child(4)  { order: 4; }
  .uc-v2 #uc-payers .bh-pay-logo:nth-child(5)  { order: 3; }
  .uc-v2 #uc-payers .bh-pay-logo:nth-child(8)  { order: 9; }
  .uc-v2 #uc-payers .bh-pay-logo:nth-child(9)  { order: 7; }
  .uc-v2 #uc-payers .bh-pay-logo:nth-child(10) { order: 8; }

  .uc-v2 #uc-payers .bh-pay-logo--more {
    font-size: 12px;
    line-height: 16px;
    text-align: center;
  }

  .uc-v2 #uc-payers .bh-pay-status {
    gap: 8px;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 24px;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    border-radius: 9999px;
  }

  .uc-v2 #uc-payers .bh-pay-status img {
    width: 18px;
    height: 18px;
  }

  /* Part 2: the banner */
  .uc-v2 #uc-payers .bh-pay-banner {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-inline: 0;
    padding: 20px;
    background: var(--c-blue);
  }

  .uc-v2 #uc-payers .bh-pay-banner-bg {
    opacity: 0.05;
  }

  .uc-v2 #uc-payers .bh-pay-banner-title {
    gap: 18.5px;
    width: 100%;
    min-height: 0;
    padding: 0 1px 0 0;
    border: 0;
    border-right: 1px solid rgba(71, 85, 105, 0.5);
  }

  .uc-v2 #uc-payers .bh-pay-banner .bh-pay-pill--light {
    background: rgba(255, 255, 255, 0.3);
  }

  .uc-v2 #uc-payers .bh-pay-banner-title h3 {
    font-size: 24px;
    line-height: 36px;
  }

  .uc-v2 #uc-payers .bh-pay-bar--sm {
    width: 40px;
  }

  .uc-v2 #uc-payers .bh-pay-steps {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
    height: auto;
  }

  .uc-v2 #uc-payers .bh-pay-step {
    width: 174px;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 10px;
  }

  .uc-v2 #uc-payers .bh-pay-step-icon {
    width: 48px;
    height: 48px;
  }

  .uc-v2 #uc-payers .bh-pay-step strong {
    font-size: 14px;
    line-height: 16px;
  }

  .uc-v2 #uc-payers .bh-pay-step > span:last-child {
    font-size: 12px;
    line-height: 12.5px;
  }

  /* Arcs: right of the column after steps 1 and 3, left after 2 and 4. */
  .uc-v2 #uc-payers .bh-pay-step-arc {
    position: absolute;
    top: 96.93px;
    left: calc(50% + 90px) !important; /* over the desktop inline left */
    display: block;
    width: 9px;
    height: 87px;
    margin: 0;
    rotate: none;
  }

  .uc-v2 #uc-payers .bh-pay-step-arc:nth-of-type(4),
  .uc-v2 #uc-payers .bh-pay-step-arc:nth-of-type(8) {
    left: calc(50% - 108px) !important;
    scale: -1 1;
  }

  .uc-v2 #uc-payers .bh-pay-step-arc:nth-of-type(4) { top: 234.93px; }
  .uc-v2 #uc-payers .bh-pay-step-arc:nth-of-type(6) { top: 367.93px; }
  .uc-v2 #uc-payers .bh-pay-step-arc:nth-of-type(8) { top: 484.93px; }

  .uc-v2 #uc-payers .bh-pay-step-arc img {
    top: 50%;
    left: 50%;
    width: 88.1632px;
    height: 11.5192px;
    translate: -50% -50%;
    rotate: 90deg;
    scale: none;
  }

  .uc-v2 #uc-payers .bh-pay-banner-end {
    position: relative;
    flex-direction: column;
    align-self: stretch;
    gap: 10px;
    width: 100%;
    height: 198.5px;
    padding: 1px 24px 0;
    border-top: 1px solid var(--c-white);
    border-left: 0;
  }

  .uc-v2 #uc-payers .bh-pay-banner-end img {
    width: 50px;
    height: 63px;
  }

  .uc-v2 #uc-payers .bh-pay-banner-end p {
    width: 100%;
    font-size: 12px;
    line-height: 16.25px;
    text-align: center;
  }

  /* Part 3 */
  .uc-v2 #uc-payers .bh-pay-bottom {
    gap: 30px;
    padding: 20px 0;
  }

  .uc-v2 #uc-payers .bh-pay-intro--sm {
    gap: 24px;
  }

  .uc-v2 #uc-payers .bh-pay-bottom .bh-pay-lead {
    line-height: 25px;
  }
}

/* Payer expertise on phones, part 3 — Figma 11551:2266 / 2299: the orbit in a
   309 x 226 box (a 165.8px dashed ring, a 120.6px centre card, 9px dots and
   four corner pills overhanging the box), then "Payer Types We Cover" with
   56px avatars; and the "+ More" tile's longer label wrapping in its cell. */
@media (max-width: 575px) {
  .uc-v2 #uc-payers .bh-pay-logo--more {
    padding: 6px;
    white-space: normal;
  }

  .uc-v2 #uc-payers .bh-pay-orbit {
    align-self: center;
    width: 309px;
    height: 226px;
    margin: 0 auto;
  }

  .uc-v2 #uc-payers .bh-pay-orbit-ring {
    top: 30.08px;
    left: 71.6px;
    width: 165.8px;
    height: 165.8px;
    translate: none;
  }

  .uc-v2 #uc-payers .bh-pay-orbit-dot {
    width: 9.04px;
    height: 9.04px;
  }

  .uc-v2 #uc-payers .bh-pay-orbit-dot--1 { top: 34.6px;   right: auto; bottom: auto; left: 112.3px; }
  .uc-v2 #uc-payers .bh-pay-orbit-dot--2 { top: 34.6px;   right: auto; bottom: auto; left: 187.66px; }
  .uc-v2 #uc-payers .bh-pay-orbit-dot--3 { top: 183.07px; right: auto; bottom: auto; left: 112.3px; }
  .uc-v2 #uc-payers .bh-pay-orbit-dot--4 { top: 183.07px; right: auto; bottom: auto; left: 187.66px; }

  .uc-v2 #uc-payers .bh-pay-orbit-center {
    position: absolute;
    top: 52.76px;
    left: 94.2px;
    width: 120.6px;
    height: 120.6px;
    padding: 12px;
  }

  .uc-v2 #uc-payers .bh-pay-orbit-center strong {
    font-size: 13px;
    line-height: 17px;
  }

  .uc-v2 #uc-payers .bh-pay-orbit-pill {
    gap: 6px;
    width: 120.6px;
    height: 36.2px;
    padding: 6px 8px 6px 12px;
    font-size: 10px;
    line-height: 12.5px;
  }

  .uc-v2 #uc-payers .bh-pay-orbit-pill-icon {
    flex: none;
    width: 24.1px;
    height: 24.1px;
  }

  .uc-v2 #uc-payers .bh-pay-orbit-pill--commercial { top: 12px;     right: auto; bottom: auto; left: -22.6px; height: 37px; }
  .uc-v2 #uc-payers .bh-pay-orbit-pill--medicare   { top: 11.27px;  right: auto; bottom: auto; left: 212.5px; width: 123.6px; }
  .uc-v2 #uc-payers .bh-pay-orbit-pill--medicaid   { top: 167.28px; right: auto; bottom: auto; left: -22.6px; }
  .uc-v2 #uc-payers .bh-pay-orbit-pill--specialty  { top: 167.28px; right: auto; bottom: auto; left: 212.5px; width: 123.6px; }

  .uc-v2 #uc-payers .bh-pay-trust {
    gap: 20px;
    height: auto;
    padding: 0 0 0 1px;
    border-top: 0;
    border-left: 1px solid #f1f5f9;
  }

  .uc-v2 #uc-payers .bh-pay-trust h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .uc-v2 #uc-payers .bh-pay-avatars {
    gap: 16px;
  }

  .uc-v2 #uc-payers .bh-pay-avatars li {
    width: 56px;
    height: 56px;
    padding: 13px;
  }

  .uc-v2 #uc-payers .bh-pay-avatars li img {
    width: 30px;
    height: 30px;
  }

  .uc-v2 #uc-payers .bh-pay-trust p {
    max-width: 319px;
    font-size: 16px;
    line-height: 23px;
  }
}

/* The orbit with its overhanging pills is ~358px wide: full size at Figma's
   440 (a 360px frame), stepping down on narrower phones so it never spills
   (undoes BH's 0.72 / 0.64 zoom here). */
@media (max-width: 575px) { .uc-v2 #uc-payers .bh-pay-orbit { zoom: 1; } }
@media (max-width: 439px) { .uc-v2 #uc-payers .bh-pay-orbit { zoom: 0.92; } }
@media (max-width: 413px) { .uc-v2 #uc-payers .bh-pay-orbit { zoom: 0.86; } }
@media (max-width: 389px) { .uc-v2 #uc-payers .bh-pay-orbit { zoom: 0.82; } }
@media (max-width: 374px) { .uc-v2 #uc-payers .bh-pay-orbit { zoom: 0.78; } }
@media (max-width: 359px) { .uc-v2 #uc-payers .bh-pay-orbit { zoom: 0.67; } }

/* The five 56px avatars (344px) step down where the frame is narrower. */
@media (max-width: 413px) {
  .uc-v2 #uc-payers .bh-pay-avatars { gap: 10px; }
  .uc-v2 #uc-payers .bh-pay-avatars li { width: 46px; height: 46px; padding: 10px; }
  .uc-v2 #uc-payers .bh-pay-avatars li img { width: 24px; height: 24px; }
}

@media (max-width: 359px) {
  .uc-v2 #uc-payers .bh-pay-avatars { gap: 6px; }
  .uc-v2 #uc-payers .bh-pay-avatars li { width: 40px; height: 40px; padding: 8px; }
  .uc-v2 #uc-payers .bh-pay-avatars li img { width: 22px; height: 22px; }
}

/* Book a consultation on phones — Figma 11551:2459 (440 wide): 40px top and
   bottom, 20px gutters; a 10px pill, the 32 / 40 title, 14 / 28.8 lead and
   checks; three full-width 58px dashed badges; the form card (5px gradient
   border, 40px corners) with 20 / 30px padding and 50px fields. */
@media (max-width: 575px) {
  .uc-v2 > section#uc-consultation {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Figma 11551:2459 is a 400px frame (20px padding) 20px in from the edge: 360px of content. */
  #uc-consultation .container-page {
    --page-gutter: 40px;
  }

  .uc-v2 #uc-consultation .bh-consult-layout {
    flex-direction: column;
    gap: 40px;
  }

  .uc-v2 #uc-consultation .bh-consult-copy {
    flex: none;
    gap: 20px;
    width: 100%;
  }

  .uc-v2 #uc-consultation .bh-consult-pill {
    font-size: 10px;
    line-height: 9.976px;
  }

  .uc-v2 #uc-consultation .bh-consult-title {
    font-size: 32px;
    line-height: 40px;
  }

  .uc-v2 #uc-consultation .bh-consult-lead,
  .uc-v2 #uc-consultation .bh-consult-pains li {
    font-weight: 500;
    font-size: 14px;
    line-height: 28.8px;
  }

  .uc-v2 #uc-consultation .bh-consult-pains li {
    align-items: flex-start;
  }

  .uc-v2 #uc-consultation .bh-consult-pains li img {
    margin-top: 2.4px;
  }

  .uc-v2 #uc-consultation .bh-consult-badges {
    flex-direction: column;
    gap: 19px;
    width: 100%;
  }

  .uc-v2 #uc-consultation .bh-consult-badge {
    width: 100%;
    height: auto;
    min-height: 58px;
    padding: 9px 17px;
  }

  .uc-v2 #uc-consultation .bh-consult-badge-icon {
    width: 40px;
    height: 40px;
  }

  .uc-v2 #uc-consultation .bh-consult-badge-icon img {
    width: 24px;
    height: 24px;
  }

  .uc-v2 #uc-consultation .bh-consult-badge > span:last-child {
    white-space: normal;
  }

  .uc-v2 #uc-consultation .bh-consult-card {
    width: 100%;
    max-width: none;
    padding: 30px 20px;
    border-radius: 40px;
  }

  .uc-v2 #uc-consultation .bh-consult-card-title {
    font-size: 22px;
    line-height: 34px;
  }

  .uc-v2 #uc-consultation .bh-consult-card-lead {
    font-size: 14px;
    line-height: 21.6px;
  }

  .uc-v2 #uc-consultation .bh-consult-fields {
    gap: 20px;
  }

  .uc-v2 #uc-consultation .bh-consult-field input {
    height: 50px;
  }

  .uc-v2 #uc-consultation .bh-consult-submit {
    height: 50px;
  }

  .uc-v2 #uc-consultation .bh-consult-note {
    font-size: 14px;
    line-height: 28.8px;
  }
}

/* Consultation badges' outline: the BH background SVG is fixed at 197 x 90, so
   full-width phone badges draw their gradient dashed border as inline SVG. */
.uc-consult-badge-outline {
  display: none;
}

@media (max-width: 575px) {
  .uc-v2 #uc-consultation .bh-consult-badge {
    position: relative;
    background: var(--c-white);
  }

  .uc-v2 #uc-consultation .uc-consult-badge-outline {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .uc-v2 #uc-consultation .uc-consult-badge-outline rect {
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 4 3;
  }

  .uc-v2 #uc-consultation .bh-consult-badge > span:last-child {
    flex: 1 1 auto;
    width: auto;
    margin-right: 0;
  }
}

/* The last payer tile reads "100+ Payers Supported" (longer than BH's
   "+ More Payers"), so it wraps onto two centred lines inside the tile. */
.uc-v2 #uc-payers .bh-pay-logo--more {
  padding: 8px 10px;
  white-space: normal;
  text-align: center;
}