/* regtech-hero.css
   RegTech Hero Section — follows the Arth Data Solutions design system
   (see css/global.css for the source palette / spacing scale).
   Scoped custom properties below mirror those tokens exactly so this
   file can be dropped into any page without depending on load order. */

/* Declared on :root (not scoped to .regtech-hero-section) so the bottom
   feature cards — a separate sibling section — can also see these tokens. */
:root {
  --rth-navy: #07133D;
  --rth-blue-600: #2563EB;
  --rth-blue-500: #3B82F6;
  --rth-blue-50: #EFF6FF;
  --rth-slate-500: #64748B;
  --rth-slate-200: #E2E8F0;
  --rth-slate-50: #F8FAFC;
  --rth-blue-100: #DBEAFE;
  --rth-blue-200: #BFDBFE;
  --rth-white: #FFFFFF;
  --rth-red-500: #EF4444;
  --rth-red-50: #FEF2F2;
  --rth-radius-sm: 8px;
  --rth-radius-md: 12px;
  --rth-radius-lg: 16px;
  --rth-transition-fast: 0.2s ease;
  --rth-transition-med: 0.3s ease;
}

.regtech-hero-section {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ==========================================================
   Hero section — plain background; the artwork lives in its
   own framed card in the right column (see below), the same
   way css/hero.css contains 360_image.webp on the homepage.
   ========================================================== */
.regtech-hero-section {
  position: relative;
  padding: 20px 24px 48px;
}

@media (min-width: 768px) {
  .regtech-hero-section {
    padding: 24px 48px 56px;
  }
}

@media (min-width: 1024px) {
  .regtech-hero-section {
    padding: 28px 96px 72px;
  }
}

/* ==========================================================
   Grid: left content column / right artwork column
   ========================================================== */
.regtech-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

.regtech-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 1024px) {
  .regtech-hero-grid {
    /* fr-based (not a fixed px max) so both columns shrink together at
       narrower desktop widths instead of one column claiming its full
       size first and crushing the other down to almost nothing.
       1.6:1.2 (vs. the previous 2:1) gives the artwork noticeably more
       room so the illustration reads clearly instead of looking small
       next to the heading. */
    grid-template-columns: 1.6fr 1.2fr;
    align-items: center;
    gap: 32px;
  }
}

.regtech-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Right column: the artwork, framed and contained like a card —
   swap only --rth-hero-bg-image to change the artwork. */
.regtech-hero-artwork-space {
  --rth-hero-bg-image: url('../assets/images/regtech_hero_bg.png');

  display: flex;
  justify-content: center;
}

.regtech-hero-artwork-frame {
  width: 100%;
  max-width: 560px;
  /* Matches the source artwork's actual 1536×1024 (3:2) proportions —
     the previous 4:3.2 ratio was narrower than the image, forcing
     background-size:cover to crop content off the edges and making
     the illustration look small/adrift inside its frame. */
  aspect-ratio: 3 / 2;
  border-radius: var(--rth-radius-lg);
  overflow: hidden;
  background-image: var(--rth-hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--rth-slate-50);
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.18), 0 4px 14px -4px rgba(15, 23, 42, 0.06);
}

@media (min-width: 1024px) {
  .regtech-hero-artwork-frame {
    max-width: none;
  }
}

/* ==========================================================
   Breadcrumb
   ========================================================== */
.regtech-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--rth-slate-500);
  margin-bottom: 4px;
}

.regtech-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--rth-slate-500);
  text-decoration: none;
  transition: color var(--rth-transition-fast);
}

.regtech-breadcrumb a:hover {
  color: var(--rth-navy);
}

.regtech-breadcrumb a svg,
.regtech-breadcrumb a i {
  width: 14px;
  height: 14px;
}

.regtech-breadcrumb .regtech-breadcrumb-sep {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--rth-slate-200);
  flex-shrink: 0;
}

.regtech-breadcrumb .regtech-breadcrumb-sep svg,
.regtech-breadcrumb .regtech-breadcrumb-sep i {
  width: 100%;
  height: 100%;
}

.regtech-breadcrumb .regtech-breadcrumb-current {
  color: var(--rth-blue-600);
  font-weight: 600;
}

/* ==========================================================
   Category badge
   ========================================================== */
.regtech-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
}

.regtech-badge svg,
.regtech-badge i {
  width: 16px;
  height: 16px;
  color: var(--rth-blue-600);
  flex-shrink: 0;
}

/* ==========================================================
   Heading
   ========================================================== */
.regtech-heading {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--rth-navy);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-heading {
    font-size: 42px;
  }
}

@media (min-width: 1024px) {
  .regtech-heading {
    font-size: 48px;
  }
}

.regtech-heading .regtech-accent {
  color: var(--rth-blue-600);
}

/* ==========================================================
   Description
   ========================================================== */
.regtech-description {
  max-width: 540px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-description {
    font-size: 17px;
  }
}

/* ==========================================================
   CTA buttons
   ========================================================== */
.regtech-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.regtech-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--rth-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rth-transition-fast),
    color var(--rth-transition-fast), border-color var(--rth-transition-fast),
    transform var(--rth-transition-fast), box-shadow var(--rth-transition-fast);
}

.regtech-btn-primary {
  background-color: var(--rth-navy);
  color: var(--rth-white);
  border: 1px solid var(--rth-navy);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.regtech-btn-primary:hover {
  background-color: #0b1f5e;
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -6px rgba(7, 19, 61, 0.35), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
}

.regtech-btn-secondary {
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  border: 1.5px solid var(--rth-blue-600);
}

.regtech-btn-secondary:hover {
  background-color: var(--rth-blue-50);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -6px rgba(37, 99, 235, 0.25);
}

.regtech-btn .regtech-btn-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--rth-transition-fast);
}

.regtech-btn:hover .regtech-btn-arrow {
  transform: translateX(3px);
}

/* ==========================================================
   Feature badges (pills)
   ========================================================== */
.regtech-feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (min-width: 1024px) {
  .regtech-feature-badges {
    flex-wrap: nowrap;
  }
}

.regtech-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background-color: var(--rth-white);
  color: #334155;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
  transition: transform var(--rth-transition-fast), box-shadow var(--rth-transition-fast);
}

.regtech-feature-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.15);
}

.regtech-feature-badge svg,
.regtech-feature-badge i {
  width: 15px;
  height: 15px;
  color: #22C55E;
  flex-shrink: 0;
}

/* ==========================================================
   Bottom feature cards
   ========================================================== */
.regtech-features-section {
  position: relative;
  z-index: 1;
  background-color: var(--rth-white);
  padding: 0 24px 64px;
}

@media (min-width: 768px) {
  .regtech-features-section {
    padding: 0 48px 80px;
  }
}

@media (min-width: 1024px) {
  .regtech-features-section {
    padding: 0 96px 96px;
  }
}

.regtech-features-container {
  max-width: 1280px;
  margin: -40px auto 0;
  background-color: var(--rth-white);
  border-radius: 20px;
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.18), 0 4px 14px -4px rgba(15, 23, 42, 0.06);
  padding: 36px 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 640px) {
  .regtech-features-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .regtech-features-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    padding: 40px 36px;
  }
}

.regtech-feature-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  padding: 8px;
  border-radius: var(--rth-radius-md);
}

.regtech-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--rth-blue-100);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.regtech-feature-icon svg,
.regtech-feature-icon i {
  width: 30px;
  height: 30px;
  stroke-width: 2.1;
}

.regtech-feature-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: 4px;
}

.regtech-feature-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.35;
  margin-bottom: 8px;
}

.regtech-feature-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rth-slate-500);
  margin: 0 0 12px;
}

.regtech-feature-divider {
  width: 28px;
  height: 3px;
  border-radius: 9999px;
  background-color: var(--rth-blue-600);
}

/* ==========================================================
   Entrance animation (staggered fade + slight upward move)
   ========================================================== */
@keyframes regtechFadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.regtech-animate {
  opacity: 0;
}

.regtech-animate.regtech-in-view {
  animation: regtechFadeInUp 0.6s ease forwards;
  animation-delay: var(--rth-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .regtech-animate {
    animation: none;
    opacity: 1;
  }
  .regtech-btn,
  .regtech-feature-badge {
    transition: none;
  }
}

/* ==========================================================
   "What is RegTech?" section
   ========================================================== */
.regtech-whatis-section {
  position: relative;
  overflow: hidden;
  background-color: var(--rth-slate-50);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-whatis-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-whatis-section {
    padding: 96px 96px;
  }
}

/* Optional background image layer — empty by default. Swap in a
   url() on --rth-whatis-bg-image (scoped to this section) to add one
   later without touching markup. */
.regtech-whatis-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--rth-whatis-bg-image, none);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}

