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

/* ============================================================= */
/* Hero — Figma node 11615:2606 (Hero Section 11615:2688 >        */
/* 11669:474). The UC hero (539px row, form 48px below) with a     */
/* 526.4px copy column and the knee artwork (Group 11694:878).     */
/* Padding comes from the page's 60px section rhythm (Figma: 54 /  */
/* 66, same 831px total).                                          */
/* ============================================================= */
.or-v2 .or-hero .bh-hero-copy {
  width: 526.4px;
}

/* Figma 11669:483 wraps at 487px: "Expert Orthopedic" (coral) / "Billing Services". */
.or-v2 .or-hero .bh-hero-heading {
  max-width: 487px;
}

/* Badges sit 30px under the list (the copy column's 20px gap + 10px). */
.or-v2 .or-hero .bh-hero-certs {
  margin-top: 10px;
}

/* Group 11694:878: 713.6 x 413, right edge on the 1240 line, centred in the
   539px row. Every size inside is N * --u (1px at full width) so the
   composition keeps its proportions as it shrinks. */
.or-hero-art {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(713.6px, calc(100% - 526.4px));
  translate: 0 -50%;
  container-type: inline-size;
  pointer-events: none;
}

.or-hero-stage {
  --u: calc(100cqw / 713.6);
  position: relative;
  width: 100%;
  height: calc(413 * var(--u));
}

/* image 63 (11694:879): knee on the navy disc with the glowing rings, 341.75 x 413. */
.or-hero-knee {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(341.751 * var(--u));
  height: calc(413 * var(--u));
}

.or-hero-knee img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlays on the image's two red ring arcs (ring centre 47.2% / 52.5%, 64% of
   the image width across); masked to the visible left and right arcs. */
.or-hero-glow,
.or-hero-ripple {
  position: absolute;
  top: 26.05%;
  left: 15.2%;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: conic-gradient(from 0deg, transparent 0deg 46deg, #000 60deg 108deg, transparent 122deg 204deg, #000 218deg 310deg, transparent 324deg);
  mask: conic-gradient(from 0deg, transparent 0deg 46deg, #000 60deg 108deg, transparent 122deg 204deg, #000 218deg 310deg, transparent 324deg);
  mix-blend-mode: screen;
}

.or-hero-glow {
  box-shadow:
    0 0 calc(14 * var(--u)) calc(2 * var(--u)) rgba(252, 93, 97, 0.75),
    inset 0 0 calc(14 * var(--u)) calc(2 * var(--u)) rgba(252, 93, 97, 0.6);
  opacity: 0;
}

.or-hero-ripple {
  border: calc(2 * var(--u)) solid rgba(252, 93, 97, 0.7);
  opacity: 0;
}

/* Dotted connectors (Lines 132-135), centred on their Figma boxes and rotated as
   the vectors; each runs from the disc (left end) to its pill. */
.or-hero-line {
  position: absolute;
  height: calc(6.44055 * var(--u));
  max-width: none;
}

.or-hero-line--1 { left: calc(272.117 * var(--u)); top: calc(91.66 * var(--u));   width: calc(78.9636 * var(--u)); rotate: -45.54deg; }
.or-hero-line--2 { left: calc(311.855 * var(--u)); top: calc(174.68 * var(--u));  width: calc(74.8899 * var(--u)); rotate: -22.14deg; }
.or-hero-line--3 { left: calc(311.484 * var(--u)); top: calc(251.167 * var(--u)); width: calc(73.2079 * var(--u)); rotate: 9.69deg; }
.or-hero-line--4 { left: calc(269.68 * var(--u));  top: calc(334.282 * var(--u)); width: calc(74.3904 * var(--u)); rotate: 30.99deg; }

/* Callout pills (11694:880 / 888 / 898 / 906): white, 67.63 tall, the 50.72
   icon disc 8.45 in, the label at 73.66 (Poppins Bold 19.32, navy). */
.or-hero-callout {
  position: absolute;
  height: calc(67.626 * var(--u));
}

.or-hero-callout--clean     { left: calc(336.83 * var(--u)); top: calc(30.19 * var(--u));  width: calc(240.313 * var(--u)); }
.or-hero-callout--coding    { left: calc(380.3 * var(--u));  top: calc(126.8 * var(--u));  width: calc(270.503 * var(--u)); }
.or-hero-callout--reimburse { left: calc(380.3 * var(--u));  top: calc(223.41 * var(--u)); width: calc(333.298 * var(--u)); }
.or-hero-callout--denials   { left: calc(335.62 * var(--u)); top: calc(320.01 * var(--u)); width: calc(265.673 * var(--u)); }

.or-hero-callout-in {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 calc(12 * var(--u)) 0 calc(73.66 * var(--u));
  background: var(--c-white, #fff);
  border-radius: calc(96.608 * var(--u));
  box-shadow: 0 0 calc(7.246 * var(--u)) 0 rgba(0, 0, 0, 0.16);
}

.or-hero-callout-ic {
  position: absolute;
  top: 50%;
  left: calc(8.45 * var(--u));
  width: calc(50.7193 * var(--u));
  height: calc(50.7193 * var(--u));
  max-width: none;
  margin-top: calc(-25.35965 * var(--u));
}

.or-hero-callout-tx {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: calc(19.322 * var(--u));
  line-height: normal;
  color: #273775;
  white-space: nowrap;
}

/* ---------- Motion (script-v2.js .is-armed / .is-in) ---------- */
/* The disc scales in and the knee floats; the ring arcs glow and ripple; the
   connectors draw out from the disc, the pills slide in after them and bob,
   and their icons pop. Without the script everything simply shows. */
@keyframes or-hero-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-6 * var(--u)); }
}

@keyframes or-hero-glow {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.7; }
}

@keyframes or-hero-ripple {
  0%   { opacity: 0.85; scale: 1; }
  100% { opacity: 0; scale: 1.26; }
}

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

