/* ============================================================
   CHAZ CARTI — Public Styles
   Brand-deck system: electric blue × magenta on cool black,
   heavy grotesque display (Montserrat) + Poppins body
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --blue:          #2ea6ff;
  --blue-bright:   #4db4ff;
  --magenta:       #c637ff;
  --magenta-bright:#d25bff;
  --bg:            #08090f;
  --card-bg:       rgba(16, 18, 28, 0.62);
  --card-border:   rgba(255, 255, 255, 0.08);
  --text:          #f4f4f7;
  --text-dim:      rgba(255, 255, 255, 0.55);
  --grad:          linear-gradient(135deg, #2ea6ff 0%, #c637ff 100%);
  --error-bg:      rgba(255, 68, 85, 0.12);
  --error-border:  rgba(255, 68, 85, 0.4);
  --error-text:    #ff8fa0;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---- Background atmosphere ---- */
/* Deck is flat black with photo bleeds; the grid is retired to an inert layer. */
.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* NOTE: class names kept for markup compatibility — recolored to brand.
   .bg-glow-pink = blue glow (top-right), .bg-glow-cyan = magenta glow (bottom-left) */
.bg-glow-pink {
  position: fixed;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(46, 166, 255, 0.14) 0%, transparent 65%);
  top: -260px;
  right: -240px;
  pointer-events: none;
  z-index: 2;
}

.bg-glow-cyan {
  position: fixed;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(198, 55, 255, 0.12) 0%, transparent 65%);
  bottom: -220px;
  left: -200px;
  pointer-events: none;
  z-index: 2;
}

/* ---- Landscape side panels ---- */
.side-panel {
  display: none;
}

@media (min-width: 780px) {
  .side-panel {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 30%;
    z-index: 1;
    overflow: hidden;
  }

  .side-panel-left {
    left: 0;
    -webkit-mask-image: linear-gradient(to right, black 30%, transparent 100%);
    mask-image: linear-gradient(to right, black 30%, transparent 100%);
  }

  .side-panel-right {
    right: 0;
    -webkit-mask-image: linear-gradient(to left, black 30%, transparent 100%);
    mask-image: linear-gradient(to left, black 30%, transparent 100%);
  }

  .sp-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
  }

  .sp-slide.active {
    opacity: 1;
  }
}

/* ---- Background slideshow (photos + video) ---- */
.photo-slideshow {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

/* First hero slide loads via CSS so the browser fetches only the
   breakpoint-appropriate file (960px mobile set vs full size). */
.slide-hero-first {
  background-image: url('/images/m/DSC00946.JPG');
}

@media (min-width: 769px) {
  .slide-hero-first {
    background-image: url('/images/DSC00946.JPG');
  }
}

/* Video slide */
.slide-video {
  background: #08090f;
}

.slide-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transform: scale(0.78);
  transform-origin: center 15%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 55%, transparent 100%);
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 15, 0.74);
  z-index: 1;
}

