/* Load after revendas.css, polish.css and activation.css. */
.reseller-page .modalities-section {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(48px, 6vw, 88px);
  padding-block: 108px;
}

.reseller-page .modalities-section > .section-heading {
  display: block;
  min-width: 0;
  margin: 0;
}

.reseller-page .modalities-section .eyebrow {
  max-width: 32em;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 1.5px;
}

.reseller-page .modalities-section h2 {
  font-size: clamp(44px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -.7px;
}

.reseller-page .modalities-section > .section-heading > p {
  max-width: 31ch;
  margin: 25px 0 0;
  font-size: 15px;
  line-height: 1.85;
}

.reseller-page .modality-grid {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid #ffffff3a;
}

.reseller-page .modality-card {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: 'index index' 'title copy' 'title action';
  align-items: start;
  column-gap: 26px;
  row-gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 29px 0 31px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid #ffffff24;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: border-color .18s ease;
}

.reseller-page .modality-card::before {
  display: none;
}

.reseller-page .modality-top {
  grid-area: index;
  margin: 0;
  color: #c5a5b5;
}

.reseller-page .modality-top > span {
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 1.8px;
  font-variant-numeric: tabular-nums;
}

.reseller-page .modality-top > svg {
  display: none;
}

.reseller-page .modality-card h3 {
  grid-area: title;
  min-width: 0;
  margin: 0;
  font-size: clamp(35px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -.4px;
  overflow-wrap: anywhere;
  transition: color .18s ease;
}

.reseller-page .modality-card > p {
  grid-area: copy;
  min-width: 0;
  max-width: none;
  margin: 0;
  color: #bbb3c1;
  font-size: 14px;
  line-height: 1.85;
}

.reseller-page .modality-link {
  grid-area: action;
  min-width: 0;
  margin: 0;
  padding: 3px 0 0;
  border: 0;
  gap: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: #eee2e9;
}

.reseller-page .modality-link > span {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  transition: color .18s ease;
}

.reseller-page .modality-card:hover,
.reseller-page .modality-card:focus-visible {
  border-bottom-color: #e589a0;
  transform: none;
  box-shadow: none;
}

.reseller-page .modality-card:hover h3,
.reseller-page .modality-card:focus-visible h3 {
  color: #ffafc1;
}

.reseller-page .modality-card:hover .modality-link > span,
.reseller-page .modality-card:focus-visible .modality-link > span {
  color: #fff;
  transform: none;
}

.reseller-page .activation-section {
  background: #111015;
}

.reseller-page .activation-layout {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

.reseller-page .activation-directory {
  padding: 7px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.reseller-page .activation-directory > .eyebrow {
  margin-bottom: 14px;
  color: #c5a5b5;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 1.8px;
}

.reseller-page .activation-directory > h3 {
  max-width: 19ch;
  margin: 0 0 29px;
  font-family: var(--display);
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.4px;
}

.reseller-page .activation-apps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 0;
  border-bottom: 1px solid #ffffff24;
}

.reseller-page .activation-apps li {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ffffff24;
  border-radius: 0;
  background: none;
}

.reseller-page .activation-apps li > a {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 74px;
  padding: 19px 0;
  color: #eee8ef;
}

.reseller-page .activation-apps strong {
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  transition: color .18s ease;
}

.reseller-page .activation-app-number {
  color: #baa5b5;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.reseller-page .activation-app-arrow {
  color: #e792aa;
  font-size: 21px;
  line-height: 1;
  text-align: right;
}

.reseller-page .activation-app-mark {
  display: none;
}

.reseller-page .activation-apps a:hover strong,
.reseller-page .activation-apps a:focus-visible strong {
  color: #ffafc1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.reseller-page .activation-note {
  max-width: 59ch;
  margin-top: 22px;
  color: #b5a8b9;
  font-size: 13px;
  line-height: 1.85;
}

.reseller-page .modality-card:focus-visible,
.reseller-page .activation-apps a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.reseller-page .modality-card:focus-visible {
  box-shadow: 0 0 0 7px #08090c;
}

.reseller-page .activation-apps a:focus-visible {
  box-shadow: 0 0 0 7px #111015;
}

@media (max-width: 1100px) {
  .reseller-page .modalities-section,
  .reseller-page .activation-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 43px;
  }

  .reseller-page .modalities-section > .section-heading,
  .reseller-page .activation-copy {
    max-width: 680px;
  }

  .reseller-page .modalities-section > .section-heading > p {
    max-width: 45ch;
  }

  .reseller-page .modality-card {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: 40px;
  }

  .reseller-page .activation-directory {
    padding: 0;
  }

  .reseller-page .activation-directory > h3 {
    max-width: 24ch;
  }
}

@media (max-width: 720px) {
  .reseller-page .modalities-section {
    padding-block: 70px;
    gap: 33px;
  }

  .reseller-page .modalities-section h2 {
    font-size: clamp(38px, 10vw, 54px);
  }

  .reseller-page .modalities-section > .section-heading > p {
    margin-top: 22px;
  }

  .reseller-page .modality-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'index' 'title' 'copy' 'action';
    row-gap: 13px;
    padding-block: 27px 28px;
  }

  .reseller-page .modality-card h3 {
    font-size: clamp(37px, 10.6vw, 48px);
    line-height: 1.05;
  }

  .reseller-page .modality-card > p {
    max-width: 48ch;
    font-size: 14px;
  }

  .reseller-page .modality-link {
    padding-top: 7px;
    font-size: 13px;
  }

  .reseller-page .activation-layout {
    gap: 42px;
  }

  .reseller-page .activation-directory > h3 {
    max-width: 19ch;
    font-size: clamp(33px, 8.8vw, 43px);
    margin-bottom: 25px;
  }

  .reseller-page .activation-apps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .reseller-page .activation-apps li > a {
    grid-template-columns: 26px minmax(0, 1fr) 22px;
    gap: 13px;
    min-height: 67px;
    padding-block: 18px;
  }

  .reseller-page .activation-apps strong {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reseller-page .modality-card,
  .reseller-page .modality-card h3,
  .reseller-page .modality-link > span,
  .reseller-page .activation-apps strong {
    transition: none;
  }
}

@media (forced-colors: active) {
  .reseller-page .modality-grid,
  .reseller-page .modality-card,
  .reseller-page .activation-apps,
  .reseller-page .activation-apps li {
    border-color: CanvasText;
  }

  .reseller-page .modality-card:focus-visible,
  .reseller-page .activation-apps a:focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}