@keyframes or-hero-slide {
  from { opacity: 0; transform: translateX(calc(-28 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

@keyframes or-hero-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-5 * var(--u)); }
}

.or-hero.is-armed:not(.is-in) :is(.or-hero-knee, .or-hero-callout) {
  opacity: 0;
}

.or-hero.is-armed:not(.is-in) .or-hero-line {
  clip-path: inset(0 100% 0 0);
}

.or-hero.is-in .or-hero-knee {
  animation:
    bh-brain-in 1.1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    or-hero-float 6s 1.4s ease-in-out infinite;
}

.or-hero.is-in .or-hero-glow {
  animation: or-hero-glow 3.2s 1.2s ease-in-out infinite;
}

.or-hero.is-in .or-hero-ripple {
  animation: or-hero-ripple 3.2s 1.2s ease-out infinite;
}

.or-hero.is-in .or-hero-ripple--late {
  animation-delay: 2.8s;
}

.or-hero.is-in .or-hero-line {
  animation: or-hero-draw 0.55s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.or-hero.is-in .or-hero-line--1 { animation-delay: 0.85s; }
.or-hero.is-in .or-hero-line--2 { animation-delay: 1s; }
.or-hero.is-in .or-hero-line--3 { animation-delay: 1.15s; }
.or-hero.is-in .or-hero-line--4 { animation-delay: 1.3s; }

.or-hero.is-in .or-hero-callout {
  animation: or-hero-slide 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.or-hero.is-in .or-hero-callout--clean     { animation-delay: 1.05s; }
.or-hero.is-in .or-hero-callout--coding    { animation-delay: 1.2s; }
.or-hero.is-in .or-hero-callout--reimburse { animation-delay: 1.35s; }
.or-hero.is-in .or-hero-callout--denials   { animation-delay: 1.5s; }

.or-hero.is-in .or-hero-callout-in {
  animation: or-hero-bob 5s ease-in-out infinite;
}

.or-hero.is-in .or-hero-callout--clean .or-hero-callout-in     { animation-delay: 2s; }
.or-hero.is-in .or-hero-callout--coding .or-hero-callout-in    { animation-delay: 2.6s; }
.or-hero.is-in .or-hero-callout--reimburse .or-hero-callout-in { animation-delay: 3.2s; }
.or-hero.is-in .or-hero-callout--denials .or-hero-callout-in   { animation-delay: 3.8s; }

.or-hero.is-in .or-hero-callout-ic {
  animation: bh-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.or-hero.is-in .or-hero-callout--clean .or-hero-callout-ic     { animation-delay: 1.4s; }
.or-hero.is-in .or-hero-callout--coding .or-hero-callout-ic    { animation-delay: 1.55s; }
.or-hero.is-in .or-hero-callout--reimburse .or-hero-callout-ic { animation-delay: 1.7s; }
.or-hero.is-in .or-hero-callout--denials .or-hero-callout-ic   { animation-delay: 1.85s; }

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

  .or-hero .or-hero-knee,
  .or-hero .or-hero-callout {
    opacity: 1 !important;
  }

  .or-hero .or-hero-line {
    clip-path: none !important;
  }
}

/* ---------- Responsive ---------- */
/* Below 1200px the artwork stacks under the copy (as the UC hero), still scaled. */
@media (max-width: 1199px) {
  .or-v2 .or-hero .bh-hero-copy {
    width: 100%;
  }

  .or-hero-art {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 713.6px;
    margin: 32px auto 0;
    translate: none;
  }
}

/* Phones: the knee centred, the four pills in a 2 x 2 grid beneath it (labels
   may wrap); the connectors are dropped. */
@media (max-width: 575px) {
  .or-v2 .or-hero .bh-hero-heading {
    max-width: none;
  }

  .or-hero-art {
    container-type: normal;
    margin-top: 24px;
  }

  .or-hero-stage {
    --u: 0.72px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    height: auto;
  }

  .or-hero-knee {
    position: relative;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(260px, 76vw);
    height: auto;
    aspect-ratio: 341.751 / 413;
    margin-bottom: 8px;
  }

  .or-hero-line {
    display: none;
  }

  .or-hero-callout,
  .or-hero-callout--clean,
  .or-hero-callout--coding,
  .or-hero-callout--reimburse,
  .or-hero-callout--denials {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    min-width: 0;
  }

  .or-hero-callout-in {
    min-height: calc(67.626 * var(--u));
    padding: 8px 12px 8px calc(73.66 * var(--u));
  }

  .or-hero-callout-tx {
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
  }
}

@media (max-width: 359px) {
  .or-hero-stage {
    grid-template-columns: 1fr;
  }
}

/* Figma's hero insets (54px top, 66px bottom) in place of the UC 60 / 60 rhythm. */

/* ============================================================= */
/* Why orthopedic procedures need specialized billing —           */
/* Figma 11615:2976 (1440 x 622). Builds on the urgent care        */
/* .uc-why section: same 609px copy column and 572 x 528 photo     */
/* card; here the 368px "What Practices Gain" card is centred      */
/* across the photo, 50px from its top (11615:2984).               */
/* ============================================================= */

/* Figma 11615:2983: the 1200 x 628 photo fills the card's height
   (176.38% of its width) and is shifted 25.66% left, i.e. a cover
   crop anchored 33.6% across. */
.or-v2 .or-why-photo {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 33.6% 50%;
}

/* Figma 11615:2984: 367.93 x 273.23, centred (102px in), 50px down. */
.or-v2 .or-why-card {
  top: 50px;
  right: 0;
  left: 0;
  width: 367.928px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.or-v2 .or-why-card .uc-why-card-list {
  width: 338px;
}

/* A soft glow drifts across the photo once it is in view. */
.or-v2 .or-why-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* over the photo, under the card (which comes later) */
  background: radial-gradient(60% 45% at 70% 75%, rgba(252, 93, 97, 0.18), rgba(252, 93, 97, 0) 70%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes or-why-glow {
  0%, 100% { opacity: 0.35; translate: 0 0; }
  50%      { opacity: 0.9;  translate: -14px -10px; }
}

.or-v2 .or-why.is-in .or-why-media::before,
.or-v2 .or-why:not(.is-armed) .or-why-media::before {
  animation: or-why-glow 7s 1.4s ease-in-out infinite;
}

/* Tablet: the card centres over the scaled photo. */
@media (max-width: 1199px) {
  .or-v2 .or-why-card {
    top: 9.47%;
  }
}

/* Phones — Figma 11680:291 (440 wide): the copy keeps the 12px pill, a
   24 / 40 heading and 16 / 28 navy text, 24px above a 400 x 374 rounded
   photo card (11680:297) with the "What Practices Gain" card scaled to
   259px (x 0.7048), centred 36px down. The urgent care edge-to-edge,
   faded photo treatment is undone. */
@media (max-width: 575px) {


  .or-v2 .or-why .uc-why-layout {
    gap: 24px;
  }

  .or-v2 .or-why .uc-why-copy {
    gap: 20px;
  }

  .or-v2 .or-why .derm-why-pill {
    height: auto;
    font-size: 12px;
  }

  .or-v2 .or-why .uc-why-title {
    padding-top: 0;
    font-size: 24px;
    line-height: 40px;
    letter-spacing: -0.9px;
  }

  .or-v2 .or-why .uc-why-text p {
    font-size: 16px;
    line-height: 28px;
    color: var(--c-blue);
  }

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

  .or-v2 .or-why-media {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 400 / 374;
    background: var(--c-white);
    border-radius: 18px;
  }

  .or-v2 .or-why-media::after {
    content: none;
  }

  .or-v2 .or-why-photo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Figma 11680:299: 259.32 x 192.54, 35.9px down (9.6% of 374). */
  .or-v2 .or-why-card {
    top: 9.6%;
    width: 259.324px;
    max-width: calc(100% - 24px);
    border-radius: 9.868px;
  }

  .or-v2 .or-why-card .uc-why-card-inner {
    gap: 3.102px;
    padding: 10.532px 9.306px 6.204px 11.771px;
    border-width: 0.62px;
    border-radius: 4.343px;
  }

  .or-v2 .or-why-card .uc-why-card-title {
    padding: 3.524px 5.638px;
    font-size: 9.927px;
    line-height: 9.927px;
    border-radius: 4.934px;
  }

  .or-v2 .or-why-card .uc-why-card-list {
    gap: 6.204px;
    width: 238.261px;
  }

  .or-v2 .or-why-card .uc-why-card-list li {
    gap: 8.686px;
    height: 20.783px;
    font-size: 8.686px;
    line-height: 8.686px;
  }

  .or-v2 .or-why-card .uc-why-card-list li + li::before {
    top: -3.102px;
    height: 0.624px;
  }

  .or-v2 .or-why-card .uc-why-card-tick {
    width: 8.618px;
    height: 8.729px;
    font-size: 6.204px;
    line-height: 8.686px;
    border-radius: 4.343px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .or-v2 .or-why-media::before {
    animation: none !important;
    opacity: 0.6;
  }
}



.or-v2 .or-ctabar .uc-ctabar-inner {
  padding: 20px 22px;
  background: linear-gradient(to right, #273775 29.808%, #fc5d61 100%);
}

.or-v2 .or-ctabar .uc-ctabar-main {
  position: relative;
  z-index: 1;
}

.or-v2 .or-ctabar .uc-ctabar-title,
.or-v2 .or-ctabar .uc-ctabar-text {
  color: var(--c-white);
}

.or-v2 .or-ctabar .uc-ctabar-btn {
  z-index: 1;
  font-size: 14px;
  color: var(--c-orange);
  background: var(--c-white);
}

.or-v2 .or-ctabar .uc-ctabar-btn:hover,
.or-v2 .or-ctabar .uc-ctabar-btn:focus-visible {
  color: var(--c-orange);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
}

.or-v2 .or-ctabar .uc-ctabar-btn-icon {
  background: var(--c-orange);
}

/* Idle: a soft light band sweeps across the gradient every few seconds. */
.or-ctabar-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 220px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 100%);
  translate: -260px 0;
  pointer-events: none;
}

@keyframes or-ctabar-sweep {
  0%       { translate: -260px 0; }
  45%, 100% { translate: calc(1240px + 40px) 0; }
}

.or-v2 .or-ctabar.is-in .or-ctabar-sheen,
.or-v2 .or-ctabar:not(.is-armed) .or-ctabar-sheen {
  animation: or-ctabar-sweep 7s 1.4s ease-in-out infinite;
}

/* The urgent care ping ring reads better in white on the dark gradient. */
@keyframes or-ctabar-ping {
  0%        { box-shadow: 0 0 10.9px rgba(0, 0, 0, 0.11), 0 0 0 0 rgba(255, 255, 255, 0.45); }
  70%, 100% { box-shadow: 0 0 10.9px rgba(0, 0, 0, 0.11), 0 0 0 12px rgba(255, 255, 255, 0); }
}

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

/* Phones — Figma 11680:334 (400 wide, 50px between neighbours): one column,
   20px padding and gaps — badge, the 74px rule lying flat, a 20 / 30
   headline over the 14 / 24 note, then the 260px link. */
@media (max-width: 575px) {


  .or-v2 .or-ctabar .uc-ctabar-inner {
    gap: 20px;
    padding: 20px;
  }

  .or-v2 .or-ctabar .uc-ctabar-main {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: flex-start;
  }

  .or-v2 .or-ctabar .uc-ctabar-rule {
    display: block;
    width: 74px;
    height: 1px;
  }

  .or-v2 .or-ctabar .uc-ctabar-rule img {
    rotate: none;
  }

  .or-v2 .or-ctabar.is-in .uc-ctabar-rule {
    transform-origin: 0 50%;
    animation-name: or-ctabar-grow-x;
  }

  .or-v2 .or-ctabar .uc-ctabar-copy {
    flex-basis: auto;
    width: 100%;
  }

  .or-v2 .or-ctabar .uc-ctabar-title {
    font-size: 20px;
    line-height: 30px;
  }

  .or-v2 .or-ctabar .uc-ctabar-btn {
    width: 260px;
    max-width: 100%;
    margin-left: 0;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .or-ctabar-sheen {
    display: none;
  }
}

/* ============================================================= */
/* Orthopedic billing services (tabs) — Figma 11615:3033          */
/* (1440 x 1202; tab states 11615:8171 / 8368 / 8566). Builds on   */
/* the urgent care .uc-svc section: same decoration, 380px tab     */
/* column and service card. Differences: a #eff2ff frame, the      */
/* small navy-tint pill (.derm-why-pill), a plain heading, white   */
/* active tab and a 766px copy column on tabs 1 and 2.             */
/* ============================================================= */
.or-v2 .or-svc {
  background: var(--c-bg-blue, #eff2ff);
}

/* Figma 11666:23 sits 21px above the heading (the heading's own margin). */
.or-v2 .or-svc .or-svc-pill {
  text-transform: capitalize;
}

/* On the blue frame the active tab stays white (Figma 11615:3064). */
.or-v2 .or-svc .uc-svc-tab.is-active {
  background: var(--c-white);
}

/* Tabs 1 and 2: the copy spans the card (832 - 2 x 32 - 2 = 766px). */
.or-v2 .or-svc .or-svc-copy--wide {
  width: 766px;
}

/* Idle: the active tab's orange marker breathes softly. */
@keyframes or-svc-marker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.or-v2 .or-svc .uc-svc-tab.is-active::before {
  animation: or-svc-marker 2.8s 1.2s ease-in-out infinite;
}

@media (max-width: 1199px) {
  .or-v2 .or-svc .or-svc-copy--wide {
    width: 100%;
    max-width: 766px;
  }
}

/* Phones — Figma 11680:350: the urgent care accordion, 48px above and
   below; 94px tabs (16px padding, 48px icon, 30px open button) 12px
   apart; the tilted "+" tile stays top-right, one bead and two rings
   off the top-left; the note card closes the open card's column. */
@media (max-width: 575px) {


  .or-v2 .or-svc .uc-svc-ring--a {
    top: -190px;
    left: -205px;
    width: 440px;
    height: 440px;
  }

  .or-v2 .or-svc .uc-svc-ring--b {
    top: -150px;
    left: -165px;
    width: 360px;
    height: 360px;
  }

  .or-v2 .or-svc .uc-svc-bead--a {
    top: 27px;
    left: 45px;
    width: 8px;
    height: 8px;
  }

  .or-v2 .or-svc .uc-svc-bead--b {
    display: none;
  }

  .or-v2 .or-svc .uc-svc-plus {
    top: 17px;
    right: 17px;
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .or-v2 .or-svc .uc-svc-plus img {
    width: 15px;
    height: 15px;
  }

  .or-v2 .or-svc .or-svc-pill {
    padding: 8px 10px;
    line-height: 18px;
    white-space: normal;
  }

  .or-v2 .or-svc .uc-svc-title {
    line-height: 35px;
  }

  .or-v2 .or-svc .uc-svc-body {
    gap: 12px;
  }

  .or-v2 .or-svc .uc-svc-tab {
    min-height: 94px;
    padding: 16px;
  }

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

  .or-v2 .or-svc .uc-svc-tab-go {
    width: 30px;
    height: 30px;
  }

  /* The note card (Figma 11680:470, 310 x 140) sits after the link. */
  .or-v2 .or-svc .uc-svc-card-blob {
    display: block;
  }

  .or-v2 .or-svc .uc-svc-note {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    flex: none;
    order: 99;
    align-self: flex-end;
    margin: 2px 24px 2px 0;
  }

  .or-v2 .or-svc .uc-svc-copy {
    order: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .or-v2 .or-svc .uc-svc-tab.is-active::before {
    animation: none !important;
  }
}



/* Figma 11615:3239: a 120 x 48 box filled with an elliptical radial
   (farthest-corner, #c9d2ea hard stop at 10%), bottom-left of the frame;
   the code rows paint over it. */
.or-codes-glow {
  position: absolute;
  bottom: 40.23px;
  left: calc(50% - 720px + 100px);
  z-index: 0;
  width: 120px;
  height: 48px;
  background: radial-gradient(ellipse farthest-corner at 50% 50%, #c9d2ea 10%, rgba(201, 210, 234, 0) 10%);
  pointer-events: none;
}

/* Each row's tick pops in just after its row (the rest is the UC cascade). */
.or-codes.is-armed:not(.is-in) .uc-code-check {
  opacity: 0;
}

.or-codes.is-in .uc-code-check {
  animation: derm-pop 0.45s calc(0.75s + var(--i, 0) * 0.07s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Desktop / tablet placement from the ortho frame. Phones keep the UC
   phone layout (its own ring / dot / widget-band rules). */
@media (min-width: 576px) {
  .or-v2 .or-codes .uc-code-ring--solid  { top: -110.23px; }
  .or-v2 .or-codes .uc-code-ring--dashed { top: -50.23px; }
  .or-v2 .or-codes .uc-code-dot--orange  { top: 117.77px; }
  .or-v2 .or-codes .uc-code-dot--blue    { top: 169.77px; }

  .or-v2 .or-codes .uc-code-float--encounter { top: 141.38px; }
  .or-v2 .or-codes .uc-code-float--capture   { top: 150.05px; }
}



/* Phones: the UC rule is keyed to #uc-coding, so it is repeated for this id
   (no bottom padding, as above). */
@media (max-width: 575px) {


  .or-codes-glow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .or-codes .uc-code-check {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Phones: the section's 20px side gutter (top / bottom come from the page's 60px rule). */
@media (max-width: 575px) {
  .or-v2 > section#or-coding {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================= */
/* Who we serve / practice sizes — Figma 11615:3461 (1440 x 363 +  */
/* the page's 60px gaps = the .bh-sub 60px padding). The UC clinic */
/* band (.uc-clinic: white, five columns, 1px #ccc cards) with a   */
/* line of 16 / 25.2 copy under each title; cards stretch to the   */
/* tallest (226px in Figma).                                        */
/* ============================================================= */
.or-v2 .or-who .bh-sub-card {
  height: auto;
  min-height: 0;
}

.or-v2 .or-who .bh-sub-card-text {
  font-size: 16px;
  line-height: 25.2px;
  color: var(--c-text);
}

/* Idle: once the cards are in, each icon breathes gently, staggered. */
@keyframes or-who-breathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}

.or-who.is-in .uc-clinic-icon img {
  animation: or-who-breathe 4.5s calc(1.4s + var(--i, 0) * 0.3s) ease-in-out infinite;
}

/* Phones: the UC clinic cards put icon and title in a row at 480px; with
   copy under the title the cards stay stacked. */
@media (max-width: 480px) {
  .or-v2 .or-who .bh-sub-card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .or-who .uc-clinic-icon img {
    animation: none !important;
  }
}

/* ============================================================= */
/* Tailored specialty billing — Figma 11615:3499 (1440 x 672).     */
/* The UC tailored block (.uc-tailor: BG blue, 4 x 2 cards sized   */
/* to their copy, the top-left rings and dots) unchanged, except    */
/* the right-hand glow + ring group (11615:3599) sits 58px further  */
/* right and 35.64px lower, and the fracture icon is a 38.33px      */
/* frame rather than 46px.                                          */
/* ============================================================= */
.or-tailor-icon {
  width: var(--box-w, 46px);
  height: var(--box-h, 46px);
}

/* Idle: once the cards are in, each icon drifts a few px, staggered. */
@keyframes or-tailor-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}

.or-tailor.is-in .or-tailor-icon img {
  animation: or-tailor-drift 5s calc(1.6s + var(--i, 0) * 0.25s) ease-in-out infinite;
}

/* Glow 1308.1 / -114.36 and ring 1250 / 30.78 in the 1440 frame
   (UC: 1250.1 / -150 and 1192 / -4.86). Phones keep the MH phone offsets. */
@media (min-width: 576px) {
  .or-v2 .or-tailor .bh-sub-deco {
    top: -84.36px;
    right: -268.1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .or-tailor .or-tailor-icon img {
    animation: none !important;
  }
}

/* ============================================================= */
/* Revenue recovery — Figma 11615:3420 (1440 x 669.5). White band: */
/* the 687 x 477 illustration (image 62) left, centred on a 543px  */
/* copy column 10px to its right. Title / bar / text reuse the UC  */
/* denial banner classes; the CTA is the UC services pill button.   */
/* ============================================================= */
.or-v2 .or-recovery {
  position: relative;
  overflow: hidden;
  font-family: var(--font-primary);
  background: var(--c-white);
}

.or-recovery-layout {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Figma: the image fills its 687 x 477 frame at 104.22% x 100.07%,
   5.68% left and 0.07% up. */
/* Figma 11901:30: a 637.46 x 489 group 20px into the 687px slot (copy at 797),
   vertically centred. Everything is placed in % of the 687 x 489 slot so it
   scales with it. */
.or-recovery-media {
  position: relative;
  flex: 0 1 687px;
  min-width: 0;
  aspect-ratio: 687 / 489;
}

.or-recovery-ellipse {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.or-recovery-ellipse--1 { left: 14.539%; top: -3.912%; width: 66.000%; height: 92.725%; }
.or-recovery-ellipse--2 { left: 53.712%; top: 23.722%; width: 40.288%; height: 56.601%; }
.or-recovery-ellipse--3 { left: 0.619%; top: 1.841%; width: 40.288%; height: 56.601%; }

.or-recovery-photo {
  position: absolute;
  top: 0;
  left: 2.911%;
  display: block;
  width: 92.789%;
  max-width: none;
  height: 97.928%;
  object-fit: cover;
}

/* Rectangle 3: white, blurred 6.357px, over the illustration's lower edge. */
.or-recovery-fade {
  position: absolute;
  left: 28.788%;
  top: 88.814%;
  width: 31.936%;
  height: 7.363%;
  background: var(--c-white, #fff);
  filter: blur(6.357px);
  pointer-events: none;
}

.or-recovery-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 15.1px;
  align-items: flex-start;
  min-width: 0;
}

.or-v2 .or-recovery-pill {
  height: 26px;
  text-transform: capitalize;
}

.or-recovery-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

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

/* Figma 11666:11: the navy pill carries a soft navy drop shadow. */
.or-v2 .or-recovery-cta {
  filter: drop-shadow(0 14px 15px rgba(39, 55, 117, 0.28));
}

.or-v2 .or-recovery-cta:hover,
.or-v2 .or-recovery-cta:focus-visible {
  filter: drop-shadow(0 18px 18px rgba(39, 55, 117, 0.34));
}

/* ---------- Animation (script-v2.js .is-armed / .is-in) ---------- */
/* The illustration eases in from the left and then floats gently; the
   copy rises line by line, the bar draws, the two blocks follow. */
@keyframes or-recovery-in {
  from { opacity: 0; translate: -40px 0; }
  to   { opacity: 1; translate: 0 0; }
}

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

.or-recovery.is-armed:not(.is-in) :is(.or-recovery-copy > *, .or-recovery-media) {
  opacity: 0;
}

.or-recovery.is-in .or-recovery-media {
  animation: or-recovery-in 0.9s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.or-recovery.is-in :is(.or-recovery-photo, .or-recovery-fade),
.or-recovery:not(.is-armed) :is(.or-recovery-photo, .or-recovery-fade) {
  animation: or-recovery-float 7s 1.1s ease-in-out infinite;
}

/* The soft ellipses behind the illustration breathe slowly, out of step. */
@keyframes or-recovery-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}

.or-recovery.is-in .or-recovery-ellipse {
  animation: or-recovery-breathe 8s 1.2s ease-in-out infinite;
}

.or-recovery.is-in .or-recovery-ellipse--2 { animation-delay: 2.4s; }
.or-recovery.is-in .or-recovery-ellipse--3 { animation-delay: 3.6s; }

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

.or-recovery.is-in .or-recovery-copy > :nth-child(2) { animation-delay: 0.1s; }
.or-recovery.is-in .or-recovery-copy > :nth-child(4) { animation-delay: 0.25s; }
.or-recovery.is-in .or-recovery-copy > :nth-child(5) { animation-delay: 0.35s; }
.or-recovery.is-in .or-recovery-copy > :nth-child(6) { animation-delay: 0.45s; }
.or-recovery.is-in .or-recovery-copy > :nth-child(7) { animation-delay: 0.55s; }

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

.or-recovery.is-in .or-recovery-cta .uc-svc-cta-go {
  animation: derm-pop 0.5s 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* ---------- Responsive ---------- */
/* Tablets and phones: the illustration sits above the copy, centred. */
@media (max-width: 991px) {
  .or-recovery-layout {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }

  .or-recovery-media {
    flex: none;
    width: 100%;
    max-width: 687px;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {


  #or-recovery .container-page {
    --page-gutter: 20px;
  }

  .or-recovery-layout {
    gap: 24px;
  }

  .or-v2 .or-recovery-pill {
    font-size: 10px;
  }

  .or-recovery .or-recovery-title {
    font-size: 24px;
    line-height: 35px;
    letter-spacing: -1px;
  }

  .or-recovery .or-recovery-title br {
    display: none;
  }

  .or-recovery .or-recovery-text {
    font-size: 14px;
    line-height: 24px;
  }

  .or-recovery-block-title {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .or-recovery *,
  .or-recovery-media {
    animation: none !important;
    transition: none !important;
  }

  .or-recovery.is-armed:not(.is-in) :is(.or-recovery-copy > *, .or-recovery-media) {
    opacity: 1;
  }
}



@media (min-width: 1200px) {
  .or-audit .or-audit-copy {
    width: min-content;
    max-width: none;
  }

  .or-audit .or-audit-title {
    white-space: nowrap;
  }
}

.or-v2 .or-audit-pill {
  height: 26px;
  text-transform: capitalize;
}

/* Copy order: pill, title, bar, lead, second lead, ticks. */
.or-audit.is-in .uc-denial-copy > :nth-child(5) { animation-delay: 0.32s; }
.or-audit.is-in .uc-denial-copy > :nth-child(6) { animation-delay: 0.4s; }

/* Ticks follow the extra lead a touch later than in UC. */
.or-audit.is-in .uc-denial-list li {
  animation-delay: calc(0.55s + var(--i, 0) * 0.08s);
}

.or-audit.is-in .uc-denial-list img {
  animation-delay: calc(0.65s + var(--i, 0) * 0.08s);
}



/* Phones: the UC denials phone treatment (#uc-denials) for this band. */
@media (max-width: 575px) {


  #or-audit .container-page {
    --page-gutter: 20px;
  }

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

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

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

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

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

  #or-audit .uc-denial-media {
    height: auto;
    margin-top: 31px;
    aspect-ratio: 440 / 378;
  }

  #or-audit .uc-denial-photo {
    position: absolute;
    top: 0.02%;
    left: -12.52%;
    width: 119.45%;
    height: calc(100% * 396 / 378);
    object-fit: fill;
  }

  #or-audit .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%);
  }
}

/* ============================================================= */
/* Credentialing — Figma 11615:3612 (1440 x 550). The UC panel     */
/* (.bh-cred + .mh-cred + .uc-cred) unchanged at desktop and tablet */
/* (all BH / MH / UC rules and animations apply by class). The UC   */
/* phone treatment is keyed to #uc-credentialing, so it is repeated */
/* here for #or-cred. Entrance and idle motion (step cascade, live  */
/* dot ping, watermark float, 78% count) come from the BH rules.    */
/* ============================================================= */
/* 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) {


  #or-cred .container-page {
    --page-gutter: 20px;
  }

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

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

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

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

  /* Stop short of the 87px watermark (19px from the panel edge, 20px
     padding) so the shield sits in clear space beside the card. */
  .or-v2 #or-cred .bh-cred-status {
    width: auto;
    max-width: calc(100% - 96px);
    height: auto;
    min-height: 90px;
  }

  .or-v2 #or-cred .bh-cred-status .bh-cred-tile-body {
    flex: 1 1 0;
    min-width: 0;
  }

  .or-v2 #or-cred .bh-cred-status .bh-cred-tile-body strong {
    white-space: normal;
  }

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

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

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

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

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



@media (min-width: 992px) {
  .or-rpa .uc-ai-photo {
    position: absolute;
    top: 0;
    left: -29px;
    width: calc(100% + 58px);
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .or-rpa .uc-denial-media::after {
    left: -29px;
    right: -29px;
    z-index: 1;
  }
}

/* A soft light sweep across the photo after it lands (idle motion on
   top of the UC slow zoom). */
@keyframes or-rpa-sweep {
  0%, 70%, 100% { opacity: 0; translate: -60% 0; }
  80%           { opacity: 1; }
  95%           { opacity: 0; translate: 60% 0; }
}

.or-rpa .uc-denial-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 65%);
  opacity: 0;
  pointer-events: none;
}

.or-rpa.is-in .uc-denial-media::before {
  animation: or-rpa-sweep 9s 1.6s ease-in-out infinite;
}



/* Phones: the UC AI band phone treatment (#uc-ai-automation) for this band. */
@media (max-width: 575px) {


  #or-rpa .container-page {
    --page-gutter: 20px;
  }

  .or-v2 #or-rpa .bh-sub-pill {
    height: auto;
    min-height: 26px;
    font-size: 12px;
    line-height: 14px;
    white-space: normal;
    text-align: left;
  }

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

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

  #or-rpa .uc-denial-media {
    height: auto;
    margin-top: 40px;
    aspect-ratio: 440 / 294;
  }

  #or-rpa .uc-denial-photo {
    position: absolute;
    top: 0.1%;
    left: 0;
    width: 100%;
    height: 99.77%;
    object-fit: fill;
  }

  #or-rpa .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%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .or-rpa .uc-denial-media::before {
    animation: none !important;
    opacity: 0;
  }
}

/* ============================================================= */
/* Why choose us — Figma 11615:3748 (1440 x 773). The urgent care  */
/* block as is, with Figma's 40px band padding, the copy, button   */
/* and button 30px apart, and a second orange outline button whose */
/* 20px arrow disc is orange with a white arrow.                   */
/* ============================================================= */


.or-v2 .or-choose .bh-choose-actions {
  gap: 30px;
}

.or-v2 .or-choose .or-choose-btn--ghost {
  gap: 20px;
}

.or-v2 .or-choose .or-choose-btn-icon {
  background: var(--c-orange);
}

/* .bh-choose-btn--ghost img sizes MH's 20 x 23 shield; this is the 11 x 10 arrow. */
.or-v2 .or-choose .or-choose-btn-icon img {
  width: 11px;
  height: 10px;
  margin: 0;
}

.or-v2 .or-choose .or-choose-btn--ghost:is(:hover, :focus-visible) .or-choose-btn-icon img {
  translate: 3px 0;
}

/* Idle: once the block is in, the outline button's arrow disc gives a
   soft orange pulse every few seconds. */
@keyframes or-choose-pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(252, 93, 97, 0); }
  80%           { box-shadow: 0 0 0 0 rgba(252, 93, 97, 0.45); }
  95%           { box-shadow: 0 0 0 7px rgba(252, 93, 97, 0); }
}

.or-choose.is-in .or-choose-btn-icon {
  animation: or-choose-pulse 4s 2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .or-choose .or-choose-btn-icon,
  .or-choose .or-choose-btn-icon img {
    animation: none !important;
    transition: none;
  }
}

/* ============================================================= */
/* Trusted standards — Figma 11615:3826: the BH / MH / UC band as  */
/* is (its reveal + idle motion come from .bh-trust); no overrides. */
/* ============================================================= */

/* ============================================================= */
/* Case study — Figma 11615:3877: the UC card (.bh-case + derm     */
/* squeeze + UC's 23.6px testimonial, gradient photo rule and      */
/* outside ring on the outcome discs) as is. The photo is cropped  */
/* to Figma's 350 x 321 frame (455 x 417 source pixels), so the BH */
/* object-fit: cover lands it where Figma does. Reveal, count-ups  */
/* and the arc's idle sway come from .bh-case; no overrides.       */
/* ============================================================= */

/* ============================================================= */
/* Software integrations — Figma 11615:3925 (1240 x 1031). The UC  */
/* diagram (both side cards 260px at y 45.44, 14 / 12px hub copy,  */
/* gradient dashed benefits outline) with no card copy line and no */
/* CTA. The EHR card's third logo row (Epic) runs 9px into the     */
/* card's bottom padding, as in Figma's fixed 260px frame.         */
/* ============================================================= */

/* The outline's gradient lives under this page's own id. */
.or-v2 .or-int .or-int-outline rect {
  stroke: url(#or-int-outline-grad);
}

/* Hub: Figma centres the 99px mark / title / two lines block in the
   216px halo (0.49px below centre) instead of UC's fixed top offset. */
@media (min-width: 576px) {
  .or-v2 .or-int .bh-int-hub {
    justify-content: center;
    padding: 0.98px 0 0;
  }
}

/* The 32px one-line title outgrows the container below 1200px. */
@media (max-width: 1199px) {
  .or-v2 .or-int .bh-int-title {
    white-space: normal;
  }
}

/* Idle: once the diagram has landed, the hub's mark breathes — the two
   rings drift a few px together and apart. */
@keyframes or-int-mark-l {
  0%, 100% { translate: 0 0; }
  50%      { translate: 3px 0; }
}

@keyframes or-int-mark-r {
  0%, 100% { translate: 0 0; }
  50%      { translate: -3px 0; }
}

.or-int.is-in .bh-int-hub-mark i:first-child {
  animation: or-int-mark-l 3.6s 1.6s ease-in-out infinite;
}

.or-int.is-in .bh-int-hub-mark i:last-child {
  animation: or-int-mark-r 3.6s 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .or-int .bh-int-hub-mark i {
    animation: none !important;
  }
}

/* Phones — the UC phone layout (Figma 11551:1518 pattern), re-keyed to
   this page's id: 20px section padding and 36px gutters, a 10px pill,
   24 / 32 title and 14 / 20 lead; EHR logos two by two in 114 x 37
   tiles at 82.2% of their desktop size; a plain navy dashed hub ring;
   the benefits in a white card with a soft shadow (no gradient outline). */
@media (max-width: 575px) {


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

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

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

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

  .or-v2 #or-integrations .bh-int-card--ehr .bh-int-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: center;
    width: 100%;
  }

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

  .or-v2 #or-integrations .bh-int-card--ehr .bh-int-logos + .bh-int-logos {
    margin-top: 4px;
  }

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

  /* ModMed (110 x 38) and exscribe (119 x 36) at 82.2%. */
  .or-v2 #or-integrations .bh-int-card--ehr .bh-int-logos:first-of-type .bh-int-logo:first-child img {
    width: 90.444px;
    height: 31.244px;
  }

  .or-v2 #or-integrations .bh-int-card--ehr .bh-int-logos:first-of-type .bh-int-logo:nth-child(2) img {
    width: 97.844px;
    height: 29.6px;
  }

  .or-v2 #or-integrations .bh-int-hub-ring {
    inset: 0;
    background: none;
    border: 2px dashed var(--c-blue);
    animation: none;
  }

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

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

  .or-v2 #or-integrations .uc-int-outline {
    display: none;
  }

  .or-v2 #or-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));
  }

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