/* ---- Layout ---- */
.container {
  position: relative;
  z-index: 3;
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

/* ---- Hero / Logo ---- */
.hero {
  text-align: center;
  margin-bottom: 36px;
}

/* Still used by the consent page, which is set in type rather than the mark. */
.logo {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f7f7fa;
  margin: 0 0 10px;
  text-shadow: 0 0 34px rgba(46, 166, 255, 0.28);
}

/* ---- The Carti Parti mark ----
   The team's artwork, lit the way the rest of the site is lit.

   Two drop-shadows rather than one, and the order matters: filters chain, so
   the magenta is blurred over the result of the blue rather than beside it.
   That gives a tight blue edge sitting inside a wider magenta bloom — the same
   blue-core/magenta-halo pairing as the border beams, instead of one flat
   coloured haze. drop-shadow follows the alpha channel, so the light traces the
   letterforms rather than a box around them; that is the whole reason the black
   field had to come out of the file first.

   Sized by width because the mark is two stacked lines: setting a height would
   make its width swing with the artwork's aspect ratio the next time the team
   sends a revision. */
/* 62vw is affordable again. The first artwork was 733px wide and a 430pt phone
   at 3x wanted 801 device pixels for it, so the width had to be pulled back to
   56vw to stop the browser enlarging the mark. The team's proper export is
   1200px, which covers that same case 1.5x over, so the mark can go back to
   the size it wants to be. build-logo.js prints the coverage table this is
   based on — check it before changing either number. */
.logo-mark {
  display: block;
  width: clamp(210px, 62vw, 330px);
  height: auto;
  margin: 0 auto 12px;
  filter:
    drop-shadow(0 0 9px rgba(46, 166, 255, 0.55))
    drop-shadow(0 0 30px rgba(198, 55, 255, 0.34));
}

/* The success page is a receipt, not a front door. */
.logo-mark-sm {
  width: clamp(170px, 46vw, 240px);
  margin-bottom: 12px;
}

/* ============================================================
   SMS OPT-IN SLIDE

   Built from the form's existing parts — .checkbox-label, .consent-link,
   .form-title's scale — so it reads as one more question rather than a page
   from a different document.

   The hierarchy is deliberate and is the whole design: headline, then what you
   get, then the ask, then the disclosure. The dense legal sentence is last and
   quietest, because it is the thing the law requires rather than the thing that
   should persuade anyone. Inverting that — legal block first — is what makes
   these screens feel like a trap.
   ============================================================ */
.sms-slide { text-align: left; }

.sms-head {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 5.4vw, 26px);
  font-weight: 900;
  letter-spacing: 0.4px;
  color: var(--text);
  margin: 0 0 10px;
}

.sms-lede {
  font-size: 15px;
  color: var(--text);
  margin: 0 0 6px;
}
.sms-lede strong { font-weight: 700; }

.sms-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 18px;
}

/* The benefits. A list, not prose — three scannable lines is the point, and the
   tick sits in its own column so wrapped text lines up under itself rather than
   under the mark. */
.sms-benefits {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sms-benefits li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.sms-tick {
  color: var(--blue);
  font-weight: 700;
  line-height: 1.45;
}

.sms-ask {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

/* The disclosure is small and quiet: it has to be present and legible, but it
   is not the argument. */
.sms-disclosure {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.sms-consent-label { align-items: flex-start; }

.sms-fineprint {
  margin: 10px 0 0 34px;      /* clears the checkbox column */
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}
.sms-fineprint .consent-link { font-size: 11.5px; }

/* ---- The confirmation ----
   Appears only once the box is ticked. Tasteful rather than a celebration: a
   tick that draws itself, and a line of copy sliding up under it. */
.sms-confirm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(46, 166, 255, 0.28);
  border-radius: 11px;
  background: rgba(46, 166, 255, 0.08);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  animation: sms-confirm-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sms-confirm-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.sms-confirm-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #06121f;
}

.sms-confirm-mark svg { width: 13px; height: 13px; display: block; }

/* The tick draws itself along its own path. stroke-dasharray is set to the
   path's length so the dash starts fully offset — i.e. invisible — and animates
   to zero, which reads as a hand drawing it rather than a graphic appearing. */
.sms-confirm-mark path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: sms-tick-draw 0.34s 0.08s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes sms-tick-draw { to { stroke-dashoffset: 0; } }

/* ---- Declining ----
   The way past this slide when the box is unticked. Ghost-styled so the opt-in
   is clearly the encouraged path, but the same size and shape as every other
   button on the form — subtle is not the same as hidden, and this is the only
   way forward for anyone who says no. */
.sms-skip {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 18px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.sms-skip:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.sms-skip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sms-confirm { animation: none; }
  .sms-confirm-mark path { animation: none; stroke-dashoffset: 0; }
}

.tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 18px;
}

.motto {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 6vw, 40px);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(198, 55, 255, 0.4));
  transform: rotate(-1.5deg);
  display: inline-block;
  margin: 0 auto;
}

.motto-footer {
  text-align: center;
  display: block;
  margin: 28px auto 0;
  font-size: clamp(14px, 3.5vw, 22px);
  letter-spacing: 4px;
  opacity: 0.5;
  filter: none;
  transform: rotate(0deg);
}

/* ---- Host Instagram card ---- */
.host-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.host-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.host-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              var(--grad) border-box;
}

.host-avatar-fallback {
  background: rgba(46, 166, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--blue-bright);
}

