.signup-page {
  min-height: 100svh;
  isolation: isolate;
  position: relative;
  background: radial-gradient(ellipse at 30% 67%, #21151f, transparent 58%), var(--page);
}

.signup-backdrop {
  position: absolute;
  inset: 0 47% 0 0;
  z-index: -1;
  overflow: hidden;
  filter: blur(clamp(5px, .66vw, 12px));
  pointer-events: none;
}

.signup-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #342131;
  mask: url('./assets/hero/traffic-pack-traffic-spray.svg') 40% 61% / max(112%, 720px) auto no-repeat;
  opacity: .78;
}

.signup-layout {
  display: grid;
  grid-template-columns: minmax(0, 53fr) minmax(300px, 47fr);
  min-height: 100svh;
}

.signup-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .5fr);
  grid-template-rows: auto 1fr auto;
  gap: clamp(10px, 3.1svh, 27px) clamp(5px, 1.35vw, 24px);
  padding: clamp(18px, 5.15svh, 60px) clamp(12px, 2.3vw, 42px) clamp(14px, 4.25svh, 48px) clamp(22px, 4.4vw, 78px);
}

.signup-brand {
  display: grid;
  place-items: center;
  grid-area: 1 / 1;
  width: clamp(118px, 14vw, 218px);
  min-height: 44px;
}

.signup-copy {
  grid-area: 2 / 1;
  align-self: center;
  padding-block: 5px;
}

.signup-copy h1 {
  font-size: clamp(33px, min(4.45vw, 10.1svh), 91px);
  line-height: .9;
  letter-spacing: -.025em;
}

.signup-lands { color: var(--accent-lime); white-space: nowrap; }

@supports (mask-image: url('')) {
  .signup-lands {
    position: relative;
    display: inline-block;
    width: 1.94em;
    color: transparent;
  }

  .signup-lands::after {
    content: '';
    position: absolute;
    inset: -.16em -.035em -.28em;
    background: var(--accent-lime);
    mask: url('./assets/hero/traffic-pack-lands-visor.svg') center / contain no-repeat;
    pointer-events: none;
  }
}

@media (forced-colors: active) {
  .signup-lands { width: auto; color: CanvasText; }
  .signup-lands::after { display: none; }
}

.signup-copy p {
  max-width: 36ch;
  margin-block-start: clamp(15px, 3.4svh, 29px);
  color: var(--muted);
  font: 450 clamp(.9rem, 1.12vw, 1.12rem)/1.58 var(--button-font);
  text-wrap: pretty;
}

.signup-art {
  grid-area: 1 / 2 / 4;
  display: grid;
  place-items: center;
  min-width: 0;
}

.signup-art img {
  width: min(113%, 21vw, 51svh, 350px);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 20px 22px #0705099c);
}

.signup-links {
  grid-area: 3 / 1;
  justify-self: start;
}

.signup-socials {
  display: flex;
  align-items: center;
  gap: clamp(6px, .7vw, 12px);
}
.signup-socials a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: #2c202e;
  color: var(--ink);
}
.signup-socials a:is(:hover, :focus-visible) {
  background: var(--accent);
  color: var(--page);
}
.signup-socials .icon { width: 17px; height: 17px; }
.signup-socials .signup-social-mark { fill: currentColor; stroke: none; }

.signup-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: clamp(17px, 5.8svh, 64px) clamp(18px, 3.4vw, 76px);
  background: radial-gradient(ellipse at 16% 0%, #382236, transparent 82%), #211823;
}

.signup-panel > * { width: min(100%, 800px); }

.signup-panel h2 {
  margin-block-end: clamp(12px, 4.15svh, 42px);
  font-size: clamp(46px, min(6.65vw, 13svh), 118px);
}

.signup-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.signup-success h3 {
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.02;
  text-wrap: balance;
}

.signup-step h3:focus,
.signup-success h3:focus { outline: none; }

.signup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2.45svh, 24px) clamp(10px, 1.4vw, 20px);
}

.signup-fields label {
  display: grid;
  align-content: end;
  gap: clamp(5px, 1svh, 9px);
  min-width: 0;
  color: var(--rose-light);
  font: 650 .88rem/1.4 var(--button-font);
}

.signup-fields .signup-full { grid-column: 1 / -1; }
.signup-optional { color: var(--muted); font-weight: 450; }

.signup-fields :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: clamp(44px, 8.15svh, 70px);
  padding: 8px clamp(11px, 1.25vw, 20px);
  border: 0;
  border-radius: 9px;
  background: #160f18;
  color: var(--ink);
  font: 450 1rem/1.4 var(--button-font);
  transition: background-color .18s;
}

.signup-fields :is(input, select)[aria-invalid='true']:not(:focus) {
  outline: 1px solid var(--accent-hover);
  outline-offset: 0;
}

