/* Secondary Support page: corporate components with existing interaction selectors. */
.support-page {
  background: #fff;
}

.support-page .sp-hero {
  padding: 24px 0 36px;
  border-bottom: 1px solid #dce2f1;
  background: linear-gradient(120deg, #f8faff, #edf2ff 65%, #f2effc);
}

.support-page h1 {
  max-width: 960px;
  margin: 14px 0 18px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.support-page .sp-hero p {
  max-width: 780px;
}

.support-page .sp-breadcrumbs {
  margin: 0 0 20px;
  font-size: 14px;
}

.support-page .sp-sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 24px;
  height: auto;
  padding-block: 16px;
}

.support-page .sp-sections a,
.support-page .support-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.support-page .section {
  padding-block: 40px;
}

.support-page .sectionhead {
  display: block;
  margin-bottom: 24px;
}

.support-page h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.25;
  letter-spacing: -.025em;
}

.support-page h3 {
  margin: 0 0 12px;
  color: #17284a;
  font-size: 21px;
  line-height: 1.4;
}

.support-page .sectionhead p,
.support-page .notice {
  max-width: 780px;
  font-size: 15px;
}

.support-page .sp-contact,
.support-page #support-preparation {
  border-block: 1px solid #dce2f1;
  background: #f8faff;
}

.support-page .sp-contact__grid,
.support-page .supportprepare,
.support-page .supportprinciples,
.support-page .supportgrid,
.support-page .split,
.support-page .salesexample {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.support-page .sp-contact__grid > *,
.support-page .supportprepare > *,
.support-page .salesexample > *,
.support-page .supportchecks span {
  min-width: 0;
}

.support-page .support-links {
  display: grid;
  justify-items: start;
  padding: 24px;
  border: 1px solid #dce2f1;
  border-radius: 16px;
  background: #fff;
}

.support-page .sp-note {
  padding: 16px 20px;
  border-left: 3px solid #5875d4;
  background: #edf2ff;
  font-size: 14px;
}

.support-page .supportsteps {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.support-page .supportsteps button {
  min-width: 0;
  min-height: 64px;
  padding: 16px;
  border-color: #dce2f1;
  background: #fff;
  color: #3155ce;
  font-size: 15px;
  line-height: 1.4;
}

.support-page .supportsteps button b {
  margin-bottom: 6px;
  font-size: 11px;
}

.support-page .supportsteps button.active {
  border-color: #3155ce;
  background: #3155ce;
  color: #fff;
}

.support-page .salesexample,
.support-page .supportgrid article,
.support-page .supportprinciples article,
.support-page .supportrequest,
.support-page .supportprogress {
  min-width: 0;
  padding: 24px;
  border: 1px solid #dce2f1;
  border-radius: 16px;
  background: #fff;
}

.support-page .supportdeliverable {
  min-width: 0;
  padding: 20px;
  border-color: #dce2f1;
}

.support-page .supportdeliverable h4 {
  margin: 0 0 12px;
  color: #17284a;
  font-size: 18px;
  line-height: 1.4;
}

.support-page .supportdeliverable li,
.support-page .supportrequest ol,
.support-page .finance-note,
.support-page .supportchecks small,
.support-page .supportscope td {
  color: #53617b;
}

.support-page .supportrequest {
  background: linear-gradient(120deg, #edf2ff, #f6f4ff);
}

/* Legacy finance notes declare important colors and sizes in site.css. */
.support-page .finance-note {
  color: #53617b !important;
  font-size: 14px !important;
}

.support-page .supportchecks label {
  min-height: 44px;
  gap: 16px;
  padding: 20px;
  border-color: #dce2f1;
  color: #17284a;
}

.support-page .supportchecks input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: #3155ce;
}

.support-page .supportchecks small {
  font-size: 14px;
  line-height: 1.6;
}

.support-page .supportprogress {
  position: static;
}

.support-page .supportprogress .progressnum {
  margin: 20px 0 16px;
  color: #3155ce;
  font-size: 40px;
}

.support-page .supportprogress button {
  min-height: 44px;
  padding: 8px 0;
  color: #3155ce;
  font-size: 15px;
}

.support-page .supportscope table {
  min-width: 0;
  table-layout: fixed;
  font-size: 14px;
}

.support-page .supportscope th,
.support-page .supportscope td {
  padding: 16px;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.support-page .supportscope th,
.support-page .supportscope td:first-child {
  color: #243961;
}

.support-page .supportscope th:first-child {
  width: 34%;
}

.support-page .faq summary {
  min-height: 44px;
  padding-block: 12px;
  color: #243961;
  font-size: 16px;
  line-height: 1.5;
}

.support-page button:focus-visible,
.support-page input:focus-visible,
.support-page summary:focus-visible,
.support-page [role="tabpanel"]:focus-visible {
  outline: 3px solid #5574d8;
  outline-offset: 4px;
  border-radius: 4px;
}

.support-page [id] {
  scroll-margin-top: 120px;
}

@media (min-width: 600px) {
  .support-page .supportsteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 800px) {
  .support-page .sp-contact__grid,
  .support-page .supportprepare,
  .support-page .supportprinciples,
  .support-page .split,
  .support-page .salesexample {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-page .supportgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .support-page .supportsteps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-page .supporttrack i {
    transition: none;
  }
}