@font-face {
    font-family: "Evian Sans";
    src: url("fonts/evian-sans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Evian Sans";
    src: url("fonts/evian-sans-bold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Evian Condensed";
    src: url("fonts/evian-sans-condensed-bold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --evian-red: #bc3843;
    --evian-pink: #ed174f;
    --evian-blue: #007dc3;
    --evian-ink: #103a5c;
    --evian-soft: #f7d7e3;
    --evian-paper: rgba(255, 255, 255, 0.94);
    --evian-line: rgba(255, 255, 255, 0.46);
    --evian-frame: min(100vw, 393px);
    --evian-content: min(100%, 361px);
    --evian-panel: min(100%, 345px);
    --evian-lobby-panel: var(--evian-content);
    --evian-gallery-frame: 100vw;
    --evian-gallery-edge: rgba(255, 255, 255, 0.2);
    --evian-logo-width: clamp(104px, 30.8vw, 121px);
    --evian-logo-top-offset: clamp(20px, 3.17svh, 27px);
    --evian-logo-bottom-gap: clamp(6px, 0.94svh, 8px);
    --evian-screen-brand-bottom-gap: 20px;
    --evian-screen-title-lift: -21px;
    --evian-screen-panel-padding: 18px 24px 20px;
    --evian-button-min-height: clamp(56px, 7.75svh, 66px);
    --evian-button-padding-block: clamp(14px, 2.35svh, 20px);
    --evian-button-padding-inline: clamp(7px, 1.8vw, 10px);
    --shadow: 0 22px 60px rgba(16, 58, 92, 0.24);
    font-family: "Evian Sans", Arial, sans-serif;
    color: white;
    background: #f4d7e2;
    letter-spacing: 0;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    background: #f4d7e2 url("media/evian-bottlebag-demo-poster.jpg") center / cover no-repeat;
}

button,
input,
select {
    font: inherit;
}

[hidden],
.field[hidden] {
    display: none;
}

.scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #f4d7e2 url("media/evian-bottlebag-demo-poster.jpg") center / cover no-repeat;
}

.scene-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.scene-wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 52%, rgba(16, 58, 92, 0.2) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(0, 114, 188, 0.08));
}

.drop-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: env(safe-area-inset-top) 16px calc(16px + env(safe-area-inset-bottom));
    display: grid;
    align-items: end;
}

.drop-card {
    min-width: 0;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--evian-line);
    background: linear-gradient(180deg, rgba(188, 56, 67, 0.88), rgba(237, 23, 79, 0.9));
    box-shadow: var(--shadow);
    padding: 16px;
    backdrop-filter: blur(12px);
}

.drop-card.claim-card {
    color: white;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    align-self: center;
    padding: 0;
}

.drop-card.status-card {
    color: var(--evian-ink);
    background: var(--evian-paper);
    border-color: rgba(16, 58, 92, 0.14);
}

.drop-card.lobby-card,
.drop-card.all-claimed-card,
.drop-card.claim-complete-card,
.drop-card.claim-source-card,
.drop-card.allocation-expired-card {
    position: relative;
    isolation: isolate;
    color: white;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    align-self: start;
    padding: 0;
}

.drop-card.legal-card {
    position: relative;
    color: white;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    align-self: start;
    padding: 0;
}

.drop-card.claim-source-card > .source-question-panel,
.drop-card.allocation-expired-card > .allocation-expired-panel {
    position: relative;
    z-index: 3;
}

