/* ============================================================= */
/* Section: 10-integrations */
/* ============================================================= */
/* ===== Integrations ("C2") — Figma node 12183:1326 (1440 x 1080; 40px top padding, 40px gaps) =====
   Same component as the Workers' Comp page's ai-track section; sizes and positions re-checked
   against this page's Figma node. */
.ai-track {
  position: relative;
}

.ai-track-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.ai-track-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 9.069px;
  background: rgba(39, 55, 117, 0.1);
  color: var(--ai-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 9.976px;
  white-space: nowrap;
}

.ai-track-accent {
  color: var(--ai-orange);
}

.ai-track .ai-track-title {
  max-width: 776px;
  color: var(--ai-blue);
  font-size: 32px;
  font-weight: 700;
  line-height: 45px;
}

.ai-track-lead {
  max-width: 1008px;
  color: var(--ai-text);
  font-size: 16px;
  line-height: 25.2px;
}

/* ---------- Diagram (12183:1332, 1240 x 580) ---------- */
.ai-track-diagram {
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: 580px;
  margin: 40px auto 0;
}

.ai-track-cards {
  display: contents;
}

.ai-track-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 24px;
  border-radius: 20px;
  background: var(--ai-white);
  box-shadow: 0 4px 13px rgba(39, 55, 117, 0.09);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ai-track-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(39, 55, 117, 0.16);
}

.ai-track-card--ehr {
  top: 45.28px;
  left: 0;
  width: 378px;
  height: 280px;
}

.ai-track-card--clearing {
  top: 45.28px;
  right: 0;
  width: 378px;
  height: 280px;
}

.ai-track-card--pms {
  top: 385px;
  right: 0;
  left: 0;
  width: max-content; /* hugs its one-line text: 708px in Figma; auto margins centre it, keeping `transform` free for hover */
  margin: 0 auto;
}

.ai-track-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.ai-track-card-icon {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eef1fb;
  transition: background-color 0.3s ease;
}

.ai-track-card:hover .ai-track-card-icon {
  background: #e1e7fa;
}

.ai-track .ai-track-card-icon img {
  display: block;
  max-width: none;
}

.ai-track-card-heading {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8.25px;
  min-width: 0;
}

.ai-track-card--ehr .ai-track-card-heading {
  flex: 0 0 263px;
}

.ai-track-card--pms .ai-track-card-heading {
  flex: 0 0 auto;
}

.ai-track-card-title {
  color: var(--ai-blue);
  font-size: 18px;
  font-weight: 600;
  line-height: 23.76px;
}

.ai-track-card-rule {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--ai-orange);
  transform-origin: left center;
}

.ai-track-card-text {
  width: 100%;
  color: var(--ai-text);
  font-size: 14px;
  line-height: 25.2px;
}

/* Figma sets this on one 660px line and the card hugs it. */
.ai-track-card--pms .ai-track-card-text {
  white-space: nowrap;
}

.ai-track-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.ai-track-card--ehr .ai-track-logos + .ai-track-logos,
.ai-track-card--clearing .ai-track-logos + .ai-track-logos {
  width: 319px;
}

.ai-track-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--tw);
  padding: 10px;
  border: 1px solid #eff2ff;
  border-radius: 10px;
  background: var(--ai-white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ai-track-logo--fixed {
  height: 45px;
}

.ai-track-logo:hover {
  transform: translateY(-3px);
  border-color: #dfe4f7;
  box-shadow: 0 8px 16px rgba(39, 55, 117, 0.1);
}

.ai-track-logo-box {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--bw);
  max-width: 100%;
  height: var(--bh);
  overflow: hidden;
}

.ai-track .ai-track-logo-box img {
  position: absolute;
  top: var(--it);
  left: var(--il);
  width: var(--iw);
  height: var(--ih);
  max-width: none;
}

.ai-track .ai-track-logo-box img.ai-track-logo-cover {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hub (12183:1397) */
.ai-track-hub {
  position: absolute;
  top: 44.59px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 216px;
  height: 216px;
  margin-left: -108px;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(39, 55, 117, 0.12);
}

.ai-track-hub::after {
  /* soft halo that breathes after the entrance */
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(252, 93, 97, 0.12), rgba(39, 55, 117, 0.06) 70%, transparent);
  opacity: 0;
}

.ai-track-hub-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 194px;
  height: 194px;
  border-radius: 50%;
  background: #fcfcfe;
}

