.pepselect-referral{--navy:#002a53;--line:#d7e1e9;--muted:#5e6f80;--sans:'Plus Jakarta Sans',sans-serif;--mono:'IBM Plex Mono',monospace;background:#f3f8fc;border:1px solid var(--line);border-radius:20px;overflow:hidden;color:var(--navy);font:13px/1.65 var(--sans)}
.pepselect-referral *{box-sizing:border-box}.pepselect-referral h2,.pepselect-referral h3,.pepselect-referral p{font-family:var(--sans);color:inherit}
.pepselect-referral .r-banner{background:var(--navy);color:white;padding:24px 28px}.pepselect-referral .r-banner h2{font-size:12px;font-weight:700;margin:0 0 8px;color:#98dff0}.pepselect-referral .r-banner h3{font:800 32px/1.25 var(--sans);letter-spacing:-1px;margin:0;color:white}.pepselect-referral .r-banner h3 span{color:#8adeef}
.pepselect-referral .r-content{padding:24px 28px 8px;display:grid;grid-template-columns:minmax(0,600px) minmax(220px,1fr);column-gap:28px;align-items:stretch}.pepselect-referral .r-share{grid-column:1/-1}.pepselect-referral .r-share h3{font-size:20px;line-height:1.35;margin:0 0 8px;letter-spacing:-.4px}.pepselect-referral .r-share p{font-size:13px;margin:0 0 16px}
.pepselect-referral .r-code,.pepselect-referral .r-stats{background:white;border:1px solid var(--line);border-radius:6px}.pepselect-referral .r-code{padding:12px 14px}.pepselect-referral .r-code label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}.pepselect-referral .r-code>div{display:flex;align-items:center;gap:12px}.pepselect-referral .r-code input{flex:1;min-width:0;width:auto;border:0;background:white;box-shadow:none;padding:6px 0;font:500 20px/1.6 var(--mono);color:var(--navy);border-radius:0}.pepselect-referral .r-code .r-link-label{margin-top:9px}.pepselect-referral .r-code .r-link-row input{font:400 11px/1.6 var(--sans);color:var(--muted)}
.pepselect-referral button{flex:none;cursor:pointer;min-height:44px;padding:8px 12px;border:1px solid var(--navy);border-radius:6px;background:var(--navy);color:white;font:700 12px/1.5 var(--sans);white-space:nowrap}.pepselect-referral button.secondary{background:white;color:var(--navy);border-color:var(--line)}.pepselect-referral button:hover{background:#001d3a;color:white}.pepselect-referral :focus-visible{outline:3px solid #17a1cf;outline-offset:3px}
.pepselect-referral .r-stats{margin:0;padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-content:center}.pepselect-referral .r-stats>div{display:flex;flex-direction:column-reverse;align-items:center;gap:2px}.pepselect-referral .r-stats dt{font-size:11px;color:var(--muted);text-align:center;font-weight:400}.pepselect-referral .r-stats dd{font:500 22px/1.4 var(--mono);margin:0}.pepselect-referral .r-stats .r-cashback{grid-column:1/-1;flex-direction:column}.pepselect-referral .r-cashback dd{font-size:32px}.pepselect-referral .r-cashback .amount{font:inherit;color:inherit}
.pepselect-referral #copy-status{grid-column:1/-1;min-height:18px;margin:5px 0 0;font-size:11px}.pepselect-referral .r-guide{padding:0 28px 20px}.pepselect-referral .r-how{padding-bottom:20px}.pepselect-referral .r-how>h3{font-size:14px;margin:0 0 12px}.pepselect-referral .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pepselect-referral .steps>div{background:white;border:1px solid var(--line);border-radius:6px;padding:15px 16px}.pepselect-referral .stepnum{font:500 14px/1.5 var(--mono);color:#08769e;margin-bottom:6px}.pepselect-referral .steps h3{font-size:13px;margin:0 0 5px}.pepselect-referral .steps p{font-size:12px;color:var(--muted);margin:0}
.pepselect-referral .r-more{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid var(--line);padding-top:22px}.pepselect-referral .eyebrow{font-size:11px;letter-spacing:.15em;font-weight:800;text-transform:uppercase}.pepselect-referral .r-milestone h3{font-size:20px;line-height:1.4;margin:8px 0;letter-spacing:-.4px}.pepselect-referral .r-milestone p{font-size:12px;color:var(--muted);margin:0 0 16px}.pepselect-referral .rewards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pepselect-referral .reward{background:white;border:1px solid var(--line);border-radius:6px;text-align:center;padding:12px 4px}.pepselect-referral .reward:last-child{border-color:#17a1cf}.pepselect-referral .reward strong{display:block;font:500 25px/1.6 var(--mono)}.pepselect-referral .reward span{font-size:10px;color:var(--muted)}.pepselect-referral .r-faq>h3{font-size:17px;margin:0 0 6px}.pepselect-referral details{border:0;border-bottom:1px solid var(--line);padding:12px 0;font-size:12px}.pepselect-referral summary{cursor:pointer;font-weight:700}.pepselect-referral details p{font-size:12px;color:var(--muted);margin:12px 0 0}.pepselect-referral .r-details{border:0;padding:0 28px 20px}.pepselect-referral .r-details summary{font-size:11px;color:var(--muted);font-weight:400}
@media(max-width:800px){.pepselect-referral .r-content{grid-template-columns:minmax(0,1fr) 220px;column-gap:16px}.pepselect-referral .r-code .r-link-row{flex-wrap:wrap}.pepselect-referral .r-code .r-link-row input{flex-basis:100%}}
@media(max-width:600px){.pepselect-referral .r-banner{padding:20px}.pepselect-referral .r-banner h3{font-size:28px}.pepselect-referral .r-banner h3 span{display:block}.pepselect-referral .r-content{display:block;padding:20px 20px 8px}.pepselect-referral .r-share h3{font-size:19px}.pepselect-referral .r-share p{font-size:12px}.pepselect-referral .r-code{padding:12px}.pepselect-referral .r-code>div{gap:8px}.pepselect-referral .r-code input{font-size:18px}.pepselect-referral button{font-size:11px;padding:8px 10px}.pepselect-referral .r-stats{margin:10px 0 0}.pepselect-referral .r-guide{padding:0 20px 18px}.pepselect-referral .steps{grid-template-columns:1fr;gap:10px}.pepselect-referral .steps>div{padding:13px 14px 13px 45px;position:relative}.pepselect-referral .stepnum{position:absolute;top:15px;left:13px}.pepselect-referral .r-more{grid-template-columns:1fr;gap:22px}.pepselect-referral .reward strong{font-size:21px}.pepselect-referral .reward span{font-size:9px}.pepselect-referral .r-details{padding:0 20px 18px}}