/* ============================================================= */
/* State services — Figma 11615:4042 (1240 x 643). The UC panel    */
/* (.bh-states + .mh-states + .uc-states); the lead wraps at the   */
/* 770px title width. Illinois takes Ohio's slot, so the MH rules  */
/* keyed to .bh-states-card--oh are repeated for --il. Entrance,   */
/* connector draw and icon ripple come from the BH states CSS.     */
/* ============================================================= */
.or-v2 .or-states .bh-states-lead {
  max-width: 770px;
  white-space: normal;
}

/* Figma's map frame: the art, connectors and callouts keep their 903 x 441 panel
   coordinates in .or-states-stage. Below 1360px the panel is narrower, so the
   page script sets --or-states-s (panel width / 903) and the frame scales with
   it, keeping Figma's layout; the panel's height follows the scaled frame.
   From 1240px: below that the site-wide BH tablet layout takes over. */
@media (min-width: 1240px) {
  .or-v2 .or-states .bh-states-map {
    height: auto;
    min-height: calc(441px * var(--or-states-s, 1));
  }

  .or-v2 .or-states .or-states-stage {
    position: absolute;
    top: calc((100% - 441px * var(--or-states-s, 1)) / 2);
    left: 0;
    width: 903px;
    height: 441px;
    transform: scale(var(--or-states-s, 1));
    transform-origin: 0 0;
  }

  /* The transform makes the frame its own layer, so the panel's inset-glow
     ::after would paint over it; lift the frame as the lines and callouts were. */
  .or-v2 .or-states .or-states-stage {
    z-index: 1;
  }
}

