.utility-page { min-height: 70vh; overflow: clip; background: var(--interior-bg); }

.utility-hero {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--interior-border);
  background:
    radial-gradient(circle at 84% 12%, rgba(231, 240, 247, 0.82), transparent 30rem),
    var(--interior-bg);
}
.utility-hero h1 { max-width: 15ch; margin: 0; font-size: clamp(2.8rem, 6.3vw, 5.45rem); font-weight: 820; letter-spacing: -0.025em; line-height: 0.98; }
.utility-hero__lede { max-width: 44rem; margin: 1.3rem 0 0; color: var(--interior-muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.62; }
.utility-hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

.support-product-grid,
.suite-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.support-product-card,
.suite-feature-card { display: flex; min-width: 0; flex-direction: column; padding: 1.25rem; box-shadow: none; }
.support-product-card__icon,
.suite-feature-card__icon { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; margin-bottom: 1.2rem; border-radius: 0.7rem; font-size: 1.05rem; }
.support-product-card h3,
.suite-feature-card h2 { margin: 0; font-size: 1.18rem; font-weight: 790; letter-spacing: -0.014em; }
.support-product-card p,
.suite-feature-card > p { margin: 0.65rem 0 1rem; color: var(--interior-muted); font-size: 0.86rem; line-height: 1.58; }
.support-product-card .interior-link,
.suite-feature-card .interior-link { margin-top: auto; font-size: 0.8rem; }

.support-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: clamp(1.4rem, 4vw, 2.4rem); }
.support-contact h2 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 2.7rem); font-weight: 800; letter-spacing: -0.02em; }
.support-contact p { max-width: 42rem; margin: 0.7rem 0 0; color: var(--interior-muted); line-height: 1.6; }
.support-faq__heading { margin-bottom: 1.5rem; text-align: center; }
.support-faq__heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.022em; }
.support-faq__heading p { margin: 0.7rem 0 0; color: var(--interior-muted); }
.support-faq .accordion { display: grid; gap: 0.65rem; }

.suite-feature-card { padding: 1.4rem; }
.suite-feature-card__label { margin: 0 0 0.7rem; color: var(--interior-faint); font-size: 0.66rem; font-weight: 780; letter-spacing: 0.06em; text-transform: uppercase; }
.suite-feature-list { display: grid; gap: 0.62rem; margin: 0.3rem 0 1.25rem; padding: 0; list-style: none; }
.suite-feature-list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.5rem; color: var(--interior-muted); font-size: 0.82rem; line-height: 1.45; }
.suite-feature-list i { color: var(--interior-green); }
.suite-feature-card .interior-button { width: 100%; margin-top: auto; }
.suite-feature-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.4rem); color: #fff; border-radius: var(--interior-radius); background: var(--interior-ink); }
.suite-feature-compare h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3.7vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; }
.suite-feature-compare p { max-width: 40rem; margin: 0.7rem 0 0; color: #c9c6bf; line-height: 1.58; }

.utility-state-page {
  min-height: clamp(34rem, 72vh, 52rem);
  display: grid;
  place-items: center;
  overflow: clip;
  padding: clamp(3rem, 8vw, 6rem) 0;
  background:
    radial-gradient(circle at 20% 5%, rgba(232, 241, 233, 0.72), transparent 24rem),
    radial-gradient(circle at 88% 88%, rgba(231, 240, 247, 0.72), transparent 25rem),
    var(--interior-bg);
}
.utility-state-page__inner { display: grid; place-items: center; }
.utility-state {
  width: min(100%, 38rem);
  padding: clamp(1.6rem, 5vw, 2.6rem);
  text-align: center;
  border: 1px solid var(--interior-border);
  border-radius: var(--interior-radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--interior-shadow);
}
.utility-state--wide { width: min(100%, 47rem); }
.utility-state__status { display: grid; justify-items: center; }
.utility-state__message { display: grid; justify-items: center; }
.utility-state__message strong { color: var(--interior-ink); }
.utility-state__detail { margin-top: 0.35rem !important; color: var(--interior-faint) !important; font-size: 0.82rem !important; }
.utility-state__code {
  margin: 0 0 0.85rem;
  color: var(--interior-border-strong);
  font-size: clamp(4.6rem, 15vw, 8.8rem);
  font-weight: 860;
  letter-spacing: -0.07em;
  line-height: 0.75;
}
.utility-state h1,
.utility-state__status h1,
.utility-state__status h2 {
  max-width: 15ch;
  margin: 0 auto;
  color: var(--interior-ink) !important;
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  font-weight: 810;
  letter-spacing: -0.024em;
  line-height: 1.02;
}
.utility-state__copy,
.utility-state__status > p,
.utility-state__status > div > p {
  max-width: 34rem;
  margin: 1rem auto 0;
  color: var(--interior-muted) !important;
  font-size: 1rem;
  line-height: 1.62;
}
.utility-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; margin-top: 1.45rem; }
.utility-state__note { margin: 1rem 0 0; color: var(--interior-faint); font-size: 0.78rem; line-height: 1.5; }
.utility-state__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1rem; margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--interior-border); }
.utility-state__links a { color: var(--interior-muted); font-size: 0.82rem; font-weight: 690; text-decoration: none; }
.utility-state__links a:hover { color: var(--interior-ink); }
.utility-state__icon,
.utility-state__status :where(.bi-shield-check, .bi-check-circle-fill, .bi-x-circle-fill, .bi-exclamation-triangle-fill) {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  margin: 0 auto 1.2rem;
  border-radius: 0.85rem;
  font-size: 1.35rem !important;
}
.utility-state__icon--green,
.utility-state__status .bi-check-circle-fill { color: var(--interior-green) !important; background: var(--interior-green-soft); }
.utility-state__icon--blue,
.utility-state__status .bi-shield-check { color: var(--interior-blue) !important; background: var(--interior-blue-soft); }
.utility-state__icon--amber,
.utility-state__status .bi-exclamation-triangle-fill { color: var(--interior-amber) !important; background: var(--interior-amber-soft); }
.utility-state__status .bi-x-circle-fill { color: var(--interior-rose) !important; background: var(--interior-rose-soft); }
.utility-state__spinner {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 1.25rem;
  border: 2px solid var(--interior-border-strong);
  border-right-color: var(--interior-ink);
  border-radius: 50%;
  animation: utility-spin 700ms linear infinite;
}
@keyframes utility-spin { to { transform: rotate(1turn); } }

@media (max-width: 991.98px) {
  .support-product-grid,
  .suite-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .support-product-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; }
  .support-product-card__icon { grid-row: 1 / span 3; }
  .support-product-card p { margin-bottom: 0.65rem; }
}

@media (max-width: 767.98px) {
  .utility-hero { padding-top: 3.35rem; }
  .utility-hero h1 { max-width: 100%; }
  .support-contact,
  .suite-feature-compare { grid-template-columns: minmax(0, 1fr); }
  .support-contact .interior-button,
  .suite-feature-compare .interior-button { width: 100%; }
  .utility-state-page { min-height: 31rem; }
  .utility-state { padding: 1.5rem 1.15rem; }
  .utility-state__actions { flex-direction: column; }
  .utility-state__actions .interior-button { width: 100%; }
}