/* DME billing page (v2/dme-billing.blade.php). Loaded after behavioral-health-v2.css,
   whose .bh-* sections the page reuses; everything here is scoped to .dme-v2
   or uses dme-* classes, so the behavioral health page is unaffected. */

/* ============================================================= */
/* Hero — Figma node 10347:257 (1440 x 759)                       */
/* Builds on the .bh-hero rules; only the DME geometry is here.   */
/* ============================================================= */
.dme-v2 .bh-hero {
  z-index: 3; /* the open service list stays above the next section */
  padding-bottom: 29.33px;
}

/* 479px copy column (503px tall) + the artwork; the form sits 60px below. */
.dme-v2 .bh-hero-top {
  min-height: 503.17px;
  margin-bottom: 60px;
}

.dme-v2 .bh-hero-copy {
  width: 479px;
}

/* 346px wide, so it breaks "Expert DME / Billing Services" as in Figma. */
.dme-v2 .bh-hero-heading {
  width: 346px;
  max-width: 100%;
}

.dme-v2 .bh-hero-list li:nth-child(6) { animation-delay: 0.73s; }

/* Figma 10347:332: 772 x 537 at 468 / 26.5 from the content box; the image is
   103.46% wide and shifted -0.18%, so its right edge sits on the 1240 line. */
.dme-hero-art {
  position: absolute;
  top: 26.5px;
  right: 0;
  width: 772px;
  height: 537px;
  pointer-events: none;
}

.dme-hero-art img {
  position: absolute;
  top: 0;
  left: -0.18%;
  width: 103.46%;
  max-width: none;
  height: 100%;
  animation:
    bh-brain-in 1.4s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-breathe 7s 1.5s ease-in-out infinite;
}

/* Service dropdown: the home .field-select, without its left icon (none in Figma). */
.dme-v2 .bh-hero-form .field-select select {
  padding-left: 11px;
}

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

  .dme-v2 .bh-hero-copy {
    width: 100%;
  }

  .dme-hero-art {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 772px;
    height: auto;
    margin: 32px auto 0;
    aspect-ratio: 772 / 537;
  }
}

@media (max-width: 767px) {
  .dme-v2 .bh-hero-heading {
    width: 100%;
  }
}

/* ============================================================= */
/* Why DME-specific billing services matter — Figma 10347:464     */
/* (1440 x 1074). Builds on .bh-why (Figma 8777:68680); only the  */
/* DME geometry, colours and the bordered card icon are here.     */
/* ============================================================= */
.dme-v2 .bh-why {
  background: radial-gradient(81.04% 138.91% at 70% 30%, #273775 0%, #142a64 100%);
}

/* The 922px lead is wider than the title, so it sets the head width. */
.dme-v2 .bh-why-lead {
  width: 922px;
  max-width: 100%;
  min-width: 0;
}

/* Stage starts at Figma y 244; connectors sit at y 259, cards at y 241. */
.dme-v2 .bh-why-connector {
  top: 15px;
  height: 399px;
}

.dme-v2 .bh-why-connector--left {
  left: calc(50% - 271.23px); /* Figma x 448.77 */
  width: 164.648px;
}

.dme-v2 .bh-why-cards {
  top: -3px;
}

.dme-v2 .bh-why-cards--left  { right: calc(50% + 265px); }
.dme-v2 .bh-why-cards--right { width: 337px; }

/* Figma: 16px padding with the 0.8px stroke drawn inside. */
.dme-v2 .bh-why-card {
  padding: 15.2px;
}

.dme-v2 .bh-why-card:nth-child(1) { min-height: 148px; }
.dme-v2 .bh-why-card:nth-child(2) { min-height: 150px; }

.dme-v2 .bh-why-card-text {
  font-size: 12px;
  line-height: 18px;
}

/* 48px white ring with a 1px navy border (Figma "Margin/Border"). */
.dme-v2 .dme-why-card-icon--ring {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 1px;
  border: 1px solid var(--c-blue);
  border-radius: 9999px;
}

.dme-v2 .dme-why-card-icon--ring img {
  margin: 0;
}

/* Figma: 32px + the 1px stroke = 284px tall banner. */
.dme-v2 .bh-why-banner {
  padding: 32px;
}

.dme-v2 .bh-why-banner-title,
.dme-v2 .bh-why-feature-title {
  color: var(--c-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1299px) {
  .dme-v2 .bh-why-cards--right {
    width: auto;
  }

  .dme-v2 .bh-why-cards {
    margin-top: 0;
  }

  .dme-v2 .bh-why-card:nth-child(n) {
    min-height: 0;
  }
}

@media (max-width: 991px) {
  .dme-v2 .bh-why-card-text {
    font-size: 13px;
    line-height: 19px;
  }
}

@media (max-width: 640px) {
  .dme-v2 .bh-why-banner {
    padding: 24px 20px;
  }
}

/* ============================================================= */
/* Our DME billing services (tabs) — Figma 10347:608              */
/* (tab states 10348:3186 / 3389 / 3587 / 3802). Builds on .bh-svc */
/* (Figma 8777:68823); geometry, tabs, flow, pills and animation   */
/* are BH's. Only the "What We Verify" heading placement, tab 2's  */
/* extra row rule and the fixed-width pill labels differ.          */
/* ============================================================= */

/* "What We Verify" sits at the panel's left edge (left: 28px), with the
   orange rule starting 51px in, under "What". */
.dme-v2 .bh-svc-verify-head {
  margin: 0 0 29px;
}

.dme-v2 .bh-svc-verify-head::after {
  left: 51px;
  translate: none;
}

/* Eligibility & Benefits: Figma centres the heading block at 50% - 470px
   of the panel and the rule +24px from that centre, under "We". */
.dme-v2 .dme-svc-verify--offset .bh-svc-verify-head {
  margin-left: calc(50% - 470px);
  translate: -50% 0;
}

.dme-v2 .dme-svc-verify--offset .bh-svc-verify-head::after {
  left: calc(50% + 24px);
  translate: -50% 0;
}

/* Coding & Charge Capture: a fourth 181px rule between the rows under
   column 4 (Figma 10348:3376). Hidden with the others at <= 991px. */
.dme-v2 .dme-svc-list--rule4 .bh-svc-list-item:nth-child(4)::after {
  content: "";
  position: absolute;
  top: 45.91px;
  left: 47.5px;
  width: 181px;
  height: 1px;
  background: var(--c-light-grey);
  transform-origin: 0 0;
}

/* A/R & Reporting pills: Figma's fixed-width text boxes (92 / 76 / 106px). */
.dme-v2 .dme-svc-pill-label {
  flex: none;
}

/* ---------- Services responsive ---------- */
@media (max-width: 1199px) {
  .dme-v2 .dme-svc-verify--offset .bh-svc-verify-head {
    margin-left: 0;
    translate: none;
  }
}

@media (max-width: 640px) {
  .dme-v2 .dme-svc-pill-label {
    flex: 0 1 auto;
    width: auto !important;
  }
}

/* ============================================================= */
/* DME subspecialty-focused billing — Figma 10347:882              */
/* Builds on the .bh-sub rules (section, deco, head, grid, cards   */
/* and animation are identical); only the card geometry differs:   */
/* a 129px circle at (256, 86.41) and 134 x 114 illustrations.     */
/* ============================================================= */
.dme-v2 .bh-sub-ellipse {
  top: 86.41px;
  left: calc(50% + 56px);
  width: 129px;
  height: 129px;
}

.dme-v2 .bh-sub-art {
  top: var(--img-y, 100.39px);
  width: 134px;
  height: 114px;
}

/* Text column widths vary per card in Figma (--tw column, --pw paragraph). */
.dme-v2 .bh-sub-card-body {
  width: var(--tw, 185px);
}

.dme-v2 .bh-sub-card-title {
  width: var(--hw, 100%);
}

.dme-v2 .bh-sub-card-text {
  width: var(--pw, 185px);
}

/* Narrower cards: keep the copy clear of the centre-anchored illustration,
   and let the card grow with the longer DME copy. */
@media (max-width: 1199px) {
  .dme-v2 .bh-sub-card {
    height: auto;
    min-height: 316px;
  }

  .dme-v2 .bh-sub-card-body {
    width: min(var(--pw, 185px), calc(50% + 20px));
  }

  .dme-v2 .bh-sub-card-title,
  .dme-v2 .bh-sub-card-text {
    width: 100%;
  }
}

/* Two columns: centre the odd 9th card on its own row. */
@media (min-width: 768px) and (max-width: 1199px) {
  .dme-v2 .bh-sub-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 10px);
  }
}

