body.method-page {
  background:
    radial-gradient(circle at top right, rgba(53, 100, 156, 0.22), transparent 36%),
    linear-gradient(180deg, #081526 0%, #102643 16%, #f5f7fb 16%, #f5f7fb 100%);
}

.support-hero,
.support-section {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.support-hero__grid,
.method-grid {
  display: grid;
  gap: 2rem;
}

.support-hero__copy {
  max-width: 42rem;
}

.support-kicker,
.support-section-label,
.support-panel__label,
.support-callout__label,
.diagram-card__eyebrow {
  font: 700 0.78rem/1.2 "Archivo", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.support-kicker,
.support-section-label,
.support-panel__label,
.support-callout__label {
  color: rgba(219, 231, 247, 0.78);
}

.support-hero h1,
.support-section h2 {
  font-family: "Fraunces", serif;
  line-height: 1.02;
}

.support-hero h1 {
  margin-top: 1rem;
  color: #f8fbff;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  max-width: 12ch;
}

.support-lede,
.support-callout__body,
.support-section__intro p,
.support-panel p,
.support-list li,
.text-links a,
.diagram-card p {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.support-lede {
  margin-top: 1.25rem;
  max-width: 38rem;
  color: rgba(232, 239, 248, 0.88);
  font-size: 1.08rem;
}

.support-actions,
.text-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.support-callout,
.support-panel,
.diagram-card {
  border: 1px solid rgba(147, 175, 214, 0.18);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(5, 15, 29, 0.16);
}

.support-callout {
  align-self: end;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(18, 37, 63, 0.95), rgba(13, 28, 49, 0.95));
  color: #eff6ff;
}

.support-callout__title {
  margin-top: 0.9rem;
  font: 600 clamp(1.4rem, 3vw, 1.9rem)/1.1 "Fraunces", serif;
}

.support-callout__body {
  margin-top: 0.9rem;
  color: rgba(232, 239, 248, 0.84);
}

.support-section--diagram {
  padding-top: 0;
}

.support-section__intro {
  max-width: 42rem;
  margin-bottom: 2rem;
}

.support-section__intro h2,
.support-panel h2 {
  color: #122640;
  font-size: clamp(2rem, 4vw, 3.1rem);
}

.support-section__intro p,
.support-panel p,
.support-list li {
  margin-top: 1rem;
  color: #415671;
  font-size: 1rem;
}

.method-diagram {
  display: grid;
  gap: 1.25rem;
}

.diagram-card {
  padding: 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
}

.diagram-card__eyebrow {
  color: #40689a;
}

.diagram-card h3 {
  margin-top: 0.85rem;
  color: #0f243d;
  font: 600 clamp(1.45rem, 2.4vw, 2rem)/1.08 "Fraunces", serif;
}

.diagram-card a,
.text-links a {
  color: #0f4b8f;
  font-weight: 700;
}

.diagram-card a {
  display: inline-flex;
  margin-top: 1rem;
}

.support-panel {
  padding: 1.8rem;
  background: rgba(255, 255, 255, 0.92);
}

.support-list {
  list-style: disc;
  margin: 1rem 0 0 1.2rem;
}

.support-list li + li {
  margin-top: 0.7rem;
}

@media (min-width: 860px) {
  .support-hero__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.75fr);
    align-items: end;
  }

  .method-diagram {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 859px) {
  .support-actions,
  .text-links {
    flex-direction: column;
  }
}