.host-info {
  flex: 1;
  min-width: 0;
}

/* "Hosted by", above the name — the logo's treatment at card scale rather than
   the quiet blue eyebrow it started as. Same Montserrat 900, same near-white,
   same blue bloom behind it.

   The glow is scaled, not copied: .logo blurs 34px at up to 52px of type, which
   is roughly 0.65em. Reused verbatim at this size it would be a haze the width
   of the whole card with no discernible source. Tracking is a little looser than
   the logo's 0.5px for the opposite reason — that value is 0.01em, invisible on
   a 52px word and cramped on a 16px one. */
.host-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #f7f7fa;
  text-shadow: 0 0 14px rgba(46, 166, 255, 0.45);
  line-height: 1.15;
  margin-bottom: 5px;
}

.host-fullname {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.host-handle {
  font-size: 13px;
  color: var(--blue-bright);
  text-decoration: none;
  font-weight: 500;
}

.host-handle:hover { text-decoration: underline; }

/* Posts / followers / following, the way Instagram stacks them under the name.
   Wraps rather than truncates: on a narrow phone the third stat drops to its
   own line instead of being cut off mid-number. */
.host-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 5px;
}

.host-stat {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* The number carries the emphasis, the label stays quiet — same weighting
   Instagram uses, and it keeps the row readable at 11px. */
.host-stat strong {
  color: var(--text);
  font-weight: 700;
}

/* On a phone the Follow button competes with the stats for the same row and
   leaves them ~150px, so all three wrap onto separate lines and the card grows
   tall. Dropping the button to its own full-width line gives the stats the
   whole width and they sit on one row, the way a profile reads. */
@media (max-width: 480px) {
  .host-card-top { flex-wrap: wrap; }

  .host-ig-btn {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 13px;
  }
}

.host-ig-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--grad);
  border-radius: 100px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.15s;
}

.host-ig-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.host-bio {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin: 14px 0 0;
  white-space: pre-line;
}

.host-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 166, 255, 0.3);
  transition: border-color 0.15s;
  word-break: break-all;
}

.host-link:hover { border-color: var(--blue); }

/* ---- Show date banner ---- */
.show-date-banner {
  background: rgba(46, 166, 255, 0.06);
  /* The static border is dimmed to a base tone: the beam ring (beam.css) traces
     the same edge, and a bright border underneath would flatten it. */
  border: 1px solid rgba(46, 166, 255, 0.14);
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 28px;
  text-align: center;
  --beam-from: var(--blue);
  --beam-to: var(--magenta-bright);
  --beam-duration: 15s;
}

.show-date-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 7px;
}

.maps-hint {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--magenta-bright);
  opacity: 0.85;
  font-weight: 600;
}

/* ---- The show has started ----
   Set by services/show-state.js, the same helper that decides what the admin bar
   says, so the doors cannot be open on one screen and shut on the other.
   The form keeps accepting applications while live — people turn up at the
   door — so this changes what the banner SAYS, not what the page does. */
.show-date-banner.is-live {
  --beam-from: #ff4455;
  --beam-to: var(--magenta-bright);
  --beam-duration: 7s;
  border-color: rgba(255, 68, 85, 0.34);
  background: rgba(255, 68, 85, 0.07);
}

.show-date-banner.is-live .show-date-label { color: #ff6a77; }

.show-live-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4455;
  animation: show-live-pulse 1.9s ease-out infinite;
}

@keyframes show-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 68, 85, 0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 68, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 68, 85, 0); }
}

.show-live-note {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #ff8f99;
}

/* Still lit, just no longer beating. */
@media (prefers-reduced-motion: reduce) {
  .show-live-pip { animation: none; box-shadow: 0 0 0 4px rgba(255, 68, 85, 0.22); }
}

.show-date-banner-tappable {
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.show-date-banner-tappable:hover {
  background: rgba(46, 166, 255, 0.1);
  border-color: rgba(46, 166, 255, 0.3);
}

.show-date-banner-tappable:active {
  transform: scale(0.98);
}

.show-date-banner-tappable:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.show-date-value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.show-location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ---- Form card ---- */
.form-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 40px 36px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.form-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--text);
}

.form-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 30px;
}

