/* ==========================================================================
   COMPONENT: WHY US / SUCCESS GUARANTEES (mrtcptilu) — v2
   Editorial numbered guarantee list on index; classic cards kept intact
   for the 11 service pages (same classes, untouched below).
   Policy: Zero Magic Numbers. JS-gated reveal (visible without JS).
   ========================================================================== */

:root {
  --mrtcptilu-card-bg: #ffffff;
  --mrtcptilu-card-border: rgba(0, 0, 0, 0.07);
  --mrtcptilu-ink: #0f766e;
  --mrtcptilu-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -- Index guarantee list -- */
.mrtcptilu-guarantees {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--mrtc-color-dark);
}

.mrtcptilu-guarantee {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--mrtc-space-lg);
  padding: var(--mrtc-space-lg) var(--mrtc-space-sm);
  border-bottom: 1px solid var(--mrtc-color-border);
  transition: background-color var(--mrtc-transition-fast) ease,
    padding var(--mrtc-transition-fast) var(--mrtcptilu-ease);
}

.mrtcptilu-guarantee:hover {
  background-color: rgba(188, 224, 223, 0.22);
}

.mrtcptilu-guarantee-num {
  font-size: var(--mrtc-font-size-4xl);
  font-weight: 900;
  line-height: 1;
  color: rgba(0, 0, 0, 0.14);
  font-variant-numeric: tabular-nums;
  transition: color var(--mrtc-transition-fast) ease;
}

.mrtcptilu-guarantee:hover .mrtcptilu-guarantee-num {
  color: var(--mrtcptilu-ink);
}

.mrtcptilu-guarantee-body h3 {
  font-size: var(--mrtc-font-size-xl);
  font-weight: 800;
  color: var(--mrtc-color-dark);
  margin-bottom: var(--mrtc-space-2xs);
}

.mrtcptilu-guarantee-body p {
  font-size: var(--mrtc-font-size-base);
  color: var(--mrtc-color-text-body);
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 640px;
}

.mrtcptilu-guarantee-check {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--mrtc-radius-full);
  background: var(--mrtc-color-brand);
  color: var(--mrtc-color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--mrtc-transition-fast) ease,
    color var(--mrtc-transition-fast) ease,
    transform var(--mrtc-transition-fast) var(--mrtcptilu-ease);
}

.mrtcptilu-guarantee-check svg {
  width: 22px;
  height: 22px;
}

.mrtcptilu-guarantee:hover .mrtcptilu-guarantee-check {
  background: var(--mrtc-color-dark);
  color: var(--mrtc-color-brand);
  transform: scale(1.06);
}

/* -- Section closing CTA -- */
.mrtcptilu-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mrtc-space-md);
  margin-top: var(--mrtc-space-2xl);
}

.mrtcptilu-cta-call {
  display: inline-flex;
  align-items: center;
  gap: var(--mrtc-space-xs);
  font-weight: 800;
  font-size: var(--mrtc-font-size-base);
  color: var(--mrtc-color-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--mrtc-color-brand);
  padding-bottom: 2px;
  transition: color var(--mrtc-transition-fast) ease,
    border-color var(--mrtc-transition-fast) ease;
}

.mrtcptilu-cta-call:hover {
  color: var(--mrtcptilu-ink);
  border-color: var(--mrtcptilu-ink);
}

.mrtcptilu-cta-call span[dir] {
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* -- Staggered reveal (hidden ONLY when JS opts in) -- */
.mrtcptilu-anim .mrtcptilu-guarantee,
.mrtcptilu-anim .mrtcptilu-cta {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--mrtcptilu-ease), transform 0.55s var(--mrtcptilu-ease);
}

.mrtcptilu-anim.is-inview .mrtcptilu-guarantee,
.mrtcptilu-anim.is-inview .mrtcptilu-cta {
  opacity: 1;
  transform: none;
}

