@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400&family=Lora:ital@1&family=Montserrat:wght@300;400;500;600;700&display=swap');



:root {

    --marine: #0f0f3f;

    --cobalt: #1d1d52;

    --mist: #d4dbe1;

    --cream: #fffdfb;

    --white: #fff;

    --success: #80e088;

    --error: #f47183;

}

/* Kept outside the stages so the regulations stay available throughout the journey. */
.persistent-rules-link {

    position: fixed;

    z-index: 8;

    left: 50%;

    bottom: max(14px, env(safe-area-inset-bottom, 0px));

    transform: translateX(-50%);

    color: var(--marine);

    font-size: 11px;

    font-weight: 500;

    letter-spacing: .08em;

    text-decoration: underline;

    text-underline-offset: 3px;

    text-transform: uppercase;

    white-space: nowrap;

}

.persistent-rules-link:hover { color: var(--cobalt); }



* { box-sizing: border-box; }

html { background: var(--mist); }

body {

    margin: 0;

    min-height: 100vh;

    color: var(--marine);

    font-family: 'Montserrat', sans-serif;

    background: linear-gradient(132deg, var(--mist) 0%, var(--cream) 100%);

    overflow-x: hidden;

}



button,

input,

textarea { font: inherit; }



button,

.link-button {

    border: 0;

    background: var(--cobalt);

    color: var(--white);

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding: 16px 24px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    font: 700 13px/19px 'Montserrat', sans-serif;

    letter-spacing: 0;

    transition: transform .18s ease, filter .18s ease;

}

button:hover,

.link-button:hover { transform: translateY(-1px); filter: brightness(1.06); }

button:disabled {

    cursor: not-allowed;

    background: rgba(29, 29, 82, .34);

    color: rgba(255, 255, 255, .72);

    filter: none;

}

button:disabled:hover {

    transform: none;

    filter: none;

}



input,

textarea {

    width: 100%;

    border: 1px solid var(--marine);

    border-radius: 0;

    background: transparent;

    color: var(--marine);

    outline: none;

    padding: 15px;

    min-height: 50px;

    font-size: 13px;

}

textarea { min-height: 140px; resize: vertical; }

input::placeholder,

textarea::placeholder { color: var(--marine); opacity: 1; }

input:focus,

textarea:focus { box-shadow: 0 0 0 2px rgba(29, 29, 82, .16); }



.hidden { display: none !important; }

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

.match-shell { min-height: 100vh; }

.match-stage {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    padding: 30px clamp(20px, 4vw, 60px);

}



.stage-enter { animation: reveal .42s ease both; }

@keyframes reveal { from { opacity: 0; transform: translateY(12px); } }



.ornate-frame {

    pointer-events: none;

    position: absolute;

    inset: 0;

    z-index: 1;

    border: 0;

    background: url('/match-quiz/assets/home-motif.svg') center / calc(100% - 118px) calc(100% - 120px) no-repeat;

}

.ornate-frame::before,

.ornate-frame::after {

    display: none;

}



.stage-logo {

    position: relative;

    z-index: 3;

    display: block;

    width: min(340px, 70vw);

    margin: 0 auto 42px;

}



.hero-stage {

    background: var(--mist);

}

#access-stage.hero-stage {

    --hero-left: clamp(88px, calc(50% - 624.5px), 346px);

    --hero-top: clamp(96px, 23.55svh, 212px);

    --hero-width: 681px;

    --hero-logo-width: 656px;

    --hero-logo-offset: 10.5px;

    --hero-title-size: 30.98px;

    --hero-title-line: 57.15px;

    --hero-title-gap: 19.6px;

    --hero-copy-size: 21px;

    --hero-copy-line: 31px;

    --hero-copy-gap: 20px;

    --hero-cta-top: clamp(540px, 68.35svh, 615px);

    --hero-cta-offset: 230.5px;

    height: 100svh;

    min-height: 0;

}

.hero-photo {

    position: absolute;

    right: -55px;

    top: 0;

    bottom: 0;

    width: min(65vw, 1280px);

    z-index: 0;

    background: linear-gradient(90deg, var(--mist) 0%, rgba(212,219,225,0) 54%), url('/match-quiz/assets/hero-ring-hand.png') center right / cover no-repeat;

}

.hero-content {

    position: absolute;

    z-index: 2;

    left: var(--hero-left);

    top: var(--hero-top);

    width: var(--hero-width);

    margin: 0;

    text-align: center;

}

.grand-logo-image {

    display: block;

    width: var(--hero-logo-width);

    height: auto;

    margin: 0 0 0 var(--hero-logo-offset);

    background: transparent;

}

.hero-eyebrow {

    margin: var(--hero-title-gap) 0 0;

    text-transform: uppercase;

    color: var(--marine);

    font-weight: 300;

    font-size: var(--hero-title-size);

    letter-spacing: .07em;

    line-height: var(--hero-title-line);

    white-space: nowrap;

}

.quiz-intro,

.message-content p {

    text-transform: uppercase;

    color: var(--marine);

    font-weight: 300;

    letter-spacing: .07em;

}

.hero-copy {

    width: var(--hero-width);

    max-width: none;

    margin: var(--hero-copy-gap) 0 0;

    color: var(--marine);

    font-size: var(--hero-copy-size);

    line-height: var(--hero-copy-line);

    text-align: center;

}

.hero-stage .match-form {

    position: absolute;

    z-index: 2;

    left: calc(var(--hero-left) + var(--hero-cta-offset));

    top: var(--hero-cta-top);

    width: 220px;

    min-width: 220px;

    margin: 0;

}

.hero-stage .match-form label {

    display: block;

    margin-bottom: 8px;

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: .08em;

}

.input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

.wide-button { width: 100%; }

