main {
  position: relative;
  display: grid;
  width: min(760px, calc(100% - 48px));
  min-height: 100svh;
  margin: 0 auto;
  align-items: center;
  padding: clamp(112px, 15vh, 160px) 0 clamp(80px, 12vh, 130px);
}

main::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 52%;
  left: 50%;
  width: min(900px, 94vw);
  aspect-ratio: 1.5;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(91, 145, 255, .12), rgba(62, 101, 202, .035) 46%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.support {
  display: grid;
  gap: clamp(54px, 8vh, 78px);
  width: 100%;
}

.support-intro {
  display: grid;
  justify-items: center;
  gap: 17px;
  text-align: center;
  animation: support-arrive .8s cubic-bezier(.16, 1, .3, 1) both;
}

.support-intro h1 {
  margin: 0;
  color: rgba(249, 250, 255, .97);
  font-size: clamp(62px, 9vw, 104px);
  font-weight: 400;
  letter-spacing: -.067em;
  line-height: .86;
  text-shadow: 0 0 36px rgba(111, 164, 255, .12), 0 5px 32px rgba(0, 0, 0, .5);
}

.support-beacon {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e5f4ff;
  box-shadow: 0 0 8px #d3ecff, 0 0 26px rgba(98, 180, 255, .92), 0 0 58px rgba(81, 133, 255, .52);
  animation: support-beacon 3.4s ease-in-out infinite;
}

.support-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px clamp(32px, 7vw, 76px);
  width: 100%;
  text-align: left;
  animation: form-arrive .9s .12s cubic-bezier(.16, 1, .3, 1) both;
}

.support-field { display: grid; gap: 10px; }
.support-field > span,
.support-choices legend { color: rgba(202, 216, 244, .46); font: 9px/1.2 var(--mono); letter-spacing: .04em; }
.support-subject,
.support-message { grid-column: 1 / -1; }

.support-field input,
.support-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(150, 183, 244, .24);
  border-radius: 0;
  padding: 9px 0 13px;
  appearance: none;
  background: transparent;
  box-shadow: 0 12px 24px -24px rgba(105, 162, 255, 0);
  color: rgba(248, 250, 255, .96);
  font: clamp(18px, 2vw, 22px)/1.4 var(--serif);
  transition: border-color .25s ease, box-shadow .3s ease;
}

.support-field textarea { min-height: 132px; resize: vertical; }
.support-field input:focus,
.support-field textarea:focus { border-color: rgba(190, 216, 255, .72); box-shadow: 0 17px 28px -24px rgba(105, 162, 255, .95); outline: none; }

.support-choices {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 46px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.support-choices legend { grid-column: 1 / -1; margin-bottom: 3px; padding: 0; }
.support-choices label { position: relative; min-width: 0; cursor: pointer; }
.support-choices input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  appearance: none;
  opacity: 0;
  pointer-events: none;
}

.support-choices label > span {
  position: relative;
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 7px 1px 14px;
  border-bottom: 1px solid rgba(150, 183, 244, .18);
  color: rgba(223, 231, 249, .42);
  transition: color .28s ease, border-color .32s ease, text-shadow .32s ease;
}

.support-choices label > span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: rgba(190, 219, 255, .88);
  box-shadow: 0 0 14px rgba(105, 166, 255, .76);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.support-choices input:checked + span { color: rgba(248, 250, 255, .96); border-color: rgba(172, 202, 255, .42); text-shadow: 0 0 18px rgba(124, 177, 255, .18); }
.support-choices input:checked + span::after { opacity: 1; transform: scaleX(1); }
.support-choices input:focus-visible + span { outline: 1px solid rgba(180, 211, 255, .72); outline-offset: 5px; }

.app-choices img {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 22%;
  box-shadow: 0 8px 21px rgba(0, 0, 0, .4), 0 0 20px rgba(112, 165, 255, .08);
  filter: saturate(.7) brightness(.76);
  object-fit: cover;
  transition: filter .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

.support-app-name {
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 29px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
}

.app-choices input:checked + span img { filter: none; transform: translateY(-2px); }
.support-honey { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.support-send {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 4px;
}

.support-send button {
  position: relative;
  display: flex;
  width: auto;
  min-width: 158px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px 15px;
  border: 1px solid rgba(175, 207, 255, .28);
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 42px rgba(79, 137, 255, .06);
  color: rgba(246, 249, 255, .95);
  font: 22px/1 var(--serif);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .3s ease, background .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.support-send button:hover,
.support-send button:focus-visible { border-color: rgba(215, 231, 255, .68); box-shadow: 0 0 30px rgba(84, 145, 255, .15); outline: none; transform: translateY(-2px); }
.support-send button:disabled { cursor: wait; opacity: .6; transform: none; }
.support-form[data-state="sending"] button { animation: support-send 1s ease-in-out infinite; }
.support-form[data-state="sent"] button { border-color: rgba(159, 238, 202, .4); color: #c8ffe5; }
.support-form[data-state="error"] button { border-color: rgba(255, 185, 185, .36); color: #ffd8d8; }
.support-status { min-height: 12px; margin: 0; color: rgba(219, 230, 251, .58); font: 9px/1.35 var(--mono); text-align: center; }

@keyframes support-arrive { from { opacity: 0; filter: blur(6px); transform: translateY(16px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes form-arrive { from { opacity: 0; filter: blur(5px); transform: translateY(22px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes support-beacon { 50% { opacity: .58; transform: scale(.84); box-shadow: 0 0 6px #d3ecff, 0 0 18px rgba(98, 180, 255, .68), 0 0 38px rgba(81, 133, 255, .35); } }
@keyframes support-send { 50% { opacity: .5; } }

@media (max-width: 620px) {
  main { width: min(100% - 40px, 480px); padding: 104px 0 76px; }
  .support { gap: 48px; }
  .support-form { grid-template-columns: 1fr; gap: 29px; }
  .support-field,
  .support-subject,
  .support-message,
  .support-send { grid-column: 1; }
  .support-choices { gap: 10px; }
  .support-choices label > span { min-height: 50px; gap: 7px; padding-bottom: 12px; }
  .app-choices img { width: 26px; height: 26px; }
  .support-app-name { font-size: clamp(16px, 4.7vw, 20px); }
  .support-send button { min-width: 148px; padding: 13px 22px 14px; font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .support-intro,
  .support-form,
  .support-beacon,
  .support-choices label > span,
  .support-choices label > span::after,
  .app-choices img,
  .support-field input,
  .support-field textarea,
  .support-send button { animation: none; transition: none; }
}