.mrtcptilu-anim.is-inview .mrtcptilu-guarantee:nth-child(1) { transition-delay: 0.05s; }
.mrtcptilu-anim.is-inview .mrtcptilu-guarantee:nth-child(2) { transition-delay: 0.12s; }
.mrtcptilu-anim.is-inview .mrtcptilu-guarantee:nth-child(3) { transition-delay: 0.19s; }
.mrtcptilu-anim.is-inview .mrtcptilu-guarantee:nth-child(4) { transition-delay: 0.26s; }
.mrtcptilu-anim.is-inview .mrtcptilu-guarantee:nth-child(5) { transition-delay: 0.33s; }
.mrtcptilu-anim.is-inview .mrtcptilu-guarantee:nth-child(6) { transition-delay: 0.4s; }
.mrtcptilu-anim.is-inview .mrtcptilu-cta { transition-delay: 0.48s; }

.mrtcptilu a:focus-visible {
  outline: 2px solid var(--mrtcptilu-ink);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .mrtcptilu-guarantee {
    grid-template-columns: auto 1fr;
    gap: var(--mrtc-space-md);
    padding: var(--mrtc-space-md) var(--mrtc-space-2xs);
  }

  .mrtcptilu-guarantee-check {
    display: none;
  }

  .mrtcptilu-guarantee-num {
    font-size: var(--mrtc-font-size-2xl);
  }

  .mrtcptilu-cta {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mrtcptilu::before,
  .mrtcptilu::after {
    animation: none;
  }

  .mrtcptilu-anim .mrtcptilu-guarantee,
  .mrtcptilu-anim .mrtcptilu-cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.mrtcptilu {
  background-color: var(--mrtc-color-bg-alt);
  border-block: 1px solid var(--mrtc-color-border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* -- Slow-drifting background auras (CSS only, brand palette only) -- */
.mrtcptilu::before,
.mrtcptilu::after {
  content: "";
  position: absolute;
  border-radius: var(--mrtc-radius-full);
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

.mrtcptilu::before {
  width: 480px;
  height: 480px;
  top: -140px;
  right: -140px;
  background: rgba(188, 224, 223, 0.35);
  animation: mrtcptilu-drift-a 22s ease-in-out infinite alternate;
}

.mrtcptilu::after {
  width: 420px;
  height: 420px;
  bottom: -160px;
  left: -120px;
  background: rgba(188, 224, 223, 0.28);
  animation: mrtcptilu-drift-b 26s ease-in-out infinite alternate;
}

@keyframes mrtcptilu-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-70px, 60px, 0) scale(1.12); }
}

@keyframes mrtcptilu-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to { transform: translate3d(60px, -50px, 0) scale(1); }
}

.mrtcptilu > .mrtc-container {
  position: relative;
  z-index: 1;
}

.mrtcptilu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mrtc-space-xl);
}

.mrtcptilu-card {
  padding: var(--mrtc-space-xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.mrtcptilu-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mrtc-space-lg);
}

.mrtcptilu-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--mrtc-radius-md);
  background: var(--mrtc-color-brand);
  color: var(--mrtc-color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(188, 224, 223, 0.5);
}

.mrtcptilu-icon-badge svg {
  width: 26px;
  height: 26px;
  stroke: var(--mrtc-color-dark);
}

.mrtcptilu-tag {
  font-size: var(--mrtc-font-size-xs);
  font-weight: 800;
  color: var(--mrtc-color-dark);
  background: rgba(188, 224, 223, 0.25);
  padding: var(--mrtc-space-2xs) var(--mrtc-space-xs);
  border-radius: var(--mrtc-radius-full);
}

.mrtcptilu-card h3 {
  font-size: var(--mrtc-font-size-xl);
  margin-bottom: var(--mrtc-space-sm);
  color: var(--mrtc-color-dark);
}

.mrtcptilu-card p {
  font-size: var(--mrtc-font-size-base);
  color: var(--mrtc-color-text-body);
  line-height: 1.65;
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .mrtcptilu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .mrtcptilu-grid {
    grid-template-columns: 1fr;
  }
}