.modal-overlay-blur {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(247, 170, 188, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.drop-card.claim-source-card > .brand-logo,
.drop-card.claim-source-card > .notice,
.drop-card.claim-source-card > .strap,
.drop-card.claim-source-card > .state-title,
.drop-card.allocation-expired-card > .brand-logo,
.drop-card.allocation-expired-card > .notice,
.drop-card.allocation-expired-card > .strap,
.drop-card.allocation-expired-card > .state-title {
    filter: blur(5px);
    opacity: 0.72;
}

.drop-card.lobby-card,
.drop-card.all-claimed-card,
.drop-card.claim-complete-card,
.drop-card.claim-source-card,
.drop-card.allocation-expired-card,
.drop-card.claim-card {
    position: relative;
}

.drop-card.lobby-card > .brand-logo,
.drop-card.all-claimed-card > .brand-logo,
.drop-card.claim-complete-card > .brand-logo,
.drop-card.claim-source-card > .brand-logo,
.drop-card.allocation-expired-card > .brand-logo,
.drop-card.claim-card > .brand-logo {
    margin-bottom: var(--evian-screen-brand-bottom-gap);
}

.brand-logo {
    display: block;
    width: var(--evian-logo-width);
    height: auto;
    margin: var(--evian-logo-top-offset) auto var(--evian-logo-bottom-gap);
    padding: 0;
    border-radius: 0;
}

.strap {
    margin: 0 auto 8px;
    max-width: 310px;
    text-align: center;
    font-family: "Evian Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: white;
}

.strap--ribbon {
    width: var(--evian-content);
    max-width: none;
    min-height: 52px;
    padding: 8px 12px;
    background: var(--evian-pink);
    background-image:
        radial-gradient(circle at 12% 28%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.7px),
        radial-gradient(circle at 76% 68%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.8px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 48%);
    background-size: 18px 18px, 23px 23px, 100% 100%;
    color: white;
    box-shadow: 0 10px 22px rgba(237, 23, 79, 0.22);
}

.strap span {
    display: block;
}

.claim-card .strap,
.status-card .strap {
    color: var(--evian-pink);
}

.claim-card .strap--ribbon,
.status-card .strap--ribbon {
    color: white;
}

.state-title {
    display: block;
    width: min(100%, 360px);
    height: clamp(150px, 48vw, 188px);
    margin: 0 auto 8px;
    object-fit: contain;
    object-position: center;
}

.lobby-card .state-title {
    width: var(--evian-frame);
    height: clamp(118px, 33.6vw, 132px);
    margin-left: 50%;
    margin-bottom: 20px;
    object-fit: cover;
    transform: translateX(-50%);
}

.all-claimed-card .state-title,
.claim-complete-card .state-title,
.claim-source-card .state-title,
.allocation-expired-card .state-title,
.claim-card .state-title {
    width: var(--evian-frame);
    height: 124px;
    margin-left: 50%;
    margin-bottom: 16px;
    object-fit: cover;
    transform: translateX(-50%);
}

.drop-card.lobby-card > .state-title,
.drop-card.all-claimed-card > .state-title,
.drop-card.claim-complete-card > .state-title,
.drop-card.claim-source-card > .state-title,
.drop-card.allocation-expired-card > .state-title,
.drop-card.claim-card > .state-title {
    margin-top: var(--evian-screen-title-lift);
}

.state-heading {
    margin: 0 0 10px;
    color: var(--evian-blue);
    text-align: center;
    font-family: "Evian Condensed", "Evian Sans", Arial, sans-serif;
    font-size: 3rem;
    line-height: 0.9;
}

.body-copy {
    max-width: 320px;
    margin: 0 auto 16px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.38;
}

.drop-card:not(.claim-card):not(.status-card) .body-copy {
    color: white;
}

.lobby-card .body-copy,
.all-claimed-card .body-copy,
.claim-complete-card .body-copy {
    color: white;
    text-shadow: 0 2px 10px rgba(16, 58, 92, 0.28);
}

.lobby-copy-panel,
.all-claimed-copy-panel,
.source-question-panel,
.allocation-expired-panel {
    width: var(--evian-panel);
    margin: 0 auto 12px;
    padding: var(--evian-screen-panel-padding);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.78);
    color: var(--evian-ink);
    box-shadow: 0 16px 38px rgba(16, 58, 92, 0.16);
}

.lobby-copy-panel {
    width: var(--evian-lobby-panel);
    min-height: 155px;
    margin-top: 124px;
    text-align: center;
}

.lobby-badges {
    position: relative;
    display: block;
    width: 132px;
    height: 41px;
    margin: -1px auto 7px;
}

.lobby-badges span {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: url("brand/evian-tennis-ball.png?v=20260707a") center / contain no-repeat;
    filter: drop-shadow(0 4px 7px rgba(237, 23, 79, 0.2));
    animation: lobbyBallWave 1.35s ease-in-out infinite;
    -webkit-animation: lobbyBallWave 1.35s ease-in-out infinite;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
}

.pre-lobby-copy-panel {
    margin-top: 176px;
}

.lobby-badges span:nth-child(1) {
    left: 0;
    top: 10px;
    animation-delay: 0s;
}

.lobby-badges span:nth-child(2) {
    left: 28px;
    top: 10px;
    animation-delay: 0.11s;
}

.lobby-badges span:nth-child(3) {
    left: 56px;
    top: 10px;
    animation-delay: 0.22s;
}

.lobby-badges span:nth-child(4) {
    left: 84px;
    top: 10px;
    animation-delay: 0.33s;
}

.lobby-badges span:nth-child(5) {
    left: 110px;
    top: 10px;
    animation-delay: 0.44s;
}

@keyframes lobbyBallWave {
    0%,
    100% {
        transform: translateY(0);
    }

    34% {
        transform: translateY(-8px);
    }

    68% {
        transform: translateY(5px);
    }
}

@-webkit-keyframes lobbyBallWave {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }

    34% {
        -webkit-transform: translate3d(0, -8px, 0);
    }

    68% {
        -webkit-transform: translate3d(0, 5px, 0);
    }
}