#open-start-button {

    width: 220px;

    min-width: 220px;

    height: 51px;

    min-height: 51px;

    padding: 16px;

}

.text-button {

    min-height: 0;

    padding: 8px 0;

    background: transparent;

    color: var(--marine);

    text-decoration: underline;

    text-transform: none;

}



.quiz-stage {

    overflow: visible;

    background: linear-gradient(132deg, var(--mist) 0%, var(--cream) 100%);

    padding-top: 18px;

    padding-bottom: 72px;

}

.quiz-frame {

    position: fixed;

    background-image: url('/match-quiz/assets/figma-full-motif.svg');

    background-size: min(1800px, calc(100vw - 118px)) auto;

    background-position: center 54px;

}

.quiz-stage .stage-logo {

    width: min(340px, 40vw);

    margin: 0 auto 44px;

}

.partner-quiz-stage {

    padding-top: 15px;

}

.partner-quiz-stage .stage-logo {

    width: 340px;

    margin-bottom: 38px;

}

.quiz-intro {

    position: relative;

    z-index: 2;

    max-width: 1060px;

    margin: 0 auto 60px;

    text-align: center;

    font-size: 21px;

    line-height: 1.35;

}

#question-progress {

    position: relative;

    z-index: 2;

    display: block;

    width: fit-content;

    margin: 16px auto 48px;

    color: var(--marine);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .16em;

}

.quiz-question-block {

    position: relative;

    z-index: 2;

    width: min(792px, calc(100vw - 120px));

    margin: 0 auto 78px;

    scroll-margin-block: 20vh;

    transition: opacity .28s ease, transform .28s ease, filter .28s ease;

}

.quiz-question-block:not(.is-revealed) {

    display: none;

}

.quiz-question-block.is-revealed {

    animation: question-rise .62s cubic-bezier(.16, .84, .24, 1) both;

}

@keyframes question-rise {

    0% { opacity: 0; filter: blur(8px); transform: translate3d(0, 80px, 0) scale(.94); }

    68% { opacity: 1; filter: blur(0); transform: translate3d(0, -8px, 0) scale(1.012); }

    100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }

}

.quiz-question-block.is-focused {

    opacity: 1;

    transform: scale(1);

}

.quiz-stage:has(.quiz-question-block.is-focused) .quiz-question-block:not(.is-focused) {

    opacity: .62;

    filter: saturate(.82);

    transform: scale(.985);

}

.partner-quiz-stage .quiz-question-block {

    width: min(792px, calc(100vw - 120px));

    margin-bottom: 58px;

}

.question-title {

    margin: 0 0 30px;

    text-align: center;

    text-transform: uppercase;

    font: 500 16px/1.35 'Montserrat', sans-serif;

    letter-spacing: .07em;

}

.partner-quiz-stage .question-title {

    margin-bottom: 30px;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.12px;

}

.question-image {

    display: block;

    width: min(420px, 100%);

    max-height: 260px;

    object-fit: cover;

    margin: 0 auto 24px;

}

.answer-grid {

    display: grid;

    grid-template-columns: repeat(4, 183px);

    align-items: start;

    justify-content: center;

    gap: 30px 20px;

}

.answer-grid.answer-count-2 {

    grid-template-columns: repeat(2, 183px);

}

.answer-grid.answer-count-3 {

    grid-template-columns: repeat(3, 183px);

}

.answer-grid.answer-count-5 {

    grid-template-columns: repeat(6, 81.5px);

}

.answer-grid.answer-count-5 .answer-card {

    grid-column: span 2;

}

.answer-grid.answer-count-5 .answer-card:nth-child(4) {

    grid-column: 2 / span 2;

}

.answer-grid.answer-count-5 .answer-card:nth-child(5) {

    grid-column: 4 / span 2;

}

.answer-card {

    position: relative;

    display: grid;

    grid-template-rows: 183px auto;

    min-width: 0;

    width: 183px;

    max-width: 183px;

    cursor: pointer;

    color: var(--marine);

    text-align: center;

    text-transform: uppercase;

}

.partner-quiz-stage .answer-card {

    grid-template-rows: 183px auto;

}

.partner-quiz-stage .answer-card.no-media {

    grid-template-rows: 183px auto;

}

.answer-card.no-media {

    grid-template-rows: auto;

}

.answer-card input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}

.answer-media {

    display: grid;

    place-items: center;

    height: 183px;

    background: var(--white);

    overflow: hidden;

    transition: background .18s ease, box-shadow .18s ease;

}

.partner-quiz-stage .answer-media,

.partner-quiz-stage .answer-card.no-media::before {

    background: var(--marine);

}

.partner-quiz-stage .answer-card.no-media::before {

    content: '';

    display: block;

    height: 183px;

    grid-row: 1;

}

.answer-media img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.answer-card:hover .answer-media,

.answer-card.selected .answer-media {

    background: var(--cobalt);

    box-shadow: inset 0 0 0 1px rgba(15, 15, 63, .08);

}

.partner-quiz-stage .answer-card:hover .answer-media,

.partner-quiz-stage .answer-card.selected .answer-media,

.partner-quiz-stage .answer-card.correct .answer-media,

.partner-quiz-stage .answer-card.incorrect .answer-media,

.partner-quiz-stage .answer-card.no-media:hover::before,

.partner-quiz-stage .answer-card.no-media.selected::before,

.partner-quiz-stage .answer-card.no-media.correct::before,

.partner-quiz-stage .answer-card.no-media.incorrect::before {

    background: var(--marine);

    box-shadow: none;

}

.answer-swatch {

    display: block;

    width: 100%;

    height: 100%;

    background: var(--swatch);

}

