.referral-program-page {
    min-height: 72vh;
    padding: 28px 0 82px;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
}

.referral-program-page .staff-page-preview {
    margin: 0 0 28px;
    border-color: #d9cef4;
    background: #f2edff;
    color: #514467;
}

.referral-program-page .staff-page-preview strong { color: var(--primary); }

.referral-program-hero {
    position: relative;
    isolation: isolate;
    min-height: 520px;
    overflow: hidden;
    border-block: 1px solid #e7e1f3;
    background:
        linear-gradient(90deg, rgba(246, 243, 255, .98) 0%, rgba(246, 243, 255, .92) 45%, rgba(246, 243, 255, .5) 72%, rgba(246, 243, 255, .2) 100%),
        url("../images/fantasy-realm.2a5ac5ac106f.webp") 77% 47% / cover;
}

.referral-program-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 145px;
    background: linear-gradient(0deg, #faf9ff, rgba(250, 249, 255, 0));
    pointer-events: none;
}

.referral-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    min-height: 520px;
    padding-block: 68px 76px;
}

.referral-hero-copy { position: relative; z-index: 3; max-width: 650px; }
.referral-hero-copy .eyebrow { margin-bottom: 17px; }
.referral-hero-copy h1 {
    max-width: 620px;
    margin: 0;
    font: 850 clamp(3.25rem, 6vw, 5.65rem)/.98 "Manrope", sans-serif;
    letter-spacing: -.068em;
}
.referral-hero-lead {
    max-width: 585px;
    margin: 25px 0 0;
    color: #514967;
    font-size: clamp(.94rem, 1.4vw, 1.08rem);
    line-height: 1.75;
}
.referral-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.referral-hero-actions .btn .ui-icon, .referral-program-cta .btn .ui-icon { width: 18px; height: 18px; }
.referral-how-link { color: #665676; font-size: .8rem; font-weight: 750; text-decoration: underline; text-decoration-color: #c5b5e1; text-underline-offset: 5px; }
.referral-how-link:hover { color: var(--primary); text-decoration-color: var(--primary); }
.referral-eligibility { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; color: #5f5870; font-size: .72rem; font-weight: 650; }
.referral-eligibility > span { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(20, 132, 89, .09); }

.referral-hero-art { position: relative; z-index: 2; min-height: 390px; }
.referral-art-halo { position: absolute; width: 330px; height: 330px; inset: 22px auto auto 50%; border-radius: 50%; background: rgba(255,255,255,.48); box-shadow: 0 0 0 32px rgba(255,255,255,.16), 0 34px 90px rgba(71, 44, 127, .12); transform: translateX(-50%); backdrop-filter: blur(5px); }
.referral-bot-card { position: absolute; display: grid; place-items: center; margin: 0; border: 1px solid rgba(219, 208, 241, .82); border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: 0 18px 50px rgba(54, 31, 99, .12); backdrop-filter: blur(12px); }
.referral-bot-card img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(59, 34, 107, .13)); }
.referral-bot-card figcaption { position: absolute; inset: auto 12px 11px; color: #655775; font-size: .63rem; font-weight: 800; text-align: center; }
.referral-bot-card-koh { z-index: 2; width: 220px; height: 255px; left: 50%; top: 48px; padding: 18px 18px 35px; transform: translateX(-50%); }
.referral-bot-card-clan { z-index: 1; width: 160px; height: 192px; left: 3%; top: 150px; padding: 15px 15px 32px; transform: rotate(-6deg); }
.referral-bot-card-wa { z-index: 3; width: 160px; height: 192px; right: 1%; top: 137px; padding: 15px 15px 32px; transform: rotate(6deg); }
.referral-reward-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; right: 4%; bottom: 21px; padding: 13px 17px; border: 1px solid #d7c7f6; border-radius: 14px; background: rgba(255,255,255,.95); color: var(--primary); box-shadow: 0 15px 35px rgba(61, 36, 111, .13); }
.referral-reward-float .ui-icon { width: 25px; height: 25px; }
.referral-reward-float span { display: grid; }
.referral-reward-float strong { color: var(--text); font-size: .82rem; }
.referral-reward-float small { color: var(--muted); font-size: .64rem; }

.referral-program-content { position: relative; z-index: 3; }
.referral-benefits-heading { margin: 42px auto 28px; text-align: center; color: #20183b; }
.referral-benefits-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.12; }
.referral-benefits-heading p { margin: 14px 0 0; color: #373047; font-size: 1.1rem; line-height: 1.55; }
.referral-cadence-warning { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 18px; margin: 0 0 24px; padding: 20px 24px; border: 1px solid #d9cef4; border-radius: 16px; background: #f3efff; color: #373047; font-size: 1rem; line-height: 1.55; }
.referral-cadence-warning strong { display: block; margin-bottom: 3px; color: #20183b; font-size: 1.05rem; }
.referral-warning-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: #eae1ff; color: #6025db; }
.referral-warning-icon .ui-icon { width: 26px; height: 26px; }

.referral-benefits { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin: 0; }
.referral-benefit-card { display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 24px; border: 1px solid #ded3f5; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(71,44,127,.045); }
.referral-benefit-heading { display: flex; align-items: center; gap: 14px; }
.referral-benefit-heading > div { min-width: 0; }
.referral-benefit-icon { display: grid; flex: 0 0 54px; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: #f3efff; color: #6025db; }
.referral-benefit-icon .ui-icon { width: 30px; height: 30px; }
.referral-benefit-label { margin: 0 0 8px; color: #514467; font-size: .75rem; font-weight: 800; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.referral-benefit-heading h3 { margin: 0; color: #6025db; font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.12; }
.referral-benefit-description { margin: 24px 0; color: #20183b; font-size: 1.05rem; line-height: 1.6; }
.referral-benefit-example { margin-top: auto; padding: 18px; border-radius: 12px; background: #f7f3ff; }
.referral-benefit-example .referral-benefit-label { color: #6025db; }
.referral-benefit-example > p:last-child { margin: 0; color: #373047; font-size: 1rem; line-height: 1.55; }
.referral-benefits-notes { margin: 24px auto 64px; text-align: center; color: #373047; font-size: .9rem; line-height: 1.6; }
.referral-benefits-notes p { margin: 10px 0 0; }
.referral-benefits-notes .referral-per-subscription { color: #20183b; font-size: 1rem; font-weight: 750; }
.referral-per-subscription > span { display: inline-grid; width: 23px; height: 23px; margin-right: 7px; place-items: center; border-radius: 50%; background: #6025db; color: #fff; font-size: .8rem; }

.referral-how { scroll-margin-top: 110px; }
.referral-section-heading { max-width: 670px; margin: 0 auto 36px; text-align: center; }
.referral-section-heading .eyebrow { margin-bottom: 12px; }
.referral-section-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 850; line-height: 1.08; }
.referral-section-heading > p:last-child { margin: 15px auto 0; color: var(--muted); font-size: .87rem; }
.referral-program-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 86px; }
.referral-program-grid article { position: relative; min-height: 260px; padding: 26px 23px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 25px rgba(71, 44, 127, .035); }
.referral-step-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #efe8ff; color: var(--primary); }
.referral-step-icon .ui-icon { width: 22px; height: 22px; }
.referral-step-number { position: absolute; top: 27px; right: 23px; color: #c1b4d9; font-size: .68rem; font-weight: 850; }
.referral-program-grid h3 { margin: 24px 0 10px; font-size: 1.08rem; font-weight: 820; letter-spacing: -.03em; }
.referral-program-grid p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.68; }

.referral-program-terms { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: clamp(38px, 7vw, 90px); align-items: center; padding: clamp(34px, 6vw, 66px); border: 1px solid #e2d8f3; border-radius: 20px; background: linear-gradient(135deg, #f1ebff, #fbf9ff 58%, #f3effd); }
.referral-terms-icon { display: grid; width: 50px; height: 50px; margin-bottom: 22px; place-items: center; border-radius: 14px; background: #fff; color: var(--primary); box-shadow: 0 8px 24px rgba(67, 39, 124, .08); }
.referral-terms-icon .ui-icon { width: 26px; height: 26px; }
.referral-terms-heading .eyebrow { margin-bottom: 12px; }
.referral-terms-heading h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 850; line-height: 1.08; }
.referral-terms-heading > p:last-child { margin: 20px 0 0; color: #5d5370; font-size: .83rem; line-height: 1.75; }
.referral-program-terms ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.referral-program-terms li { position: relative; padding: 0 0 14px 34px; border-bottom: 1px solid rgba(110, 83, 159, .12); color: #554c66; font-size: .77rem; line-height: 1.65; }
.referral-program-terms li:last-child { padding-bottom: 0; border-bottom: 0; }
.referral-program-terms li::before { content: "✓"; position: absolute; left: 0; top: 1px; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #ded1fb; color: #5521d2; font-size: .68rem; font-weight: 900; }

.referral-program-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 255px; margin-top: 54px; padding: clamp(30px, 5vw, 54px); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(90deg, rgba(245,241,255,.97), rgba(245,241,255,.82) 52%, rgba(245,241,255,.28)), url("../images/fantasy-realm.2a5ac5ac106f.webp") 70% 56% / cover; }
.referral-program-cta > div { max-width: 590px; }
.referral-program-cta .eyebrow { margin-bottom: 10px; }
.referral-program-cta h2 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 850; line-height: 1.1; }
.referral-program-cta p:last-child { max-width: 510px; margin: 15px 0 0; color: #5a506c; font-size: .82rem; }
.referral-program-cta > .btn { flex: 0 0 auto; }

@media (max-width: 1020px) {
    .referral-hero-layout { grid-template-columns: minmax(0,1fr) 390px; gap: 24px; }
    .referral-program-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .referral-program-grid article { min-height: 230px; }
    .referral-bot-card-clan { left: 0; }
    .referral-bot-card-wa { right: -3%; }
}

@media (max-width: 820px) {
    .referral-program-page { padding-top: 20px; }
    .referral-program-hero { min-height: 0; }
    .referral-hero-layout { grid-template-columns: 1fr; padding-block: 56px 40px; }
    .referral-hero-copy { max-width: 680px; }
    .referral-hero-copy h1 { max-width: 650px; font-size: clamp(3rem, 11vw, 5rem); }
    .referral-hero-art { width: min(520px, 100%); min-height: 365px; margin: 0 auto; }
    .referral-benefits { grid-template-columns: 1fr; }
    .referral-benefit-card { padding: 24px; }
    .referral-program-terms { grid-template-columns: 1fr; }
    .referral-program-cta { align-items: flex-start; flex-direction: column; gap: 24px; background-position: 62% 56%; }
}

@media (max-width: 620px) {
    .referral-program-page { padding-bottom: 54px; }
    .referral-program-page .staff-page-preview { padding: 15px; font-size: .75rem; }
    .referral-program-page .staff-page-preview .btn { width: 100%; }
    .referral-program-hero { background-position: 66% 50%; }
    .referral-hero-layout { padding-block: 43px 34px; }
    .referral-hero-copy h1 { font-size: clamp(2.75rem, 15vw, 4rem); }
    .referral-hero-lead { font-size: .88rem; }
    .referral-hero-actions { align-items: stretch; flex-direction: column; gap: 13px; }
    .referral-hero-actions .btn { width: 100%; }
    .referral-how-link { align-self: center; }
    .referral-hero-art { min-height: 310px; }
    .referral-art-halo { width: 260px; height: 260px; }
    .referral-bot-card-koh { width: 174px; height: 213px; top: 35px; }
    .referral-bot-card-clan, .referral-bot-card-wa { width: 128px; height: 158px; top: 122px; }
    .referral-bot-card-clan { left: -2%; }
    .referral-bot-card-wa { right: -2%; }
    .referral-reward-float { right: 2%; bottom: 5px; }
    .referral-benefits-heading { margin-top: 32px; }
    .referral-benefits-heading p { font-size: 1rem; }
    .referral-cadence-warning { align-items: start; gap: 12px; padding: 18px; }
    .referral-benefits { gap: 14px; }
    .referral-benefit-card { padding: 22px 20px; }
    .referral-benefit-heading h3 { font-size: 1.8rem; }
    .referral-benefits-notes { margin-bottom: 48px; }
    .referral-program-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 56px; }
    .referral-program-grid article { min-height: 0; }
    .referral-program-terms { gap: 30px; padding: 28px 22px; }
    .referral-program-cta { min-height: 320px; padding: 28px 23px 120px; background: linear-gradient(180deg, rgba(245,241,255,.98), rgba(245,241,255,.86) 55%, rgba(245,241,255,.3)), url("../images/fantasy-realm.2a5ac5ac106f.webp") 74% bottom / auto 100%; }
    .referral-program-cta > .btn { width: 100%; }
}

@media (max-width: 380px) {
    .referral-bot-card-clan, .referral-bot-card-wa { width: 112px; }
    .referral-reward-float { padding: 11px 13px; }
}