.signup-fields :is(input, select):focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.signup-select { position: relative; min-width: 0; }
.signup-select select { appearance: none; padding-inline-end: 35px; cursor: pointer; }
.signup-select select:invalid { color: var(--muted); }
.signup-select option { color: var(--ink); background: var(--field); }
.signup-select::after {
  content: '';
  position: absolute;
  inset-block-start: calc(50% - 5px);
  inset-inline-end: 15px;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

.signup-actions {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px;
}

.signup-step > .signup-primary,
.signup-actions {
  width: 100%;
  margin-block-start: clamp(10px, 3svh, 28px);
}

.signup-primary {
  min-height: clamp(44px, 8svh, 68px);
  padding-inline: 10px;
  font-size: clamp(1.05rem, 2vw, 1.48rem);
}

.signup-actions .button--secondary { border-color: transparent; background: #352536; }
.signup-actions .button--secondary:hover { color: var(--page); background: var(--ink); }

.signup-primary .icon {
  flex: none;
  width: 1em;
  height: 1em;
  transition: transform .18s;
}

.signup-step .button { -webkit-tap-highlight-color: transparent; }
.signup-step .signup-primary:disabled { background: var(--accent); }

@media (hover: hover) {
  .signup-fields :is(input, select):hover { background-color: #2a1b29; }
  .signup-primary:hover:not(:disabled) .icon { transform: translateX(3px); }
}

.signup-primary:active:not(:disabled) { background: #ec389a; }
.signup-panel p { font-family: var(--button-font); }
.signup-privacy,
.signup-noscript {
  color: var(--muted);
  font: 500 clamp(.78rem, 1vw, .91rem)/1.4 var(--button-font);
  text-align: center;
}

.signup-privacy {
  display: grid;
  place-items: center;
  width: fit-content;
  min-height: 44px;
  margin-block-start: clamp(4px, 1.8svh, 16px);
  text-decoration: underline;
  text-decoration-color: #8c687e;
  text-underline-offset: .22em;
}
.signup-privacy:hover { color: var(--ink); text-decoration-color: var(--accent); }

.signup-error {
  color: #ffc2df;
  font-size: .88rem;
  line-height: 1.5;
}
.signup-error:not(:empty) { margin-block-start: 8px; }
.signup-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.signup-success {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding-block: 16px;
}
.signup-check {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  color: var(--accent-lime);
  background: #bfef4117;
}
.signup-success h3 { margin: 7px 0 0; }
.signup-success p { color: var(--muted); line-height: 1.55; text-wrap: pretty; }
.signup-success .button { margin-block-start: 14px; }

@media (min-width: 701px) and (max-height: 565px) {
  .signup-intro { padding-block: 14px; }
  .signup-panel { padding-block: 14px; }
  .signup-panel h2 { font-size: clamp(41px, 10.5svh, 58px); }
  .signup-fields label { font-size: .8rem; }
}

@media (min-width: 701px) and (max-width: 920px) {
  .signup-panel { padding-inline: clamp(18px, 4vw, 37px); }
  .signup-intro { grid-template-columns: minmax(0, 1fr) minmax(86px, .38fr); }
  .signup-socials .icon { width: 15px; height: 15px; }
  .signup-actions .signup-primary { gap: 6px; font-size: 1rem; padding-inline: 8px; }
  .signup-actions .button--secondary { padding-inline: 12px; }
}

@media (max-width: 700px) {
  .signup-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .signup-backdrop { inset: 0; }
  .signup-backdrop::before { mask-position: 50% 0; }
  .signup-intro {
    width: min(100%, 560px);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(54px, .27fr);
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 16px var(--gutter) 9px;
  }
  .signup-brand { width: clamp(104px, 29vw, 150px); }
  .signup-copy { padding: 0; }
  .signup-copy h1 { font-size: clamp(30px, 8.4vw, 56px); }
  .signup-copy p { margin-block-start: 11px; font-size: .84rem; line-height: 1.4; }
  .signup-art { grid-area: 2 / 2 / 4; }
  .signup-art img { width: min(126%, 21vw, 135px); }
  .signup-socials { gap: 4px; }
  .signup-socials .icon { width: 14px; height: 14px; }
  .signup-panel { padding: 21px var(--gutter) max(18px, env(safe-area-inset-bottom)); }
  .signup-panel > :not(.signup-privacy) { width: min(100%, 560px); }
  .signup-panel h2 { font-size: clamp(46px, 12vw, 64px); margin-block-end: 15px; }
  .signup-fields label { font-size: .81rem; }
  .signup-fields :is(input, select) { padding-inline: 9px; }
  .signup-select select { padding-inline-end: 26px; }
  .signup-select::after { inset-inline-end: 10px; }
}

@media (max-width: 700px) and (max-height: 720px) {
  .signup-intro { gap: 4px 7px; padding-block: 10px 5px; }
  .signup-copy h1 { font-size: clamp(29px, 6.9vw, 48px); }
  .signup-copy p { font-size: .81rem; }
  .signup-art img { width: min(123%, 19vw, 105px); }
  .signup-panel { padding-block: 14px max(12px, env(safe-area-inset-bottom)); }
  .signup-panel h2 { font-size: 44px; margin-block-end: 11px; }
  .signup-fields :is(input, select),
  .signup-primary { min-height: 44px; }
}

@media (max-width: 350px) {
  .signup-socials .icon { width: 13px; height: 13px; }
  .signup-actions .signup-primary { gap: 7px; font-size: 1.05rem; }
  .signup-actions .button--secondary { padding-inline: 11px; }
}

@media (max-width: 390px) and (max-height: 600px) {
  .signup-intro { row-gap: 0; padding-block: 4px 2px; }
  .signup-copy p { margin-block-start: 7px; }
  .signup-panel { padding-block: 6px max(6px, env(safe-area-inset-bottom)); }
  .signup-panel h2 { font-size: 37px; margin-block-end: 4px; }
  .signup-fields { row-gap: 8px; }
  .signup-fields label { gap: 4px; }
  .signup-step > .signup-primary,
  .signup-actions { margin-block-start: 8px; }
  .signup-privacy { margin-block-start: 0; }
}

.signup-availability {
  display: grid;
  justify-items: start;
  gap: 18px;
}
.signup-availability p {
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.45;
}