/* The header floats over the purple, as it does on the simple hero. Repeated
   here because a section stylesheet only loads with its own layout, so a page
   that opens with this hero never loads that one. */
.section-builder-hero-view .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

.referral-hero {
    /* One Figma pixel of the 1352 content box, shrinking with the viewport. */
    --u: min(1px, (100vw - 2 * var(--container-pad)) / 1352);
    /* The small print on the coupon, a shade off the site's body text. */
    --referral-coupon-ink: #393540;

    position: relative;
    overflow: clip;
    padding: 0;
    background: var(--color-primary);
    color: var(--color-white);
    isolation: isolate;
}

/* A screen tall with everything stacked down the middle. The top padding is
   the design's: it keeps the title clear of the floating header and leaves
   the terms link close to the bottom edge on a 1512 by 851 screen. */
.referral-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: max(7.5rem, calc(211 * var(--u))) max(1.25rem, calc(19 * var(--u)));
    text-align: center;
}

.referral-hero__title {
    margin: 0;
    color: inherit;
    font-family: var(--font-display);
    font-size: max(2.75rem, calc(100 * var(--u)));
    font-style: italic;
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance;
}

.referral-hero__subtitle {
    max-width: 30em;
    margin: max(0.75rem, calc(22 * var(--u))) 0 0;
    font-family: var(--font-body);
    font-size: max(1.25rem, calc(40 * var(--u)));
    font-weight: var(--fw-regular);
    line-height: 1.4;
    letter-spacing: -0.0375em;
    text-wrap: balance;
}

/* The ticket scales as one piece: the type on it is sized in the ticket's
   own width, so the offer stays inside the inner frame at any size. */
.referral-hero__coupon {
    position: relative;
    container-type: inline-size;
    width: min(100%, max(18.75rem, calc(379.614 * var(--u))));
    margin-top: max(2.5rem, calc(58 * var(--u)));
    color: var(--color-dark-purple);
    text-align: left;
}

.referral-hero__coupon-art {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* Placed over the inner frame, where the design has it: 103 in and 36 down
   on the 380 by 227 ticket. */
.referral-hero__coupon-text {
    position: absolute;
    top: 15.97%;
    left: 27.13%;
    width: 63.49%;
    display: flex;
    flex-direction: column;
    gap: 1.054cqi;
}

.referral-hero__coupon-text p {
    margin: 0;
    white-space: nowrap;
}

.referral-hero__coupon-eyebrow {
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 5.2685cqi;
    font-weight: var(--fw-semibold);
    line-height: 1.6;
    letter-spacing: -0.025em;
}

.referral-hero__coupon-value {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 12.6445cqi;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: 0;
}

.referral-hero__coupon-note {
    display: flex;
    flex-direction: column;
    gap: 1.054cqi;
    color: var(--referral-coupon-ink);
    font-family: var(--font-body);
}

.referral-hero__coupon-note-label {
    font-size: 3.1611cqi;
    font-weight: var(--fw-regular);
    line-height: 1.6667;
}

.referral-hero__coupon-note-text {
    font-size: 4.2148cqi;
    font-weight: var(--fw-bold);
    line-height: 1.5;
}

/* Paint and a base size. The shared button size (global.css) only arrives with
   .btn-fx-ready, which main.js adds, so this is what shows before it runs. */
.referral-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: max(2rem, calc(36 * var(--u)));
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-title6);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.referral-hero__terms {
    margin: max(1.5rem, calc(34 * var(--u))) 0 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--fw-regular);
    line-height: 1.5;
}

.referral-hero__terms-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
    transition: color 0.2s ease;
}

.referral-hero__terms-link:hover,
.referral-hero__terms-link:focus-visible {
    color: var(--color-accent-01);
}

@media (max-width: 768px) {
    .referral-hero__inner {
        padding-block: 7rem 2.5rem;
    }

    /* Two lines on phones, so the italic descenders need the room. */
    .referral-hero__title {
        line-height: 1.1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .referral-hero__terms-link {
        transition: none;
    }
}