/* uk-utr-number-setup.css -- styles used only on uk-utr-number-setup.html. */

.uk-utr-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-utr-page-shell .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uk-utr-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-utr-page-shell .service-main .container > section + section,
.uk-utr-page-shell .service-main .container > .glass-card + section,
.uk-utr-page-shell .service-main .container > section + .glass-card,
.uk-utr-page-shell .service-main .container > .glass-card + .glass-card {
  margin-top: 72px;
}

/* The "How It Works" heading sits inside the same glass-card panel as the
   4-step process below it (previously its own separate boxed section,
   which visually read as two stacked panels instead of one). Sized and
   centered like the "How It Works" heading on
   uk-business-bank-account.html (.ukbank-process h2). */
.uk-utr-page-shell .uk-process-panel .uk-section-title {
  max-width: 640px;
  margin: 0 auto 28px;
}

/* The eyebrow's bullet dot makes it a flex row, which ignores the
   ancestor's text-align -- it needs its own centering, otherwise it sits
   flush left while the h2 below it is centered. */
.uk-utr-page-shell .uk-process-panel .uk-section-title .eyebrow {
  justify-content: center;
}

.uk-utr-page-shell .uk-process-panel .uk-section-title h2 {
  font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.2;
}

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

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

.uk-utr-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-utr-hero-features {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 26px;
  margin-top: 30px;
}

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

.uk-utr-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-utr-hero-features p {
  margin: 0;
  color: #dce8ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- Info strip ---------- */

.uk-utr-info-strip {
  margin-bottom: 18px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  border: 1px solid rgba(54, 213, 255, .4);
  border-radius: 12px;
  background: rgba(6, 20, 52, .5);
}

.uk-utr-info-strip article {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.uk-utr-info-strip .round-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  font-size: 20px;
}

.uk-utr-info-strip h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 800;
}

.uk-utr-info-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Process ---------- */

/* Wraps the shared .uk-process-mini grid in a glass-card panel so "How It
   Works" reads as its own section, matching the boxed-process treatment
   used on the site's established UK service pages (e.g. address-steps on
   uk-registered-office-address.html). The inner .uk-process-mini element
   is left completely unpadded/unstyled so its own dotted connector line
   (positioned relative to itself) stays correctly aligned. */
.uk-process-panel {
  padding: 30px 34px;
}

/* ---------- FAQ ---------- */

.uk-utr-faq-section {
  margin: 56px 0 8px;
}

.uk-utr-faq-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.uk-utr-faq-heading .eyebrow {
  margin: 0;
}

.uk-utr-faq-heading a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.uk-utr-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}

.uk-utr-faq details {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(6, 20, 52, .5);
}

.uk-utr-faq summary {
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  color: #f5f9ff;
  font-size: 15px;
  font-weight: 600;
}

.uk-utr-faq summary::-webkit-details-marker {
  display: none;
}

.uk-utr-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 20px;
  font-weight: 800;
}

.uk-utr-faq details[open] summary::after {
  content: "\2212";
}

.uk-utr-faq p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

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

.uk-utr-cta {
  margin-top: 8px;
  margin-bottom: 40px;
  background:
    radial-gradient(circle at 15% 50%, rgba(155, 37, 255, .5), transparent 8rem),
    linear-gradient(100deg, #7b1fe0 0%, #4b0f9c 52%, #180440 100%);
}

.uk-utr-cta .cta-icon {
  background: radial-gradient(circle at 35% 25%, #d9a8ff, #8a2be2);
}

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

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

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

  .uk-utr-info-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

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

  .uk-utr-info-strip {
    grid-template-columns: 1fr;
  }

  .uk-utr-info-strip article {
    align-items: center;
  }

  .uk-utr-faq {
    grid-template-columns: 1fr;
  }

  .uk-utr-faq-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}