@media (max-width: 767px) {
  .dme-v2 .bh-sub-grid {
    margin-inline: auto;
  }
}

/* Tablets and phones: the illustration moves to the top-right corner beside
   the number and title, and the description runs the full card width below. */
@media (max-width: 991px) {
  .dme-v2 .bh-sub-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .dme-v2 .bh-sub-card-body {
    width: 100%;
  }

  .dme-v2 .bh-sub-num,
  .dme-v2 .bh-sub-card-title {
    padding-right: 118px;
  }

  /* Ends below the illustration, so the description never runs under it. */
  .dme-v2 .bh-sub-card-title {
    min-height: 62px;
  }

  .dme-v2 .bh-sub-ellipse {
    top: 14px;
    right: 22px;
    left: auto;
    width: 100px;
    height: 100px;
  }

  .dme-v2 .bh-sub-art {
    top: 22px;
    right: 16px;
    left: auto;
    width: 106px;
    height: auto;
    transform: none;
  }
}

@media (max-width: 360px) {
  .dme-v2 .bh-sub-num,
  .dme-v2 .bh-sub-card-title {
    padding-right: 96px;
  }

  .dme-v2 .bh-sub-ellipse {
    width: 84px;
    height: 84px;
  }

  .dme-v2 .bh-sub-art {
    width: 88px;
  }
}

/* ============================================================= */
/* DME CTA banner — Figma 10347:967 (1240 x 352)                   */
/* Builds on the .bh-cta rules (gradient card, wave, buttons and   */
/* animation are identical); only the copy size and height differ. */
/* ============================================================= */

/* Figma's 2px stroke sits inside the 40px padding: 272px art + 80 = 352px. */
@media (min-width: 992px) {
  .dme-v2 .bh-cta-banner {
    padding: 38px;
  }
}

.dme-v2 .bh-cta-text {
  font-size: 20px;
}