/* Corner dot-grid decoration (mirrors the dot pattern already used
   in css/four-pillars.css for #services) */
.regtech-whatis-dots {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 130px;
  background-image: radial-gradient(circle, var(--rth-slate-200) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}

.regtech-whatis-dots-left {
  top: 32px;
  left: 24px;
  -webkit-mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
}

.regtech-whatis-dots-right {
  top: 32px;
  right: 24px;
  -webkit-mask-image: radial-gradient(ellipse at top right, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at top right, black 30%, transparent 75%);
}

@media (max-width: 767px) {
  .regtech-whatis-dots {
    display: none;
  }
}

.regtech-whatis-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* Centered header: eyebrow, heading, divider */
.regtech-whatis-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.regtech-whatis-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 640px;
  margin-bottom: 20px;
}

.regtech-whatis-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 180px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-whatis-eyebrow-row .regtech-whatis-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-whatis-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-whatis-eyebrow-row .regtech-whatis-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-whatis-eyebrow {
  display: inline-block;
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-blue-50);
  border: 1px solid var(--rth-blue-500);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
}

.regtech-whatis-heading {
  max-width: 640px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--rth-navy);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-whatis-heading {
    max-width: 720px;
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  .regtech-whatis-heading {
    max-width: 920px;
    font-size: 34px;
    white-space: nowrap;
  }
}

@media (min-width: 1280px) {
  .regtech-whatis-heading {
    max-width: none;
    font-size: 40px;
  }
}

.regtech-whatis-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-whatis-divider {
  width: 96px;
  height: 3px;
  border-radius: 9999px;
  background-color: var(--rth-blue-500);
  margin-top: 20px;
}

/* Two-column body: image + text. A fixed-aspect-ratio photo and
   reflowing paragraph text can't guarantee identical heights at every
   width, so the image is vertically centered against the text column —
   any leftover space splits evenly above/below instead of collecting
   as one lopsided gap. */
.regtech-whatis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

@media (min-width: 1024px) {
  .regtech-whatis-grid {
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .regtech-whatis-grid {
    /* fr-based (not a fixed px max) so both columns shrink together at
       narrower desktop widths instead of the image column claiming its
       full 620px first and crushing the text column down to almost
       nothing */
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
  }
}

/* Image column — placeholder frame, easy to swap the <img src> later */
.regtech-whatis-image-col {
  position: relative;
  display: flex;
  justify-content: center;
}

.regtech-whatis-image-glow {
  position: absolute;
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border-radius: 50%;
  background: rgba(191, 219, 254, 0.45);
  filter: blur(56px);
  pointer-events: none;
  z-index: 0;
}

.regtech-whatis-image-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 3 / 2;
  animation: regtechFloat 6s ease-in-out infinite;
}

.regtech-whatis-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

@media (prefers-reduced-motion: reduce) {
  .regtech-whatis-image-frame {
    animation: none;
  }
}

/* Text column */
.regtech-whatis-text-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
}

.regtech-whatis-text-col p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rth-slate-500);
  margin: 0;
}

.regtech-whatis-highlight {
  color: var(--rth-blue-600);
  font-weight: 700;
}

/* Bottom feature cards — single premium card, 6 equal columns,
   vertical separators on desktop */
.regtech-whatis-cards-container {
  position: relative;
  z-index: 1;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.12), 0 4px 14px -4px rgba(15, 23, 42, 0.06);
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 640px) {
  .regtech-whatis-cards-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }
}

@media (min-width: 1024px) {
  .regtech-whatis-cards-container {
    grid-template-columns: repeat(6, 1fr);
    padding: 40px 20px;
  }
}

.regtech-whatis-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 12px;
  border-radius: var(--rth-radius-md);
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med);
}

.regtech-whatis-card:hover {
  transform: translateY(-4px);
}

@media (min-width: 1024px) {
  .regtech-whatis-card:not(:last-child) {
    border-right: 1px solid var(--rth-slate-200);
  }
}

.regtech-whatis-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--rth-blue-200);
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform var(--rth-transition-fast);
}

.regtech-whatis-card:hover .regtech-whatis-card-icon {
  transform: scale(1.08);
}

.regtech-whatis-card-icon svg,
.regtech-whatis-card-icon i {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.regtech-whatis-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.35;
  margin: 0 0 10px;
}

.regtech-whatis-card-divider {
  width: 24px;
  height: 3px;
  border-radius: 9999px;
  background-color: var(--rth-blue-600);
  margin-bottom: 10px;
}

.regtech-whatis-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .regtech-whatis-card,
  .regtech-whatis-card-icon {
    transition: none;
  }
}

/* ==========================================================
   "The Challenge" section
   ========================================================== */
.regtech-challenge-section {
  position: relative;
  overflow: hidden;
  background-color: var(--rth-slate-50);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-challenge-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-challenge-section {
    padding: 96px 96px;
  }
}

/* Corner dot-grid decoration, matching the pattern already used above */
.regtech-challenge-dots {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 130px;
  background-image: radial-gradient(circle, var(--rth-slate-200) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}

.regtech-challenge-dots-left {
  top: 32px;
  left: 24px;
  -webkit-mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
}

.regtech-challenge-dots-right {
  bottom: 32px;
  right: 24px;
  -webkit-mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
}

@media (max-width: 767px) {
  .regtech-challenge-dots {
    display: none;
  }
}

/* Subtle radial highlight blobs — soft, low-opacity, same blue tones
   used throughout the section, never a new color */
.regtech-challenge-glow {
  position: absolute;
  z-index: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 219, 254, 0.35), transparent 70%);
  pointer-events: none;
}

.regtech-challenge-glow-left {
  top: -120px;
  left: -140px;
}

.regtech-challenge-glow-right {
  bottom: -140px;
  right: -140px;
  background: radial-gradient(circle, rgba(191, 219, 254, 0.3), transparent 70%);
}

.regtech-challenge-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* Centered header: eyebrow, heading, paragraph */
.regtech-challenge-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.regtech-challenge-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  margin-bottom: 20px;
}

.regtech-challenge-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 140px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-challenge-eyebrow-row .regtech-challenge-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-challenge-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-challenge-eyebrow-row .regtech-challenge-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-challenge-eyebrow {
  display: inline-block;
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-challenge-heading {
  max-width: 720px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--rth-navy);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-challenge-heading {
    font-size: 38px;
  }
}

@media (min-width: 1024px) {
  .regtech-challenge-heading {
    font-size: 46px;
  }
}

.regtech-challenge-heading-accent {
  background-image: linear-gradient(90deg, var(--rth-blue-600), var(--rth-blue-500));
}

.regtech-challenge-desc {
  margin-top: 20px;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
}

@media (min-width: 640px) {
  .regtech-challenge-desc {
    font-size: 17px;
  }
}

/* Six challenge cards */
.regtech-challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

@media (min-width: 640px) {
  .regtech-challenge-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .regtech-challenge-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.regtech-challenge-card {
  position: relative;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  padding: 32px 28px;
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08);
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med);
}

.regtech-challenge-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.18);
}

.regtech-challenge-icon-wrap {
  position: relative;
  display: inline-flex;
  margin-bottom: 20px;
}

.regtech-challenge-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: var(--rth-red-50);
  color: var(--rth-red-500);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: regtechIconFloat 4.5s ease-in-out infinite;
}

.regtech-challenge-icon svg,
.regtech-challenge-icon i {
  width: 32px;
  height: 32px;
  stroke-width: 1.8;
}

/* Stagger the icon float per card so they don't all bob in sync */
.regtech-challenge-card:nth-child(2) .regtech-challenge-icon { animation-delay: 0.3s; }
.regtech-challenge-card:nth-child(3) .regtech-challenge-icon { animation-delay: 0.6s; }
.regtech-challenge-card:nth-child(4) .regtech-challenge-icon { animation-delay: 0.9s; }
.regtech-challenge-card:nth-child(5) .regtech-challenge-icon { animation-delay: 1.2s; }
.regtech-challenge-card:nth-child(6) .regtech-challenge-icon { animation-delay: 1.5s; }

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

/* Soft pulse ring behind the icon */
.regtech-challenge-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(239, 68, 68, 0.14);
  animation: regtechPulseRing 2.6s ease-out infinite;
}

.regtech-challenge-card:nth-child(2) .regtech-challenge-icon-wrap::before { animation-delay: 0.3s; }
.regtech-challenge-card:nth-child(3) .regtech-challenge-icon-wrap::before { animation-delay: 0.6s; }
.regtech-challenge-card:nth-child(4) .regtech-challenge-icon-wrap::before { animation-delay: 0.9s; }
.regtech-challenge-card:nth-child(5) .regtech-challenge-icon-wrap::before { animation-delay: 1.2s; }
.regtech-challenge-card:nth-child(6) .regtech-challenge-icon-wrap::before { animation-delay: 1.5s; }