.lobby-copy-panel h2 {
    margin: 8px 0 12px;
    color: var(--evian-pink);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
}

.lobby-copy-panel p,
.all-claimed-copy-panel p,
.allocation-expired-panel p {
    margin: 0;
    color: var(--evian-ink);
    font-size: 0.98rem;
    line-height: 1.34;
    text-align: center;
}

.lobby-copy-panel .lobby-status-copy {
    font-size: 17px;
    line-height: 1.24;
}

.lobby-copy-panel p + p,
.all-claimed-copy-panel p + p,
.allocation-expired-panel p + p {
    margin-top: 9px;
}

.lobby-copy-panel .lobby-count {
    color: var(--evian-ink);
    font-size: 15px;
    line-height: 1.22;
    margin-top: 6px;
}

.lobby-copy-panel .lobby-count__number {
    color: var(--evian-pink);
    font-weight: 600;
}

.allocation-expired-panel p strong {
    color: var(--evian-pink);
    font-weight: 800;
}

.all-claimed-copy-panel {
    margin-top: 160px;
}

.all-claimed-copy-panel strong {
    color: var(--evian-pink);
    font-weight: 800;
}

.evian-social-link {
    color: var(--evian-pink);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-lockup {
    display: block;
    width: 112px;
    margin: 2px auto 10px;
}

.product-lockup img {
    display: block;
    width: 100%;
    height: auto;
}

.product-panel {
    width: min(100%, 214px);
    margin: 0 auto 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 30px rgba(16, 58, 92, 0.16);
}

.product-panel .product-lockup {
    width: 148px;
    margin: 0 auto;
}

.product-panel .product-lockup--variant {
    width: min(100%, 176px);
    margin-top: 2px;
    margin-bottom: 2px;
}

.product-panel img {
    filter: drop-shadow(0 8px 14px rgba(16, 58, 92, 0.22));
}

.claim-card__panel {
    width: var(--evian-content);
    margin: 0 auto;
    padding: var(--evian-screen-panel-padding);
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.78);
    color: var(--evian-ink);
    box-shadow: 0 16px 38px rgba(16, 58, 92, 0.18);
}

.claim-card__panel .product-panel {
    width: 100%;
    margin-top: 0;
    margin-bottom: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.claim-card__panel .product-panel .product-lockup {
    width: 100%;
}

.claim-card__subheading {
    margin: 10px auto 30px;
    max-width: 300px;
    color: var(--evian-pink);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: 0;
}

.claim-card__subheading span {
    display: block;
}

.claim-card__panel .body-copy {
    margin: 20px auto;
    color: var(--evian-ink);
    font-size: 1.1rem;
    line-height: 1.42;
    text-shadow: none;
}

.legal-panel {
    width: var(--evian-content);
    margin: 26px auto 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.82);
    color: var(--evian-ink);
    box-shadow: 0 16px 38px rgba(16, 58, 92, 0.18);
}

