/* uk-company-registration.css -- styles used only on uk-company-registration.html. */

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

.uk-registration-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);
}

/* The hero eyebrow stays left-aligned (it sits in a left-aligned copy
   column), but section eyebrows that introduce a centered heading -- e.g.
   "How It Works" and "Pricing" -- need the flex row itself centered,
   since a flex container ignores the ancestor's text-align. */
.uk-registration-page-shell .uk-section-title .eyebrow,
.uk-registration-page-shell .uk-registration-pricing .eyebrow {
  justify-content: center;
}

/* ---------- 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-registration-page-shell .service-main .container > section + section,
.uk-registration-page-shell .service-main .container > .glass-card + section,
.uk-registration-page-shell .service-main .container > section + .glass-card,
.uk-registration-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 like
   the homepage's own centered section headings. */
.uk-registration-page-shell .uk-process-panel .uk-section-title {
  max-width: 640px;
  margin: 0 auto 28px;
}

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

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

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

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

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

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

.uk-registration-info-strip {
  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-registration-info-strip article {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

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

.uk-registration-info-strip h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
}

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

/* ---------- Pricing ---------- */

/* Now a glass-card panel so "this is the Pricing section" reads clearly,
   matching the boxed-section treatment used across the site's established
   UK/USA service pages -- individual price-cards keep their own styling
   unchanged, this just frames the whole pricing area. */
.uk-registration-pricing {
  padding: 36px 34px;
  text-align: center;
}

.uk-registration-pricing h2 {
  margin: 0 auto 10px;
  max-width: 640px;
  font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.2;
  font-weight: 900;
}

.uk-registration-pricing-subtitle {
  width: min(100%, 560px);
  margin: 0 auto 30px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.uk-registration-price-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.price-card .uk-registration-price-icon h3 {
  margin: 0;
}

.uk-registration-pricing .price-card {
  text-align: left;
}

.uk-registration-pricing .price {
  margin-bottom: 18px;
}

.uk-registration-pricing .ra-check-list {
  flex: 1;
  margin-bottom: 20px;
}

/* This page's "Most Popular" badge uses the site's violet accent (matching
   the screenshot) rather than the cyan gradient pricing-shared.css uses by
   default for other pricing pages. */
.uk-registration-pricing .popular-badge {
  background: linear-gradient(180deg, #b366ff, #7b1fe0);
  box-shadow: 0 8px 18px rgba(123, 31, 224, .4);
}

.uk-registration-pricing .popular {
  border-color: var(--violet);
  box-shadow: 0 0 23px rgba(155, 37, 255, .4), inset 0 1px 0 rgba(255,255,255,.1);
}

/* ---------- 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-registration-faq-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

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

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

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

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

.uk-registration-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-registration-faq summary::-webkit-details-marker {
  display: none;
}

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

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

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

@media (max-width: 620px) {
  .uk-registration-faq {
    grid-template-columns: 1fr;
  }

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

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

.uk-registration-cta {
  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-registration-cta .cta-icon {
  background: radial-gradient(circle at 35% 25%, #d9a8ff, #8a2be2);
}

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

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

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

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

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

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

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

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