@keyframes regtechPulseRing {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Small floating close/cross indicator, partially overlapping the icon circle */
.regtech-challenge-close {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--rth-red-500);
  color: var(--rth-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(239, 68, 68, 0.45);
}

.regtech-challenge-close svg,
.regtech-challenge-close i {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.regtech-challenge-card-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rth-navy);
  margin: 0 0 12px;
}

.regtech-challenge-card-divider {
  width: 28px;
  height: 3px;
  border-radius: 9999px;
  background-color: var(--rth-red-500);
  margin-bottom: 14px;
}

.regtech-challenge-card-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

/* Bottom enterprise statistics panel */
.regtech-challenge-stats {
  position: relative;
  z-index: 1;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.12), 0 4px 14px -4px rgba(15, 23, 42, 0.06);
  padding: 32px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  transition: box-shadow var(--rth-transition-med);
}

.regtech-challenge-stats:hover {
  box-shadow: 0 24px 55px -15px rgba(15, 23, 42, 0.16), 0 4px 14px -4px rgba(15, 23, 42, 0.08);
}

@media (min-width: 640px) {
  .regtech-challenge-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
}

@media (min-width: 1024px) {
  .regtech-challenge-stats {
    grid-template-columns: repeat(4, 1fr);
    padding: 36px 32px;
  }
}

.regtech-challenge-stat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 8px;
}

@media (min-width: 1024px) {
  .regtech-challenge-stat:not(:last-child) {
    border-right: 1px solid var(--rth-slate-200);
  }
}

@media (max-width: 1023px) and (min-width: 640px) {
  .regtech-challenge-stat:nth-child(odd) {
    border-right: 1px solid var(--rth-slate-200);
  }
}

.regtech-challenge-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.regtech-challenge-stat-icon svg,
.regtech-challenge-stat-icon i {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.regtech-challenge-stat-lead {
  align-items: center;
}

.regtech-challenge-stat-lead-text {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rth-navy);
  margin: 0;
}

.regtech-challenge-stat-body {
  min-width: 0;
}

.regtech-challenge-stat-number {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--rth-blue-600);
  margin-bottom: 2px;
}

.regtech-challenge-stat-label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--rth-navy);
  margin-bottom: 6px;
}

.regtech-challenge-stat-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .regtech-challenge-card,
  .regtech-challenge-stats {
    transition: none;
  }
  .regtech-challenge-icon,
  .regtech-challenge-icon-wrap::before {
    animation: none;
  }
}

/* ==========================================================
   "How It Works" section
   ========================================================== */
.regtech-how-section {
  --rth-how-radius-xl: 24px;
  position: relative;
  overflow: hidden;
  background-color: var(--rth-white);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-how-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-how-section {
    padding: 96px 96px;
  }
}

/* Corner dot-grid + soft radial glows, matching the treatment used in
   "The Challenge" section above */
.regtech-how-dots {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 130px;
  background-image: radial-gradient(circle, var(--rth-slate-200) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}

.regtech-how-dots-left {
  top: 32px;
  left: 24px;
  -webkit-mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
}

.regtech-how-dots-right {
  bottom: 32px;
  right: 24px;
  -webkit-mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
}

@media (max-width: 767px) {
  .regtech-how-dots {
    display: none;
  }
}

.regtech-how-glow {
  position: absolute;
  z-index: 0;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 219, 254, 0.35), transparent 70%);
  pointer-events: none;
}

.regtech-how-glow-left {
  top: -140px;
  left: -160px;
}

.regtech-how-glow-right {
  bottom: -160px;
  right: -160px;
  background: radial-gradient(circle, rgba(191, 219, 254, 0.3), transparent 70%);
}

.regtech-how-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* Centered header: eyebrow, heading, description */
.regtech-how-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.regtech-how-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 20px;
}

.regtech-how-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 120px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-how-eyebrow-row .regtech-how-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-how-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-how-eyebrow-row .regtech-how-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-how-eyebrow {
  display: inline-block;
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-how-heading {
  max-width: 760px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--rth-navy);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-how-heading {
    font-size: 38px;
  }
}

@media (min-width: 1024px) {
  .regtech-how-heading {
    font-size: 46px;
  }
}

.regtech-how-heading-accent {
  background-image: linear-gradient(90deg, var(--rth-blue-600), var(--rth-blue-500));
}

.regtech-how-desc {
  margin-top: 20px;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
}

@media (min-width: 640px) {
  .regtech-how-desc {
    font-size: 17px;
  }
}

/* ----------------------------------------------------------
   Compliance flow card + steps
   ---------------------------------------------------------- */
.regtech-how-flow-card {
  position: relative;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-how-radius-xl);
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.12), 0 4px 14px -4px rgba(15, 23, 42, 0.06);
  padding: 40px 24px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .regtech-how-flow-card {
    padding: 48px 32px;
  }
}

@media (min-width: 1024px) {
  .regtech-how-flow-card {
    padding: 56px 40px;
    margin-bottom: 40px;
  }
}

.regtech-how-flow-label {
  display: block;
  width: fit-content;
  margin: 0 auto 48px;
  padding: 10px 26px;
  background-color: var(--rth-blue-600);
  color: var(--rth-white);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.45);
  text-align: center;
}

.regtech-how-flow-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

@media (min-width: 1200px) {
  .regtech-how-flow-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
}

/* Step column */
.regtech-how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  width: 100%;
  max-width: 280px;
  padding: 44px 0 24px;
  transition: transform var(--rth-transition-med);
}

@media (min-width: 1200px) {
  .regtech-how-step {
    width: 116px;
    max-width: none;
    padding: 0;
  }
  .regtech-how-step-highlight {
    width: 190px;
  }
}

.regtech-how-step:hover {
  transform: translateY(-4px);
}

.regtech-how-step-icon-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  margin-bottom: 16px;
}

@media (min-width: 1200px) {
  .regtech-how-step-icon-box {
    height: 140px;
  }
}

.regtech-how-step-icon-inner {
  position: relative;
  display: inline-flex;
}

.regtech-how-step-icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.18), 0 2px 8px -2px rgba(15, 23, 42, 0.08);
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med);
}

.regtech-how-step:hover .regtech-how-step-icon {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 36px -12px rgba(37, 99, 235, 0.3);
}

.regtech-how-step-icon svg,
.regtech-how-step-icon i {
  width: 32px;
  height: 32px;
  stroke-width: 2.1;
}

/* Positioned relative to the icon circle itself (not the taller
   alignment box) so it always floats fully above the icon with a
   clear gap, regardless of breakpoint. */
.regtech-how-step-number {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  border: 1.5px solid var(--rth-blue-200);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.1);
}

.regtech-how-step-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.35;
  margin: 0 0 8px;
}

.regtech-how-step-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--rth-slate-500);
  margin: 0;
  max-width: 200px;
}

@media (min-width: 1200px) {
  .regtech-how-step-desc {
    font-size: 12.5px;
  }
}

/* Connector between steps */
.regtech-how-connector {
  position: relative;
  flex: 0 0 auto;
  width: 2px;
  height: 40px;
  align-self: center;
  background-image: repeating-linear-gradient(180deg, var(--rth-blue-400) 0 6px, transparent 6px 12px);
  background-size: 2px 24px;
  animation: regtechHowDashV 1s linear infinite;
}

@media (min-width: 1200px) {
  .regtech-how-connector {
    flex: 1 1 20px;
    min-width: 20px;
    width: auto;
    height: 2px;
    align-self: flex-start;
    margin-top: 69px;
    background-image: repeating-linear-gradient(90deg, var(--rth-blue-400) 0 6px, transparent 6px 12px);
    background-size: 24px 2px;
    animation: regtechHowDashH 1s linear infinite;
  }
}

@keyframes regtechHowDashH {
  to { background-position-x: -24px; }
}

@keyframes regtechHowDashV {
  to { background-position-y: -24px; }
}

.regtech-how-connector-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-blue-200);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.1);
  animation: regtechHowArrowNudgeV 1.6s ease-in-out infinite;
}

@media (min-width: 1200px) {
  .regtech-how-connector-arrow {
    transform: translate(-50%, -50%) rotate(0deg);
    animation: regtechHowArrowNudgeH 1.6s ease-in-out infinite;
  }
}

