:root {
  --ink: #17103f;
  --deep: #10082f;
  --deep-2: #20115f;
  --pink: #f53698;
  --coral: #ff7657;
  --aqua: #4fd2e7;
  --yellow: #ffd529;
  --ivory: #fbfaff;
  --muted: #777189;
  --line: #e5e0eb;
  --shadow: 0 22px 70px rgba(32, 16, 82, .16);
  --radius: 28px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--deep); color-scheme: light; }
body { margin: 0; font-family: Manrope, system-ui, sans-serif; color: var(--ink); background: radial-gradient(circle at 70% 0, #35217e 0, var(--deep) 50%); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid rgba(245,54,152,.32); outline-offset: 3px; }

.app { min-height: 100vh; overflow: hidden; }
.screen { display: none; min-height: 100dvh; }
.screen.is-active { display: block; animation: enter .36s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

.hero { position: relative; min-height: 100svh; color: white; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -3; background: url('./assets/hero-crowd-v1.png') 53% 50% / cover no-repeat; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(8,5,30,.25), rgba(12,6,41,.4) 28%, rgba(14,8,49,.94) 83%, #120936 100%), linear-gradient(90deg, rgba(12,5,42,.9), transparent 76%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 80% 42%, rgba(66,207,235,.18), transparent 32%), radial-gradient(circle at 14% 70%, rgba(245,54,152,.28), transparent 40%); }
.hero-header, .hero-content { width: min(100% - 36px, 1180px); margin-inline: auto; }
.hero-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.logo { width: clamp(190px, 28vw, 310px); }
.preview-pill { display: inline-flex; padding: 10px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .14em; background: rgba(18,9,54,.45); backdrop-filter: blur(12px); }
.hero-content { min-height: calc(100svh - 86px); display: flex; flex-direction: column; justify-content: flex-end; padding: 54px 0 58px; }
.event-chip { display: flex; align-items: center; gap: 9px; width: max-content; max-width: 100%; padding: 8px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(16,8,47,.58); backdrop-filter: blur(10px); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.event-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); }
.eyebrow { margin: 24px 0 10px; font: 800 11px/1.2 Montserrat, sans-serif; letter-spacing: .18em; color: var(--yellow); }
.eyebrow.aqua { color: #14aebe; }
.eyebrow.pink { color: #d5287d; }
.eyebrow.yellow { color: #bf8c00; }
h1, h2 { margin: 0; font-family: Montserrat, sans-serif; letter-spacing: -.045em; }
h1 { max-width: 760px; font-size: clamp(48px, 14vw, 104px); line-height: .9; }
h1 em, h2 em { color: var(--pink); font-style: normal; }
.hero-copy { max-width: 610px; margin: 22px 0; color: rgba(255,255,255,.82); font-size: clamp(16px, 4.7vw, 21px); line-height: 1.5; }
.prize-card { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 14px; width: min(100%, 650px); min-height: 126px; padding: 10px 16px 10px 8px; overflow: hidden; border: 1px solid rgba(255,220,104,.68); border-radius: 22px; background: linear-gradient(118deg, rgba(255,221,205,.26), rgba(201,150,213,.23) 42%, rgba(79,48,117,.48) 100%), rgba(51,25,79,.72); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 50px rgba(0,0,0,.2); }
.prize-visual { position: relative; display: grid; place-items: center; width: 116px; height: 106px; border-radius: 20px; background: radial-gradient(circle at 45% 42%, rgba(255,255,255,.34), rgba(246,178,211,.24) 44%, rgba(140,87,162,.12) 70%, transparent 73%); }
.prize-visual::before { content: ''; position: absolute; inset: 7px 3px 2px; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,125,.28), rgba(79,210,231,.1) 55%, transparent 72%); filter: blur(2px); }
.prize-visual img { position: relative; z-index: 1; width: 126px; max-width: none; filter: brightness(1.18) contrast(1.05) drop-shadow(0 12px 17px rgba(0,0,0,.48)); }
.prize-card small, .prize-recap small { color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.prize-card strong { display: block; margin: 5px 0; font-size: 14px; line-height: 1.35; }
.prize-card p { margin: 0; color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.4; }
.primary { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 60px; padding: 16px 24px; border: 0; border-radius: 999px; color: white; background: linear-gradient(100deg, #d927b8, #fc3b8d 53%, #ff784f); box-shadow: 0 10px 0 #ac1e78, 0 18px 40px rgba(245,54,152,.32); font-family: Montserrat, sans-serif; font-weight: 900; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.primary:not(:disabled):active { transform: translateY(4px); box-shadow: 0 6px 0 #ac1e78; }
.primary:disabled { opacity: .38; filter: grayscale(.3); cursor: not-allowed; box-shadow: none; }
.hero-cta { width: min(100%, 650px); margin-top: 22px; }
.hero-partners { width: min(100%, 650px); margin: 22px 0 14px; padding: 0 4px; }
.hero-partners small { display: block; margin-bottom: 9px; color: rgba(255,255,255,.48); font: 800 8px/1.2 Montserrat, sans-serif; letter-spacing: .18em; }
.hero-partners > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; }
.hero-partners span { color: rgba(255,255,255,.78); font-size: 10px; font-weight: 800; white-space: nowrap; }
.trust-line { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 700; }
.trust-line span::first-letter { color: var(--aqua); }
.heart-transition { display: none; }

.quiz { background: radial-gradient(circle at 55% 0, rgba(245,54,152,.07), transparent 34%), var(--ivory); padding-bottom: 130px; }
.step-header { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 54px 1fr 72px; align-items: center; gap: 12px; min-height: 82px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(251,250,255,.92); backdrop-filter: blur(14px); }
.back { width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: white; font-size: 25px; }
.mini-logo { width: 72px; justify-self: end; }
.progress-copy span { display: block; margin-bottom: 8px; color: #6f697d; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e8e4ec; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--pink)); }
.progress i[data-progress="1"] { width: 20%; }
.progress i[data-progress="2"] { width: 40%; }
.progress i[data-progress="3"] { width: 60%; }
.progress i[data-progress="4"] { width: 80%; }
.progress i[data-progress="5"], .progress i.complete { width: 100%; }
.question, .rating-grid, .choice-grid, .feeling-cloud, .future-options, .partner-grid, form, .selection-note, .prize-recap { width: min(100% - 36px, 820px); margin-inline: auto; }
.question { padding: 42px 0 24px; }
.question .eyebrow { margin: 0 0 10px; }
h2 { font-size: clamp(38px, 11vw, 76px); line-height: .96; }
.question > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.rating-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rating-option { min-height: 124px; padding: 16px 10px; border: 2px solid transparent; border-radius: 24px; color: var(--ink); background: white; box-shadow: var(--shadow); }
.rating-option:first-child { grid-column: 1 / -1; }
.rating-option span { display: block; margin-bottom: 8px; font-size: 38px; }
.rating-option strong { font-size: 13px; }
.rating-option.is-selected { border-color: var(--pink); background: #fff7fb; box-shadow: 0 16px 45px rgba(245,54,152,.18); }

.choice-grid { display: grid; gap: 12px; }
.choice-card { display: grid; grid-template-columns: 50px 1fr 28px; align-items: center; gap: 12px; min-height: 96px; padding: 14px; text-align: left; border: 2px solid transparent; border-radius: 24px; color: var(--ink); background: white; box-shadow: var(--shadow); }
.choice-card > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 17px; color: #76205e; background: #ffd8ef; font-size: 25px; }
.choice-card strong, .future-options strong, .partner-grid strong { display: block; font-size: 15px; line-height: 1.3; }
.choice-card small, .future-options small, .partner-grid small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.choice-card > i, .partner-grid > button > i { color: #c9c4ce; font-size: 22px; font-style: normal; }
.choice-card.is-selected, .partner-grid > button.is-selected { border-color: var(--pink); background: #fff8fc; }
.choice-card.is-selected > i, .partner-grid > button.is-selected > i { color: var(--pink); }
.selection-note { margin-top: 14px; color: var(--muted); font-size: 12px; }

.feeling-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.feeling-cloud button { min-height: 56px; padding: 12px 16px; border: 2px solid #e5e0eb; border-radius: 999px; color: var(--ink); background: white; font-weight: 800; }
.feeling-cloud button span { margin-left: 8px; color: var(--pink); }
.feeling-cloud button.is-selected { border-color: var(--pink); color: #a71c67; background: #fff1f9; }

.future-options { display: grid; gap: 12px; }
.future-options button { display: grid; grid-template-columns: 46px 1fr 24px; align-items: center; gap: 12px; min-height: 98px; padding: 14px; text-align: left; border: 2px solid transparent; border-radius: 24px; color: var(--ink); background: white; box-shadow: var(--shadow); }
.future-options button > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #b32370; background: #ffe0f1; font-weight: 900; }
.future-options button > i { font-style: normal; }
.future-options button.is-selected { border-color: var(--pink); background: #fff8fc; }

.partner-grid { display: grid; gap: 12px; }
.partner-grid > button { display: grid; grid-template-columns: 58px 1fr 24px; align-items: center; gap: 12px; min-height: 104px; padding: 14px; text-align: left; border: 2px solid transparent; border-radius: 24px; color: var(--ink); background: white; box-shadow: var(--shadow); }
.partner-grid img { width: 58px; height: 58px; object-fit: contain; padding: 8px; border-radius: 17px; background: #f5f3f7; }

.action-dock { position: fixed; inset: auto 0 0; z-index: 20; padding: 12px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: rgba(251,250,255,.95); backdrop-filter: blur(14px); }
.action-dock .primary { width: min(100%, 820px); margin-inline: auto; }
.action-dock.split { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.action-dock.split .primary { width: 100%; }
.error { width: min(100%, 820px); min-height: 0; margin: 0 auto 8px; color: #be1d5b; font-size: 12px; text-align: center; }
.text-button { min-height: 48px; border: 0; color: #6e687b; background: transparent; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

.contact-screen { padding-bottom: 50px; }
.prize-recap { display: grid; grid-template-columns: 106px 1fr; align-items: center; gap: 14px; min-height: 118px; margin-bottom: 24px; padding: 10px 16px 10px 8px; overflow: hidden; border: 1px solid #ead58a; border-radius: 22px; background: linear-gradient(120deg, #fff8d9, #fff 55%, #f3faff); box-shadow: 0 18px 50px rgba(32,16,82,.1); }
.prize-recap-visual { position: relative; display: grid; place-items: center; width: 106px; height: 98px; border-radius: 18px; background: radial-gradient(circle, rgba(255,213,41,.38), rgba(79,210,231,.12) 55%, transparent 74%); }
.prize-recap-visual img { width: 116px; max-width: none; filter: drop-shadow(0 10px 14px rgba(23,16,63,.24)); }
.prize-recap strong { display: block; margin: 5px 0 3px; font-size: 14px; line-height: 1.35; }
.prize-recap p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
form { display: grid; gap: 18px; }
.follow-requirement { display: grid; gap: 8px; margin: 0; padding: 18px; border: 1px solid #e6d8b6; border-radius: 22px; background: linear-gradient(120deg, #fff9e5, #fff 58%, #f4f0ff); box-shadow: 0 14px 40px rgba(32,16,82,.08); }
.follow-requirement legend { padding: 0 8px; color: #b17d00; font: 900 9px/1.2 Montserrat, sans-serif; letter-spacing: .14em; }
.follow-requirement > strong { font-size: 16px; }
.follow-requirement > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.follow-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 5px 0 8px; }
.follow-links a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px; border: 1px solid #d9cfe2; border-radius: 15px; color: var(--ink); background: white; font-size: 12px; font-weight: 900; text-decoration: none; }
.follow-links a span { color: var(--pink); }
.follow-links a:focus-visible { outline: 3px solid rgba(245,54,152,.28); outline-offset: 2px; }
.follow-check { margin-top: 2px; padding-top: 12px; border-top: 1px solid #ebe3d8; }
.field > span { display: block; margin-bottom: 8px; font-weight: 800; }
.field > span em { color: var(--muted); font-style: normal; font-weight: 600; }
.field input { width: 100%; height: 62px; padding: 0 16px; border: 2px solid #ded8e3; border-radius: 19px; color: var(--ink); background: white; outline: none; }
.field input:focus, .field select:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(245,54,152,.1); }
.field.is-invalid input { border-color: #c91e59; }
.field small { display: block; min-height: 16px; margin: 5px 4px 0; color: #c91e59; }
.check-row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.check-row input { position: absolute; opacity: 0; }
.check-row > span { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #cfc9d5; border-radius: 9px; background: white; }
.check-row > span i { opacity: 0; color: white; font-style: normal; }
.check-row input:checked + span { border-color: var(--pink); background: var(--pink); }
.check-row input:checked + span i { opacity: 1; }
.check-row input:focus-visible + span, .merch-opt-in input:focus-visible + span { outline: 3px solid rgba(245,54,152,.25); outline-offset: 3px; }
.check-row input:disabled + span { border-color: #ded9e2; background: #f1eef3; }
.check-row p { margin: 1px 0 0; color: #625d70; font-size: 12px; line-height: 1.5; }
.check-row a { color: #a81f68; font-weight: 800; }
.check-row p em { color: var(--muted); font-style: normal; font-weight: 700; }
.consent-group { display: grid; gap: 14px; padding: 18px; border: 1px solid #e4dfe8; border-radius: 22px; background: white; box-shadow: 0 14px 40px rgba(32,16,82,.07); }
.consent-group h3, .merch-choice h3, .artist-selection h3 { margin: 0; font-family: Montserrat, sans-serif; }
.consent-group h3 { font-size: 16px; }
.optional-consent { padding: 13px; border-radius: 16px; background: #f6f3f8; }

.merch-choice { display: grid; gap: 16px; padding: 18px; border: 1px solid #e2d2a1; border-radius: 24px; background: linear-gradient(125deg, #fff9df, #fff 54%, #f5f1ff); box-shadow: 0 18px 50px rgba(32,16,82,.09); }
.merch-choice-copy small, .artist-selection-heading small { color: #a97700; font: 900 9px/1.2 Montserrat, sans-serif; letter-spacing: .14em; }
.merch-choice h3 { margin-top: 5px; font-size: 18px; line-height: 1.25; }
.merch-choice-copy p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.merch-opt-in { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; min-height: 66px; padding: 12px 14px; border: 2px solid #e4ddea; border-radius: 18px; background: white; cursor: pointer; }
.merch-opt-in input { position: absolute; opacity: 0; }
.merch-opt-in > span { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #cfc9d5; border-radius: 11px; background: white; }
.merch-opt-in > span i { opacity: 0; color: white; font-style: normal; }
.merch-opt-in input:checked + span { border-color: var(--pink); background: var(--pink); }
.merch-opt-in input:checked + span i { opacity: 1; }
.merch-opt-in:has(input:checked) { border-color: var(--pink); background: #fff7fb; }
.merch-opt-in strong { font-size: 13px; line-height: 1.35; }

.merch-requirements { display: grid; gap: 16px; padding: 18px; border: 1px solid #efb9d5; border-radius: 24px; background: linear-gradient(145deg, #fff8fc, white 46%, #f4fbff); box-shadow: 0 18px 55px rgba(245,54,152,.1); }
.artist-selection { display: grid; gap: 12px; }
.artist-selection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.artist-selection-heading h3 { margin-top: 5px; font-size: 19px; }
.artist-selection-heading > span { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: #8a6678; background: #f2eaf0; font-size: 9px; font-weight: 900; }
.artist-selection > p { margin: 0; color: #5f596d; font-size: 13px; line-height: 1.55; }
.artist-field select { width: 100%; height: 58px; padding: 0 42px 0 14px; border: 2px solid #ded8e3; border-radius: 17px; color: #777189; background: #f4f1f5; appearance: none; }
.artist-field small { color: #777189; line-height: 1.45; }
.prize-check { padding: 14px; border: 1px solid #e5dfe9; border-radius: 18px; background: white; }
.prize-check.is-pending { background: #f7f4f8; }
.campaign-window { margin: 0; padding-top: 13px; border-top: 1px solid #e9dfe7; color: var(--muted); font-size: 11px; line-height: 1.45; }
.demo-note { padding: 14px; border-radius: 16px; color: #625d70; background: #f0edf3; font-size: 12px; line-height: 1.45; }
.form-error { min-height: 18px; margin: 0; color: #c91e59; font-weight: 700; }
.submit { width: 100%; }

.success { position: relative; min-height: 100svh; padding: 24px 18px 46px; overflow: hidden; color: white; text-align: center; background: radial-gradient(circle at 50% 18%, #3b278b, transparent 32%), radial-gradient(circle at 20% 70%, rgba(245,54,152,.42), transparent 32%), var(--deep); }
.success header { display: flex; justify-content: space-between; align-items: center; width: min(100%, 760px); margin: auto; }
.success .logo { width: 190px; }
.success-tree { width: 180px; height: 210px; margin: 34px auto -20px; overflow: hidden; filter: drop-shadow(0 24px 40px rgba(47,211,235,.22)); }
.success-tree img { width: 220px; max-width: none; transform: translateX(-20px); }
.success h2 { font-size: clamp(42px, 12vw, 78px); }
.success > p:not(.eyebrow) { max-width: 600px; margin: 18px auto; color: rgba(255,255,255,.7); line-height: 1.6; }
.demo-folio { width: min(100%, 620px); margin: 28px auto; padding: 22px; border: 1px dashed rgba(255,255,255,.35); border-radius: 24px; background: rgba(255,255,255,.08); }
.demo-folio small { display: block; color: var(--aqua); font-weight: 900; letter-spacing: .14em; }
.demo-folio strong { display: block; margin: 8px 0; font: 900 25px Montserrat, sans-serif; }
.demo-folio p { margin: 0; color: rgba(255,255,255,.58); font-size: 12px; }
.instagram { width: min(100%, 620px); margin: auto; }
.instagram-actions { display: grid; gap: 14px; width: min(100%, 620px); margin: auto; }
.instagram-alt { color: white; background: linear-gradient(100deg, #3f2f9e, #8051c5 55%, #27bcd5); box-shadow: 0 10px 0 #2d2378, 0 18px 40px rgba(79,82,195,.3); }
.success .restart { margin-top: 24px; color: white; }

@media (min-width: 760px) {
  .hero-content { padding-bottom: 76px; }
  .heart-transition { position: absolute; right: 5%; bottom: -80px; display: block; width: 320px; height: 380px; overflow: hidden; opacity: .55; filter: drop-shadow(0 30px 60px rgba(79,210,231,.25)); }
  .heart-transition img { width: 360px; max-width: none; }
  .step-header { grid-template-columns: 70px 1fr 120px; padding-inline: max(32px, calc((100vw - 1180px)/2)); }
  .mini-logo { width: 120px; }
  .question { padding-top: 70px; }
  .rating-grid { grid-template-columns: repeat(5, 1fr); }
  .rating-option:first-child { grid-column: auto; }
  .choice-grid, .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .future-options { grid-template-columns: repeat(3, 1fr); }
  .future-options button { grid-template-columns: 46px 1fr; }
  .future-options button > i { display: none; }
  .merch-choice { grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr); align-items: center; }
  .action-dock.split { grid-template-columns: 170px minmax(320px, 620px); justify-content: center; }
  .prize-card { grid-template-columns: 150px 1fr; min-height: 148px; padding-right: 22px; }
  .prize-visual { width: 150px; height: 128px; }
  .prize-visual img { width: 162px; }
  .prize-card strong { font-size: 16px; }
  .hero-partners span { font-size: 11px; }
}

@media (min-width: 1050px) {
  .hero-content { justify-content: center; min-height: calc(100svh - 94px); }
  .hero-photo { background-position: 76% 50%; }
  .hero-shade { background: linear-gradient(90deg, rgba(11,5,39,.98) 0, rgba(12,6,42,.85) 45%, rgba(12,6,42,.12) 82%), linear-gradient(180deg, rgba(8,5,30,.1), rgba(14,8,49,.82)); }
  .prize-card { width: 580px; }
  .hero-cta { width: 580px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}