.contact-hero .slots-hero-art {
  background-image: url('assets/contact-hero.webp');
  background-position: right center
}

.contact-hero .slots-hero-copy {
  max-width: 980px
}

.contact-content h3 {
  font-size: 16px;
  line-height: 1.5
}

.channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.channel-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 21px;
  border: 1px solid #bc7cd7;
  border-radius: 14px;
  background: linear-gradient(135deg, #54236e, #27123c);
  box-shadow: inset 0 1px 0 #e9b8ff45, 0 0 14px #c146e42b
}

.channel-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px
}

.channel-heading>.ui-icon {
  width: 53px;
  height: 53px;
  flex: 0 0 53px;
  padding: 6px;
  border: 1px solid #93d9ba;
  border-radius: 13px;
  background: linear-gradient(#245b4d, #1d313e);
  filter: drop-shadow(0 0 7px #61e0b143)
}

.channel-telegram .channel-heading>.ui-icon {
  border-color: #85caef;
  background: linear-gradient(#284c71, #211b46);
  filter: drop-shadow(0 0 7px #5bbceb43)
}

.channel-heading h3 {
  font-size: 23px;
  margin: 0
}

.channel-card>p {
  margin: 0 0 20px;
  color: #eadff2
}

.channel-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 49px;
  border: 1px solid #71e6b0;
  border-radius: 10px;
  padding: 12px 15px;
  margin-top: auto;
  background: linear-gradient(125deg, #149d67, #086143);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transition: filter .2s, box-shadow .2s
}

.channel-button .ui-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px
}

.channel-button.contact-telegram {
  border-color: #6dcef4;
  background: linear-gradient(125deg, #1597cf, #07517d)
}

.channel-button:hover {
  filter: brightness(1.13);
  color: #fff
}

.enquiry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px
}

.enquiry-grid article,
.submit-steps article {
  min-width: 0;
  padding: 16px;
  border: 1px solid #be7ad9;
  border-radius: 13px;
  background: linear-gradient(140deg, #54236c, #26123b);
  box-shadow: inset 0 1px 0 #e8b8ff40, 0 0 12px #c046e42b
}

.enquiry-grid article>.ui-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 13px;
  filter: drop-shadow(0 0 7px #d079eb40)
}

.enquiry-grid h3 {
  font-size: 14px;
  margin: 0 0 10px;
  color: #f6dcff
}

.enquiry-grid p {
  margin: 0;
  color: #eadff1
}

.submit-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

.submit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px
}

.submit-number {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid #f2bcff;
  border-radius: 50%;
  background: linear-gradient(#e28af2, #9627b8);
  font-size: 16px;
  font-weight: 800
}

.submit-top>.ui-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 7px #cd78e640)
}

.submit-steps h3 {
  margin: 0 0 11px;
  color: #f5dcff
}

.submit-steps p {
  margin: 9px 0;
  color: #eadff1
}

.other-help-panel>p {
  margin-bottom: 15px;
  color: #e9ddf1
}

.help-guides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.help-guides article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #bf87d8;
  border-radius: 11px;
  background: linear-gradient(120deg, #f2e7fb, #cfb7e9);
  color: #29143c
}

.help-guides article:last-child {
  grid-column: 1/-1
}

.help-guides article>.ui-icon {
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  padding: 5px;
  border-radius: 8px;
  background: linear-gradient(#a051c3, #5c227e)
}

.help-guides p {
  margin: 0
}

.help-guides .inline-link {
  color: #731a8f;
  font-weight: 700
}

.contact-note {
  padding: 13px 15px;
  margin-top: 16px;
  border: 1px solid #e6bd8b;
  border-radius: 11px;
  background: linear-gradient(120deg, #fff0ce, #edc5e9);
  color: #2a1439
}

.contact-note p {
  margin: 0
}

.contact-content :is(a, button, summary):focus-visible {
  outline: 2px solid #eab0fa;
  outline-offset: 3px
}

@media(max-width:1350px) {
  .enquiry-grid {
    grid-template-columns: 1fr 1fr
  }

  .enquiry-grid>article:last-child {
    grid-column: 1/-1
  }

  .channel-card {
    padding: 17px
  }
}

@media(max-width:680px) {
  .contact-hero .slots-hero-art {
    background-position: 70% center
  }

  .channel-grid,
  .enquiry-grid,
  .submit-steps,
  .help-guides {
    grid-template-columns: 1fr
  }

  .channel-card,
  .enquiry-grid article,
  .submit-steps article {
    padding: 15px
  }

  .channel-heading {
    gap: 12px
  }

  .channel-heading>.ui-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px
  }

  .channel-heading h3 {
    font-size: 21px
  }

  .help-guides article {
    padding: 13px;
    gap: 10px
  }

  .help-guides article>.ui-icon {
    width: 29px;
    height: 29px;
    flex-basis: 29px
  }

  .channel-button {
    min-height: 48px
  }

  .submit-steps h3 {
    font-size: 14px
  }
}

@media(prefers-reduced-motion:reduce) {
  .channel-button {
    transition: none
  }
}