.regtech-how-connector-arrow svg,
.regtech-how-connector-arrow i {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

@keyframes regtechHowArrowNudgeH {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  50% { transform: translate(-50%, -50%) translateX(3px); }
}

@keyframes regtechHowArrowNudgeV {
  0%, 100% { transform: translate(-50%, -50%) rotate(90deg) translateX(0); }
  50% { transform: translate(-50%, -50%) rotate(90deg) translateX(3px); }
}

/* Highlighted centerpiece step: Continuous Monitoring */
.regtech-how-step-icon-wrap-highlight {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rth-blue-600), var(--rth-blue-500));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.08), 0 24px 48px -12px rgba(37, 99, 235, 0.45);
  animation: regtechHowFloat 6s ease-in-out infinite;
}

.regtech-how-step-icon-wrap-highlight svg,
.regtech-how-step-icon-wrap-highlight i {
  width: 42px;
  height: 42px;
  color: var(--rth-white);
  stroke-width: 1.8;
}

.regtech-how-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 99, 235, 0.3);
  pointer-events: none;
}

.regtech-how-ring-1 {
  width: 148px;
  height: 148px;
  animation: regtechHowRingPulse 2.6s ease-out infinite;
}

.regtech-how-ring-2 {
  width: 182px;
  height: 182px;
  border-style: dashed;
  border-color: rgba(37, 99, 235, 0.22);
  animation: regtechHowRingRotate 18s linear infinite;
}

@keyframes regtechHowRingPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes regtechHowRingRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

.regtech-how-bell-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.2);
}

.regtech-how-bell-badge svg,
.regtech-how-bell-badge i {
  width: 18px;
  height: 18px;
  color: var(--rth-blue-600);
  stroke-width: 2.2;
}

.regtech-how-bell-badge::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--rth-red-500);
  border: 2px solid var(--rth-white);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.regtech-how-step-highlight .regtech-how-step-title {
  font-size: 18px;
  margin-top: 16px;
}

.regtech-how-step-highlight .regtech-how-step-desc {
  font-size: 13.5px;
  max-width: 220px;
}

/* ----------------------------------------------------------
   Bottom results panel
   ---------------------------------------------------------- */
.regtech-how-results {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-how-radius-xl);
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.12), 0 4px 14px -4px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: box-shadow var(--rth-transition-med);
}

.regtech-how-results:hover {
  box-shadow: 0 24px 55px -15px rgba(15, 23, 42, 0.16), 0 4px 14px -4px rgba(15, 23, 42, 0.08);
}

@media (min-width: 1024px) {
  .regtech-how-results {
    flex-direction: row;
  }
}

.regtech-how-results-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  flex: 0 0 auto;
  padding: 36px 32px;
  background: linear-gradient(135deg, var(--rth-navy), var(--rth-blue-600));
  color: var(--rth-white);
}

@media (min-width: 1024px) {
  .regtech-how-results-lead {
    flex: 0 0 260px;
    padding: 40px 32px;
  }
}

.regtech-how-results-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--rth-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.regtech-how-results-icon svg,
.regtech-how-results-icon i {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.regtech-how-results-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.regtech-how-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  flex: 1;
  padding: 36px 24px;
}

@media (min-width: 640px) {
  .regtech-how-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .regtech-how-benefits {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    padding: 40px 24px;
  }
}

.regtech-how-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 12px;
  border-radius: var(--rth-radius-md);
  transition: transform var(--rth-transition-med);
}

.regtech-how-benefit:hover {
  transform: translateY(-4px);
}

@media (min-width: 1024px) {
  .regtech-how-benefit:not(:last-child) {
    border-right: 1px solid var(--rth-slate-200);
  }
}

.regtech-how-benefit-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--rth-blue-200);
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform var(--rth-transition-fast);
}

.regtech-how-benefit:hover .regtech-how-benefit-icon {
  transform: scale(1.08);
}

.regtech-how-benefit-icon svg,
.regtech-how-benefit-icon i {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.regtech-how-benefit-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.35;
  margin: 0 0 8px;
}

.regtech-how-benefit-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .regtech-how-step,
  .regtech-how-step-icon,
  .regtech-how-benefit,
  .regtech-how-benefit-icon,
  .regtech-how-results {
    transition: none;
  }
  .regtech-how-step-icon-wrap-highlight,
  .regtech-how-ring-1,
  .regtech-how-ring-2,
  .regtech-how-connector,
  .regtech-how-connector-arrow,
  .regtech-how-bell-badge::after {
    animation: none;
  }
}

/* ==========================================================
   "More Than Just Compliance Software" (ecosystem) section
   ========================================================== */
.regtech-ecosystem-section {
  --rth-eco-radius-xl: 28px;
  /* Soft pastel icon backgrounds — same hex values already used
     elsewhere in the site (four-pillars.css orange/purple, global.css
     emerald-50), never a new color. */
  --rth-eco-green-50: #ECFDF5;
  --rth-eco-green-500: #22C55E;
  --rth-eco-orange-50: #FFF7ED;
  --rth-eco-orange-500: #F97316;
  --rth-eco-purple-50: #F5F3FF;
  --rth-eco-purple-600: #7C3AED;

  position: relative;
  background-color: var(--rth-white);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-ecosystem-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-ecosystem-section {
    padding: 96px 96px;
  }
}

.regtech-ecosystem-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* Premium bordered panel wrapping the whole section */
.regtech-ecosystem-panel {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-blue-100);
  border-radius: var(--rth-eco-radius-xl);
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.1), 0 4px 14px -4px rgba(15, 23, 42, 0.05);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .regtech-ecosystem-panel {
    padding: 56px 40px;
  }
}

@media (min-width: 1024px) {
  .regtech-ecosystem-panel {
    padding: 64px 56px;
  }
}

/* Top label: plain uppercase text flanked by thin lines + dots */
.regtech-ecosystem-top-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  margin-bottom: 24px;
}

.regtech-ecosystem-top-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 100px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-ecosystem-top-label .regtech-ecosystem-top-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-ecosystem-top-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-ecosystem-top-label .regtech-ecosystem-top-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-ecosystem-top-text {
  display: inline-block;
  flex-shrink: 0;
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  background-color: var(--rth-white);
  padding: 8px 20px;
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

/* Heading */
.regtech-ecosystem-heading {
  max-width: 640px;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--rth-navy);
  margin: 0 0 24px;
}

@media (min-width: 640px) {
  .regtech-ecosystem-heading {
    font-size: 42px;
  }
}

@media (min-width: 1024px) {
  .regtech-ecosystem-heading {
    font-size: 48px;
  }
}

.regtech-ecosystem-heading-accent {
  background-image: linear-gradient(90deg, var(--rth-blue-600), var(--rth-blue-500));
}

/* Short underline centered below the heading */
.regtech-ecosystem-heading-underline {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 9999px;
  background-color: var(--rth-blue-600);
  margin-bottom: 32px;
}

/* Description paragraphs */
.regtech-ecosystem-desc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
  text-align: center;
  margin-bottom: 48px;
}

.regtech-ecosystem-desc p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-ecosystem-desc p {
    font-size: 17px;
  }
}

.regtech-ecosystem-desc strong {
  color: var(--rth-navy);
  font-weight: 700;
}

/* Divider heading */
.regtech-ecosystem-divider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 960px;
  margin-bottom: 48px;
}

.regtech-ecosystem-divider-line {
  flex: 1;
  height: 1px;
  max-width: 320px;
  background-color: var(--rth-blue-500);
}

.regtech-ecosystem-divider-title {
  flex-shrink: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--rth-navy);
  white-space: nowrap;
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-ecosystem-divider-title {
    font-size: 24px;
  }
}

/* ----------------------------------------------------------
   Ecosystem flow: 7 cards + connectors
   ---------------------------------------------------------- */
.regtech-ecosystem-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

@media (min-width: 640px) {
  .regtech-ecosystem-flow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .regtech-ecosystem-flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  /* 7 cards in a 3-column grid leaves the last one alone on its own
     row, defaulting to the first column — center it under the middle
     column instead. Only applies up to 1399px, where the layout
     switches to the single-row flex flow below. */
  .regtech-ecosystem-flow > .regtech-ecosystem-card:last-child {
    grid-column: 2;
  }
}

/* Connectors only make sense in a single unbroken row — reflow to a
   flex row once there's enough width for all 7 cards side by side */
@media (min-width: 1400px) {
  .regtech-ecosystem-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
  }
}

.regtech-ecosystem-card {
  position: relative;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-blue-100);
  border-radius: var(--rth-radius-lg);
  box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.08);
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med), border-color var(--rth-transition-med);
}

@media (min-width: 1400px) {
  .regtech-ecosystem-card {
    flex: 1 1 0;
    min-width: 0;
  }
}