.answer-monogram {

    display: grid;

    place-items: center;

    width: 88px;

    height: 88px;

    border: 1px solid rgba(15,15,63,.4);

    border-radius: 50%;

    font-size: 0;

}

.answer-monogram::before {

    content: '';

    width: 60px;

    height: 60px;

    border: 1px solid currentColor;

    transform: rotate(45deg);

}

.answer-card.selected .answer-monogram,

.answer-card:hover .answer-monogram { color: var(--white); border-color: var(--white); }

.answer-label {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 58px;

    padding: 15px 8px 14px;

    border-bottom: 3px solid transparent;

    font-size: 16px;

    font-weight: 300;

    letter-spacing: .07em;

}

.answer-label-text {

    line-height: 1.35;

    text-align: center;

    white-space: pre-line;

}

.partner-quiz-stage .answer-label {

    gap: 6px;

    min-height: 58px;

    padding: 15px 8px 14px;

    color: var(--marine);

    font-size: 16px;

    font-weight: 300;

}

.answer-card.no-media .answer-label {

    min-height: 58px;

    padding: 15px 8px 14px;

    background: transparent;

    border-bottom-width: 3px;

}

.answer-card.no-media:hover .answer-label,

.answer-card.no-media.selected .answer-label {

    background: transparent;

    color: var(--cobalt);

}

.answer-card.selected .answer-label {

    border-color: var(--cobalt);

    color: var(--cobalt);

    font-weight: 600;

}

.partner-quiz-stage .answer-card.selected .answer-label {

    border-color: var(--cobalt);

}

.answer-card.no-media.selected .answer-label {

    color: var(--cobalt);

}

.answer-check {

    display: none;

    align-items: center;

    justify-content: center;

    width: 21px;

    height: 21px;

    margin-right: 5px;

    border-radius: 50%;

    color: var(--white);

    font-size: 13px;

    line-height: 1;

}

.partner-quiz-stage .answer-check {

    flex: 0 0 auto;

    margin-right: 0;

}

.review-stage .answer-card.correct .answer-label,

.quiz-stage .answer-card.correct .answer-label {

    border-color: var(--success);

    color: var(--marine);

    font-weight: 600;

}

.review-stage .answer-card.incorrect .answer-label,

.quiz-stage .answer-card.incorrect .answer-label {

    border-color: var(--error);

    color: var(--marine);

    font-weight: 600;

}

.review-stage .answer-card.correct .answer-check,

.review-stage .answer-card.incorrect .answer-check,

.quiz-stage .answer-card.correct .answer-check,

.quiz-stage .answer-card.incorrect .answer-check { display: inline-flex; }

.review-stage .answer-card.correct .answer-check,

.quiz-stage .answer-card.correct .answer-check { background: var(--success); }

.review-stage .answer-card.incorrect .answer-check,

.quiz-stage .answer-card.incorrect .answer-check { background: var(--error); }

.quiz-stage > .wide-button,

.review-stage > .wide-button {

    position: relative;

    z-index: 3;

    display: flex;

    width: min(792px, calc(100vw - 40px));

    margin: 0 auto;

    scroll-margin-block: 20vh;

}



.message-stage,

.thank-stage,

.rdv-confirmation-stage {

    background: linear-gradient(165deg, var(--mist) 0%, var(--cream) 100%);

}

.rdv-confirmation-stage {

    min-height: 900px;

    overflow: hidden;

    padding: 0;

}

.message-stage,

.thank-stage {

    min-height: 900px;

    overflow: hidden;

    padding: 0;

}

.thank-stage.appointment-open {
   position: relative;
   min-height: max(1580px, calc(100svh + 760px));

   /*
    * Keep the expanded booking area inside the stage without switching
    * the stage to overflow: visible. This reduces viewport re-anchoring
    * when appointment-open is applied.
    */
   overflow-x: hidden;
   overflow-y: clip;
   overflow-anchor: none;
}

/* Prevent descendants from becoming scroll anchors while the calendar opens. */
.thank-stage.appointment-open * {
   overflow-anchor: none;
}

/*
 * Keep the hand in the same first-screen composition as the closed state,
 * but do not pin it to the browser viewport.
 */
.thank-stage.appointment-open .message-photo {
   position: absolute;
   top: 124px;
   bottom: auto;
}

/* Keep the logo anchored to the top of the thank-you stage. */
.thank-stage.appointment-open .stage-logo {
   position: absolute;
   top: 18px;
   left: 50%;
   z-index: 3;
   width: 410px;
   max-width: none;
   transform: translateX(-50%);
   margin: 0;
}

.message-photo {

    position: absolute;

    left: -242px;

    top: auto;

    bottom: 0;

    width: 759px;

    height: min(776px, calc(100svh - 124px));

    background: url('/match-quiz/assets/quiz-message-hand.png') left bottom / contain no-repeat;

    z-index: 0;

    transform: scaleX(-1);

    transform-origin: center;

}

.message-stage .ornate-frame,

.thank-stage .ornate-frame,

.rdv-confirmation-stage .ornate-frame {

    background-image: url('/match-quiz/assets/quiz-message-motif.svg');

    background-size: min(1800px, calc(100vw - 120px)) auto;

    background-position: center 37px;

}

.message-stage .stage-logo,

.thank-stage .stage-logo,

.rdv-confirmation-stage .stage-logo {

    position: absolute;

    top: 18px;

    left: 50%;

    transform: translateX(-50%);

    width: 410px;

    margin: 0;

}

.message-content,

.thank-content,

.message-stage .match-form {

    position: relative;

    z-index: 2;

}

.message-content {

    position: absolute;

    left: 735px;

    top: 140px;

    width: 810px;

}

.message-content h2,

.thank-content h2,

.result-content h2 {

    margin: 0 0 28px;

    color: var(--marine);

    font-family: 'Lora', serif;

    font-style: italic;

    font-size: clamp(54px, 4.5vw, 86px);

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.03em;

}

