/* uk-ongoing-compliance-support.css -- styles used only on uk-ongoing-compliance-support.html. */

.uk-compliance-page-shell::before {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(15, 93, 255, .32), transparent 28rem),
    radial-gradient(circle at 6% 50%, rgba(0, 156, 255, .15), transparent 25rem),
    linear-gradient(105deg, rgba(0, 12, 38, .18), rgba(0, 0, 0, 0) 45%);
}

/* Small bullet dot in front of this page's eyebrow labels, matching the
   screenshot -- kept scoped to this page rather than added to the shared
   .eyebrow class used across the whole site. */
.uk-compliance-page-shell .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uk-compliance-page-shell .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 211, 255, .8);
}

/* ---------- Section rhythm ----------
   Matches the section-to-section gap already used across the site's USA
   service pages (~72px, e.g. business-address-setup.html,
   registered-agent-service.html, ein-application.html). */
.uk-compliance-page-shell .service-main .container > section + section,
.uk-compliance-page-shell .service-main .container > .glass-card + section,
.uk-compliance-page-shell .service-main .container > section + .glass-card,
.uk-compliance-page-shell .service-main .container > .glass-card + .glass-card {
  margin-top: 72px;
}

/* The "What We Help With" heading now sits inside the same grid section
   as the 4 cards below it (previously its own separate glass-card panel,
   which visually read as two stacked sections instead of one), spanning
   the full grid width like the homepage's own centered section headings
   (e.g. .feature-strip's .section-heading). */
.uk-compliance-page-shell .uk-compact-grid > .uk-section-title {
  grid-column: 1 / -1;
  max-width: 640px;
  margin: 0 auto 10px;
}

/* The eyebrow's bullet dot makes it a flex row, which ignores the
   ancestor's text-align -- it needs its own centering. Heading sized to
   match the "How It Works" heading on uk-business-bank-account.html
   (.ukbank-process h2). */
.uk-compliance-page-shell .uk-compact-grid > .uk-section-title .eyebrow {
  justify-content: center;
}

.uk-compliance-page-shell .uk-compact-grid > .uk-section-title h2 {
  font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.2;
}

/* ---------- Hero ---------- */

.uk-compliance-visual {
  position: relative;
  min-height: 380px;
}

.uk-compliance-visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .3);
}

.uk-compliance-hero-features {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 26px;
  margin-top: 30px;
}

.uk-compliance-hero-features div {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  width: 100px;
}

.uk-compliance-hero-features span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(134, 76, 255, .6);
  background: rgba(48, 25, 116, .4);
  color: var(--cyan);
  font-size: 21px;
}

.uk-compliance-hero-features p {
  margin: 0;
  color: #dce8ff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- What we help with ---------- */

.uk-compact-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------- CTA ---------- */

.uk-compliance-cta {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .uk-compliance-visual {
    min-height: 320px;
  }

  .uk-compliance-hero-features {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }

  .uk-compact-grid.four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .uk-compliance-visual {
    min-height: 260px;
  }

  .uk-compliance-hero-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .uk-compact-grid.four {
    grid-template-columns: 1fr;
  }
}