/* ============================================================================
   Free-pass signup block — sits under the statistics band on the landing page.
   Type, colours and spacing follow the template (Oswald Variable + Open Sauce One).
   ========================================================================== */

.section-su,
section.su {
  position: relative;
  background:
    radial-gradient(1100px 420px at 8% -10%, rgba(225, 0, 15, .16), transparent 62%),
    #0b0e18;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--_typography---body, 'Open Sauce One', Arial, sans-serif);
  color: #fff;
  overflow: hidden;
}

.su__wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 92px 40px 96px;
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 72px;
  align-items: start;
}

/* ---------- left column ---------- */
.su__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ff5a52;
}

.su__flag {
  width: 16px;
  height: 16px;
  background: #e1000f;
  position: relative;
  flex: none;
}
.su__flag::before,
.su__flag::after { content: ''; position: absolute; background: #fff; }
.su__flag::before { left: 6.5px; top: 3px; width: 3px; height: 10px; }
.su__flag::after { top: 6.5px; left: 3px; height: 3px; width: 10px; }

.su__title {
  margin: 0;
  font-family: var(--_typography---headings, 'Oswald Variable', Impact, sans-serif);
  font-weight: 600;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.su__accent { color: #e1000f; }

.su__lead {
  margin: 22px 0 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .66);
}

/* live counter */
.su__counter { margin-top: 36px; }

.su__numbers {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--_typography---headings, 'Oswald Variable', Impact, sans-serif);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
}
.su__numbers #suTaken { color: #fff; }
.su__slash { color: rgba(255, 255, 255, .3); }
.su__numbers #suLimit { color: rgba(255, 255, 255, .55); }

.su__numbers-label {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.su__bar {
  margin-top: 14px;
  height: 4px;
  width: 100%;
  max-width: 340px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.su__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: #e1000f;
  transition: width .45s cubic-bezier(.2, .7, .3, 1);
}

.su__left {
  margin: 10px 0 0;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
}

.su__facts {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}
.su__facts li { position: relative; padding: 5px 0 5px 20px; }
.su__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 9px;
  height: 2px;
  background: #e1000f;
}

/* ---------- form ---------- */
.su__form-col { position: relative; }

.su__form {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 30px;
  backdrop-filter: blur(2px);
}

.su__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 18px;
}

.su__field { display: block; }
.su__field--full { grid-column: 1 / -1; }
.su__field--wide { grid-column: span 1; }

.su__label {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.su__input {
  width: 100%;
  padding: 9px 0 10px;
  font-family: inherit;
  font-size: 16px;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.su__input::placeholder { color: rgba(255, 255, 255, .28); }
.su__input:hover { border-bottom-color: rgba(255, 255, 255, .38); }
.su__input:focus { border-bottom-color: #e1000f; background: rgba(225, 0, 15, .05); }
.su__input.is-invalid { border-bottom-color: #ff5a52; }

.su__consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 24px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}
.su__consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.su__consent input:checked { background: #e1000f; border-color: #e1000f; }
.su__consent input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.su__consent a { color: #fff; text-decoration-color: #e1000f; text-underline-offset: 2px; }

.su__submit {
  width: 100%;
  margin-top: 22px;
  padding: 18px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: #e1000f;
  border: 1px solid #e1000f;
  border-radius: 6px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.su__submit:hover { background: #b3000c; border-color: #b3000c; }
.su__submit:active { transform: translateY(1px); }
.su__submit[disabled] { opacity: .55; cursor: progress; }

.su__msg {
  margin: 14px 0 0;
  min-height: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #ff8b85;
}
.su__msg.is-ok { color: #7ee2a8; }

.su__note {
  margin: 14px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .38);
}

/* ---------- success ---------- */
.su__success {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(225, 0, 15, .55);
  border-radius: 12px;
  padding: 44px 32px;
  text-align: center;
}
.su__check {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e1000f;
  color: #fff;
  font-size: 24px;
  line-height: 1;
}
.su__success-title {
  margin: 0 0 12px;
  font-family: var(--_typography---headings, 'Oswald Variable', Impact, sans-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}
.su__success-text { margin: 0 auto; max-width: 40ch; font-size: 16px; line-height: 1.55; }
.su__success-text--muted { margin-top: 12px; color: rgba(255, 255, 255, .6); font-size: 14px; }
.su__reset {
  margin-top: 26px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.su__reset:hover { background: #fff; color: #0b0e18; border-color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .su__wrap { grid-template-columns: 1fr; gap: 44px; padding: 72px 28px 76px; }
  .su__lead { max-width: 60ch; }
}
@media (max-width: 620px) {
  .su__wrap { padding: 56px 20px 60px; }
  .su__grid { grid-template-columns: 1fr; }
  .su__form { padding: 22px 18px; }
  .su__numbers { font-size: 44px; }
  .su__title { font-size: clamp(38px, 11vw, 52px); }
}

/* ---------- early-bird gift ---------- */
.su__gift {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 26px;
  padding: 16px 18px;
  max-width: 480px;
  background: rgba(225, 0, 15, .09);
  border: 1px solid rgba(225, 0, 15, .45);
  border-radius: 10px;
}
.su__gift-icon {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e1000f;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.su__gift strong {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}
.su__gift span:not(.su__gift-icon) {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}

/* ---------- exchange select ---------- */
.su__select-wrap { position: relative; }
.su__select-wrap::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid rgba(255, 255, 255, .55);
  border-bottom: 1.5px solid rgba(255, 255, 255, .55);
  transform: rotate(45deg);
  pointer-events: none;
}
.su__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 26px;
  cursor: pointer;
  background: transparent;
}
.su__select option { background: #12172a; color: #fff; }
.su__select:required:invalid { color: rgba(255, 255, 255, .3); }
.su__select option[disabled] { color: rgba(255, 255, 255, .4); }

.su__input--other { margin-top: 4px; }

.su__success-gift {
  margin: 18px auto 0;
  max-width: 42ch;
  font-size: 13px;
  letter-spacing: .02em;
  color: #ffb1ac;
}

/* anchor target: keep the block clear of the sticky navbar */
#free-pass { scroll-margin-top: 96px; }
@media (max-width: 767px) { #free-pass { scroll-margin-top: 80px; } }

/* ---------- birthday (native date picker on dark) ---------- */
.su__input--date {
  color-scheme: dark;
  min-height: 42px;
}
.su__input--date::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
}
.su__input--date::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.su__input--date:invalid::-webkit-datetime-edit { color: rgba(255, 255, 255, .3); }

/* ---------- niche chips ---------- */
.su__label-note { font-style: normal; opacity: .55; letter-spacing: .1em; }

.su__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.su__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.su__chip input { position: absolute; opacity: 0; pointer-events: none; }
.su__chip:hover { border-color: rgba(255, 255, 255, .38); color: #fff; }
.su__chip:has(input:checked) {
  background: rgba(225, 0, 15, .16);
  border-color: #e1000f;
  color: #fff;
}
.su__chip:has(input:focus-visible) { outline: 2px solid #e1000f; outline-offset: 2px; }
.su__chip.is-disabled { opacity: .35; cursor: not-allowed; }

.su__hint {
  display: block;
  margin-top: 6px;
  min-height: 15px;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .48);
}
.su__hint.is-ok { color: #7ee2a8; }
.su__hint.is-bad { color: #ff8b85; }