.message-content h2 {

    margin: 0 0 40px;

    font-size: 86px;

    line-height: 83px;

    white-space: pre-line;

}

.message-content p {

    position: absolute;

    left: 0;

    top: 292px;

    margin: 0;

    font-size: 21px;

    line-height: 1.35;

    white-space: nowrap;

}

.message-stage .match-form {

    position: absolute;

    left: 735px;

    top: 352px;

    width: 810px;

    margin: 0;

}

.field-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

}

#creator-submit-button {

    display: flex;

    width: 210px;

    margin: 16px 0 0 auto;

}

#creator-contact-status {

    width: min(420px, 100%);

    margin: 12px 0 0 auto;

    padding: 0;

    background: transparent;

    border: 0;

    text-align: center;

}

.message-stage .field-grid {

    margin-bottom: 30px;

}

#creator-identity-fields {

    margin-bottom: 85px;

}

#creator-message-field {

    display: block;

}



.thank-content {

    position: absolute;

    z-index: 2;

    left: 735px;

    top: 278px;

    width: 810px;

    max-width: 810px;

}

.thank-content h2 {

    margin: 0 0 24px;

    font-size: 86px;

    line-height: 83px;

    white-space: pre-line;

}

.thank-content p {

    max-width: 810px;

    margin: 0 0 19px;

    font-size: 16px;

    line-height: 31px;

    letter-spacing: 1.12px;

}

.rdv-confirmation-content .collection-link {

    width: 239px;

    min-height: 51px;

    padding: 16px;

}

#share-appointment-card {

    width: 600px;

    margin: 30px 0 20px;

    padding: 0;

    border: 0;

    background: transparent;

    text-align: left;

}

#share-appointment-card h3 {

    margin: 0 0 12px;

    color: var(--marine);

    font: italic 400 36px/43px 'Lora', serif;

    letter-spacing: -.02em;

}

#share-appointment-card p {

    max-width: 520px;

    margin-bottom: 18px;

    font: normal 400 21px/31px 'Montserrat', sans-serif;

    letter-spacing: 0;

}

.share-appointment-actions {

    display: flex;

    align-items: center;

    gap: 24px;

    margin-top: 22px;

}

.share-appointment-actions .wide-button {

    width: 220px;

    min-height: 51px;

}

#share-appointment-card .ghl-form-wrap iframe,

#share-appointment-card .ghl-form-wrap .status {

    width: 600px;

    max-width: 600px;

}

.thank-stage.appointment-open #share-ghl-form-wrap {

    margin-top: 42px;

    padding-bottom: 72px;

    scroll-margin-top: 120px;

}

.secondary-collection-link {

    display: inline;

    min-height: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--cobalt);

    font: 600 13px/19px 'Montserrat', sans-serif;

    text-decoration: underline;

    text-transform: none;

    transition: color .18s ease;

}

.secondary-collection-link:hover {

    color: var(--marine);

    filter: none;

    transform: none;

}

.rdv-confirmation-content {

    position: absolute;

    z-index: 2;

    left: 735px;

    top: 240px;

    max-width: 810px;

}

.rdv-confirmation-content h2 {

    margin: 0 0 24px;

    color: var(--marine);

    font-family: 'Lora', serif;

    font-style: italic;

    font-size: 86px;

    font-weight: 400;

    line-height: 83px;

    letter-spacing: -.03em;

    white-space: nowrap;

}

.result-content p,

.rdv-confirmation-content p {

    max-width: 810px;

    margin: 0 0 24px;

    font-size: 16px;

    line-height: 31px;

    letter-spacing: .07em;

}

.rdv-confirmation-content .rdv-kicker,

.rdv-confirmation-content .rdv-signoff {

    text-transform: uppercase;

    font-weight: 300;

    font-size: 21px;

    line-height: 32px;

}

.rdv-confirmation-content .rdv-signoff {

    margin-top: 24px;

    font-size: 16px;

}

.rdv-confirmation-content .collection-link {

    margin-top: 8px;

}

#manual-share-tools {

    position: relative;

    z-index: 2;

    grid-column: 2;

    width: min(810px, 100%);

    margin-top: -22vh;

    align-self: end;

}

.share-box {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 8px;

    margin-bottom: 12px;

}



.result-stage {

    min-height: max(900px, 100svh);

    background: var(--mist);

    overflow-x: hidden;

    overflow-y: auto;

}

.result-stage.appointment-open {

    min-height: 1580px;

    overflow-anchor: none;

}

.result-stage.appointment-open .hero-photo {

    left: auto;

    right: -55px;

    top: 0;

    bottom: auto;

    width: min(58vw, 1120px);

    height: 100svh;

    background: linear-gradient(90deg, var(--mist) 0%, rgba(212,219,225,0) 54%), url('/match-quiz/assets/hero-ring-hand.png') center right / cover no-repeat;

}

.result-stage .ornate-frame {

    background-image: url('/match-quiz/assets/figma-full-motif.svg');

    background-size: calc(100% - 118px) 799px;

    background-position: center 56px;

}

.result-stage .stage-logo {

    position: absolute;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: 410px;

    margin: 0;

}

.result-content {

    position: absolute;

    z-index: 2;

    left: calc(50% - 615px);

    top: 250px;

    width: 600px;

    margin: 0;

    color: var(--marine);

}

.result-content .result-score {

    margin: 0 0 14px;

    font: italic 400 57px/73px 'Lora', serif;

    letter-spacing: -.03em;

    white-space: nowrap;

}

.result-content h2 {

    margin: 0 0 28px;

    text-transform: uppercase;

    font: normal 300 30.98px/57px 'Montserrat', sans-serif;

    letter-spacing: 2.1686px;

    white-space: nowrap;

}