.regtech-ecosystem-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -14px rgba(37, 99, 235, 0.22);
  border-color: var(--rth-blue-200);
}

/* Title row: number badge + card title, side by side */
.regtech-ecosystem-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Step number badge — small blue circle inline before the title */
.regtech-ecosystem-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--rth-blue-600);
  color: var(--rth-white);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(37, 99, 235, 0.45);
  transition: transform var(--rth-transition-fast);
}

.regtech-ecosystem-card:hover .regtech-ecosystem-badge {
  animation: regtechEcoBadgePulse 0.6s ease;
}

@keyframes regtechEcoBadgePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Circular icon background */
.regtech-ecosystem-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 18px;
  animation: regtechEcoIconFloat 5s ease-in-out infinite;
  transition: transform var(--rth-transition-fast);
}

.regtech-ecosystem-card:hover .regtech-ecosystem-icon {
  transform: scale(1.08);
}

.regtech-ecosystem-icon svg,
.regtech-ecosystem-icon i {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}

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

.regtech-ecosystem-card:hover .regtech-ecosystem-icon {
  animation-play-state: paused;
}

.regtech-ecosystem-icon-blue {
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
}

.regtech-ecosystem-icon-green {
  background-color: var(--rth-eco-green-50);
  color: var(--rth-eco-green-500);
}

.regtech-ecosystem-icon-orange {
  background-color: var(--rth-eco-orange-50);
  color: var(--rth-eco-orange-500);
}

.regtech-ecosystem-icon-purple {
  background-color: var(--rth-eco-purple-50);
  color: var(--rth-eco-purple-600);
}

.regtech-ecosystem-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.35;
  margin: 0;
}

.regtech-ecosystem-card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--rth-slate-500);
  margin: 0;
}

/* Connector: thin blue line + dot, desktop single-row layout only */
.regtech-ecosystem-connector {
  display: none;
}

@media (min-width: 1400px) {
  .regtech-ecosystem-connector {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 28px;
    height: 2px;
    /* Aligned to the vertical center of the icon circle above:
       card padding-top (28px) + icon margin-top (8px) + icon radius (34px) */
    align-self: flex-start;
    margin-top: 69px;
    background-color: var(--rth-blue-500);
  }

  .regtech-ecosystem-connector-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rth-blue-500);
    box-shadow: 0 0 0 4px var(--rth-blue-50);
  }
}

@media (prefers-reduced-motion: reduce) {
  .regtech-ecosystem-card,
  .regtech-ecosystem-icon,
  .regtech-ecosystem-badge {
    transition: none;
  }
  .regtech-ecosystem-icon {
    animation: none;
  }
}

/* ==========================================================
   "RegTech Across Financial Services" section
   ========================================================== */
.regtech-fs-section {
  position: relative;
  overflow: hidden;
  background-color: var(--rth-white);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-fs-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-fs-section {
    padding: 96px 96px;
  }
}

/* Corner dot-grid decoration, matching the treatment used in the
   sections above (challenge / how-it-works) */
.regtech-fs-dots {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 130px;
  background-image: radial-gradient(circle, var(--rth-slate-200) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}

.regtech-fs-dots-left {
  top: 32px;
  left: 24px;
  -webkit-mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
}

.regtech-fs-dots-right {
  bottom: 32px;
  right: 24px;
  -webkit-mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
}

@media (max-width: 767px) {
  .regtech-fs-dots {
    display: none;
  }
}

/* Subtle radial glow blobs — same low-opacity blue already used
   throughout the site, never a new color */
.regtech-fs-glow {
  position: absolute;
  z-index: 0;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 219, 254, 0.28), transparent 70%);
  pointer-events: none;
}

.regtech-fs-glow-left {
  top: -140px;
  left: -160px;
}

.regtech-fs-glow-right {
  bottom: -160px;
  right: -160px;
  background: radial-gradient(circle, rgba(191, 219, 254, 0.22), transparent 70%);
}

.regtech-fs-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* ----------------------------------------------------------
   Header: top label, heading, supporting paragraph
   ---------------------------------------------------------- */
.regtech-fs-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

.regtech-fs-top-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin-bottom: 20px;
}

.regtech-fs-top-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 110px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-fs-top-label .regtech-fs-top-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-fs-top-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-fs-top-label .regtech-fs-top-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-fs-top-text {
  display: inline-block;
  flex-shrink: 0;
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  background-color: var(--rth-white);
  padding: 8px 20px;
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

@media (max-width: 479px) {
  .regtech-fs-top-label {
    max-width: 100%;
  }
  .regtech-fs-top-text {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    padding: 7px 14px;
  }
}

.regtech-fs-heading {
  max-width: 640px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--rth-navy);
  margin: 0 0 20px;
}

@media (min-width: 640px) {
  .regtech-fs-heading {
    font-size: 42px;
  }
}

@media (min-width: 1024px) {
  .regtech-fs-heading {
    font-size: 48px;
  }
}

.regtech-fs-heading-accent {
  background-image: linear-gradient(90deg, var(--rth-blue-600), var(--rth-blue-500));
}

.regtech-fs-desc {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-fs-desc {
    font-size: 17px;
  }
}

.regtech-fs-highlight {
  color: var(--rth-blue-600);
  font-weight: 700;
}

/* ----------------------------------------------------------
   "It supports:" divider badge
   ---------------------------------------------------------- */
.regtech-fs-supports-row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto 48px;
}

.regtech-fs-supports-line {
  position: relative;
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--rth-blue-200);
}

.regtech-fs-supports-line::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  box-shadow: 0 0 0 4px var(--rth-blue-50);
}

.regtech-fs-supports-line:first-child::after {
  left: 0;
}

.regtech-fs-supports-row .regtech-fs-supports-line:last-child::after {
  right: 0;
}

.regtech-fs-supports-badge {
  flex-shrink: 0;
  padding: 12px 32px;
  background-image: linear-gradient(135deg, var(--rth-blue-600), var(--rth-blue-500));
  color: var(--rth-white);
  font-size: 15px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.45);
  white-space: nowrap;
}

@media (max-width: 639px) {
  .regtech-fs-supports-row {
    gap: 12px;
  }
  .regtech-fs-supports-badge {
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* ----------------------------------------------------------
   Services grid — 10 cards
   ---------------------------------------------------------- */
.regtech-fs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 48px;
}

@media (min-width: 640px) {
  .regtech-fs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .regtech-fs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  .regtech-fs-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.regtech-fs-card {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-blue-100);
  border-radius: 20px;
  padding: 32px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.06);
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med), border-color var(--rth-transition-med);
}

.regtech-fs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -14px rgba(37, 99, 235, 0.18);
  border-color: var(--rth-blue-200);
}

.regtech-fs-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: regtechFsIconFloat 5s ease-in-out infinite;
  transition: transform var(--rth-transition-fast);
}

.regtech-fs-card:hover .regtech-fs-card-icon {
  transform: scale(1.08);
  animation-play-state: paused;
}

.regtech-fs-card-icon svg,
.regtech-fs-card-icon i {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

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

/* Stagger the icon float per card so they don't all bob in sync */
.regtech-fs-card:nth-child(2) .regtech-fs-card-icon { animation-delay: 0.2s; }
.regtech-fs-card:nth-child(3) .regtech-fs-card-icon { animation-delay: 0.4s; }
.regtech-fs-card:nth-child(4) .regtech-fs-card-icon { animation-delay: 0.6s; }
.regtech-fs-card:nth-child(5) .regtech-fs-card-icon { animation-delay: 0.8s; }
.regtech-fs-card:nth-child(6) .regtech-fs-card-icon { animation-delay: 1s; }
.regtech-fs-card:nth-child(7) .regtech-fs-card-icon { animation-delay: 1.2s; }
.regtech-fs-card:nth-child(8) .regtech-fs-card-icon { animation-delay: 1.4s; }
.regtech-fs-card:nth-child(9) .regtech-fs-card-icon { animation-delay: 1.6s; }
.regtech-fs-card:nth-child(10) .regtech-fs-card-icon { animation-delay: 1.8s; }

.regtech-fs-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.4;
  margin: 0;
}

/* ----------------------------------------------------------
   Bottom information banner
   ---------------------------------------------------------- */
.regtech-fs-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: 24px;
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.12), 0 4px 14px -4px rgba(15, 23, 42, 0.06);
  padding: 32px;
  transition: box-shadow var(--rth-transition-med);
}

.regtech-fs-banner:hover {
  box-shadow: 0 24px 55px -15px rgba(15, 23, 42, 0.16), 0 4px 14px -4px rgba(15, 23, 42, 0.08);
}

@media (max-width: 899px) {
  .regtech-fs-banner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
}