@media (max-width: 991px) {
  .dme-v2 .bh-cta-text {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (max-width: 767px) {
  .dme-v2 .bh-cta-text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ============================================================= */
/* DME coding services expertise — Figma 10347:992 (1240 x 1101)   */
/* Builds on the .bh-code rules (grid, featured gradient, hover,   */
/* animation are identical); the lead is wider, the first row is   */
/* taller and the copy has no hard breaks.                         */
/* ============================================================= */
.dme-v2 .bh-code-lead {
  width: 806px;
}

/* Card 1 holds four lines of copy (172px) and card 2 is 170px in Figma;
   the grid row stretches both to the taller one. */
@media (min-width: 992px) {
  .dme-v2 .bh-code-card:nth-child(-n + 2) {
    height: auto;
    min-height: 170px;
  }
}

/* Card 1's copy runs the full 472px text column. */
.dme-v2 .bh-code-card--featured .bh-code-card-text {
  max-width: none;
}

/* The 80px trend icon keeps the 10px side padding of its 100px column. */
.dme-v2 .bh-code-card--last .bh-code-icon {
  padding: 0 10px;
}

@media (max-width: 575px) {
  .dme-v2 .bh-code-card--last .bh-code-icon {
    padding: 0;
  }
}

/* ============================================================= */
/* DME Medicare billing — Figma 10347:1260 (1240 x 770 split card) */
/* Builds on the .bh-pharm rules (card, glow, features, button and */
/* animation are identical); the panel is taller, the equipment    */
/* photo is larger and the panel copy sits lower.                  */
/* ============================================================= */
.dme-v2 .bh-pharm-side {
  min-height: 770px;
}

/* 363px photo centred in the 435px panel (Figma: left 50% + 1px). */
.dme-v2 .bh-pharm-pills {
  top: 26.41px;
  left: 37px;
  width: 363px;
  height: 363px;
}

.dme-v2 .bh-pharm-side-copy {
  top: 424px;
}

/* Equipment bobs without the pills' tilt. */
@keyframes dme-medicare-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

.dme-v2 .bh-pharm.is-in .bh-pharm-pills {
  animation:
    bh-pharm-pills-in 1s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    dme-medicare-float 6s 1.3s ease-in-out infinite;
}

.dme-v2 .bh-pharm:not(.is-armed) .bh-pharm-pills {
  animation: dme-medicare-float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dme-v2 .bh-pharm .bh-pharm-pills {
    animation: none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .dme-v2 .bh-pharm-side {
    min-height: 700px;
  }

  .dme-v2 .bh-pharm-pills {
    left: 30px;
    width: 300px;
    height: 300px;
  }

  .dme-v2 .bh-pharm-side-copy {
    top: 356px;
  }
}

/* Stack: the panel becomes a banner with the photo in flow. */
@media (max-width: 991px) {
  .dme-v2 .bh-pharm-side {
    min-height: 0;
  }

  .dme-v2 .bh-pharm-pills {
    top: auto;
    left: auto;
    width: 260px;
    height: 260px;
  }

  .dme-v2 .bh-pharm-side-copy {
    top: auto;
  }
}

@media (max-width: 575px) {
  .dme-v2 .bh-pharm-pills {
    width: 220px;
    height: 220px;
  }
}

/* ============================================================= */
/* Who we serve — Figma node 10347:1325 (1440 x 1242)              */
/* Builds on the .bh-serve rules; only the DME geometry is here.  */
/* ============================================================= */

/* 60px key circles (BH 54px) beside a 74px-tall text block. */
.dme-v2 .bh-serve-key-icon {
  width: 60px;
  height: 60px;
}

/* Art is a 95px-tall SVG at its own width, 20px above the copy; no link. */
.dme-v2 .bh-serve-card {
  gap: 20px;
}

.dme-v2 .bh-serve-card-art {
  width: auto;
  height: 65px;
  transform-origin: 30% 100%;
}

/* Figma lets "Hospital & Discharge-Based Suppliers" run 10px into the padding. */
.dme-v2 .bh-serve-card-title {
  margin-right: -10px;
}

.dme-v2 .bh-serve-card-text {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
}

/* 934px info block: 66px icon + title fill 562px, rule, 332px copy. */
.dme-v2 .bh-serve-bar-cta-info {
  flex-basis: 934px;
}

/* Restore BH's wrap (the override above outranks its media rule). */
@media (max-width: 1199px) {
  .dme-v2 .bh-serve-bar-cta-info {
    flex-basis: 100%;
  }
}

@media (max-width: 575px) {
  .dme-v2 .bh-serve-card-title {
    margin-right: 0;
  }

  .dme-v2 .bh-serve-card-text {
    font-size: 15px;
    line-height: 23px;
  }
}

/* ============================================================= */
/* Credentialing — Figma node 10347:1454 (1440 x 669)              */
/* Builds on the .bh-cred rules; only the DME differences are here. */
/* ============================================================= */

/* Four keys (BH three): the last two use 20px lines, the first two 16px. */
.dme-v2 .bh-cred-key:last-child .bh-cred-key-body strong {
  line-height: 16px;
}

.dme-v2 .bh-cred-key:nth-child(n + 3) .bh-cred-key-body strong {
  line-height: 20px;
}

/* Check icons pop on hover instead of BH's gear turn. */
.dme-v2 .bh-cred-key-icon img {
  transition: scale 0.35s ease;
}

.dme-v2 .bh-cred-key:hover .bh-cred-key-icon img {
  rotate: none;
  scale: 1.12;
}

@media (prefers-reduced-motion: reduce) {
  .dme-v2 .bh-cred-key:hover .bh-cred-key-icon img {
    scale: none;
  }
}

/* ============================================================= */
/* Why choose us — Figma node 10347:1586 (1440 x 621)              */
/* Builds on the .bh-choose rules; only the DME geometry is here.  */
/* ============================================================= */

/* Figma leaves 60px of white below the 621px frame before the trust
   band; it is padding here so the orbit keeps showing through it. */
.dme-v2 .bh-choose {
  padding-bottom: 100px;
}

/* Orbit group (Figma 10347:162) sits 456px down, 314.7px past the frame's left edge. */
.dme-v2 .bh-choose-orbit {
  top: 456px;
  left: calc(50% - 720px - 314.7px);
}

/* Title wraps at 392px: "Why DME Suppliers / Choose Us". */
.dme-v2 .bh-choose-title {
  max-width: 392px;
}

/* Rows are 250px and 251px tall (BH 238px). */
.dme-v2 .bh-choose-card {
  height: 250px;
}

.dme-v2 .bh-choose-card:nth-child(n + 3) {
  height: 251px;
}

/* ---------- Built icons: white disc + glyph layers + arc ---------- */
.dme-v2 .dme-choose-disc {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--c-white);
  border-radius: 43px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

.dme-v2 .dme-choose-glyph {
  position: absolute;
  display: block;
  max-width: none;
}

/* Figma line 131: a 35.735 x 7.723 stroke turned 128.93deg inside a
   28.461 x 32.652 box; the export adds the dot and stroke bleed. */
.dme-v2 .dme-choose-arc {
  position: absolute;
  top: var(--arc-y, 32px);
  left: var(--arc-x, 34.5px);
  z-index: 1;
  display: block;
  width: 28.461px;
  height: 32.652px;
  pointer-events: none;
  transform-origin: calc(30px - var(--arc-x, 34.5px)) calc(30px - var(--arc-y, 32px)); /* disc centre */
}

.dme-v2 .dme-choose-arc img {
  position: absolute;
  top: 11.9648px;
  left: -6.3028px;
  display: block;
  width: 38.9013px;
  height: 8.72282px;
  max-width: none;
  transform-origin: 20.5333px 4.3612px;
  rotate: 128.93deg;
}

/* ---------- Animation ---------- */
/* After its card lands, each disc pops and the arc swings round into place. */
@keyframes dme-choose-disc {
  0%   { scale: 0.6; }
  70%  { scale: 1.08; }
  100% { scale: 1; }
}

@keyframes dme-choose-arc {
  from { opacity: 0; rotate: -60deg; }
  to   { opacity: 1; rotate: 0deg; }
}

.dme-v2 .bh-choose.is-armed:not(.is-in) .dme-choose-arc {
  opacity: 0;
}

.dme-v2 .bh-choose.is-in .dme-choose-disc {
  animation: dme-choose-disc 0.6s calc(0.45s + var(--i, 0) * 0.12s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.dme-v2 .bh-choose.is-in .dme-choose-arc {
  animation: dme-choose-arc 0.7s calc(0.6s + var(--i, 0) * 0.12s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .dme-v2 .bh-choose .dme-choose-disc,
  .dme-v2 .bh-choose .dme-choose-arc {
    animation: none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .dme-v2 .bh-choose {
    padding-bottom: 60px;
  }

  .dme-v2 .bh-choose-title {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .dme-v2 .bh-choose {
    padding-bottom: 40px;
  }

  .dme-v2 .bh-choose-card,
  .dme-v2 .bh-choose-card:nth-child(n + 3) {
    height: auto;
    min-height: 220px;
  }
}

@media (max-width: 575px) {
  .dme-v2 .bh-choose-card,
  .dme-v2 .bh-choose-card:nth-child(n + 3) {
    min-height: 0;
  }
}

/* ============================================================= */
/* Trusted standards — Figma node 10347:1686 (1440 x 466)          */
/* Builds on the .bh-trust rules; only the DME band colour and the */
/* longer closing line differ.                                     */
/* ============================================================= */

/* Figma: radial #273775 -> #142A64, centred at 70% 30% (1008, 139.8). */
.dme-v2 .bh-trust {
  background: radial-gradient(81.04% 138.91% at 70% 30%, #273775 0%, #142a64 100%);
}

/* The DME line is ~1130px wide, so let it wrap a breakpoint earlier. */
@media (max-width: 1299px) {
  .dme-v2 .bh-trust-text {
    max-width: 1026px;
    white-space: normal;
  }
}

/* ============================================================= */
/* Case study — Figma node 10347:1737 (1240 x 727)                 */
/* Builds on the .bh-case rules. A single case, so .bh-case stands */
/* alone (no slider track) and is revealed by [data-bh-reveal].    */
/* ============================================================= */

/* Figma leaves 60px of white between the trust band and the card. */
.dme-v2 .bh-cases {
  padding-top: 60px;
}

.dme-v2 .bh-cases .bh-case {
  display: block;
  flex: none;
  opacity: 1;
}

/* The photo isn't a cover crop: Figma places the 736 x 958 image at
   309.68 x 403.08, 28.63px in and 7.64px up inside the 350 x 321 frame. */
.dme-v2 .bh-case-photo img {
  position: absolute;
  top: -7.64px;
  left: 28.63px;
  width: 309.68px;
  height: 403.08px;
  object-fit: fill;
}

/* Figma's 274px outcome cards run 7px into the card's 20px right
   padding (BH caps the column at 275.5px, leaving them 255px). */
.dme-v2 .bh-case-outcomes {
  max-width: none;
  margin-right: -7px;
}

/* Figma lets this label run 173px (9px past its 164px column) so
   "preventable DME denials" keeps one line. */
.dme-v2 .bh-case-stat:first-child .bh-case-stat-body > span {
  width: 173px;
  max-width: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1239px) {
  .dme-v2 .bh-case-outcomes {
    margin-right: 0;
  }

  .dme-v2 .bh-case-stat:first-child .bh-case-stat-body > span {
    width: auto;
  }
}

@media (max-width: 767px) {
  .dme-v2 .bh-cases {
    padding-top: 40px;
  }
}

/* ============================================================= */
/* DME software integrations — Figma 10347:1782                     */
/* Geometry, logos, hub, connectors, benefits bar and animation are */
/* identical to BH (.bh-int, Figma 8777:69997); only the copy        */
/* changes, so no overrides are needed here.                         */
/* ============================================================= */

/* ============================================================= */
/* DME state services — Figma 10347:1894                            */
/* Same layout as BH (.bh-states, Figma 8777:70109). DME differences: */
/* the lead wraps to the title's width (Figma min-w-full +           */
/* min-content) and callout copy runs to 2-3 lines.                  */
/* ============================================================= */
/* width: 0 keeps the lead out of the head's shrink-to-fit width, so
   min-width: 100% resolves to the title's width (~742px, 3 lines). */
.dme-v2 .bh-states-lead {
  width: 0;
  min-width: 100%;
  white-space: normal;
}

/* Desktop cards keep Figma's fixed 72px (3-line copy overflows into the
   17px padding, centred, as in Figma). In the stacked grid the narrower
   cards grow with their copy instead. */
@media (max-width: 1239px) {
  .dme-v2 .bh-states-card {
    height: auto;
    min-height: 72px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ============================================================= */
/* Payer expertise — Figma 10347:2435 (dashed 1240px frame)         */
/* Reuses .bh-pay; overrides for the DME copy, banner gradient and  */
/* the wider step descriptions.                                    */
/* ============================================================= */

/* Figma: 60px between the previous section and the frame, and 60px to
   the full-bleed testimonials band below. */
.dme-v2 .bh-pay {
  padding: 60px 0;
}

.dme-v2 .bh-pay-lead {
  color: var(--c-text);
}

/* Bottom intro copy: 25px leading, 337px text box in the 315px column. */
.dme-v2 .bh-pay-intro--sm .bh-pay-lead {
  width: 337px;
  max-width: none;
  line-height: 25px;
}

/* "100+ Payers / Supported" tile. */
.dme-v2 .bh-pay-logo--more {
  text-align: center;
}

/* Status bar: two-line text fills the pill, left aligned. */
.dme-v2 .bh-pay-status > span {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}

/* Banner: Figma radial fill (#273775 → #142a64, centre 1059.7 / 83.4 of 1200 x 278.5). */
.dme-v2 .bh-pay-banner {
  background: radial-gradient(62.735% 107.53% at 88.31% 29.95%, #273775 0%, #142a64 100%);
}

/* Steps: Figma gaps (7.3 / 7 / 7 / 10 / 7) and description widths that
   overhang the 110px step, centred on it. */
.dme-v2 .bh-pay-steps > .bh-pay-step:first-child {
  gap: 7.3px;
}

.dme-v2 .bh-pay-step.dme-pay-step--loose {
  gap: 10px;
}

.dme-v2 .bh-pay-step > span:last-child {
  flex: none;
  width: var(--tw, 100%);
}

/* Figma keeps the 101px label unshrunk so it breaks "Specialty Payer / Networks". */
.dme-v2 .bh-pay-orbit-pill--specialty > span:last-child {
  flex: none;
}

/* ---------- Payer responsive ---------- */
@media (max-width: 1239px) {
  .dme-v2 .bh-pay-intro--sm .bh-pay-lead {
    width: auto;
    max-width: 448px;
  }

  .dme-v2 .bh-pay-step > span:last-child {
    width: auto;
  }
}

@media (max-width: 991px) {
  .dme-v2 .bh-pay {
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
  .dme-v2 .bh-pay {
    padding: 32px 0;
  }
}

/* ============================================================= */
/* Testimonials — Figma 10402:11562 (1440 x 1139)                   */
/* New dme-testi-* block (no BH counterpart). Cards share one grid  */
/* cell and are placed by slot class (is-prev / is-center /         */
/* is-next / is-after) so 17-testimonials.js can animate them       */
/* between slots; the track takes the tallest card's height.        */
/* ============================================================= */
.dme-v2 .dme-testi {
  position: relative;
  padding: 72px 0 56px;
  overflow: hidden;
  background:
    radial-gradient(1200px 475.85px at 50% 0, #ffffff 0, #f5f7fc 55%, #eef1f8 100%) no-repeat,
    #eef1f8;
}

.dme-v2 .dme-testi .container-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* ---------- Decorations ---------- */
.dme-v2 .dme-testi-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dme-v2 .dme-testi-blob--left {
  top: 380px;
  left: -160px;
  width: 420px;
  height: 420px;
  background: rgba(39, 55, 117, 0.04);
}

.dme-v2 .dme-testi-blob--right {
  top: 120px;
  right: -140px;
  width: 360px;
  height: 360px;
  background: rgba(252, 93, 97, 0.04);
}

.dme-v2 .dme-testi-dotgrid {
  position: absolute;
  top: 44px;
  left: calc(50% + 280px);
  display: grid;
  grid-template-columns: repeat(3, 6px);
  grid-template-rows: repeat(3, 6px);
  gap: 8px;
  opacity: 0.55;
  pointer-events: none;
}

.dme-v2 .dme-testi-dotgrid i {
  border-radius: 2px;
  background: #9daedc;
}

.dme-v2 .dme-testi-dotgrid i:nth-child(1) { grid-area: 1 / 1; }
.dme-v2 .dme-testi-dotgrid i:nth-child(2) { grid-area: 1 / 3; background: #c6d1ee; }
.dme-v2 .dme-testi-dotgrid i:nth-child(3) { grid-area: 2 / 2; }
.dme-v2 .dme-testi-dotgrid i:nth-child(4) { grid-area: 3 / 1; background: #c6d1ee; }
.dme-v2 .dme-testi-dotgrid i:nth-child(5) { grid-area: 3 / 3; }

.dme-v2 .dme-testi-ring {
  position: absolute;
  top: 250px;
  left: calc(50% - 360px);
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(252, 93, 97, 0.4);
  border-radius: 5px;
  pointer-events: none;
}

.dme-v2 .dme-testi-dot {
  position: absolute;
  top: 96px;
  right: calc(50% - 390px);
  width: 8px;
  height: 8px;
  background: rgba(39, 55, 117, 0.2);
  border-radius: 4px;
  pointer-events: none;
}

.dme-v2 .dme-testi-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(230, 235, 247, 0.5);
  border-radius: 50%;
  pointer-events: none;
}

.dme-v2 .dme-testi-bubble > span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dce3f3;
  border-radius: 50%;
}

.dme-v2 .dme-testi-bubble img {
  display: block;
  max-width: none;
}

.dme-v2 .dme-testi-bubble--left {
  top: 58px;
  left: calc(50% - 600px);
  width: 96px;
  height: 96px;
}

.dme-v2 .dme-testi-bubble--left > span {
  width: 64px;
  height: 64px;
}

.dme-v2 .dme-testi-bubble--right {
  top: 48px;
  right: calc(50% - 600px);
  width: 100px;
  height: 100px;
}

.dme-v2 .dme-testi-bubble--right > span {
  width: 68px;
  height: 68px;
}

/* ---------- Heading ---------- */
.dme-v2 .dme-testi-head {
  display: flex;
  flex-direction: column;
  gap: 17px;
  align-items: center;
  text-align: center;
}

.dme-v2 .dme-testi-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px 8px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  line-height: normal;
  letter-spacing: 0.78px;
  color: var(--c-blue);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--c-white);
  border: 1px solid rgba(39, 55, 117, 0.15);
  border-radius: 40px;
  box-shadow: 0 4px 14px -6px rgba(39, 55, 117, 0.2);
}

.dme-v2 .dme-testi-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  letter-spacing: -1.08px;
  color: var(--c-blue);
  text-transform: none;
}

.dme-v2 .dme-testi-title .accent {
  color: var(--c-orange);
}

.dme-v2 .dme-testi-lead {
  max-width: 738px;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--c-text);
}

/* ---------- Carousel ---------- */
.dme-v2 .dme-testi-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}

.dme-v2 .dme-testi-carousel:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 6px;
}

.dme-v2 .dme-testi-track {
  display: grid;
  align-items: center;
  min-height: 611.61px;
}

/* Slot geometry, as % of the 1240px track (Figma grid 1fr 1.75fr 1fr 1fr,
   22px gaps; the centre card is 421.47px of its 432.5px column). */
.dme-v2 .dme-testi-card {
  --x: 80.068%;
  --w: 19.932%;
  position: relative;
  left: var(--x);
  z-index: 1;
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: var(--w);
  min-height: 400px;
  padding: 26px 24px 24px;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: 0 12px 30px -20px rgba(39, 55, 117, 0.25), 0 0 0 1px rgba(39, 55, 117, 0.05);
  cursor: pointer;
  /* Slot moves are animated by script-v2.js (FLIP on transform, so nothing
     re-lays out mid-move); only paint properties transition here. */
  transition:
    box-shadow 0.65s ease,
    border-color 0.65s ease,
    opacity 0.45s ease,
    translate 0.3s ease;
  will-change: transform;
}

.dme-v2 .dme-testi-card.is-prev  { --x: 0%; }
.dme-v2 .dme-testi-card.is-next  { --x: 58.36%; }
.dme-v2 .dme-testi-card.is-after { --x: 80.068%; }

.dme-v2 .dme-testi-card.is-center {
  --x: 21.706%;
  --w: 33.99%;
  z-index: 2;
  min-height: 605.61px;
  padding: 33.5px 34px 30px;
  border-color: var(--c-white);
  box-shadow: 0 30px 60px -24px rgba(39, 55, 117, 0.36), 0 0 0 1px rgba(39, 55, 117, 0.08);
  cursor: default;
}

/* Cards beyond the four visible slots wait, faded, behind the last one. */
.dme-v2 .dme-testi-card.is-hidden {
  z-index: 0;
  visibility: hidden;
  opacity: 0;
}

/* A card wrapping from one end to the other jumps without travelling. */
.dme-v2 .dme-testi-card.is-jump {
  opacity: 0;
  transition: none;
}

.dme-v2 .dme-testi-card:not(.is-center):hover {
  translate: 0 -4px;
}

.dme-v2 .dme-testi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #273775 29.808%, #fc5d61);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.dme-v2 .dme-testi-card.is-center::before {
  opacity: 1;
}

.dme-v2 .dme-testi-card-top {
  display: flex;
  gap: 47.33px;
  align-items: flex-start;
  height: 38.39px;
  margin-bottom: 17.19px;
}

.dme-v2 .dme-testi-card.is-center .dme-testi-card-top {
  justify-content: space-between;
  height: 51.2px;
  margin-bottom: 17.32px;
}

.dme-v2 .dme-testi-mark {
  flex: none;
  width: 25.12px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 38.4px;
  color: var(--c-bg-blue);
}

.dme-v2 .dme-testi-card.is-center .dme-testi-mark {
  width: auto;
  font-size: 64px;
  line-height: 51.2px;
}

.dme-v2 .dme-testi-verified {
  display: inline-flex;
  flex: none;
  gap: 6px;
  align-items: center;
  padding: 5px 11px 6px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 12px;
  line-height: normal;
  color: var(--c-blue);
  white-space: nowrap;
  background: var(--c-bg-blue);
  border-radius: 30px;
}

.dme-v2 .dme-testi-verified-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: #22a55b;
  border-radius: 7.5px;
}

.dme-v2 .dme-testi-verified-ico img {
  display: block;
  max-width: none;
}

.dme-v2 .dme-testi-quote {
  flex: 1 0 auto;
  margin: 0 0 18px;
  padding: 0 0 0.8px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 24.3px;
  font-style: normal;
  color: var(--c-text);
  background: none;
  border: 0;
}

.dme-v2 .dme-testi-card.is-center .dme-testi-quote {
  margin-bottom: 18px;
  padding-bottom: 1.79px;
  font-weight: 500;
  font-size: 18px;
  line-height: 30.78px;
}

.dme-v2 .dme-testi-rating {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dme-v2 .dme-testi-stars {
  display: flex;
  gap: 3px;
}

.dme-v2 .dme-testi-stars img {
  display: block;
  max-width: none;
}

.dme-v2 .dme-testi-rating b {
  padding-bottom: 1px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  color: var(--c-blue);
}

.dme-v2 .dme-testi-sep {
  flex: none;
  height: 1px;
  margin: 21px 0 18px;
  background: var(--c-bg-blue);
  border: 0;
  opacity: 1;
}

.dme-v2 .dme-testi-author {
  display: flex;
  gap: 14px;
  align-items: center;
}

.dme-v2 .dme-testi-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  color: var(--c-white);
  background: var(--c-blue);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--c-white), 0 0 0 4px #dce3f3;
  transition: background-color 0.65s ease;
}

.dme-v2 .dme-testi-card.is-center .dme-testi-avatar {
  width: 56px;
  height: 56px;
  background: var(--c-orange);
}

.dme-v2 .dme-testi-who {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dme-v2 .dme-testi-who b {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 18.2px;
  color: var(--c-blue);
}

.dme-v2 .dme-testi-card.is-center .dme-testi-who b {
  font-size: 17px;
  line-height: 22.1px;
}

.dme-v2 .dme-testi-who small {
  padding-bottom: 1px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  line-height: normal;
  letter-spacing: 1.1px;
  color: var(--c-placeholder);
  text-transform: uppercase;
}

/* ---------- Dots + arrows ---------- */
.dme-v2 .dme-testi-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.dme-v2 .dme-testi-dotbtn {
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(39, 55, 117, 0.4);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.dme-v2 .dme-testi-dotbtn.is-active {
  width: 30px;
  background: var(--c-orange);
}

.dme-v2 .dme-testi-dotbtn:focus-visible,
.dme-v2 .dme-testi-arrow:focus-visible {
  outline: 2px solid var(--c-blue) !important;
  outline-offset: 3px;
}

.dme-v2 .dme-testi-arrow {
  position: absolute;
  top: calc(50% + 3.93px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--c-white);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 8px 22px -8px rgba(39, 55, 117, 0.35);
  cursor: pointer;
  translate: 0 -50%;
  transition: scale 0.25s ease, box-shadow 0.25s ease;
}

.dme-v2 .dme-testi-arrow img {
  display: block;
  max-width: none;
}

.dme-v2 .dme-testi-arrow:hover {
  scale: 1.08;
  box-shadow: 0 12px 26px -8px rgba(39, 55, 117, 0.45);
}

.dme-v2 .dme-testi-arrow--prev { left: -80px; }
.dme-v2 .dme-testi-arrow--next { right: -80px; }

/* ---------- Rating strip ---------- */
.dme-v2 .dme-testi-trust {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.dme-v2 .dme-testi-score {
  display: flex;
  flex: none;
  gap: 26px;
  align-items: center;
  box-sizing: border-box;
  height: 115px;
  padding: 20px 30px;
  background: var(--c-white);
  border-radius: 18px;
  box-shadow: 0 14px 34px -18px rgba(39, 55, 117, 0.25), 0 0 0 1px rgba(39, 55, 117, 0.05);
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}

.dme-v2 .dme-testi-score:hover {
  translate: 0 -4px;
  box-shadow: 0 20px 38px -18px rgba(39, 55, 117, 0.35), 0 0 0 1px rgba(39, 55, 117, 0.05);
}

.dme-v2 .dme-testi-score--trustpilot { width: 371px; }
.dme-v2 .dme-testi-score--google { width: 337px; }

.dme-v2 .dme-testi-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dme-v2 .dme-testi-score--google .dme-testi-brand {
  gap: 6px;
}

.dme-v2 .dme-testi-tp-logo {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dme-v2 .dme-testi-tp-logo img,
.dme-v2 .dme-testi-tp-stars img,
.dme-v2 .dme-testi-g-stars img {
  display: block;
  max-width: none;
}

.dme-v2 .dme-testi-tp-logo span {
  padding: 1px 0 2px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 26px;
  line-height: normal;
  letter-spacing: -0.52px;
  color: #191919;
}

.dme-v2 .dme-testi-tp-stars {
  display: flex;
  gap: 3px;
}

.dme-v2 .dme-testi-tp-stars > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #00b67a;
}

.dme-v2 .dme-testi-tp-stars > span.is-part {
  background: linear-gradient(90deg, #00b67a 80%, #dcdce6 80%);
}

.dme-v2 .dme-testi-g-logo {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.96px;
  color: #4285f4;
}

.dme-v2 .dme-testi-g-logo .c-red { color: #fc5d61; }
.dme-v2 .dme-testi-g-logo .c-yellow { color: #fbbc05; }
.dme-v2 .dme-testi-g-logo .c-green { color: #34a853; }

.dme-v2 .dme-testi-g-stars {
  display: flex;
  gap: 2px;
}

.dme-v2 .dme-testi-score-sep {
  flex: none;
  width: 1px;
  height: 58px;
  background: #e1e5ef;
}

.dme-v2 .dme-testi-score-num {
  display: flex;
  align-items: flex-end;
  margin: 0;
  font-family: var(--font-primary);
  white-space: nowrap;
}

.dme-v2 .dme-testi-score-num b {
  font-weight: 700;
  font-size: 30px;
  line-height: 33px;
  color: var(--c-blue);
}

.dme-v2 .dme-testi-score-num span {
  margin: 0 0 3.25px -1px;
  font-weight: 500;
  font-size: 15px;
  line-height: 16.5px;
  color: var(--c-placeholder);
}

.dme-v2 .dme-testi-badge {
  display: flex;
  flex: 0 1 452.11px;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.dme-v2 .dme-testi-badge-row {
  display: flex;
  gap: 18px;
  align-items: center;
  width: 100%;
}

.dme-v2 .dme-testi-badge-line {
  flex: 1 0 0;
  height: 1px;
  min-width: 1px;
  background: linear-gradient(90deg, rgba(201, 210, 234, 0), #c9d2ea);
}

.dme-v2 .dme-testi-badge-line:last-child {
  background: linear-gradient(90deg, #c9d2ea, rgba(201, 210, 234, 0));
}

.dme-v2 .dme-testi-badge-ico {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--c-white);
  border-radius: 23px;
  box-shadow: 0 8px 20px -8px rgba(39, 55, 117, 0.4);
}

.dme-v2 .dme-testi-badge-ico img {
  display: block;
  max-width: none;
}

.dme-v2 .dme-testi-badge p {
  margin: 0;
  padding-bottom: 1px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: #5b6584;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Testimonials animation ---------- */
/* script-v2.js .is-armed/.is-in: heading rises, cards rise in slot order
   (centre first), controls fade up, the rating strip rises with the
   shield popping. Idle: bubbles float, the badge lines shimmer. */
@keyframes dme-testi-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

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

@keyframes dme-testi-grow {
  from { opacity: 0; scale: 0 1; }
  to   { opacity: 1; scale: 1 1; }
}

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

@keyframes dme-testi-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.dme-v2 .dme-testi.is-armed:not(.is-in) :is(
  .dme-testi-head > *,
  .dme-testi-card,
  .dme-testi-dots,
  .dme-testi-arrow,
  .dme-testi-score,
  .dme-testi-badge-ico,
  .dme-testi-badge-line,
  .dme-testi-badge p,
  .dme-testi-bubble
) {
  opacity: 0;
}

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

.dme-v2 .dme-testi.is-in .dme-testi-head > :nth-child(2) { animation-delay: 0.1s; }
.dme-v2 .dme-testi.is-in .dme-testi-head > :nth-child(3) { animation-delay: 0.2s; }

.dme-v2 .dme-testi.is-in .dme-testi-card {
  animation: dme-testi-rise 0.75s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.dme-v2 .dme-testi.is-in .dme-testi-card.is-center { animation-delay: 0.3s; }
.dme-v2 .dme-testi.is-in .dme-testi-card.is-prev   { animation-delay: 0.42s; }
.dme-v2 .dme-testi.is-in .dme-testi-card.is-next   { animation-delay: 0.5s; }
.dme-v2 .dme-testi.is-in .dme-testi-card.is-after  { animation-delay: 0.58s; }

.dme-v2 .dme-testi.is-in .dme-testi-dots {
  animation: dme-testi-rise 0.5s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* The arrows' translate centres them, so they only fade. */
.dme-v2 .dme-testi.is-in .dme-testi-arrow {
  transition: opacity 0.5s 0.8s ease, scale 0.25s ease, box-shadow 0.25s ease;
}

.dme-v2 .dme-testi.is-in .dme-testi-score {
  animation: dme-testi-rise 0.7s 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.dme-v2 .dme-testi.is-in .dme-testi-score--google { animation-delay: 1s; }

.dme-v2 .dme-testi.is-in .dme-testi-badge-ico {
  animation: dme-testi-pop 0.6s 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.dme-v2 .dme-testi.is-in .dme-testi-badge-line {
  transform-origin: right center;
  animation: dme-testi-grow 0.6s 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.dme-v2 .dme-testi.is-in .dme-testi-badge-line:last-child {
  transform-origin: left center;
}

.dme-v2 .dme-testi.is-in .dme-testi-badge p {
  animation: dme-testi-rise 0.6s 1.15s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.dme-v2 .dme-testi.is-in .dme-testi-bubble {
  animation:
    dme-testi-pop 0.7s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    dme-testi-float 6s 1s ease-in-out infinite;
}

.dme-v2 .dme-testi.is-in .dme-testi-bubble--right {
  animation-delay: 0.3s, 2s;
}

.dme-v2 .dme-testi:not(.is-armed) .dme-testi-bubble {
  animation: dme-testi-float 6s ease-in-out infinite;
}

.dme-v2 .dme-testi-dotgrid i {
  animation: dme-testi-twinkle 3.2s calc(var(--d, 0) * 0.4s) ease-in-out infinite;
}

.dme-v2 .dme-testi-dotgrid i:nth-child(2) { --d: 1; }
.dme-v2 .dme-testi-dotgrid i:nth-child(3) { --d: 2; }
.dme-v2 .dme-testi-dotgrid i:nth-child(4) { --d: 3; }
.dme-v2 .dme-testi-dotgrid i:nth-child(5) { --d: 4; }

@media (prefers-reduced-motion: reduce) {
  .dme-v2 .dme-testi *,
  .dme-v2 .dme-testi *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Testimonials responsive ---------- */
/* Arrows move from 80px outside the track into the page gutter. */
@media (max-width: 1399px) {
  .dme-v2 .dme-testi-arrow--prev { left: calc(var(--page-gutter) / -2 - 24px); }
  .dme-v2 .dme-testi-arrow--next { right: calc(var(--page-gutter) / -2 - 24px); }
}

@media (max-width: 1299px) {
  .dme-v2 .dme-testi-bubble--left { left: 20px; }
  .dme-v2 .dme-testi-bubble--right { right: 20px; }
}

/* Three slots: the "after" card waits behind the next one. */
@media (max-width: 1199px) {
  .dme-v2 .dme-testi-card { --w: 26%; }
  .dme-v2 .dme-testi-card.is-prev { --x: 0%; }
  .dme-v2 .dme-testi-card.is-next,
  .dme-v2 .dme-testi-card.is-after { --x: 74%; }
  .dme-v2 .dme-testi-card.is-center { --x: 28%; --w: 44%; }

  .dme-v2 .dme-testi-card.is-after {
    z-index: 0;
    visibility: hidden;
    opacity: 0;
  }

  .dme-v2 .dme-testi-trust {
    flex-wrap: wrap;
    gap: 24px 32px;
  }

  .dme-v2 .dme-testi-badge {
    flex: 0 0 100%;
    order: -1;
  }

  .dme-v2 .dme-testi-badge-row {
    max-width: 452px;
  }
}

@media (max-width: 991px) {
  .dme-v2 .dme-testi {
    padding: 64px 0 56px;
  }

  .dme-v2 .dme-testi-bubble,
  .dme-v2 .dme-testi-dotgrid,
  .dme-v2 .dme-testi-ring,
  .dme-v2 .dme-testi-dot {
    display: none;
  }

  .dme-v2 .dme-testi-card { --w: 30%; padding: 22px 18px 20px; }
  .dme-v2 .dme-testi-card.is-next,
  .dme-v2 .dme-testi-card.is-after { --x: 70%; }
  .dme-v2 .dme-testi-card.is-center { --x: 31.5%; --w: 37%; padding: 28px 24px 24px; }

  .dme-v2 .dme-testi-card-top { gap: 12px; }

  .dme-v2 .dme-testi-card.is-center .dme-testi-quote {
    font-size: 16px;
    line-height: 27px;
  }

  .dme-v2 .dme-testi-score--trustpilot,
  .dme-v2 .dme-testi-score--google {
    width: auto;
  }
}

/* One card: the centre one fills the track, the others fade out beside it;
   the arrows sit either side of the dots. */
@media (max-width: 767px) {
  .dme-v2 .dme-testi .container-page {
    gap: 36px;
  }

  .dme-v2 .dme-testi-title {
    font-size: 28px;
    line-height: 34px;
  }

  /* Every card wears the centre styling here, so the track's height (the
     tallest card) stays put while the slides change. */
  .dme-v2 .dme-testi-track {
    align-items: start;
    min-height: 0;
  }

  .dme-v2 .dme-testi-card .dme-testi-card-top {
    justify-content: space-between;
  }

  .dme-v2 .dme-testi-card .dme-testi-quote,
  .dme-v2 .dme-testi-card.is-center .dme-testi-quote {
    font-weight: 500;
    font-size: 16px;
    line-height: 27px;
  }

  .dme-v2 .dme-testi-card .dme-testi-who b,
  .dme-v2 .dme-testi-card.is-center .dme-testi-who b {
    font-size: 16px;
    line-height: 21px;
  }

  .dme-v2 .dme-testi-card,
  .dme-v2 .dme-testi-card.is-center {
    --w: 100%;
    min-height: 0;
    padding: 28px 24px 24px;
  }

  .dme-v2 .dme-testi-card { --x: 8%; }
  .dme-v2 .dme-testi-card.is-prev { --x: -8%; }
  .dme-v2 .dme-testi-card.is-center { --x: 0%; }

  .dme-v2 .dme-testi-card:not(.is-center) {
    z-index: 0;
    visibility: hidden;
    opacity: 0;
  }

  .dme-v2 .dme-testi-card .dme-testi-card-top,
  .dme-v2 .dme-testi-card.is-center .dme-testi-card-top {
    height: 44px;
    margin-bottom: 14px;
  }

  .dme-v2 .dme-testi-card .dme-testi-mark,
  .dme-v2 .dme-testi-card.is-center .dme-testi-mark {
    font-size: 54px;
    line-height: 44px;
  }

  .dme-v2 .dme-testi-carousel {
    gap: 24px;
  }

  .dme-v2 .dme-testi-dots {
    align-items: center;
    height: 44px;
  }

  .dme-v2 .dme-testi-arrow {
    top: auto;
    bottom: 0;
    width: 44px;
    height: 44px;
    translate: none;
  }

  .dme-v2 .dme-testi-arrow--prev { left: calc(50% - 128px); }
  .dme-v2 .dme-testi-arrow--next { right: calc(50% - 128px); }
}

@media (max-width: 640px) {
  .dme-v2 .dme-testi-score--trustpilot,
  .dme-v2 .dme-testi-score--google {
    justify-content: center;
    width: 100%;
    max-width: 371px;
  }

  .dme-v2 .dme-testi-badge p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .dme-v2 .dme-testi {
    padding: 52px 0 44px;
  }

  .dme-v2 .dme-testi-title {
    font-size: 24px;
    line-height: 30px;
  }

  .dme-v2 .dme-testi-lead {
    font-size: 15px;
    line-height: 24px;
  }

  .dme-v2 .dme-testi-card .dme-testi-quote,
  .dme-v2 .dme-testi-card.is-center .dme-testi-quote {
    font-size: 15px;
    line-height: 25px;
  }

  .dme-v2 .dme-testi-card-top {
    gap: 12px;
  }

  .dme-v2 .dme-testi-score {
    gap: 18px;
    height: auto;
    min-height: 100px;
    padding: 18px 20px;
  }

  .dme-v2 .dme-testi-tp-logo span {
    font-size: 22px;
  }

  .dme-v2 .dme-testi-g-logo {
    font-size: 28px;
    line-height: 28px;
  }
}

@media (max-width: 360px) {
  .dme-v2 .dme-testi-card,
  .dme-v2 .dme-testi-card.is-center {
    padding: 24px 18px 20px;
  }

  .dme-v2 .dme-testi-verified {
    padding: 4px 9px 5px;
    font-size: 11px;
  }

  .dme-v2 .dme-testi-arrow--prev { left: 0; }
  .dme-v2 .dme-testi-arrow--next { right: 0; }

  .dme-v2 .dme-testi-score {
    gap: 14px;
    padding: 16px;
  }

  .dme-v2 .dme-testi-tp-stars > span {
    width: 20px;
    height: 20px;
  }

  .dme-v2 .dme-testi-tp-stars img {
    width: 13px;
    height: 13px;
  }

  .dme-v2 .dme-testi-g-stars img {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================= */
/* Book a consultation — Figma 10347:2611 (1440 x 727)              */
/* Reuses .bh-consult (layout, form card, gradient border drift,    */
/* entrance, responsive). DME drops the logo footer strip; the      */
/* copy column is sized by its 629px badge row, which keeps Figma's */
/* three-line title wrap ("…Slowing Your / DME Business.").         */
/* ============================================================= */
.dme-v2 .bh-consult-copy {
  flex: 0 1 629px;
}

/* Figma's 111px text width; BH's 116px puts "Cleaner Claims." on one line. */
.dme-v2 .bh-consult-badge > span:last-child {
  width: 111px;
  margin-right: -7px;
}

@media (max-width: 1199px) {
  .dme-v2 .bh-consult-copy {
    flex: none;
  }
}

/* ============================================================= */
/* FAQs — Figma 10347:2770 (518px intro | 660px accordion)          */
/* Reuses .bh-faq (accordion, entrance, responsive). DME has no     */
/* illustration: the intro is left-aligned and the pills span a     */
/* 434px column.                                                    */
/* ============================================================= */
.dme-v2 .bh-faq-intro {
  align-items: flex-start;
}

.dme-v2 .bh-faq-pills {
  width: 434px;
  max-width: 100%;
}

.dme-v2 .bh-faq-pill-item,
.dme-v2 .bh-faq-pill-item:last-child {
  width: 100%;
}