/* MH pins the right-hand callouts to the panel's right edge on 1200-1299px
   screens; inside the scaled frame they keep Figma's 695px (inline lefts). */
@media (min-width: 1240px) and (max-width: 1299px) {
  .or-v2 .or-states :is(.bh-states-card--ny, .bh-states-card--il, .bh-states-card--ga, .bh-states-card--fl) {
    right: auto;
    left: 695px !important;
  }
}

/* Tablets and phones: the frame steps aside and the BH / MH layouts apply. */
@media (max-width: 1239px) {
  .or-v2 .or-states .or-states-stage {
    display: contents;
  }
}

/* Idle: the highlighted states breathe very slightly once the map is in. */
.or-v2 .or-states.is-in .bh-states-map-art img {
  animation: or-states-breathe 7s 2.4s ease-in-out infinite;
}

@keyframes or-states-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.012; }
}

/* State services on phones: 20px above and below; Illinois third in the grid. */
@media (max-width: 575px) {


  .or-v2 .or-states .bh-states-card--il { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .or-v2 .or-states .bh-states-map-art img {
    animation: none !important;
  }
}

/* ============================================================= */
/* Payer expertise — Figma 11615:4583 (1240 x 1282). The UC frame  */
/* (.bh-pay + .mh-pay + .derm-pay + .uc-pay; MH gives the 32 / 40  */
/* title and 25px leads). Orthopedic changes: the process banner   */
/* is solid navy under the 5% wave texture with 20px padding and a */
/* 280px title column (three lines), so the steps keep Figma's     */
/* 673px track and the arcs land between the icons.                */
/* ============================================================= */
.or-v2 .or-pay .bh-pay-banner {
  background: var(--c-blue);
}

@media (min-width: 1240px) {
  .or-v2 .or-pay .bh-pay-banner {
    padding: 20px;
  }

  .or-v2 .or-pay .bh-pay-banner-title {
    width: 280px;
  }
}

/* Figma's banner is 1198px wide (title 280, steps 673, end 165). From 1240px up
   the frame is narrower than that until 1440px, which squeezed the five steps
   together; the page script sets --or-pay-zoom (frame width / 1198) so the
   banner keeps Figma's layout, scaled to fit. */
@media (min-width: 1240px) {
  .or-v2 .or-pay .bh-pay-banner {
    zoom: var(--or-pay-zoom, 1);
  }
}

/* Idle (on top of the BH ring spin / dot pulse / pill bob): the banner texture drifts. */
.or-v2 .or-pay.is-in .bh-pay-banner-bg img {
  animation: or-pay-drift 14s 2s ease-in-out infinite alternate;
}

@keyframes or-pay-drift {
  from { translate: 0 0; scale: 1; }
  to   { translate: -1.5% 0; scale: 1.04; }
}

@media (prefers-reduced-motion: reduce) {
  .or-v2 .or-pay .bh-pay-banner-bg img {
    animation: none !important;
  }
}

/* The UC phone treatment (Figma 11551:2144), re-keyed to #or-payers. */
/* 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 "Every Plan" banner on solid brand blue with its
   five steps in one column joined by alternating side arcs (as on the MH
   page); then "One Billing Partner" (20px top and bottom). The frame's dashed
   outline shades navy to coral (an SVG, shown on phones only). */
.or-pay-outline {
  display: none;
}

@media (max-width: 575px) {


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .or-v2 #or-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;
  }

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

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

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

  .or-v2 #or-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);
  }

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

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

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

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

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

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

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

  .or-v2 #or-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. */
  .or-v2 #or-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;
  }

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

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

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

  .or-v2 #or-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;
  }

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

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

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

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

  .or-v2 #or-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) {
  .or-v2 #or-payers .bh-pay-logo--more {
    padding: 6px;
    white-space: normal;
  }

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

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

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

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

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

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

  .or-v2 #or-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;
  }

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

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

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

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

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

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

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

  .or-v2 #or-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) { .or-v2 #or-payers .bh-pay-orbit { zoom: 1; } }