.result-content #result-message {

    margin-bottom: 28px;

    max-width: 520px;

    font: normal 400 21px/31px 'Montserrat', sans-serif;

    letter-spacing: 0;

    white-space: pre-line;

}

.result-content .match-form {

    position: static;

    left: auto;

    top: auto;

    width: 100%;

    min-width: 0;

    display: grid;

    gap: 18px;

    margin-top: 26px;

}

.result-content .wide-button {

    width: 220px;

    min-height: 51px;

}

.result-content .claim-form .wide-button,

.result-appointment-card .wide-button {

    margin-left: auto;

}



.prize-panel {

    background: linear-gradient(132deg, var(--mist), var(--cream));

    text-align: center;

}

.prize-panel h2 {

    margin: 20px 0 12px;

    font-family: 'Lora', serif;

    font-style: italic;

    font-weight: 400;

    font-size: clamp(42px, 6vw, 76px);

}

.prize-image {

    display: block;

    width: min(420px, 90vw);

    max-height: 300px;

    object-fit: cover;

    margin: 24px auto;

}

.appointment-card {

    width: min(760px, calc(100vw - 40px));

    margin: 34px auto 0;

    padding: 28px;

    border: 1px solid rgba(15,15,63,.25);

    background: rgba(255,253,251,.55);

}

.result-appointment-card {

    width: 600px;

    margin: 34px 0 0;

    padding: 0;

    border: 0;

    background: transparent;

    text-align: left;

}

.appointment-card h3 {

    margin-top: 0;

    font-family: 'Lora', serif;

    font-style: italic;

    font-size: 36px;

    font-weight: 400;

}

.result-appointment-card h3 {

    margin-bottom: 12px;

    font: italic 400 36px/43px 'Lora', serif;

    letter-spacing: -.02em;

}

.result-appointment-card p {

    max-width: 520px;

    margin-bottom: 18px;

    font: normal 400 21px/31px 'Montserrat', sans-serif;

    letter-spacing: 0;

}

.ghl-form-wrap { margin-top: 22px; }

.ghl-form-wrap iframe {

    display: block;

    width: 600px;

    height: min(760px, calc(100svh - 120px));

    min-height: 680px;

    border: 0;

    background: var(--white);

}

.ghl-form-wrap .status {

    width: 600px;

    max-width: 600px;

    margin-left: 0;

    margin-right: 0;

}



.match-debug-tools {

    position: fixed;

    z-index: 10;

    top: 12px;

    left: 12px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    padding: 8px;

    background: rgba(255,253,251,.78);

    border: 1px solid rgba(15,15,63,.18);

    backdrop-filter: blur(3px);

}

.match-debug-tools a,

.match-debug-tools button {

    min-height: 34px;

    padding: 8px 11px;

    font-size: 11px;

    color: var(--marine);

    background: var(--white);

    border: 1px solid rgba(15,15,63,.2);

    text-decoration: none;

}

.match-modal {

    position: fixed;

    z-index: 100;

    inset: 0;

    display: grid;

    place-items: center;

    padding: 20px;

    background: rgba(15,15,63,.62);

}

.match-modal-card {

    position: relative;

    width: min(620px, 100%);

    max-height: calc(100vh - 40px);

    overflow: auto;

    padding: 42px;

    background: var(--cream);

}

.modal-close {

    position: absolute;

    right: 10px;

    top: 10px;

    width: 36px;

    height: 36px;

    padding: 0;

    min-height: 0;

    background: transparent;

    color: var(--marine);

    font-size: 28px;

}

.unlock-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 22px;

}

.unlock-action.is-complete { background: var(--success); color: var(--marine); }

.generated-code {

    margin-top: 22px;

    padding: 18px;

    border: 1px dashed var(--marine);

    text-align: center;

}

.status {

    position: relative;

    z-index: 4;

    width: min(760px, calc(100vw - 40px));

    margin: 18px auto;

    padding: 14px 18px;

    background: rgba(255,253,251,.9);

    border: 1px solid rgba(15,15,63,.2);

}

.cta-status {

    width: 100%;

    max-width: 520px;

    margin: 12px auto 0;

    padding: 0;

    background: transparent;

    border: 0;

    color: #9c1d36;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.35;

    text-align: center;

}

.quiz-stage > .cta-status,

.review-stage > .cta-status {

    width: min(792px, calc(100vw - 40px));

    max-width: 792px;

}

.match-form .cta-status,

.appointment-card .cta-status,

.result-content > .cta-status {

    max-width: 100%;

}

.error { color: #9c1d36; }

.step-label {

    text-transform: uppercase;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .16em;

}



@media (max-width: 2100px), (max-height: 900px) {

    #access-stage.hero-stage {

        --hero-left: clamp(260px, 18vw, 346px);

        --hero-top: clamp(150px, 21.3svh, 212px);

        --hero-width: 681px;

        --hero-logo-width: 656px;

        --hero-logo-offset: calc((var(--hero-width) - var(--hero-logo-width)) / 2);

        --hero-title-size: clamp(26px, 1.55vw, 30.98px);

        --hero-title-line: 57px;

        --hero-title-gap: 19.6px;

        --hero-copy-size: clamp(18px, 1.05vw, 21px);

        --hero-copy-line: 31px;

        --hero-copy-gap: 20px;

        --hero-cta-top: min(calc(100svh - 110px), 615px);

        --hero-cta-offset: calc((var(--hero-width) - 220px) / 2);

    }

    .ornate-frame {

        background-size: calc(100% - 118px) calc(100% - 120px);

    }

    .hero-photo {

        right: -40px;

        width: min(55vw, 1120px);

    }

    .result-stage.appointment-open .hero-photo {

        right: -40px;

        width: min(55vw, 1120px);

    }

}



