/* Refer & Earn, scoped to the affiliate page. */
.afr { --afr-ink:#203e4b; --afr-body:#47616c; --afr-teal:#287d77; --afr-card:#f8fbfa; --afr-line:rgba(32,62,75,.16); --afr-soft:rgba(255,255,255,.35); background:#e3ecec; color:var(--afr-ink); font-family:'CP-Nums','DM Sans',sans-serif; overflow:clip; }
.dark-mode .afr { --afr-ink:#edf6f2; --afr-body:#b4c6c7; --afr-teal:#91d4c5; --afr-card:#183138; --afr-line:rgba(204,231,221,.18); --afr-soft:rgba(17,43,47,.7); background:#112a30; }
.afr *,.afr *::before,.afr *::after { box-sizing:border-box; }
.afr [hidden] { display:none!important; }
.afr h1,.afr h2,.afr h3 { font-family:'CP-Nums','Cal Sans','Noto Sans Arabic','Noto Sans SC',sans-serif; font-weight:600; color:var(--afr-ink); letter-spacing:-.035em; }
.afr p { color:var(--afr-body); line-height:1.75; margin:0 0 18px; }
.afr a { text-decoration:none; }
.afr strong { color:var(--afr-ink); }
.afr [id] { scroll-margin-top:100px; }
.afr a:focus-visible,.afr button:focus-visible,.afr summary:focus-visible,.afr [tabindex]:focus-visible { outline:3px solid var(--afr-teal); outline-offset:5px; }
.afr-wrap,.afr .af-in { max-width:1216px; margin:0 auto; padding:0 32px; }
.afr-section,.afr .af-sec { padding:96px 0; }
.afr-eyebrow,.afr .af-eyebrow { display:block; color:var(--afr-teal); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; line-height:1.7; margin-bottom:20px; }
.afr-actions,.afr .af-cta { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.afr-btn,.afr .af-btn { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; border-radius:6px; padding:17px 24px; font-size:14px; line-height:1.5; font-weight:700; transition:transform .2s,background .2s; }
.afr-btn:hover,.afr .af-btn:hover { transform:translateY(-3px); }
.afr-btn-primary,.afr .af-btn--p { background:#264653; color:#f4faf7; }
.afr-btn-primary:hover,.afr .af-btn--p:hover { background:#287d77; color:#fff; }
.dark-mode .afr-btn-primary,.dark-mode .afr .af-btn--p { background:#a9e3cd; color:#163c3a; }
.afr-btn-secondary { border:1px solid var(--afr-line); background:var(--afr-soft); color:var(--afr-ink); }
.afr-text-link { color:var(--afr-teal); font-size:13px; font-weight:700; border-bottom:1px solid transparent; padding-bottom:3px; }
.afr-text-link:hover { color:var(--afr-teal); border-color:currentColor; }
.afr-skip { position:fixed; top:8px; inset-inline-start:8px; transform:translateY(-150%); z-index:99999; background:#fff; color:#264653; padding:12px 20px; }
.afr-skip:focus { transform:none; }
.afr-hero { padding:30px 0 38px; }
.afr-edition { display:flex; justify-content:space-between; align-items:center; gap:15px; border-bottom:1px solid var(--afr-line); padding-bottom:18px; font-size:10px; font-weight:700; letter-spacing:.13em; line-height:1.6; }
.afr-edition a { color:var(--afr-ink); }
.afr-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:75px; padding:64px 0 60px; }
.afr-hero h1 { font-size:clamp(56px,6vw,86px); line-height:1.02; margin:0 0 27px; }
.afr-hero h1>span { color:var(--afr-teal); }
.afr .afr-lead { font-size:16px; max-width:465px; margin-bottom:30px; }
.afr .afr-hero-note { font-size:11px; max-width:460px; margin:21px 0 0; }
.afr-hero-note a { color:var(--afr-teal); text-decoration:underline; }
.afr-ledger-summary { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--afr-line); border-bottom:1px solid var(--afr-line); padding:25px 0; }
.afr-ledger-summary>div { border-inline-end:1px solid var(--afr-line); padding:0 28px; }
.afr-ledger-summary>div:first-child { padding-inline-start:0; }
.afr-ledger-summary>div:last-child { border:0; }
.afr-ledger-summary span { display:block; font-size:8px; letter-spacing:.1em; color:var(--afr-teal); font-weight:700; line-height:1.6; }
.afr-ledger-summary b { display:block; font-size:30px; margin:8px 0 5px; line-height:1.2; font-variant-numeric:tabular-nums; }
.afr-ledger-summary small { color:var(--afr-body); font-size:10px; line-height:1.6; display:block; }
.afr .afr-source-note { font-size:10px; margin:15px 0 0; }
.afr-section-nav { background:#264653; color:#c4dbd3; }
.afr-section-nav>.afr-wrap { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-top:17px; padding-bottom:17px; font-size:9px; font-weight:700; letter-spacing:.08em; line-height:1.7; }
.afr-section-nav a { color:inherit; }
.afr-section-nav span,.afr-section-nav a:hover { color:#e9c46a; }
.afr-heading { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:end; margin-bottom:42px; }
.afr h2 { font-size:clamp(34px,4vw,52px); line-height:1.08; margin:0; }
.afr-heading h2 em { font-style:normal; color:#e9c46a; }
.afr-heading>p { font-size:14px; max-width:450px; margin:0; }
.afr-soft { background:var(--afr-soft); }
.afr-ink { background:#203e4b; --afr-ink:#edf6f2; --afr-body:#b6cdd0; --afr-teal:#a9e3cd; --afr-line:rgba(255,255,255,.16); --afr-card:#284852; color:var(--afr-ink); }
.afr-reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.afr-reward-grid article { display:flex; flex-direction:column; border:1px solid var(--afr-line); border-radius:8px; background:var(--afr-card); padding:28px; }
.afr-card-index { display:block; font-size:8px; line-height:1.7; letter-spacing:.1em; font-weight:700; color:var(--afr-teal); }
.afr-reward-grid article>strong { font-size:70px; font-family:'CP-Nums','Cal Sans',sans-serif; color:var(--afr-teal); line-height:1.2; margin:27px 0 20px; }
.afr-reward-grid article>strong>span { font-size:42px; }
.afr h3 { font-size:25px; line-height:1.15; margin:0 0 15px; }
.afr-reward-grid p { font-size:13px; margin-bottom:24px; }
.afr-card-foot { display:block; border-top:1px solid var(--afr-line); padding-top:16px; margin-top:auto; font-size:8px; line-height:1.7; letter-spacing:.06em; color:var(--afr-body); }
.afr-reward-grid .afr-reward-gold { background:#e9c46a; --afr-ink:#203e4b; --afr-body:#344f52; --afr-teal:#203e4b; --afr-line:rgba(32,62,75,.22); }
.afr-credit-note { display:flex; align-items:center; gap:24px; border-top:1px solid var(--afr-line); padding-top:28px; margin-top:32px; }
.afr-credit-note>span { font-size:35px; color:var(--afr-teal); }
.afr-credit-note h3 { font-size:20px; margin-bottom:10px; }
.afr-credit-note p { font-size:12px; margin:0; max-width:690px; }
.afr-credit-note>a { margin-inline-start:auto; white-space:nowrap; }
/* Without Swiper, every card remains reachable through native scrolling. */
.afr-slider { overflow:hidden; }
.afr-slider:not(.afr-slider-ready) { overflow-x:auto; }
.afr-slider .swiper-wrapper { display:flex; gap:20px; }
.afr-slider .swiper-slide { width:calc((100% - 40px)/3); flex-shrink:0; height:auto; }
.afr-slider-ready .swiper-wrapper { gap:0; }
.afr-step,.afr-story { display:flex; flex-direction:column; border:1px solid var(--afr-line); border-radius:8px; background:var(--afr-card); padding:28px; }
.afr-step-symbol { font-size:58px; color:var(--afr-teal); line-height:1.1; margin:30px 0; }
.afr-step p,.afr-story p { font-size:13px; }
.afr-step code { padding:12px; border:1px solid var(--afr-line); border-radius:4px; color:var(--afr-teal); font-size:12px; margin:8px 0 24px; overflow-wrap:anywhere; direction:ltr; }
.afr-step-token { color:var(--afr-teal); font-size:9px; font-weight:700; letter-spacing:.05em; line-height:1.6; margin:12px 0 26px; }
.afr-slider-controls { display:none; justify-content:space-between; align-items:center; gap:20px; padding-top:24px; }
.afr-slider-ready .afr-slider-controls { display:flex; }
.afr-slider-controls>div:last-child { display:flex; gap:8px; }
.afr-slider-controls button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--afr-line); border-radius:50%; background:transparent; color:var(--afr-ink); font-size:20px; cursor:pointer; }
.afr-slider-controls button:hover { background:var(--afr-soft); }
.afr-slider-controls button:disabled { opacity:.35; cursor:default; }
.afr-pagination { width:auto!important; display:flex; gap:5px; padding:8px 0; }
.afr-pagination .swiper-pagination-bullet { background:var(--afr-teal); }
.afr-slider-controls .swiper-pagination-lock,.afr-slider-controls .swiper-button-lock { display:none; }
.afr-window-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:50px; }
.afr-window-card { border:1px solid var(--afr-line); border-radius:8px; padding:26px; background:var(--afr-card); }
.afr-panel-head { display:flex; justify-content:space-between; gap:15px; font-size:8px; letter-spacing:.08em; line-height:1.7; color:var(--afr-body); }
.afr-window-intro { display:flex; align-items:center; gap:24px; margin:30px 0; }
.afr-window-intro>b { font-size:64px; color:var(--afr-teal); line-height:1; }
.afr-window-intro>span { font-size:9px; line-height:1.8; letter-spacing:.08em; }
.afr-months { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; list-style:none; margin:0; padding:0; }
.afr-months li { border:1px solid rgba(169,227,205,.4); border-radius:4px; background:#305751; text-align:center; padding:16px 0; }
.afr-months span { display:block; font-size:25px; color:#a9e3cd; line-height:1.1; }
.afr-months b { font-size:7px; letter-spacing:.06em; }
.afr-window-end { display:flex; justify-content:space-between; gap:15px; margin:14px 0 24px; font-size:8px; line-height:1.7; color:var(--afr-body); }
.afr-window-end>b { color:#e9c46a; }
.afr-window-card p { font-size:12px; margin:0; }
.afr-milestones { align-self:center; }
.afr-milestones>div { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--afr-line); padding:18px 0; }
.afr-milestones>div>span { font-size:28px; line-height:1.2; }
.afr-milestones small { display:block; font-size:8px; letter-spacing:.09em; color:var(--afr-body); margin-top:7px; }
.afr-milestones strong { color:#e9c46a; font-size:35px; white-space:nowrap; }
.afr-milestones p { font-size:12px; margin:25px 0 0; }
.afr-story-visual { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; min-height:160px; background:var(--afr-soft); border:1px solid var(--afr-line); border-radius:5px; padding:20px; margin:25px 0; text-align:center; }
.afr-story-visual>span { color:var(--afr-teal); font-size:9px; letter-spacing:.08em; font-weight:700; }
.afr-story-visual>i { color:var(--afr-teal); font-size:25px; font-style:normal; }
.afr-story-visual>b { font-size:11px; line-height:1.8; }
.afr-story>a { margin-top:auto; align-self:flex-start; }
.afr .afr-responsible-note { font-size:11px; border-top:1px solid var(--afr-line); margin:30px 0 0; padding-top:22px; }
.afr-ledger-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
.afr .af-fig { margin:0; border:1px solid var(--afr-line); border-radius:8px; background:var(--afr-card); overflow:hidden; }
.afr .af-fig__hd { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:17px 22px; border-bottom:1px solid var(--afr-line); font-size:8px; letter-spacing:.08em; line-height:1.8; color:var(--afr-body); }
.afr .af-fig__hd b { color:var(--afr-ink); }
.afr .af-fig__bd { padding:22px; overflow-x:auto; }
.afr .af-fig figcaption { padding:16px 22px; border-top:1px solid var(--afr-line); font-size:10px; line-height:1.75; color:var(--afr-body); }
.afr .af-empty { min-height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.afr .af-empty>span { font-size:36px; color:var(--afr-teal); margin-bottom:20px; }
.afr .af-empty h3 { font-size:22px; }
.afr .af-empty p { font-size:12px; max-width:290px; margin:0; }
.afr .af-chart svg { display:block; width:100%; height:auto; min-width:560px; }
.afr .af-chart__axis { stroke:var(--afr-line); stroke-width:1; }
.afr .af-chart__bar { fill:var(--afr-teal); }
.afr .af-chart__val { fill:var(--afr-ink); font:11px 'CP-Nums','DM Sans',sans-serif; }
.afr .af-chart__lab { fill:var(--afr-body); font:11px 'DM Sans',sans-serif; }
.afr .af-board { width:100%; border-collapse:collapse; font-size:12px; }
.afr .af-board th { font-size:9px; color:var(--afr-body); font-weight:700; }
.afr .af-board th,.afr .af-board td { padding:13px 8px; text-align:start; border-bottom:1px solid var(--afr-line); overflow-wrap:anywhere; }
.afr .af-board th:last-child,.afr .af-board__amt { text-align:end; white-space:nowrap; color:var(--afr-teal); }
.afr .af-board__rank { color:var(--afr-body); width:35px; }
.afr-campaign { border-bottom:1px solid var(--afr-line); }
.afr-campaign-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.afr .af-h2 { margin:0 0 25px; }
.afr .af-p { font-size:14px; }
.afr .af-cta { margin-top:28px; }
.afr-campaign-card { margin:0; border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:28px; background:#203e4b; color:#edf6f2; }
.afr-campaign-card>div:first-child { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:.1em; color:#a9e3cd; }
.afr-campaign-card>div>b { font-size:28px; color:#e9c46a; }
.afr .afr-campaign-card h3 { color:#edf6f2; font-size:38px; margin:30px 0 20px; }
.afr-campaign-card>strong { color:#e9c46a; font-size:60px; line-height:1.2; }
.afr-campaign-card>strong>small { font-size:20px; }
.afr .afr-campaign-card>p { font-size:12px; letter-spacing:.12em; color:#b6cdd0; margin:8px 0 28px; }
.afr-campaign-versus { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); padding:17px 0; font-size:10px; letter-spacing:.05em; }
.afr-campaign-card figcaption { color:#b6cdd0; font-size:12px; line-height:1.75; margin-top:20px; }
.afr .af-det { list-style:none; padding:0; margin:0; }
.afr .af-det li { display:grid; grid-template-columns:220px 1fr; gap:32px; border-top:1px solid var(--afr-line); padding:20px 0; font-size:13px; line-height:1.75; }
.afr .af-det li:last-child { border-bottom:1px solid var(--afr-line); }
.afr .af-det li>b { color:var(--afr-ink); }
.afr .af-det li>span { color:var(--afr-body); }
.afr-faq-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:75px; align-items:start; margin-top:80px; }
.afr-faq-layout h3 { font-size:38px; }
.afr-faq-layout>div>p { font-size:14px; }
.afr-faq details { border-top:1px solid var(--afr-line); }
.afr-faq details:last-child { border-bottom:1px solid var(--afr-line); }
.afr-faq summary { display:flex; align-items:center; justify-content:space-between; gap:24px; cursor:pointer; list-style:none; padding:21px 0; font-size:14px; line-height:1.6; color:var(--afr-ink); font-weight:700; }
.afr-faq summary::-webkit-details-marker { display:none; }
.afr-faq summary>span { font-size:20px; color:var(--afr-teal); transition:transform .2s; }
.afr-faq details[open] summary>span { transform:rotate(45deg); }
.afr-faq p { font-size:12px; padding-inline-end:30px; margin-bottom:23px; }
.afr-related { display:flex; flex-wrap:wrap; gap:25px; margin-top:45px; border-top:1px solid var(--afr-line); padding-top:25px; }
.afr-related a { color:var(--afr-teal); font-size:12px; font-weight:700; }
.afr-related a:hover { text-decoration:underline; }
.afr-finale { border-top:1px solid var(--afr-line); padding:82px 0 88px; background:radial-gradient(ellipse at 50% 100%,rgba(169,227,205,.3),transparent 65%); text-align:center; }
.afr-finale h2 { font-size:clamp(48px,6vw,76px); line-height:1.03; margin:0 0 25px; }
.afr-finale h2 em { color:var(--afr-teal); font-style:normal; }
.afr-finale p { font-size:15px; max-width:510px; margin:0 auto 30px; }
.afr-finale .afr-actions { justify-content:center; }
.afr .afr-finale-note { font-size:11px; color:var(--afr-teal); margin:25px auto 0; }
/* Reveals only hide content after the observer has been installed. */
.afr-motion [data-af-reveal] { transition:opacity .6s,transform .6s; }
.afr-motion [data-af-reveal]:not(.afr-visible) { opacity:0; transform:translateY(18px); }
[dir="rtl"] .afr { font-family:'CP-Nums','Noto Sans Arabic','DM Sans',sans-serif; }
[lang="zh"] .afr { font-family:'CP-Nums','Noto Sans SC','DM Sans',sans-serif; }
.afr-ledger-summary b,.afr-reward-grid article>strong,.afr-window-intro>b,.afr-months span,.afr-milestones>div>span,.afr-milestones strong,.afr-campaign-card>strong,.afr .af-board__amt,.afr .af-chart svg { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .afr-slider-controls>div:last-child { flex-direction:row-reverse; }
@media (max-width:1100px) { .afr-hero-grid,.afr-heading,.afr-campaign-grid { gap:40px; } .afr-window-grid { gap:30px; } .afr-reward-grid article,.afr-step,.afr-story { padding:24px; } .afr-hero h1 { font-size:65px; } .afr-hero .afr-actions { gap:18px; } }
@media (max-width:991px) { .afr-wrap,.afr .af-in { padding:0 26px; } .afr-section,.afr .af-sec { padding:78px 0; } .afr-hero-grid { grid-template-columns:1fr; gap:45px; padding:50px 0; } .afr-hero h1 { font-size:78px; } .afr .afr-lead { max-width:550px; } .afr-reward-grid { gap:14px; } .afr-reward-grid article { padding:22px; } .afr-reward-grid h3 { font-size:22px; } .afr-slider .swiper-slide { width:calc((100% - 20px)/2); } .afr-credit-note { flex-wrap:wrap; } .afr-credit-note>div { flex:1; } .afr-credit-note>a { margin-inline-start:58px; } .afr-ledger-grid,.afr-campaign-grid { grid-template-columns:1fr; } .afr-campaign-card { width:100%; max-width:560px; margin:auto; } .afr-faq-layout { gap:40px; } }
@media (max-width:767px) { .afr-wrap,.afr .af-in { padding:0 20px; } .afr-hero { padding:22px 0 30px; } .afr-edition { font-size:8px; letter-spacing:.07em; gap:10px; } .afr-hero-grid { padding:40px 0 48px; } .afr-hero h1 { font-size:clamp(50px,12vw,76px); } .afr .afr-lead { font-size:15px; } .afr-eyebrow,.afr .af-eyebrow { font-size:9px; margin-bottom:16px; } .afr-hero .afr-actions { flex-direction:column; align-items:flex-start; } .afr-ledger-summary { grid-template-columns:1fr; padding:0; } .afr-ledger-summary>div { padding:18px 0; border-inline-end:0; border-bottom:1px solid var(--afr-line); } .afr-ledger-summary>div:last-child { border-bottom:0; } .afr-section-nav>.afr-wrap { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; font-size:8px; } .afr-section-nav span { display:none; } .afr-section,.afr .af-sec { padding:62px 0; } .afr-heading { grid-template-columns:1fr; gap:22px; margin-bottom:32px; } .afr h2 { font-size:38px; } .afr-heading>p { font-size:13px; } .afr-reward-grid,.afr-window-grid { grid-template-columns:1fr; gap:20px; } .afr-reward-grid article { padding:27px; } .afr-reward-grid h3 { font-size:27px; } .afr-reward-grid article>strong { margin:18px 0; } .afr-credit-note { gap:15px; } .afr-credit-note>a { margin-inline-start:50px; white-space:normal; } .afr-slider .swiper-slide { width:86%; } .afr-step,.afr-story { padding:24px; } .afr-step h3,.afr-story h3 { font-size:25px; } .afr-window-card { padding:22px 18px; } .afr-panel-head { font-size:7px; } .afr-months { gap:5px; } .afr-months li { padding:13px 0; } .afr-months span { font-size:22px; } .afr-months b { font-size:6px; } .afr-window-end { font-size:7px; } .afr-milestones { margin-top:15px; } .afr .af-fig__hd { padding:15px 16px; font-size:7px; align-items:flex-start; } .afr .af-fig__bd { padding:18px 16px; } .afr .af-fig figcaption { padding:16px; } .afr .af-empty h3 { font-size:23px; } .afr-campaign-card { padding:25px; } .afr .afr-campaign-card h3 { font-size:34px; } .afr-campaign-card>strong { font-size:48px; } .afr-campaign-card>strong>small { font-size:16px; } .afr .af-det li { grid-template-columns:1fr; gap:7px; padding:18px 0; } .afr-faq-layout { grid-template-columns:1fr; gap:30px; margin-top:60px; } .afr-faq-layout h3 { font-size:34px; } .afr-related { gap:18px 24px; } .afr-finale { padding:62px 0 68px; } .afr-finale h2 { font-size:clamp(40px,10vw,52px); } .afr-finale .afr-actions { flex-direction:column; gap:15px; } .afr-finale .afr-btn { width:100%; max-width:330px; } }
@media (max-width:359px) { .affiliate-page .header__area-menubar-left-logo { padding-inline-end:8px!important; gap:6px; } .affiliate-page .header__area-menubar-left-logo img { max-width:80px; } .afr-edition { flex-direction:column; align-items:flex-start; gap:6px; } .afr-window-intro { gap:16px; } .afr-window-intro>b { font-size:54px; } .afr-campaign-card>strong { font-size:42px; } .afr-campaign-versus { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { .afr *,.afr *::before,.afr *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .afr-motion [data-af-reveal]:not(.afr-visible) { opacity:1; transform:none; } }

/* Hero phone: same frame and size as /spot's .sp-phone */
.afr-phone { margin:0 auto; width:min(100%,340px); padding:6px; border-radius:36px; background:#111515; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 1px 2px rgba(0,0,0,.1),0 36px 70px -12px rgba(38,70,83,.45); }
.afr-phone img { display:block; width:100%; height:auto; border-radius:30px; }
@media (max-width:991px) { .afr-phone { width:min(100%,300px); } }