.regtech-fs-banner-icon {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.regtech-fs-banner-icon svg,
.regtech-fs-banner-icon i {
  width: 36px;
  height: 36px;
  stroke-width: 2;
}

.regtech-fs-banner-divider {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background-color: var(--rth-slate-200);
}

@media (max-width: 899px) {
  .regtech-fs-banner-divider {
    display: none;
  }
}

.regtech-fs-banner-text {
  flex: 1;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--rth-navy);
  font-weight: 600;
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-fs-banner-text {
    font-size: 16.5px;
  }
}

/* Skyline illustration built from Lucide icons + CSS "building" blocks */
.regtech-fs-skyline {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.regtech-fs-sky-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
}

.regtech-fs-sky-item svg,
.regtech-fs-sky-item i {
  width: 60%;
  height: 60%;
  stroke-width: 2;
}

.regtech-fs-sky-tree {
  width: 26px;
  height: 26px;
  color: var(--blue-200);
}

.regtech-fs-sky-tree svg,
.regtech-fs-sky-tree i {
  width: 100%;
  height: 100%;
}

.regtech-fs-sky-mid {
  width: 42px;
  height: 52px;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-500);
}

.regtech-fs-sky-tall {
  width: 52px;
  height: 86px;
  background-image: linear-gradient(180deg, var(--rth-blue-600), var(--rth-blue-500));
  color: var(--rth-white);
  box-shadow: 0 12px 24px -10px rgba(37, 99, 235, 0.4);
}

.regtech-fs-sky-med {
  width: 42px;
  height: 60px;
  background-color: var(--blue-100);
  color: var(--rth-blue-600);
}

.regtech-fs-sky-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.25);
}

.regtech-fs-sky-badge svg,
.regtech-fs-sky-badge i {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

@media (max-width: 539px) {
  .regtech-fs-skyline {
    transform: scale(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .regtech-fs-card,
  .regtech-fs-card-icon,
  .regtech-fs-banner {
    transition: none;
  }
  .regtech-fs-card-icon {
    animation: none;
  }
}

/* ==========================================================
   "Why Businesses Are Investing in RegTech" section
   ========================================================== */
.regtech-invest-section {
  position: relative;
  background-color: var(--rth-white);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-invest-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-invest-section {
    padding: 96px 96px;
  }
}

.regtech-invest-container {
  max-width: 1280px;
  margin: 0 auto;
}

.regtech-invest-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.regtech-invest-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin-bottom: 20px;
}

.regtech-invest-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 120px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-invest-eyebrow-row .regtech-invest-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-invest-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-invest-eyebrow-row .regtech-invest-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-invest-eyebrow {
  display: inline-block;
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-invest-heading {
  max-width: 700px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--rth-navy);
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .regtech-invest-heading {
    font-size: 38px;
  }
}

@media (min-width: 1024px) {
  .regtech-invest-heading {
    font-size: 44px;
  }
}

.regtech-invest-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-invest-desc {
  max-width: 660px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-invest-desc {
    font-size: 17px;
  }
}

.regtech-invest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 40px;
}

@media (min-width: 640px) {
  .regtech-invest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .regtech-invest-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.regtech-invest-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-md);
  padding: 20px;
  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.06);
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med), border-color var(--rth-transition-med);
}

.regtech-invest-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(37, 99, 235, 0.18);
  border-color: var(--rth-blue-200);
}

.regtech-invest-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.regtech-invest-icon svg,
.regtech-invest-icon i {
  width: 22px;
  height: 22px;
  stroke-width: 2.1;
}

.regtech-invest-card-text {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--rth-navy);
  margin: 0;
}

.regtech-invest-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, var(--rth-navy), var(--rth-blue-600));
  border-radius: var(--rth-radius-lg);
  padding: 32px;
  box-shadow: 0 20px 45px -15px rgba(7, 19, 61, 0.35);
}

@media (max-width: 639px) {
  .regtech-invest-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }
}

.regtech-invest-banner-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--rth-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.regtech-invest-banner-icon svg,
.regtech-invest-banner-icon i {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.regtech-invest-banner-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--rth-white);
  margin: 0 0 8px;
}

.regtech-invest-banner-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .regtech-invest-card {
    transition: none;
  }
}

/* ==========================================================
   "Why RegTech Is Essential" section
   ========================================================== */
.regtech-essential-section {
  position: relative;
  background-color: var(--rth-slate-50);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-essential-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-essential-section {
    padding: 96px 96px;
  }
}

.regtech-essential-container {
  max-width: 1280px;
  margin: 0 auto;
}

.regtech-essential-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 1024px) {
  .regtech-essential-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }
}

.regtech-essential-text-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.regtech-essential-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.regtech-essential-eyebrow-line {
  position: relative;
  width: 32px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-essential-eyebrow-row .regtech-essential-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-essential-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-essential-eyebrow-row .regtech-essential-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-essential-eyebrow {
  display: inline-block;
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  background-color: var(--rth-white);
  padding: 8px 20px;
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-essential-heading {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--rth-navy);
  margin: 0;
}

@media (min-width: 640px) {
  .regtech-essential-heading {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  .regtech-essential-heading {
    font-size: 34px;
  }
}

.regtech-essential-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-essential-text-col p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

.regtech-essential-tags-col {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  padding: 28px 24px;
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.1), 0 4px 14px -4px rgba(15, 23, 42, 0.05);
}

.regtech-essential-tags-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rth-navy);
  margin-bottom: 18px;
}

.regtech-essential-tags-label svg,
.regtech-essential-tags-label i {
  width: 18px;
  height: 18px;
  color: var(--rth-blue-600);
  flex-shrink: 0;
}

.regtech-essential-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.regtech-essential-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  font-size: 13px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid var(--rth-blue-100);
  transition: transform var(--rth-transition-fast), box-shadow var(--rth-transition-fast);
}

.regtech-essential-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.25);
}

.regtech-essential-tags-footnote {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--rth-slate-500);
  border-top: 1px solid var(--rth-slate-200);
  padding-top: 16px;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .regtech-essential-tag {
    transition: none;
  }
}

/* ==========================================================
   Shared accordion primitives — reused by the "Challenges of
   Manual Compliance" and "Key Platform Features" sections
   ========================================================== */
.regtech-manual-item-heading,
.regtech-capability-item-heading {
  margin: 0;
}

.regtech-manual-item-btn,
.regtech-capability-item-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 18px 20px;
}

.regtech-manual-item-icon,
.regtech-capability-item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--rth-transition-fast), color var(--rth-transition-fast);
}

.regtech-manual-item-icon svg,
.regtech-manual-item-icon i,
.regtech-capability-item-icon svg,
.regtech-capability-item-icon i {
  width: 19px;
  height: 19px;
  stroke-width: 2.1;
}

.regtech-manual-item-label,
.regtech-capability-item-label {
  flex: 1;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--rth-navy);
}

.regtech-manual-item-chevron,
.regtech-capability-item-chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--rth-slate-500);
  transition: transform var(--rth-transition-med);
}

.regtech-manual-item-chevron svg,
.regtech-manual-item-chevron i,
.regtech-capability-item-chevron svg,
.regtech-capability-item-chevron i {
  width: 18px;
  height: 18px;
}

.regtech-manual-item-btn[aria-expanded="true"] .regtech-manual-item-chevron,
.regtech-capability-item-btn[aria-expanded="true"] .regtech-capability-item-chevron {
  transform: rotate(180deg);
}

.regtech-manual-item-btn[aria-expanded="true"] .regtech-manual-item-icon,
.regtech-capability-item-btn[aria-expanded="true"] .regtech-capability-item-icon {
  background-color: var(--rth-blue-600);
  color: var(--rth-white);
}

/* Height-animated panel: JS toggles max-height between 0 and the
   panel's measured scrollHeight, and swaps the `hidden` attribute
   once the collapse transition finishes — smooth, no layout shift,
   and still hidden from assistive tech / tab order while closed. */
.regtech-manual-item-panel,
.regtech-capability-item-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.regtech-manual-item-panel-inner,
.regtech-capability-item-panel-inner {
  padding: 0 20px 22px 74px;
}

.regtech-manual-item-panel-inner p,
.regtech-capability-item-panel-inner p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0 0 14px;
}

@media (max-width: 479px) {
  .regtech-manual-item-panel-inner,
  .regtech-capability-item-panel-inner {
    padding-left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .regtech-manual-item-panel,
  .regtech-capability-item-panel,
  .regtech-manual-item-chevron,
  .regtech-capability-item-chevron,
  .regtech-manual-item-icon,
  .regtech-capability-item-icon {
    transition: none;
  }
}

/* ==========================================================
   "The Challenges of Manual Compliance" (accordion) section
   ========================================================== */
.regtech-manual-section {
  position: relative;
  background-color: var(--rth-white);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-manual-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-manual-section {
    padding: 96px 96px;
  }
}

.regtech-manual-container {
  max-width: 900px;
  margin: 0 auto;
}

.regtech-manual-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

.regtech-manual-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 500px;
  margin-bottom: 20px;
}