/* 2px dashed ring, blue on the left fading into orange on the right (as in Figma). */
.ai-track-hub-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--ai-blue) 30%, var(--ai-orange) 80%);
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)),
    repeating-conic-gradient(#000 0deg 3.4deg, transparent 3.4deg 6deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)) intersect,
    repeating-conic-gradient(#000 0deg 3.4deg, transparent 3.4deg 6deg);
}

.ai-track-hub-rings {
  position: relative;
  display: block;
  width: 50px;
  height: 32px;
}

.ai-track-hub-rings span {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 3px solid var(--ai-blue);
  border-radius: 50%;
}

.ai-track-hub-rings span + span {
  left: 18px;
  border-color: var(--ai-orange);
}

.ai-track-hub-label {
  width: 154px;
  color: var(--ai-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}

/* Spokes: 102px dashed lines with end dots (SVG 112.667 x 10.667). */
.ai-track .ai-track-spoke {
  position: absolute;
  display: block;
  width: 112.667px;
  height: 10.6667px;
  max-width: none;
}

.ai-track-spoke--left {
  top: 146.67px;
  left: 387.67px;
  rotate: 180deg; /* draws from the hub outwards */
}

.ai-track-spoke--right {
  top: 146.67px;
  left: 737.67px;
}

.ai-track-spoke--down {
  top: 317.67px;
  left: 564.67px;
  rotate: 90deg;
}

/* ---------- Benefits bar (12183:1408) ---------- */
.ai-track .ai-track-benefits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1240px;
  margin: 40px auto 0;
  padding: 20px 12px;
  border-radius: 18px;
  background: var(--ai-white);
  box-shadow: 0 10px 15px rgba(39, 55, 117, 0.08);
}

.ai-track-benefit {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 0 18px 0 19px;
}

.ai-track-benefit:first-child {
  padding-left: 18px;
}

.ai-track-benefit-icon {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--ai-white);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ai-track-benefit:hover .ai-track-benefit-icon {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(39, 55, 117, 0.18);
}

.ai-track .ai-track-benefit-icon img {
  display: block;
  max-width: none;
}

.ai-track-benefit-text {
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 1px;
  color: var(--ai-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
}

.ai-track-benefit-sep {
  display: flex;
  flex: 0 0 1px;
  align-items: center;
  justify-content: center;
  width: 1px;
  height: 43px;
}

.ai-track .ai-track-benefit-sep img {
  display: block;
  width: 43px;
  height: 1px;
  max-width: none;
  rotate: 90deg;
}

/* ---------- Button (12183:1439) ---------- */
.ai-track-actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.ai-track-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 15px 71px;
  border: 1px solid var(--ai-white);
  border-radius: 100px;
  background: var(--ai-blue);
  color: var(--ai-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 12px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ai-track-btn:hover,
.ai-track-btn:focus-visible {
  color: var(--ai-white);
  background: #1b285c;
  transform: translateY(-2px);
}

/* ---------- Animation ---------- */
/* Same sequence and timing as the integrations diagram on the other v2 pages
   (behavioral-health-v2.css, "Integrations animation"): heading rises, the hub
   springs in and its dashed ring starts turning, spokes draw out from the hub,
   the three cards slide in from their own side with logos popping in turn,
   then the benefits bar. Data pulses keep travelling hub -> card along the spokes. */
@keyframes ai-track-pop {
  0%   { opacity: 0; scale: 0.3; }
  70%  { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

@keyframes ai-track-breathe {
  0%, 100% { opacity: 0.5; scale: 0.92; }
  50%      { opacity: 1; scale: 1.08; }
}

@keyframes ai-track-spin {
  to { rotate: 360deg; }
}

@keyframes ai-track-draw-x {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes ai-track-grow-x {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes ai-track-grow-y {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

@keyframes ai-track-spring {
  0%   { opacity: 0; scale: 0.5; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

@keyframes ai-track-logo-pop {
  0%   { opacity: 0; scale: 0.6; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

@keyframes ai-track-from-below {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Pulse runs along the spoke box; spokes are rotated so this is always hub -> card. */
@keyframes ai-track-pulse {
  0%   { opacity: 0; left: 8%; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; left: 88%; }
}

.ai-track.is-armed:not(.is-in) :is(
  .ai-track-head > *,
  .ai-track-hub,
  .ai-track-spoke,
  .ai-track-card,
  .ai-track-logo,
  .ai-track-card-rule,
  .ai-track-benefits,
  .ai-track-benefit,
  .ai-track-benefit-sep,
  .ai-track-actions
) {
  opacity: 0;
}

/* 1. heading */
.ai-track.is-in .ai-track-head > * { animation: ai-rise 0.7s var(--ai-ease) backwards; }
.ai-track.is-in .ai-track-head > :nth-child(2) { animation-delay: 0.1s; }
.ai-track.is-in .ai-track-head > :nth-child(3) { animation-delay: 0.2s; }

/* 2. hub springs in; halo breathes and the dashed ring turns (24s, as elsewhere) */
.ai-track.is-in .ai-track-hub {
  animation: ai-track-spring 0.8s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.ai-track.is-in .ai-track-hub::after {
  animation: ai-track-breathe 3.2s ease-in-out 1.2s infinite;
}

.ai-track-hub-inner::before {
  animation: ai-track-spin 24s linear infinite;
}

.ai-track.is-in .ai-track-hub-rings span {
  animation: ai-track-pop 0.6s var(--ai-ease) 0.7s backwards;
}

.ai-track.is-in .ai-track-hub-rings span + span {
  animation-delay: 0.82s;
}

/* 3. spokes draw out from the hub (their rotation makes draw-x run outward) */
.ai-track.is-in .ai-track-spoke {
  animation: ai-track-draw-x 0.6s 0.8s ease-out backwards;
}

/* data pulses (orange dot with a soft ring, same as the other pages) */
.ai-track-pulse {
  position: absolute;
  display: block;
  width: 112.667px;
  height: 10.6667px;
  pointer-events: none;
}

.ai-track-pulse--left  { top: 146.67px; left: 387.67px; rotate: 180deg; }
.ai-track-pulse--right { top: 146.67px; left: 737.67px; }
.ai-track-pulse--down  { top: 317.67px; left: 564.67px; rotate: 90deg; }

.ai-track-pulse::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ai-orange);
  box-shadow: 0 0 0 4px rgba(252, 93, 97, 0.18);
  opacity: 0;
  translate: 0 -50%;
}

.ai-track.is-in .ai-track-pulse::after {
  animation: ai-track-pulse 2.4s 2s ease-in-out infinite;
}

.ai-track.is-in .ai-track-pulse--left::after { animation-delay: 2.4s; }
.ai-track.is-in .ai-track-pulse--down::after { animation-delay: 2.8s; }

/* 4. cards slide in from their side: EHR left, clearinghouse right, PMS from below */
.ai-track.is-in .ai-track-card--ehr      { animation: ai-slide-left 0.7s 1s var(--ai-ease) backwards; }
.ai-track.is-in .ai-track-card--clearing { animation: ai-slide-right 0.7s 1.1s var(--ai-ease) backwards; }
.ai-track.is-in .ai-track-card--pms      { animation: ai-track-from-below 0.7s 1.2s var(--ai-ease) backwards; }

.ai-track.is-in .ai-track-card-rule {
  animation: ai-track-grow-x 0.5s 1.4s ease-out backwards;
}

/* logos pop in one after another across the three cards (--n set below) */
.ai-track.is-in .ai-track-logo {
  animation: ai-track-logo-pop 0.5s calc(1.35s + var(--n, 0) * 0.08s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.ai-track-card--ehr .ai-track-logos:first-of-type .ai-track-logo:nth-child(1)  { --n: 0; }
.ai-track-card--ehr .ai-track-logos:first-of-type .ai-track-logo:nth-child(2)  { --n: 1; }
.ai-track-card--ehr .ai-track-logos + .ai-track-logos .ai-track-logo:nth-child(1) { --n: 2; }
.ai-track-card--ehr .ai-track-logos + .ai-track-logos .ai-track-logo:nth-child(2) { --n: 3; }
.ai-track-card--clearing .ai-track-logos:first-of-type .ai-track-logo:nth-child(1)  { --n: 4; }
.ai-track-card--clearing .ai-track-logos:first-of-type .ai-track-logo:nth-child(2)  { --n: 5; }
.ai-track-card--clearing .ai-track-logos + .ai-track-logos .ai-track-logo:nth-child(1) { --n: 6; }
.ai-track-card--clearing .ai-track-logos + .ai-track-logos .ai-track-logo:nth-child(2) { --n: 7; }
.ai-track-card--pms .ai-track-logo:nth-child(1) { --n: 8; }
.ai-track-card--pms .ai-track-logo:nth-child(2) { --n: 9; }
.ai-track-card--pms .ai-track-logo:nth-child(3) { --n: 10; }
.ai-track-card--pms .ai-track-logo:nth-child(4) { --n: 11; }

/* 5. benefits bar after the diagram, then the CTA */
.ai-track.is-in .ai-track-benefits {
  animation: ai-rise 0.7s 1.5s var(--ai-ease) backwards;
}

.ai-track.is-in .ai-track-benefit {
  animation: ai-rise 0.6s 1.65s var(--ai-ease) backwards;
}

.ai-track.is-in .ai-track-benefit:nth-child(3) { animation-delay: 1.75s; }
.ai-track.is-in .ai-track-benefit:nth-child(5) { animation-delay: 1.85s; }
.ai-track.is-in .ai-track-benefit:nth-child(7) { animation-delay: 1.95s; }

.ai-track.is-in .ai-track-benefit-sep {
  animation: ai-track-grow-y 0.5s 1.9s var(--ai-ease) backwards;
}

.ai-track.is-in .ai-track-benefit-icon img {
  animation: ai-track-pop 0.55s 1.8s var(--ai-ease) backwards;
}

.ai-track.is-in .ai-track-actions {
  animation: ai-rise 0.7s 2.1s var(--ai-ease) backwards;
}

/* The pulses ride the desktop spokes; hide them wherever the spokes are hidden. */
@media (max-width: 1199px) {
  .ai-track-pulse {
    display: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  /* The 1240px hub-and-spoke canvas no longer fits: hub on top, nodes in a grid. */
  .ai-track-diagram {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    height: auto;
  }

  .ai-track .ai-track-spoke {
    display: none;
  }

  .ai-track-hub {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0 0 8px;
  }

  .ai-track-card,
  .ai-track-card--ehr,
  .ai-track-card--clearing,
  .ai-track-card--pms {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0;
  }

  .ai-track-card--pms {
    grid-column: 1 / -1;
  }

  .ai-track-card--pms .ai-track-card-text {
    white-space: normal;
  }

  .ai-track-card--pms .ai-track-card-heading {
    flex: 1 1 0;
  }

  .ai-track-logos {
    flex-wrap: wrap;
    gap: 14px;
  }

  .ai-track-card--ehr .ai-track-logos + .ai-track-logos,
  .ai-track-card--clearing .ai-track-logos + .ai-track-logos {
    width: 100%;
  }

  .ai-track-card--ehr .ai-track-card-heading {
    flex: 1 1 0;
  }

  .ai-track .ai-track-benefits {
    flex-wrap: wrap;
    row-gap: 18px;
    padding: 20px 8px;
  }

  .ai-track-benefit {
    flex: 1 1 calc(50% - 1px);
    justify-content: flex-start;
  }

  .ai-track-benefit-sep {
    display: none;
  }
}

@media (max-width: 991px) {
  .ai-track .ai-track-title {
    font-size: 30px;
    line-height: 40px;
  }

  .ai-track-lead {
    font-size: 15px;
    line-height: 24px;
  }
}

/* Mobile-only flow arrows, hidden on larger screens. */
.ai-track-arrow {
  display: none;
}

/* ---------- Phones (no mobile Figma for this page; same layout as the WC page's c2-mobile) ----------
   Header (12px gaps): small eyebrow, 24/35 title, 14/20 lead. 32px to a stacked flow (16px gaps):
   EHR card, arrow, 216px hub, arrow, carrier card, practice management card. Then the benefits
   list and a full-width button, 32px apart. Logo tiles in the first two cards are the desktop
   tiles scaled down (0.731 / 0.703); the practice management logos sit 2 x 2. */
@media (max-width: 767px) {
  .ai-track .ai-container {
    padding-right: 36px;
    padding-left: 36px;
  }

  .ai-track .ai-track-card-icon img {
    width: 18px;
    height: 18px;
  }

  .ai-track .ai-track-card--pms .ai-track-card-icon img {
    width: 16.6154px;
    height: 16.6154px;
  }

  /* Header (11966:2773) */
  .ai-track-head {
    gap: 12px;
  }

  .ai-track .ai-track-eyebrow {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 14px;
  }

  .ai-track .ai-track-title {
    font-size: 24px;
    line-height: 35px;
  }

  .ai-track-lead {
    font-size: 14px;
    line-height: 20px;
  }

  /* Flow (11966:2778) */
  .ai-track-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
  }

  .ai-track-arrow {
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
  }

  .ai-track-card--ehr      { order: 1; }
  .ai-track-arrow--1       { order: 2; }
  .ai-track-hub            { order: 3; }
  .ai-track-arrow--2       { order: 4; }
  .ai-track-card--clearing { order: 5; }
  .ai-track-card--pms      { order: 6; }

  .ai-track-card,
  .ai-track-card--ehr,
  .ai-track-card--clearing,
  .ai-track-card--pms {
    width: 100%;
    padding: 26px 24px;
  }

  .ai-track-card:hover {
    transform: none;
  }

  .ai-track-card-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 9.692px;
  }

  .ai-track-card-title {
    font-size: 16px;
  }

  .ai-track-card--ehr .ai-track-card-title {
    white-space: nowrap;
  }

  /* Logo rows */
  .ai-track-card--ehr .ai-track-logos {
    flex-wrap: nowrap;
    gap: 14.62px;
  }

  .ai-track-card--clearing .ai-track-logos {
    flex-wrap: nowrap;
    gap: 14.063px;
  }

  .ai-track-card--ehr .ai-track-logo { zoom: 0.731; }
  .ai-track-card--clearing .ai-track-logo { zoom: 0.7031; }

  .ai-track-card--ehr .ai-track-logos + .ai-track-logos,
  .ai-track-card--clearing .ai-track-logos + .ai-track-logos {
    width: 319px;
    max-width: 100%;
  }

  /* Practice management logos (11966:2843): two rows of two, 8px / 20px gaps, 37px tiles. */
  .ai-track-card--pms .ai-track-logos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    gap: 8px 20px;
  }

  .ai-track-card--pms .ai-track-logo {
    width: auto;
    height: 37px;
    padding: 6px;
    border-radius: 6px;
  }

  .ai-track-card--pms .ai-track-logo:nth-child(3),
  .ai-track-card--pms .ai-track-logo:nth-child(4) {
    width: 94px;
  }

  /* The tiles carry their desktop crop as inline custom properties, hence !important. */
  .ai-track-card--pms .ai-track-logo:nth-child(1) .ai-track-logo-box { --bw: 82px !important; --bh: 20px !important; }
  .ai-track-card--pms .ai-track-logo:nth-child(1) img { --iw: 100% !important; --ih: 83.58% !important; --il: 0% !important; --it: 7.02% !important; }
  .ai-track-card--pms .ai-track-logo:nth-child(2) .ai-track-logo-box { --bw: 78px !important; --bh: 21px !important; }
  .ai-track-card--pms .ai-track-logo:nth-child(2) img { --iw: 100% !important; --ih: 89.08% !important; --il: 0% !important; --it: 4.76% !important; }
  .ai-track-card--pms .ai-track-logo:nth-child(3) .ai-track-logo-box { --bw: 60px !important; --bh: 17.045px !important; }
  .ai-track-card--pms .ai-track-logo:nth-child(4) .ai-track-logo-box { --bw: 58px !important; --bh: 21.581px !important; }

  .ai-track .ai-track-card--pms .ai-track-logo:nth-child(3) img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hub (11966:2802): one 216px dashed ring. */
  .ai-track-hub {
    flex: none;
    width: 216px;
    height: 216px;
    margin: 0;
    box-shadow: 0 4px 10px rgba(39, 55, 117, 0.12);
  }

  .ai-track-hub-inner {
    gap: 4px;
    width: 216px;
    height: 216px;
    padding: 16px;
    background: #ffffff;
  }

  .ai-track-hub-rings {
    width: 38px;
    height: 24px;
  }

  .ai-track-hub-rings span {
    width: 24px;
    height: 24px;
    border-width: 2.5px;
  }

  .ai-track-hub-rings span + span {
    left: 14px;
  }

  .ai-track-hub-label {
    width: 184px;
  }

  /* Benefits (12098:2436): stacked rows with full-width rules. */
  .ai-track .ai-track-benefits {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 32px;
    padding: 20px 12px;
  }

  .ai-track-benefit {
    flex: none;
    justify-content: center;
    height: 43px;
    padding: 0 18px 0 19px;
  }

  .ai-track-benefit:first-child {
    padding-left: 18px;
  }

  .ai-track-benefit-sep {
    display: block;
    flex: none;
    width: 100%;
    height: 1px;
  }

  .ai-track .ai-track-benefit-sep img {
    width: 100%;
    rotate: none;
  }

  /* Button (11966:2885) */
  .ai-track-actions {
    margin-top: 32px;
  }

  .ai-track-btn {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 15px 10px;
    font-size: 12px;
    line-height: 20px;
  }
}