.legal-panel h1 {
    margin: 0 0 12px;
    color: var(--evian-pink);
    text-align: center;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.05;
}

.legal-panel p {
    margin: 0;
    color: var(--evian-ink);
    font-size: 0.94rem;
    line-height: 1.34;
}

.legal-panel p + p {
    margin-top: 10px;
}

.legal-panel a {
    color: var(--evian-pink);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.reservation-copy {
    margin: 0 auto 20px;
    color: var(--evian-pink);
    text-align: center;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
}

.secured-panel-shell {
    width: min(100%, 390px);
    margin: 0 auto 10px;
    padding: 30px 30px 25px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 16px 38px rgba(16, 58, 92, 0.16);
}

.claim-confirmation-panel {
    width: min(100%, 361px);
    margin: 0 auto 18px;
    padding: var(--evian-screen-panel-padding);
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 16px 38px rgba(16, 58, 92, 0.16);
}

.secured-panel {
    width: min(100%, 330px);
    margin: 0 auto;
    padding: 14px 16px;
    border-radius: 0;
    background: var(--evian-blue);
    color: white;
    text-align: center;
    box-shadow: 0 14px 30px rgba(0, 114, 188, 0.24);
}

.secured-panel__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    border: 0;
    border-radius: 50%;
    background: white;
    color: var(--evian-blue);
    box-sizing: border-box;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.2);
    font-weight: 800;
    line-height: 1;
}

.secured-panel h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}

.secured-panel p {
    margin: 0;
    font-size: clamp(0.94rem, 4.33vw, 1.0625rem);
    font-weight: 300;
    line-height: 22px;
}