@media (max-width: 1500px), (max-height: 760px) {
   .thank-stage.appointment-open .message-photo {
       top: max(124px, calc(100svh - 512px));
       bottom: auto;
   }


    
   .thank-stage.appointment-open .stage-logo {
       width: 308px;
       max-width: none;
   }
#access-stage.hero-stage {

        --hero-left: clamp(96px, 10vw, 150px);

        --hero-top: clamp(126px, 21svh, 160px);

        --hero-width: clamp(560px, 42vw, 620px);

        --hero-logo-width: min(560px, calc(var(--hero-width) - 40px));

        --hero-title-size: clamp(22px, 1.8vw, 27px);

        --hero-title-line: 1.35;

        --hero-title-gap: 16px;

        --hero-copy-size: clamp(15.5px, 1.25vw, 18px);

        --hero-copy-line: 1.45;

        --hero-copy-gap: 14px;

        --hero-cta-top: min(calc(100svh - 96px), 448px);

    }

    .ornate-frame {

        background-size: calc(100% - 140px) calc(100% - 96px);

    }

    .quiz-stage .quiz-frame {

        background-size: min(1350px, calc(100vw - 118px)) auto;

        background-position: center 54px;

    }

    .hero-photo {

        right: -95px;

        width: min(56vw, 840px);

    }

    .result-stage.appointment-open .hero-photo {

        right: -95px;

        width: min(56vw, 840px);

    }

    .message-stage,

    .thank-stage,

    .rdv-confirmation-stage {

        min-height: max(820px, 100svh);

    }

    .message-stage .ornate-frame,

    .thank-stage .ornate-frame,

    .rdv-confirmation-stage .ornate-frame {

        background-size: min(1350px, calc(100vw - 90px)) auto;

        background-position: center 28px;

    }

    .message-photo {

        left: -228px;

        top: auto;

        bottom: 0;

        width: 569px;

        height: 512px;

        background-size: contain;

    }

    .message-stage .stage-logo,

    .thank-stage .stage-logo,

    .rdv-confirmation-stage .stage-logo {

        width: 308px;

    }

    .message-content {

        left: 552px;

        top: 105px;

        width: 608px;

    }

    .message-content h2 {

        margin-bottom: 30px;

        font-size: 64.5px;

        line-height: 62px;

    }

    .message-content p {

        top: 219px;

        font-size: 15.75px;

        letter-spacing: 1.1px;

    }

    .message-stage .match-form {

        left: 552px;

        top: 264px;

        width: 608px;

    }

    .message-stage .field-grid {

        gap: 22px;

    }

    #creator-identity-fields {

        margin-bottom: 64px;

    }

    #creator-submit-button {

        width: 158px;

        margin-top: 12px;

    }

    .thank-content {

        left: 552px;

        top: 150px;

        width: 608px;

    }

    .rdv-confirmation-content {

        left: 552px;

        top: 132px;

        width: 608px;

    }

    .rdv-confirmation-content h2 {

        margin-bottom: 18px;

        font-size: 64.5px;

        line-height: 62px;

    }

    .rdv-confirmation-content p {

        font-size: 15.75px;

        line-height: 23px;

    }

    .thank-content h2 {

        margin-bottom: 18px;

        font-size: 64.5px;

        line-height: 62px;

    }

    .thank-content p {

        margin-bottom: 14px;

        font-size: 12px;

        line-height: 23px;

        letter-spacing: .84px;

    }

    .rdv-confirmation-content .collection-link {

        width: 179px;

        min-height: 39px;

        padding: 10px 12px;

        font-size: 10px;

        line-height: 15px;

    }

}



@media (max-width: 1180px) and (min-width: 901px) {

    #access-stage.hero-stage {

        --hero-left: 44px;

        --hero-top: clamp(98px, 18svh, 128px);

        --hero-width: 520px;

        --hero-logo-width: 500px;

        --hero-title-size: 21px;

        --hero-copy-size: 15.5px;

        --hero-copy-line: 1.45;

        --hero-cta-top: min(calc(100svh - 88px), 500px);

    }

    .hero-photo {

        right: -150px;

        width: 58vw;

    }

    .result-stage.appointment-open .hero-photo {

        right: -150px;

        width: 58vw;

    }

}



