.responsive-art{display:contents}
/* Homepage artwork fills its section; interface text stays above the image. */
@media(max-width:360px){.main-nav a{min-width:0;font-size:8px;padding:4px 1px}.main-nav a span{white-space:normal;text-align:center;line-height:1.15}}
body{background-size:cover,100% 100%,180px 230px;background-repeat:no-repeat,no-repeat,repeat;background-position:center top,center,0 0}
.hero-story,.refer-tile,.referral,.tasks,.membership{position:relative;isolation:isolate;overflow:hidden}
.hero-story .hero-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;z-index:-1}
.hero-story .hero-art img,.hero-story .section-background,.download-panel .section-background{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;border:0;border-radius:inherit}
.hero-story .section-background{z-index:-2}
.hero-story:after,.refer-tile:after,.referral:after,.tasks:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#260511aa,#26051125);z-index:-1;pointer-events:none}
.hero-story .hero-art{z-index:-2}.hero-story .section-background{z-index:-3}
.hero-copy{position:relative;z-index:1}
.refer-tile>.responsive-art>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;border-radius:inherit;object-fit:cover;object-position:center;z-index:-2}
.refer-tile{min-height:300px}
.referral .referral-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;z-index:-2}
.referral,.tasks{--art-y:20px;--art-x:18px;padding:var(--art-y) var(--art-x)}
.tasks .task-art{position:absolute;inset:var(--art-y) auto var(--art-y) var(--art-x);display:block;width:calc(31% - var(--art-x) - 10px);height:auto;max-width:none;margin:0;padding:0;border-radius:14px;overflow:hidden;z-index:-2}
.referral .referral-art img,.tasks .task-art img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.referral-intro{position:relative;min-width:0;width:100%;isolation:isolate;overflow:hidden;border-radius:14px;padding:15px 12px;min-height:300px;aspect-ratio:auto}
.referral-intro:after{content:"";position:absolute;inset:0;background:linear-gradient(#26051150,#26051185);z-index:-1;pointer-events:none}
.referral:after,.tasks:after{display:none}
.referral-content,.tasks-content{min-width:0}
.tasks{display:flex;justify-content:flex-end}.tasks-content{width:69%}
.ranking-art{object-fit:cover;opacity:1}
.membership .membership-art{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;object-fit:cover;object-position:center;z-index:-1}
@media(max-width:1100px){.referral,.tasks{--art-y:17px;--art-x:14px}}
@media(max-width:850px) and (min-width:601px){.hero-story{min-height:300px}.referral,.tasks{--art-y:16px;--art-x:12px}.tasks .task-art{width:calc(29% - var(--art-x) - 10px)}.tasks-content{width:71%}.referral-intro{min-height:260px}}
@media(max-width:600px){
 .referral,.tasks{--art-y:17px;--art-x:13px}
 .hero-story{min-height:230px}.refer-tile{display:flex;min-height:160px;text-align:left;align-items:flex-start;padding:16px}.refer-tile>.responsive-art>img{max-height:none;border-radius:inherit}
 .referral{grid-template-columns:minmax(0,1fr)}.referral-intro{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:230px;aspect-ratio:auto;padding:18px 12px}.referral-intro .referral-art{grid-area:auto}.referral-intro .reward-total{margin-top:10px}
 .tasks{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-height:0}.tasks .task-art{position:relative;inset:auto;grid-column:1;grid-row:auto;width:100%;height:auto;aspect-ratio:3/2;max-height:none;z-index:0;overflow:hidden;border-radius:14px}.tasks-content{width:100%;grid-column:1}.tasks .task-art img{position:absolute;inset:0;width:100%;height:100%;max-height:none}
 .hero-story:after,.refer-tile:after{background:#26051170}
}
/* Both promotional images fill their left column to the outside panel edge. */
.referral{padding:0;align-items:stretch}
.referral-intro{border-radius:0;min-height:340px}
.referral-content{padding:20px 18px}
.tasks .task-art{inset:0 auto 0 0;width:31%;border-radius:0}
@media(max-width:1100px){.referral-content{padding:17px 14px}}
@media(max-width:850px) and (min-width:601px){.tasks .task-art{width:29%}.referral-content{padding:16px 12px}.referral-intro{min-height:300px}}
@media(max-width:600px){
 .referral{gap:0}.referral-intro{min-height:230px}.referral-content{padding:17px 13px}
 .tasks{padding:0;gap:0}.tasks .task-art{position:relative;inset:auto;width:100%;border-radius:0}.tasks-content{padding:17px 13px}
}