/* ---- Error ---- */
.error-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--error-text);
  font-size: 13px;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Inline field errors (client-side validation) */
.field-error {
  color: var(--error-text);
  font-size: 12px;
  line-height: 1.4;
  margin: 7px 0 0;
}

.form-group input.input-invalid {
  border-color: var(--error-border);
}

/* ---- Form groups ---- */
.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}

.form-group input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  padding: 14px 18px;
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.form-group input:focus {
  border-color: rgba(46, 166, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(46, 166, 255, 0.12);
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.18);
}

/* ---- Optional photo upload ----
   The file input is visually hidden (but focusable) and the label is the
   visible control, so these rules sit after `.form-group label` / `.form-group
   input` on purpose — equal specificity, later wins. */
.photo-group {
  margin-bottom: 26px;
}

.photo-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.photo-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.optional-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--blue-bright);
  background: rgba(46, 166, 255, 0.12);
  border: 1px solid rgba(46, 166, 255, 0.28);
  border-radius: 999px;
  padding: 3px 8px;
  line-height: 1;
}

.photo-help {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 12px;
}

/* Hidden from sight, still in the tab order — Enter/Space opens the picker. */
.photo-group .photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.photo-group .photo-dropzone {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(46, 166, 255, 0.38);
  border-radius: 18px;
  background: rgba(46, 166, 255, 0.04);
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.photo-group .photo-dropzone:hover,
.photo-group .photo-dropzone.is-dragging {
  border-style: solid;
  border-color: rgba(46, 166, 255, 0.75);
  background: rgba(46, 166, 255, 0.09);
}

.photo-group .photo-dropzone.has-photo {
  border-style: solid;
  border-color: rgba(46, 166, 255, 0.45);
  background: rgba(46, 166, 255, 0.06);
}

.photo-input:focus-visible + .photo-dropzone {
  border-style: solid;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 166, 255, 0.18);
}

/* Gradient ring via the same padding-box/border-box trick as .host-avatar */
.photo-avatar {
  position: relative;
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  /* The padding-box layer must be opaque or the border-box gradient shows
     through the whole disc instead of reading as a ring. */
  background: linear-gradient(#12141e, #12141e) padding-box,
              var(--grad) border-box;
  transition: transform 0.2s ease;
}

.photo-group .photo-dropzone:hover .photo-avatar {
  transform: scale(1.02);
}

.photo-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.photo-avatar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-bright);
  opacity: 0.85;
}

.photo-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.photo-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.25;
}

.photo-meta {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.photo-btn {
  min-height: 38px;
  padding: 10px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--blue-bright);
  background: rgba(46, 166, 255, 0.1);
  border: 1px solid rgba(46, 166, 255, 0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.photo-btn:hover {
  background: rgba(46, 166, 255, 0.18);
  border-color: rgba(46, 166, 255, 0.6);
}

.photo-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.photo-btn-remove {
  color: var(--error-text);
  background: rgba(255, 68, 85, 0.08);
  border-color: rgba(255, 68, 85, 0.28);
}

.photo-btn-remove:hover {
  background: rgba(255, 68, 85, 0.16);
  border-color: rgba(255, 68, 85, 0.5);
}

.photo-btn-remove:focus-visible {
  outline-color: var(--error-text);
}

/* Live region: stays in the a11y tree when empty (display:none would drop it) */
.photo-status {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 9px 0 0;
}

.photo-status:empty {
  margin: 0;
}

.photo-status-ok    { color: var(--blue-bright); }
.photo-status-error { color: var(--error-text); }

/* Beats the display values set above when JS toggles the hidden attribute */
.photo-group [hidden] {
  display: none;
}

@media (max-width: 420px) {
  .photo-group .photo-dropzone {
    gap: 13px;
    padding: 13px;
  }
  .photo-avatar {
    width: 92px;
    height: 92px;
  }
  .photo-cta  { font-size: 12px; }
  .photo-meta { font-size: 10px; }
  .photo-help { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-group .photo-dropzone,
  .photo-avatar,
  .photo-btn {
    transition: none;
  }
  .photo-group .photo-dropzone:hover .photo-avatar {
    transform: none;
  }
}

/* Instagram @ prefix */
.input-prefix-wrap {
  position: relative;
}

.input-prefix {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue-bright);
  font-weight: 600;
  font-size: 15px;
  pointer-events: none;
  z-index: 1;
}

.input-prefix-wrap input {
  padding-left: 34px;
}

/* ---- Checkboxes ---- */
.checkboxes {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s;
  margin-top: 1px;
}

.checkbox-label input:focus-visible ~ .checkbox-custom {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.checkbox-label input:checked ~ .checkbox-custom {
  background: var(--grad);
  border-color: transparent;
}

.checkbox-label input:checked ~ .checkbox-custom::after {
  content: '';
  display: block;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -2px);
}

.consent-link {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 166, 255, 0.35);
  transition: border-color 0.15s;
}

.consent-link:hover {
  border-color: var(--blue);
}

/* ---- Submit button ---- */
.submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  background: var(--grad);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 8px 28px rgba(46, 166, 255, 0.3);
}