.claim-confirmation-panel .product-panel {
    width: 100%;
    margin: 0 auto 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.claim-confirmation-panel .product-panel .product-lockup {
    width: 100%;
}

.claim-confirmation-panel .claim-id-line {
    margin: 0 0 28px;
    color: #615f68;
    text-align: center;
    font-family: "Evian Sans", Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.2;
}

.claim-confirmation-panel .secured-panel {
    width: 100%;
    margin: 0 auto;
}

.source-question-panel {
    margin-top: 70px;
    padding: var(--evian-screen-panel-padding);
}

.source-question-panel .field span {
    color: var(--evian-blue);
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.source-question-form {
    display: flex;
    padding-bottom: 4px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.source-question-form .field,
.source-question-form .button {
    width: 100%;
}

.allocation-expired-panel h2 {
    margin: 0 0 12px;
    color: var(--evian-pink);
    text-align: center;
    font-family: "Evian Sans", Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: 0;
}

.allocation-expired-panel .button {
    margin-top: 14px;
    text-transform: uppercase;
}

.allocation-expired-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    padding: env(safe-area-inset-top) 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: rgba(247, 170, 188, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.allocation-expired-overlay[hidden] {
    display: none;
}

.allocation-expired-overlay__content {
    position: relative;
    width: min(100%, 520px);
    padding-bottom: 16px;
}

.claim-form {
    display: grid;
    gap: 13px;
}

.required-note {
    margin: 2px 0 0;
    color: #615f68;
    text-align: center;
    font-family: "Evian Sans", Arial, sans-serif;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

.claim-terms-footer {
    display: grid;
    gap: 12px;
    margin-top: 8px;
    color: #615f68;
    text-align: center;
    font-family: "Evian Sans", Arial, sans-serif;
    font-size: 0.76rem;
    font-weight: 300;
    line-height: 1.42;
}

.claim-terms-footer p {
    margin: 0;
}

.claim-terms-footer strong {
    color: #615f68;
    font-weight: 800;
}

.claim-terms-footer a {
    color: var(--evian-pink);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.claim-terms-footer .claim-terms-footer__agreement-link {
    font-weight: 400;
}

.field {
    display: grid;
    gap: 6px;
}

.field span {
    color: var(--evian-blue);
    margin: 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.input-control {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(237, 23, 79, 0.36);
    border-radius: 0;
    padding: 12px 13px;
    background: white;
    color: var(--evian-ink);
    font-size: 1rem;
    line-height: 1.2;
}

.input-control::placeholder {
    color: #777777;
    font-family: "Evian Sans", Arial, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
    opacity: 1;
}

.input-control:focus {
    border-color: var(--evian-blue);
    outline: 3px solid rgba(0, 114, 188, 0.18);
    outline-offset: 0;
}

.input-control.is-invalid {
    border-color: var(--evian-pink);
    outline: 3px solid rgba(237, 23, 79, 0.14);
    outline-offset: 0;
}

.field-error {
    margin: -2px 0 0;
    color: var(--evian-pink);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 17px;
    text-align: left;
}

.field-hint {
    min-height: 17px;
    margin: -4px 0 0;
    color: #597086;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 17px;
    text-align: left;
}

.field-hint[hidden] {
    display: none;
}

.field-hint[data-state="success"] {
    color: #166534;
}

.field-hint[data-state="review"],
.field-hint[data-state="checking"] {
    color: var(--evian-blue);
}

.field-hint[data-state="danger"] {
    color: #9f1239;
}

.email-verification-panel {
    display: grid;
    gap: 8px;
    margin: 2px 0 4px;
    padding: 12px;
    border: 1px solid rgba(0, 114, 188, 0.2);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.email-verification-panel h3,
.email-verification-panel p {
    margin: 0;
}

.email-verification-panel h3 {
    color: var(--evian-blue);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.16;
    text-transform: uppercase;
}

.email-verification-panel p {
    color: #31526b;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.32;
}

.check {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
    margin: 4px 0 6px;
    color: #31526b;
    font-size: 0.9rem;
    line-height: 1.32;
}

.check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--evian-pink);
}

.check.is-invalid span {
    color: var(--evian-pink);
}

.field-error--check {
    margin-top: -4px;
}

.button {
    width: 100%;
    min-height: var(--evian-button-min-height);
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--evian-button-padding-block) var(--evian-button-padding-inline);
    background: white;
    color: var(--evian-pink);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    cursor: pointer;
}

.button-link {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.claim-card .button,
.status-card .button {
    background: var(--evian-pink);
    color: white;
}

.claim-form .button {
    margin-top: 4px;
}

.button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.78);
    outline-offset: 3px;
}

.claim-card .button:focus-visible,
.status-card .button:focus-visible {
    outline-color: rgba(0, 114, 188, 0.34);
}

.notice {
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    display: none;
}

.notice.success {
    background: #e8f7ec;
    color: #166534;
}

.notice.danger {
    background: #fde8ef;
    color: #9f1239;
}

.notice.neutral {
    background: #eaf2fb;
    color: #164e7a;
}

.secure-note,
.reference {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.86);
    text-align: center;
    font-size: 0.86rem;
    line-height: 1.34;
}

.claim-card .secure-note,
.status-card .secure-note,
.claim-card .reference,
.status-card .reference {
    color: #597086;
}

.claim-card .body-copy,
.claim-card .check {
    color: #092236;
}

.lobby-card .reference,
.all-claimed-card .reference,
.claim-complete-card .reference {
    color: rgba(255, 255, 255, 0.88);
}

.reference {
    display: grid;
    gap: 2px;
    margin-bottom: 0;
}

.reference dt {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.reference dd {
    margin: 0;
    color: var(--evian-blue);
    font-family: "Evian Condensed", "Evian Sans", Arial, sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.campaign-gallery {
    position: relative;
    width: var(--evian-gallery-frame);
    aspect-ratio: 393 / 194;
    margin: 12px 50% 0;
    display: block;
    overflow: hidden;
    transform: translateX(-50%);
    pointer-events: none;
    contain: layout paint;
}

.campaign-gallery__item {
    position: absolute;
    display: block;
    aspect-ratio: 1 / 1;
    padding: 2px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: var(--evian-gallery-edge);
    box-shadow: 0 8px 18px rgba(16, 58, 92, 0.16);
}

.campaign-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.consumer-legal-footer {
    position: relative;
    width: var(--evian-content);
    margin: 13px auto 0;
    color: var(--evian-pink);
    text-align: center;
    text-shadow: 0 2px 9px rgba(255, 255, 255, 0.5);
    z-index: 10;
}

.consumer-legal-footer p {
    margin: 0 0 8px;
    color: inherit;
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.2;
}

.consumer-legal-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: inherit;
    font-size: 0.74rem;
    line-height: 1.2;
}

.consumer-legal-footer__separator {
    display: block;
    flex: 0 0 auto;
    opacity: 0.96;
    filter: drop-shadow(0 2px 4px rgba(9, 34, 54, 0.18));
    pointer-events: none;
    user-select: none;
}

.consumer-legal-footer__separator--1 {
    width: 17px;
    height: 14px;
}

.consumer-legal-footer__separator--2 {
    width: 18px;
    height: 13px;
}

.consumer-legal-footer__links a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.consumer-legal-footer__links a:focus-visible,
.legal-panel a:focus-visible {
    border-radius: 3px;
    outline: 3px solid rgba(0, 114, 188, 0.28);
    outline-offset: 3px;
}

.campaign-gallery__item--slot-1,
.campaign-gallery__item--slot-2,
.campaign-gallery__item--slot-3,
.campaign-gallery__item--slot-4,
.campaign-gallery__item--slot-5 {
    top: 0;
    width: 19.594%;
}

.campaign-gallery__item--slot-1 {
    left: -3.832%;
}

.campaign-gallery__item--slot-2 {
    left: 19.761%;
}

.campaign-gallery__item--slot-3 {
    left: 43.357%;
}

.campaign-gallery__item--slot-4 {
    left: 66.949%;
}

.campaign-gallery__item--slot-5 {
    left: 90.545%;
}

.campaign-gallery__item--slot-6,
.campaign-gallery__item--slot-7,
.campaign-gallery__item--slot-8,
.campaign-gallery__item--slot-9 {
    top: 47.819%;
    width: 24.93%;
}

.campaign-gallery__item--slot-6 {
    left: -6.628%;
}

.campaign-gallery__item--slot-7 {
    left: 23.392%;
}

.campaign-gallery__item--slot-8 {
    left: 53.41%;
}

.campaign-gallery__item--slot-9 {
    left: 83.43%;
}

.campaign-gallery__item--slot-2 img,
.campaign-gallery__item--slot-5 img,
.campaign-gallery__item--slot-6 img {
    object-position: 55% center;
}

.campaign-gallery__item--slot-4 img,
.campaign-gallery__item--slot-8 img {
    object-position: center 60%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 720px) {
    .drop-shell {
        width: min(100%, 1120px);
        padding: 32px;
        justify-items: center;
        align-items: center;
    }

    .drop-card {
        width: 430px;
        padding: 20px;
    }

    .drop-card.claim-card {
        width: 460px;
    }

    .scene-video {
        object-position: center;
    }

    .state-heading {
        font-size: 3.6rem;
    }

    .product-lockup {
        width: 130px;
    }

    .campaign-gallery {
        width: min(100%, 520px);
        margin-right: auto;
        margin-left: auto;
        overflow: visible;
        transform: none;
        contain: layout;
    }
}

@media (max-height: 700px) {
    .drop-shell {
        align-items: start;
    }

    .drop-card {
        padding: 14px;
    }

    .brand-logo {
        width: clamp(96px, 28vw, 112px);
        margin-top: clamp(16px, 3svh, 22px);
        margin-bottom: 6px;
    }

    .state-title {
        width: min(100%, 300px);
        height: 150px;
    }

    .lobby-card .state-title,
    .all-claimed-card .state-title,
    .claim-complete-card .state-title,
    .claim-source-card .state-title,
    .allocation-expired-card .state-title,
    .claim-card .state-title {
        height: 104px;
        margin-bottom: 12px;
    }

    .lobby-copy-panel {
        margin-top: 24px;
    }

    .all-claimed-copy-panel {
        margin-top: 72px;
    }

    .source-question-panel {
        margin-top: 36px;
    }

    .body-copy {
        margin-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene-video {
        display: none;
    }

    .lobby-badges span {
        animation: none;
    }
}