.regtech-manual-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 110px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-manual-eyebrow-row .regtech-manual-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-manual-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-manual-eyebrow-row .regtech-manual-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-manual-eyebrow {
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-manual-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--rth-navy);
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .regtech-manual-heading {
    font-size: 34px;
  }
}

.regtech-manual-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-manual-desc {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

.regtech-manual-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.regtech-manual-item {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-md);
  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: box-shadow var(--rth-transition-med), border-color var(--rth-transition-med);
}

.regtech-manual-item:has(.regtech-manual-item-btn[aria-expanded="true"]) {
  border-color: var(--rth-blue-200);
  box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .regtech-manual-item {
    transition: none;
  }
}

/* ==========================================================
   "How Our Regulatory Technology Platform Works" (timeline)
   ========================================================== */
.regtech-works-section {
  position: relative;
  overflow: hidden;
  background-color: var(--rth-slate-50);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-works-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-works-section {
    padding: 96px 96px;
  }
}

.regtech-works-dots {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 130px;
  background-image: radial-gradient(circle, var(--rth-slate-200) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}

.regtech-works-dots-left {
  top: 32px;
  left: 24px;
  -webkit-mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
}

.regtech-works-dots-right {
  bottom: 32px;
  right: 24px;
  -webkit-mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
}

@media (max-width: 767px) {
  .regtech-works-dots {
    display: none;
  }
}

.regtech-works-container {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
}

.regtech-works-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.regtech-works-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 20px;
}

.regtech-works-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 110px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-works-eyebrow-row .regtech-works-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-works-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-works-eyebrow-row .regtech-works-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-works-eyebrow {
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-works-heading {
  max-width: 640px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--rth-navy);
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .regtech-works-heading {
    font-size: 36px;
  }
}

@media (min-width: 1024px) {
  .regtech-works-heading {
    font-size: 42px;
  }
}

.regtech-works-heading-accent {
  background-image: linear-gradient(90deg, var(--rth-blue-600), var(--rth-blue-500));
}

.regtech-works-desc {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

/* Vertical timeline: numbered marker + connecting line down the
   left on mobile, centered with alternating cards on desktop */
.regtech-works-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.regtech-works-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 23px;
  width: 2px;
  background-image: repeating-linear-gradient(180deg, var(--rth-blue-200) 0 8px, transparent 8px 16px);
}

@media (min-width: 1024px) {
  .regtech-works-timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

.regtech-works-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 1024px) {
  .regtech-works-step {
    grid-template-columns: 1fr 64px 1fr;
    gap: 32px;
  }

  .regtech-works-step-marker {
    grid-column: 2;
    justify-self: center;
  }

  .regtech-works-step-card {
    grid-column: 1;
    grid-row: 1;
  }

  .regtech-works-step:nth-child(even) .regtech-works-step-card {
    grid-column: 3;
  }

  /* Cards alternate which side of the timeline they sit on (above),
     but their own content — icon, title, description, and the
     capability list — always stays left-aligned. A right-aligned
     card reads poorly: the icon drifts away from the title and the
     bullet list detaches from its marker, so every card keeps one
     consistent internal alignment regardless of its side. */
}

.regtech-works-step-marker {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--rth-blue-600);
  color: var(--rth-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 0 6px var(--rth-slate-50), 0 10px 24px -8px rgba(37, 99, 235, 0.45);
}

.regtech-works-step-card {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  padding: 24px 22px;
  box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.08);
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med);
}

.regtech-works-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -14px rgba(15, 23, 42, 0.16);
}

.regtech-works-step-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.regtech-works-step-icon svg,
.regtech-works-step-icon i {
  width: 21px;
  height: 21px;
  stroke-width: 2.1;
}

.regtech-works-step-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.35;
  margin: 0 0 10px;
}

.regtech-works-step-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0 0 16px;
}

.regtech-works-step-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--rth-blue-600);
}

.regtech-works-step-toggle-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--rth-transition-med);
}

.regtech-works-step-toggle[aria-expanded="true"] .regtech-works-step-toggle-icon {
  transform: rotate(180deg);
}

.regtech-works-step-caps {
  max-height: 0;
  /* Left padding matters here, not just cosmetic spacing: each bullet
     dot below is centered on the connecting line, so half of it sits
     to the left of the line. Without this padding that sliver gets
     clipped by overflow-hidden (needed to animate max-height),
     leaving the dots looking flattened/cut off on their left edge. */
  padding-left: 4px;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.regtech-works-step-caps-inner {
  list-style: none;
  margin: 14px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--rth-blue-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.regtech-works-step-caps-inner li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--rth-slate-500);
  position: relative;
}

.regtech-works-step-caps-inner li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
}

@media (prefers-reduced-motion: reduce) {
  .regtech-works-step-card,
  .regtech-works-step-toggle-icon,
  .regtech-works-step-caps {
    transition: none;
  }
}

/* ==========================================================
   "Benefits of Regulatory Technology" section (cards + table)
   ========================================================== */
.regtech-benefits-section {
  position: relative;
  background-color: var(--rth-white);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-benefits-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-benefits-section {
    padding: 96px 96px;
  }
}

.regtech-benefits-container {
  max-width: 1280px;
  margin: 0 auto;
}

.regtech-benefits-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.regtech-benefits-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin-bottom: 20px;
}

.regtech-benefits-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 110px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-benefits-eyebrow-row .regtech-benefits-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-benefits-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-benefits-eyebrow-row .regtech-benefits-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-benefits-eyebrow {
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-benefits-heading {
  max-width: 720px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--rth-navy);
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .regtech-benefits-heading {
    font-size: 36px;
  }
}

@media (min-width: 1024px) {
  .regtech-benefits-heading {
    font-size: 42px;
  }
}

.regtech-benefits-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-benefits-desc {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

.regtech-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

@media (min-width: 640px) {
  .regtech-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .regtech-benefits-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.regtech-benefits-card {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  padding: 28px 24px;
  box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.06);
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med), border-color var(--rth-transition-med);
}

.regtech-benefits-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -14px rgba(37, 99, 235, 0.16);
  border-color: var(--rth-blue-200);
}

.regtech-benefits-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.regtech-benefits-icon svg,
.regtech-benefits-icon i {
  width: 24px;
  height: 24px;
  stroke-width: 2.1;
}

.regtech-benefits-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.4;
  margin: 0 0 10px;
}

.regtech-benefits-card-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--rth-slate-500);
  margin: 0;
}

/* Comparison table — shared visual language reused by the
   Industries section table below */
.regtech-benefits-table-block,
.regtech-industry-table-block {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  padding: 28px 24px;
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.1), 0 4px 14px -4px rgba(15, 23, 42, 0.05);
}

@media (min-width: 768px) {
  .regtech-benefits-table-block,
  .regtech-industry-table-block {
    padding: 32px;
  }
}

.regtech-benefits-table-title,
.regtech-industry-table-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--rth-navy);
  margin: 0 0 20px;
  text-align: center;
}

@media (min-width: 640px) {
  .regtech-benefits-table-title,
  .regtech-industry-table-title {
    font-size: 20px;
  }
}

.regtech-benefits-table-wrap,
.regtech-industry-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.regtech-benefits-table,
.regtech-industry-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.regtech-benefits-table th,
.regtech-industry-table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rth-blue-600);
  background-color: var(--rth-blue-50);
  padding: 14px 18px;
}

.regtech-benefits-table th:first-child,
.regtech-industry-table th:first-child {
  border-radius: var(--rth-radius-sm) 0 0 0;
}

.regtech-benefits-table th:last-child,
.regtech-industry-table th:last-child {
  border-radius: 0 var(--rth-radius-sm) 0 0;
}

.regtech-benefits-table td,
.regtech-industry-table td {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rth-slate-500);
  padding: 14px 18px;
  border-bottom: 1px solid var(--rth-slate-200);
  vertical-align: top;
}

.regtech-benefits-table td:first-child,
.regtech-industry-table td:first-child {
  color: var(--rth-navy);
  font-weight: 700;
  white-space: nowrap;
}

.regtech-benefits-table tbody tr:last-child td,
.regtech-industry-table tbody tr:last-child td {
  border-bottom: none;
}

.regtech-benefits-table tbody tr:hover td,
.regtech-industry-table tbody tr:hover td {
  background-color: var(--rth-slate-50);
}