.submit-btn:hover {
  opacity: 0.94;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(198, 55, 255, 0.4);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn.loading {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

.btn-arrow {
  font-size: 17px;
  font-family: sans-serif;
}

/* ---- Footer ---- */
.page-footer {
  text-align: center;
  margin-top: 36px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.18);
}

/* ---- Success page ---- */
.success-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 48px 40px;
  text-align: center;
  max-width: 440px;
  width: 100%;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.success-icon {
  width: 72px;
  height: 72px;
  background: rgba(46, 166, 255, 0.1);
  border: 1px solid rgba(46, 166, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.success-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 16px;
}

.success-message {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  margin: 0 0 16px;
}

.success-note {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}

/* ---- Consent page ---- */
.consent-content {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 24px;
  max-height: 420px;
  overflow-y: auto;
}

/* ---- Mobile ---- */
@media (max-width: 560px) {
  .container { padding: 28px 16px 48px; }
  .form-card { padding: 28px 20px; }
  .success-card { padding: 36px 24px; }
}

/* Backdrop blur over a cross-fading background re-blurs every frame — a
   known jank/battery drain on mid-range phones. The cards sit over a 74%
   black overlay, so a slightly more opaque flat background looks the same. */
@media (max-width: 768px) {
  .host-card, .form-card, .success-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(16, 18, 28, 0.9);
  }
}

/* The `hidden` attribute is only a UA rule, so any class that sets a display
   value silently overrides it — .submit-btn is display:flex, which made a
   hidden button keep rendering. Make `hidden` authoritative. */
[hidden] { display: none !important; }

/* ============================================================
   ONE-QUESTION-AT-A-TIME FORM
   Progressive enhancement inside the existing form card: the page
   ships complete and single-page, and form-slides.js groups it.
   ============================================================ */

/* Only hide the non-active slides once JS has taken over, so the no-JS
   page keeps every field visible. */
.is-sliced .fslide { display: none; }
.is-sliced .fslide.is-on { display: block; }

.fs-in      { animation: fs-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fs-in-back { animation: fs-in-back 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes fs-in      { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes fs-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---- Rail above the fields ---- */
.slide-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.slide-dots { display: flex; gap: 7px; }

.slide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  cursor: default;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.slide-dot.is-done { background: rgba(46, 166, 255, 0.5); cursor: pointer; }

.slide-dot.is-active {
  width: 26px;
  background: var(--grad);
}

.slide-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.slide-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---- Nav ---- */
.slide-nav {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 22px;
}

.slide-nav .submit-btn { margin-top: 0; }

.slide-back {
  flex-shrink: 0;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.16s, color 0.16s;
}

.slide-back:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }
.slide-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The submit button sits in the nav row once slides are active, so drop the
   standalone spacing it carries in the single-page layout. */
.is-sliced .submit-btn { margin-top: 0; }

/* Keep the card from jumping as slides of different heights swap in. */
.is-sliced { min-height: 232px; }

@media (max-width: 560px) {
  .slide-back { padding: 0 15px; font-size: 10px; }
  .is-sliced { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-in, .fs-in-back { animation: none; }
  .slide-dot { transition: none; }
}

/* Dress code / theme on the public show banner. */
.show-dress {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--magenta-bright);
}