.ref-preview { padding: 12px 20px; background: #fff6c7; color: #4a3f00; text-align: center; font-size: 14px; font-weight: 650; }
.ref-hero h1 { font-size: clamp(34px, 4.6vw, 50px); max-width: 14em; }
.ref-condition { color: #fff; font-size: 18px; margin: 0 0 24px; max-width: 31em; }
.ref-hero .split { gap: 40px; }
.ref-hero .actions { gap: 18px; }
.ref-hero .btn { gap: 12px; }
.ref-text-link { color: #fff; font-size: 15px; text-underline-offset: 4px; padding: 10px 0; }
.ref-rewards { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 10px; width: 100%; max-width: 350px; justify-self: center; }
.ref-reward { width: 100%; background: #f4dc52; color: #2b3440; border: 1px solid #f4dc52; border-radius: 22px; padding: 24px; display: grid; gap: 4px; }
.ref-reward strong { font-size: 62px; line-height: 1.12; letter-spacing: -2px; }
.ref-reward .ref-who { font-size: 15px; font-weight: 750; }
.ref-reward > span:last-child { font-size: 16px; }
.ref-friend { background: #fff; border-color: #fff; }
.ref-plus { color: #f4dc52; font-size: 25px; font-weight: 700; line-height: 1; }
.ref-rewards > p { margin: 8px 0 0; font-size: 14px; color: #d7dde5; text-align: center; }
.ref-kicker { margin: 0 0 10px; color: #58616b; font-size: 14px !important; font-weight: 750; }
.ref-steps { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.ref-steps li { background: #fff; border: 1px solid #d6dce3; border-radius: 18px; padding: 22px; }
.ref-step-number { width: 34px; height: 34px; display: grid; place-items: center; background: #f4dc52; color: #2b3440; border-radius: 50%; font-weight: 800; margin-bottom: 20px; }
.ref-steps p { color: #58616b; margin: 0; font-size: 16px !important; }
.ref-value { display: grid; gap: 26px; align-items: center; }
.ref-underlined { font-weight: 700; text-underline-offset: 4px; display: inline-block; padding: 8px 0; }
.ref-faq { max-width: 800px; }
.ref-faq h2 { margin-bottom: 24px !important; }
.ref-faq details { background: #fff; border: 1px solid #d6dce3; border-radius: 14px; margin-bottom: 10px; }
.ref-faq summary { padding: 18px 20px; font-weight: 700; font-size: 17px; cursor: pointer; }
.ref-faq details p { color: #58616b; padding: 0 20px 20px; margin: 0; font-size: 16px !important; }
.ref-final-note { font-size: 15px !important; margin: 20px 0 0 !important; }
.ref-final-note a { color: #fff; text-underline-offset: 4px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid #b59a00; outline-offset: 4px; border-radius: 6px; }
.hero a:focus-visible, .final a:focus-visible { outline-color: #fff; }
html { scroll-padding-top: 82px; }
@media (min-width: 820px) { .ref-hero .split { grid-template-columns: 1.3fr .8fr; } .ref-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ref-value { grid-template-columns: 1fr 1fr; gap: 56px; } }
@media (max-width: 380px) { .ref-hero h1 { font-size: 32px; } .ref-hero .btn { width: 100%; padding: 0 16px; font-size: 17px; } .ref-preview { padding: 10px 16px; } }