@media (max-width: 900px) {

    .match-stage { padding: 18px 20px 72px; }

    .ornate-frame {

        inset: 84px 20px auto;

        height: 290px;

    }

    .hero-stage {

        display: block;

        min-height: 852px;

    }

    #access-stage.hero-stage {

        height: auto;

        min-height: 852px;

    }

    .hero-stage .ornate-frame {

        inset: 0;

        height: auto;

        background-size: calc(100% - 40px) 370px;

        background-position: center 84px;

    }

    .result-stage .ornate-frame {

        inset: 0;

        height: auto;

        background-image: url('/match-quiz/assets/figma-full-motif.svg');

        background-size: calc(100% - 40px) 370px;

        background-position: center 84px;

    }

    .message-stage .ornate-frame {

        inset: 0;

        height: auto;

        background-size: calc(100% - 40px) auto;

        background-position: center 64px;

    }

    .quiz-stage .quiz-frame {

        position: fixed;

        inset: 0;

        height: auto;

        background-size: calc(100vw - 40px) auto;

        background-position: center 64px;

    }

    .thank-stage .ornate-frame,

    .rdv-confirmation-stage .ornate-frame {

        inset: 0;

        height: auto;

        background-image: url('/match-quiz/assets/quiz-message-motif.svg');

        background-size: calc(100% - 40px) auto;

        background-position: center 64px;

    }

    .hero-photo {

        inset: -70px -160px auto -160px;

        width: auto;

        height: 452px;

        background-image: linear-gradient(180deg, rgba(228,236,240,.5) 10%, rgba(228,236,240,0) 47%), linear-gradient(0deg, var(--mist) 0%, rgba(212,219,225,0) 17%), url('/match-quiz/assets/hero-ring-hand.png');

    }

    #access-stage {

        padding: 0 20px 72px;

    }

    #access-stage .hero-photo {

        inset: -71px -161px auto -161px;

        height: 452px;

        background-position: center top;

        background-size: 679px 452px;

    }

    #access-stage .ornate-frame {

        background-size: calc(100% - 40px) 370px;

        background-position: center 84px;

    }

    .result-stage .hero-photo {

        inset: -71px -161px auto -161px;

        width: auto;

        height: 452px;

        background-position: center top;

        background-size: 679px 452px;

    }

    .result-stage.appointment-open .hero-photo {

        inset: -71px -161px auto -161px;

        width: auto;

        height: 452px;

        background-position: center top;

        background-size: 679px 452px;

    }

    .hero-content {

        position: relative;

        left: auto;

        top: auto;

        width: 100%;

        margin: 396px auto 0;

    }

    #access-stage .hero-content {

        position: absolute;

        left: 20px;

        top: 396px;

        width: calc(100% - 40px);

        margin: 0;

    }

    .grand-logo-image {

        width: min(353px, 100%);

        margin: 0 auto;

    }

    .hero-eyebrow {

        margin-top: 22px;

        font-size: 18px;

        line-height: 20px;

    }

    #access-stage .hero-eyebrow {

        width: min(348px, 100%);

        margin: 16px auto 0;

    }

    .hero-copy {

        width: 100%;

        max-width: 100%;

        font-size: 14px;

        line-height: 24px;

    }

    #access-stage .hero-copy {

        width: min(353px, 100%);

        margin: 16px auto 0;

    }

    .hero-stage .match-form {

        position: relative;

        left: auto;

        top: auto;

        width: 100%;

        margin: 34px 0 0;

    }

    #access-stage.hero-stage .match-form {

        position: absolute;

        left: 20px;

        top: 687px;

        width: calc(100% - 40px);

        min-width: 0;

        margin: 0;

    }

    #open-start-button {

        width: min(353px, 100%);

        margin: 0 auto;

    }

    .input-row,

    .field-grid,

    .share-box { grid-template-columns: 1fr; }

    .quiz-stage .stage-logo {

        width: 260px;

        margin-bottom: 66px;

    }

    .partner-quiz-stage .stage-logo {

        width: 260px;

        margin-bottom: 42px;

    }

    .quiz-intro {

        width: min(279px, 100%);

        margin-bottom: 54px;

        font-size: 18px;

        line-height: 1.1;

    }

    .quiz-question-block {

        width: 100%;

        margin-bottom: 54px;

        scroll-margin-block: 18vh;

    }

    .partner-quiz-stage .quiz-question-block {

        width: 100%;

        margin-bottom: 60px;

    }

    .question-title {

        font-size: 14px;

        line-height: 19px;

    }

    .answer-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 28px 14px;

    }

    .answer-grid.answer-count-2,

    .answer-grid.answer-count-3,

    .answer-grid.answer-count-5 {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .answer-grid.answer-count-5 .answer-card,

    .answer-grid.answer-count-5 .answer-card:nth-child(4),

    .answer-grid.answer-count-5 .answer-card:nth-child(5) {

        grid-column: auto;

    }

    .answer-card {

        grid-template-rows: minmax(130px, 42vw) auto;

        width: auto;

        max-width: none;

    }

    .answer-card.no-media {

        grid-template-rows: auto;

    }

    .partner-quiz-stage .answer-card.no-media {

        grid-template-rows: minmax(130px, 42vw) auto;

    }

    .partner-quiz-stage .answer-card.no-media::before {

        height: auto;

        min-height: 130px;

        aspect-ratio: 1 / 1;

    }

    .answer-media {

        height: auto;

        min-height: 130px;

        aspect-ratio: 1 / 1;

        background: var(--marine);

    }

    .answer-label {

        min-height: 54px;

        font-size: 14px;

    }

    .answer-card.no-media .answer-label {

        min-height: 54px;

    }

    .message-stage,

    .thank-stage,

    .rdv-confirmation-stage {

        display: block;

        min-height: 1234px;

        padding-top: 18px;

    }

    .message-stage .stage-logo,

    .thank-stage .stage-logo,

    .rdv-confirmation-stage .stage-logo,

    .result-stage .stage-logo {

        top: 16px;

        width: 260px;

    }

    .message-photo {

        left: 20px;

        top: 70px;

        bottom: auto;

        width: 82vw;

        height: 370px;

    }

    #creator-contact-stage .message-content,

    #creator-contact-stage .match-form {

        position: absolute;

        left: 20px;

        width: calc(100% - 40px);

        margin: 0;

        grid-column: auto;

    }

    #creator-contact-stage .message-content {

        top: 478px;

        text-align: center;

    }

    #creator-contact-stage .match-form {

        top: 597px;

    }

    #creator-contact-stage .message-content p {

        position: absolute;

        left: 0;

        top: 279px;

        width: 100%;

        margin: 0;

        font-size: 18px;

        line-height: 20px;

        white-space: normal;

    }

    #creator-contact-stage .field-grid {

        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 20px;

    }

    #creator-contact-stage #creator-identity-fields {

        margin-bottom: 100px;

    }

    #creator-contact-stage #creator-message-field textarea {

        min-height: 149px;

    }

    #creator-contact-stage #creator-submit-button {

        width: 100%;

        margin-top: 20px;

    }

    #creator-contact-status {

        width: 100%;

        text-align: center;

    }

    .message-content,

    .thank-content,

    .rdv-confirmation-content,

    .message-stage .match-form {

        position: relative;

        left: auto;

        top: auto;

        width: 100%;

        grid-column: auto;

    }

    .message-content {

        margin-top: 392px;

        text-align: center;

    }

    .message-content h2,

    .thank-content h2 {

        font-size: 41px;

        line-height: 43px;

        white-space: normal;

    }

    .message-content p {

        position: static;

        margin-top: 28px;

        font-size: 18px;

        line-height: 20px;

        white-space: normal;

    }

    .message-stage .match-form {

        margin-top: 28px;

    }

    .message-stage .field-grid,

    #creator-identity-fields {

        margin-bottom: 18px;

    }

    #creator-submit-button {

        width: 100%;

    }

    .thank-content,

    .rdv-confirmation-content {

        margin-top: 500px;

        text-align: center;

    }

    .thank-content p {

        font-size: 14px;

        line-height: 24px;

    }

    .rdv-confirmation-content .collection-link {

        width: 100%;

    }

    .thank-stage.appointment-open {

        min-height: 1780px;

    }

    .thank-stage.appointment-open .stage-logo { top: 16px; }

    .thank-stage.appointment-open #share-ghl-form-wrap {

        scroll-margin-top: 88px;

    }

    #share-appointment-card {

        width: 100%;

        margin: 28px 0 20px;

        text-align: center;

    }

    #share-appointment-card h3 {

        font-size: 34px;

        line-height: 39px;

    }

    #share-appointment-card p {

        max-width: 100%;

        font-size: 16px;

        line-height: 24px;

    }

    .share-appointment-actions {

        flex-direction: column;

        justify-content: center;

        gap: 16px;

    }

    #share-appointment-card .wide-button,

    #share-appointment-card .ghl-form-wrap iframe,

    #share-appointment-card .ghl-form-wrap .status {

        width: 100%;

        max-width: 100%;

    }

    .rdv-confirmation-content h2 {

        font-size: 41px;

        line-height: 43px;

        white-space: normal;

    }

    .rdv-confirmation-content .rdv-kicker {

        font-size: 18px;

        line-height: 24px;

    }

    #manual-share-tools {

        width: 100%;

        margin: 26px 0 0;

    }

    .result-stage {

        display: block;

        min-height: 852px;

        padding: 0 20px 72px;

    }

    .result-stage.appointment-open {

        min-height: 1580px;

    }

    .result-content {

        position: absolute;

        left: 20px;

        top: 441px;

        width: calc(100% - 40px);

        margin: 0;

        text-align: center;

    }

    .result-appointment-card,

    .ghl-form-wrap iframe,

    .ghl-form-wrap .status {

        width: 100%;

        max-width: 100%;

    }

    .ghl-form-wrap {

        width: min(353px, 100%);

        margin: 22px auto 0;

    }

    .ghl-form-wrap .status {

        margin-left: auto;

        margin-right: auto;

    }

    .result-content .result-score {

        width: min(343px, 100%);

        margin: 0 auto 24px;

        font-size: 41px;

        line-height: 43px;

        white-space: normal;

    }

    .result-content h2 {

        width: min(348px, 100%);

        margin: 0 auto 46px;

        font-size: 18px;

        line-height: 20px;

        white-space: normal;

    }

    .result-content #result-message {

        width: min(353px, 100%);

        max-width: 353px;

        margin: 0 auto 28px;

        font-size: 14px;

        line-height: 24px;

        text-align: center;

    }

    .result-content .wide-button,

    .result-content .claim-form .wide-button,

    .result-appointment-card .wide-button {

        width: min(353px, 100%);

        margin-left: 0;

    }

    .result-appointment-card {

        width: 100%;

        max-width: 353px;

        margin: 34px auto 0;

        text-align: center;

    }

    .result-appointment-card h3 {

        font-size: 32px;

        line-height: 36px;

    }

    .result-appointment-card p {

        width: 100%;

        max-width: 353px;

        margin-left: auto;

        margin-right: auto;

        font-size: 14px;

        line-height: 24px;

        text-align: center;

    }

    .unlock-actions { grid-template-columns: 1fr; }

    .match-debug-tools {

        position: relative;

        top: auto;

        left: auto;

    }

}