@media (max-width: 479px) {
  .regtech-benefits-table,
  .regtech-industry-table {
    min-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .regtech-benefits-card {
    transition: none;
  }
}

/* ==========================================================
   "Key Features of the Platform" (accordion) section
   ========================================================== */
.regtech-capability-section {
  position: relative;
  overflow: hidden;
  background-color: var(--rth-slate-50);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-capability-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-capability-section {
    padding: 96px 96px;
  }
}

.regtech-capability-dots {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 130px;
  background-image: radial-gradient(circle, var(--rth-slate-200) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}

.regtech-capability-dots-left {
  top: 32px;
  left: 24px;
  -webkit-mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
}

.regtech-capability-dots-right {
  bottom: 32px;
  right: 24px;
  -webkit-mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at bottom right, black 30%, transparent 75%);
}

@media (max-width: 767px) {
  .regtech-capability-dots {
    display: none;
  }
}

.regtech-capability-container {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 0 auto;
}

.regtech-capability-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

.regtech-capability-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 20px;
}

.regtech-capability-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 110px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-capability-eyebrow-row .regtech-capability-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-capability-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-capability-eyebrow-row .regtech-capability-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-capability-eyebrow {
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-capability-heading {
  max-width: 680px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--rth-navy);
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .regtech-capability-heading {
    font-size: 32px;
  }
}

.regtech-capability-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-capability-desc {
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

.regtech-capability-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.regtech-capability-item {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-md);
  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: box-shadow var(--rth-transition-med), border-color var(--rth-transition-med);
}

.regtech-capability-item:has(.regtech-capability-item-btn[aria-expanded="true"]) {
  border-color: var(--rth-blue-200);
  box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.14);
}

.regtech-capability-chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.regtech-capability-chip-list li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rth-blue-600);
  background-color: var(--rth-blue-50);
  border-radius: 9999px;
  padding: 6px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .regtech-capability-item {
    transition: none;
  }
}

/* ==========================================================
   "Industries We Serve" (tabs) section
   ========================================================== */
.regtech-industry-section {
  position: relative;
  background-color: var(--rth-white);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-industry-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-industry-section {
    padding: 96px 96px;
  }
}

.regtech-industry-container {
  max-width: 1280px;
  margin: 0 auto;
}

.regtech-industry-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

.regtech-industry-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  margin-bottom: 20px;
}

.regtech-industry-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 110px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-industry-eyebrow-row .regtech-industry-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-industry-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-industry-eyebrow-row .regtech-industry-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-industry-eyebrow {
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-industry-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rth-navy);
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .regtech-industry-heading {
    font-size: 36px;
  }
}

.regtech-industry-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-industry-desc {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

.regtech-industry-tabs-wrap {
  margin-bottom: 40px;
}

.regtech-industry-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}

.regtech-industry-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background-color: var(--rth-slate-50);
  border: 1px solid var(--rth-slate-200);
  border-radius: 9999px;
  color: var(--rth-slate-500);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--rth-transition-fast), color var(--rth-transition-fast), border-color var(--rth-transition-fast);
}

.regtech-industry-tab svg,
.regtech-industry-tab i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.regtech-industry-tab:hover {
  border-color: var(--rth-blue-200);
  color: var(--rth-blue-600);
}

.regtech-industry-tab.is-active {
  background-color: var(--rth-blue-600);
  border-color: var(--rth-blue-600);
  color: var(--rth-white);
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.4);
}

.regtech-industry-panels {
  background-color: var(--rth-slate-50);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  padding: 36px 28px;
}

@media (min-width: 768px) {
  .regtech-industry-panels {
    padding: 44px 48px;
  }
}

.regtech-industry-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 680px;
  margin: 0 auto;
}

.regtech-industry-panel[hidden] {
  display: none;
}

.regtech-industry-panel-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.regtech-industry-panel-icon svg,
.regtech-industry-panel-icon i {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.regtech-industry-panel p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .regtech-industry-tab {
    transition: none;
  }
}

/* ==========================================================
   "Why Choose Arth Data Solutions" section
   ========================================================== */
.regtech-choose-section {
  position: relative;
  background-color: var(--rth-slate-50);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-choose-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-choose-section {
    padding: 96px 96px;
  }
}

.regtech-choose-container {
  max-width: 1280px;
  margin: 0 auto;
}

.regtech-choose-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.regtech-choose-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 20px;
}

.regtech-choose-eyebrow-line {
  position: relative;
  flex: 1;
  height: 1px;
  max-width: 100px;
  background: linear-gradient(to right, transparent, var(--rth-blue-500));
}

.regtech-choose-eyebrow-row .regtech-choose-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--rth-blue-500));
}

.regtech-choose-eyebrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rth-blue-500);
  transform: translate(50%, -50%);
}

.regtech-choose-eyebrow-row .regtech-choose-eyebrow-line:last-child::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.regtech-choose-eyebrow {
  flex-shrink: 0;
  padding: 8px 20px;
  background-color: var(--rth-white);
  color: var(--rth-blue-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.06);
}

.regtech-choose-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rth-navy);
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .regtech-choose-heading {
    font-size: 36px;
  }
}

.regtech-choose-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-choose-desc {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rth-slate-500);
  margin: 0;
}

.regtech-choose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .regtech-choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .regtech-choose-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.regtech-choose-card {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  padding: 26px 22px;
  box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.06);
  transition: transform var(--rth-transition-med), box-shadow var(--rth-transition-med), border-color var(--rth-transition-med);
}

.regtech-choose-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -14px rgba(37, 99, 235, 0.16);
  border-color: var(--rth-blue-200);
}

.regtech-choose-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.regtech-choose-icon svg,
.regtech-choose-icon i {
  width: 23px;
  height: 23px;
  stroke-width: 2.1;
}

.regtech-choose-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--rth-navy);
  line-height: 1.4;
  margin: 0 0 10px;
}

.regtech-choose-card-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--rth-slate-500);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .regtech-choose-card {
    transition: none;
  }
}

/* ==========================================================
   "Why Financial Institutions Trust Arth Data" (checklist)
   ========================================================== */
.regtech-trust-section {
  position: relative;
  background-color: var(--rth-white);
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-trust-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-trust-section {
    padding: 96px 96px;
  }
}

.regtech-trust-container {
  max-width: 1100px;
  margin: 0 auto;
}

.regtech-trust-panel {
  background-color: var(--rth-white);
  border: 1px solid var(--rth-slate-200);
  border-radius: var(--rth-radius-lg);
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.1), 0 4px 14px -4px rgba(15, 23, 42, 0.05);
  padding: 36px 28px;
}

@media (min-width: 768px) {
  .regtech-trust-panel {
    padding: 48px 44px;
  }
}

.regtech-trust-heading {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rth-navy);
  margin: 0 0 32px;
}

@media (min-width: 640px) {
  .regtech-trust-heading {
    font-size: 28px;
  }
}

.regtech-trust-heading .regtech-accent {
  color: var(--rth-blue-600);
}

.regtech-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
}

@media (min-width: 640px) {
  .regtech-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.regtech-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rth-navy);
  line-height: 1.5;
}

.regtech-trust-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--rth-blue-50);
  color: var(--rth-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.regtech-trust-check svg,
.regtech-trust-check i {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

/* ==========================================================
   Final CTA — "Your Compliance Journey Starts Here"
   ========================================================== */
.regtech-final-cta-section {
  position: relative;
  background: linear-gradient(135deg, var(--rth-navy), var(--rth-blue-600));
  padding: 64px 24px;
}

@media (min-width: 768px) {
  .regtech-final-cta-section {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .regtech-final-cta-section {
    padding: 96px 96px;
  }
}

.regtech-final-cta-container {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.regtech-final-cta-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--rth-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.regtech-final-cta-icon svg,
.regtech-final-cta-icon i {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}

.regtech-final-cta-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rth-white);
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .regtech-final-cta-heading {
    font-size: 36px;
  }
}

.regtech-final-cta-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 32px;
}

@media (min-width: 640px) {
  .regtech-final-cta-desc {
    font-size: 17px;
  }
}

.regtech-final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.regtech-btn-on-dark.regtech-btn-primary {
  background-color: var(--rth-white);
  color: var(--rth-navy);
  border-color: var(--rth-white);
}

.regtech-btn-on-dark.regtech-btn-primary:hover {
  background-color: var(--rth-blue-50);
  transform: translateY(-2px);
}

.regtech-btn-on-dark.regtech-btn-secondary {
  background-color: transparent;
  color: var(--rth-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.regtech-btn-on-dark.regtech-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--rth-white);
}