@media (max-width: 439px) { .or-v2 #or-payers .bh-pay-orbit { zoom: 0.92; } }
@media (max-width: 413px) { .or-v2 #or-payers .bh-pay-orbit { zoom: 0.86; } }
@media (max-width: 389px) { .or-v2 #or-payers .bh-pay-orbit { zoom: 0.82; } }
@media (max-width: 374px) { .or-v2 #or-payers .bh-pay-orbit { zoom: 0.78; } }
@media (max-width: 359px) { .or-v2 #or-payers .bh-pay-orbit { zoom: 0.67; } }

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

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

/* ============================================================= */
/* Testimonials — Figma 11615:4759 (1440 x 1001.8). The UC / DME   */
/* carousel (.uc-testi keeps the UC phone strip). Unlike UC, Figma */
/* lays the four cards out at one height (466.79px, the centre     */
/* card's natural height) with each card's content centred, so on  */
/* desktop the track stretches its cards instead of sizing them.   */
/* Slots: 252.84 | 421.47 | 252.84 | 252.84 with 20px gaps.         */
/* Side cards: 20px padding around a 206px column, 17px between    */
/* blocks. Centre card: 4px gradient bar, 30px to the content,     */
/* 28px between the head, quote and rating group, 18px within it.  */
/* ============================================================= */
@media (min-width: 1200px) {
  .or-v2 .or-testi .dme-testi-carousel {
    gap: 30px;
  }

  .or-v2 .or-testi .dme-testi-arrow {
    top: calc(50% + 3.34px);
  }

  .or-v2 .or-testi .dme-testi-track {
    align-items: stretch;
    min-height: max(466.79px, var(--dme-testi-track-height, 0px));
  }

  .or-v2 .or-testi .dme-testi-card {
    --x: 79.61%;
    --w: 20.39%;
    justify-content: center;
    min-height: 0;
    padding: 20px 24.84px 20px 20px;
  }

  .or-v2 .or-testi .dme-testi-card.is-prev  { --x: 0%; }
  .or-v2 .or-testi .dme-testi-card.is-next  { --x: 57.606%; }
  .or-v2 .or-testi .dme-testi-card.is-after { --x: 79.61%; }

  .or-v2 .or-testi .dme-testi-card.is-center {
    --x: 22.003%;
    --w: 33.989%;
    min-height: 0;
    padding: 35px 20px 20px;
  }

  /* The badge sits in the card head: 72.45px in on side cards, flush
     right on the centre card. */
  .or-v2 .or-testi .dme-testi-card-top {
    position: relative;
    flex: none;
    margin-bottom: 17px;
  }

  .or-v2 .or-testi .dme-testi-verified {
    top: 0;
    right: auto;
    left: 72.45px;
  }

  .or-v2 .or-testi .dme-testi-card.is-center .dme-testi-card-top {
    height: 52px;
    margin-bottom: 28px;
  }

  .or-v2 .or-testi .dme-testi-card.is-center .dme-testi-verified {
    right: 0;
    left: auto;
  }

  .or-v2 .or-testi .dme-testi-quote {
    flex: none;
    margin-bottom: 17px;
  }

  .or-v2 .or-testi .dme-testi-card.is-center .dme-testi-quote {
    margin-bottom: 28px;
  }

  .or-v2 .or-testi .dme-testi-sep {
    margin: 17px 0;
  }

  .or-v2 .or-testi .dme-testi-card.is-center .dme-testi-sep {
    margin: 18px 0;
  }

  .or-v2 .or-testi .dme-testi-card.is-center .dme-testi-who {
    gap: 3.01px;
  }

  /* Figma keeps the centre card's practice line on one line (236px). */
  .or-v2 .or-testi .dme-testi-card.is-center .dme-testi-who small {
    white-space: nowrap;
  }
}

/* ============================================================= */
/* Book a consultation — Figma 11615:5014 (1440 wide). The UC      */
/* section (.bh-consult + MH / derm / UC tuning) renders it as is; */
/* UC's phone layout (Figma 11551:2459) is keyed to the            */
/* #uc-consultation id, so it is repeated here for #or-consultation. */
/* ============================================================= */

/* 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) {


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

/* ============================================================= */
/* FAQs — Figma 11615:5115. Same geometry as the UC FAQ (518px     */
/* intro | 660px accordion, 65px closed / 55px open rows, 426px    */
/* pills), so the .bh-faq + MH + .uc-faq rules render it as is and */
/* the existing [data-bh-reveal] entrance animates it. Only the    */
/* question count (8) and copy differ; no overrides are needed.    */
/* ============================================================= */

/* Tailored specialties: nine cards, so the grid becomes a centred wrap (4 / 2 / 1
   per row, the derm 20px gap) and the ninth card sits in the middle of its row. */
.or-v2 .or-tailor .bh-sub-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.or-v2 .or-tailor .bh-sub-grid > .bh-sub-card {
  flex: 0 0 calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
}

@media (max-width: 991px) {
  .or-v2 .or-tailor .bh-sub-grid > .bh-sub-card {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 767px) {
  .or-v2 .or-tailor .bh-sub-grid > .bh-sub-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Services tab 3's KPI reads "Up to 35%": the lead-in is set small so the figure,
   the Live badge and the spark line keep the 99% cell's fit. */
.or-v2 .or-kpi-pre {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}