/*
 * The welcome stage is intentionally a single phone viewport. The artwork,
 * copy, CTA, and persistent regulations link each get a dedicated vertical
 * band so browser chrome cannot cut the CTA off on short mobile screens.
 */
@media (max-width: 900px) {

    #access-stage.hero-stage {

        height: 100svh;

        min-height: 600px;

        padding: 0 20px;

        overflow: hidden;

    }

    #access-stage .hero-photo {

        inset: -46px -115px auto;

        height: min(340px, 52svh);

        background-size: auto 100%;

    }

    #access-stage .ornate-frame {

        background-size: calc(100% - 40px) min(286px, 44svh);

        background-position: center 42px;

    }

    #access-stage .hero-content {

        top: min(300px, 42svh);

    }

    #access-stage .grand-logo-image {

        width: min(330px, 100%);

    }

    #access-stage .hero-eyebrow {

        width: min(350px, 100%);

        margin: 12px auto 0;

        font-size: 14px;

        line-height: 18px;

        letter-spacing: .075em;

        white-space: normal;

    }

    #access-stage .hero-copy {

        margin-top: 10px;

        font-size: 13.5px;

        line-height: 21px;

    }

    #access-stage.hero-stage .match-form {

        top: calc(100svh - 100px);

    }

    #open-start-button {

        min-height: 48px;

        height: 48px;

    }

    .persistent-rules-link {

        bottom: max(12px, env(safe-area-inset-bottom, 0px));

        font-size: 10px;

    }

}