/* banners */
.announce{position:relative;z-index:40;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 52px 10px 16px;color:#fff;
  background:linear-gradient(100deg,#08493b 0%,#0b6b55 45%,#12856a 100%);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 20px -8px rgba(8,73,59,.55);
  font:600 .92rem/1.4 var(--bd);text-align:left;overflow:hidden;animation:annIn .45s cubic-bezier(.2,.8,.2,1) both}
.announce::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-100%);animation:annShine 5s ease-in-out 1s infinite}
.announce:empty,.announce[hidden]{display:none}
.announce .ann-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f4b730;color:#15191c;box-shadow:0 0 0 4px rgba(244,183,48,.22)}
.announce .ann-ico svg{width:15px;height:15px}
.announce .ann-t{max-width:900px;overflow-wrap:anywhere}
.announce .ann-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font:400 1.2rem/1 var(--bd);display:grid;place-items:center;transition:background .15s}
.announce .ann-x:hover,.announce .ann-x:focus-visible{background:rgba(255,255,255,.28);outline:0}
body:is([data-p="login"],[data-p="signup"]) .announce{position:fixed;top:0;left:0;right:0}
@keyframes annIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes annShine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(max-width:560px){.announce{font-size:.85rem;padding:9px 46px 9px 12px;gap:9px}.announce .ann-ico{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.announce,.announce::before{animation:none}}
.ticker{background:var(--saffron);color:var(--ink);overflow:hidden;white-space:nowrap;font:700 .95rem var(--bd);padding:11px 0;border-bottom:var(--bw) solid var(--ink)}
.ticker div{display:inline-block;padding-left:100%;animation:tick 38s linear infinite}
.ticker span{margin:0 30px;display:inline-flex;align-items:center;gap:10px}
.ticker span svg{width:17px;height:17px}
@keyframes tick{to{transform:translateX(-100%)}}

/* hero */
.hero{padding:72px 0 96px;background:var(--field)}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero .lead{margin:26px 0 34px;font-size:1.22rem;color:var(--mute);max-width:44ch}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:32px;color:var(--ink);font-weight:600;font-size:.93rem}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{color:var(--pine)}
.slipwrap{position:relative;padding:34px 8px 40px 0}
.stamp{position:absolute;z-index:3;right:-6px;top:-8px;width:104px;height:104px;border-radius:50%;background:var(--saffron);border:var(--bw) solid var(--ink);box-shadow:var(--sh-s);display:grid;place-items:center;transform:rotate(8deg);animation:wobble 5s ease-in-out infinite}
.stamp::after{content:"";position:absolute;inset:8px;border-radius:50%;border:2px dashed var(--ink)}
.stamp img{width:62px;height:62px;object-fit:contain;mix-blend-mode:multiply;position:relative;z-index:1}
@keyframes wobble{50%{transform:rotate(-6deg)}}
.chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);border-radius:14px;padding:9px 14px 9px 9px;font-weight:700;font-size:.88rem;border:var(--bw) solid var(--ink);box-shadow:var(--sh-s)}
.chip .ci{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mint);border:var(--bw) solid var(--ink)}
.chip small{display:block;color:var(--mute);font-weight:600;font-size:.75rem}
.chip.c1{left:-24px;bottom:-4px}.chip.c2{right:-10px;bottom:-4px}.chip.c2 .ci{background:var(--butter)}
@media(max-width:560px){.chip.c1{display:none}.chip.c2{right:0}.stamp{width:84px;height:84px;right:4px}.stamp img{width:50px;height:50px}}
@media(prefers-reduced-motion:no-preference){.hero .wrap>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}.hero .wrap>*:nth-child(2){animation-delay:.12s}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

/* sections: each band is one flat colour with a charcoal rule above it */
.band{padding:92px 0;border-top:var(--bw) solid var(--ink)}
.band.white{background:var(--paper)}
.band.dark{background:var(--ink);color:#fff}
.band.pine{background:var(--pine);color:#fff}
.band .head{max-width:46rem;margin-bottom:44px}
.band .head p{color:var(--mute);margin-top:12px;font-size:1.08rem;max-width:48ch}
.band.dark .head p,.band.pine .head p{color:rgba(255,255,255,.78)}
@media(max-width:860px){.hero{padding:44px 0 64px}.hero .wrap{grid-template-columns:minmax(0,1fr);gap:48px}.band{padding:60px 0}}

/* feature cards */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fcard,.stat-card{position:relative;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:26px}
.fcard{transition:transform .12s,box-shadow .12s}
.fcard:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}
.band.white .fcard{background:var(--field)}
.fcard .ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--ink);margin-bottom:18px;background:var(--mint);border:var(--bw) solid var(--ink)}
.fcard .ico svg{width:25px;height:25px}
.fcard:nth-child(3n+2) .ico{background:var(--butter)}
.fcard:nth-child(3n) .ico{background:var(--paper)}
.fcard h3{font-size:1.15rem;margin-bottom:8px}.fcard p{color:var(--mute);font-size:.96rem}

/* bento: the two ways to earn */
.bento{display:grid;gap:22px;grid-template-columns:repeat(6,1fr)}
.band .bento .big{grid-column:span 3;min-height:310px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--pine);color:#fff;box-shadow:var(--sh)}
.band .bento .big.alt{background:var(--saffron);color:var(--ink)}
.bento .big:hover{transform:none;box-shadow:var(--sh)}
.bento .big .ico{position:absolute;top:26px;left:26px;margin:0;background:var(--paper)}
.bento .big p{color:rgba(255,255,255,.82);max-width:40ch}
.bento .big.alt p{color:rgba(21,25,28,.8)}
.bento .big h3{font-size:1.7rem;margin-bottom:10px}
.bento .big ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;font-weight:600;font-size:.95rem}
.bento .big li{display:flex;align-items:center;gap:9px}.bento .big li svg{width:17px;height:17px}
@media(max-width:760px){.band .bento .big{grid-column:span 6}}

/* steps: a real sequence, so numbering is meaningful */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(3,1fr);counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:32px 26px 26px;border-radius:var(--r);background:var(--field);border:var(--bw) solid var(--ink)}
.steps li::before{content:counter(s);position:absolute;top:-20px;left:24px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--saffron);border:var(--bw) solid var(--ink);font:800 1.1rem var(--hd)}
.steps .si{width:46px;height:46px;border-radius:12px;background:var(--paper);border:var(--bw) solid var(--ink);display:grid;place-items:center;color:var(--pine);margin-bottom:14px}
.steps .si svg{width:23px;height:23px}
.steps h3{margin-bottom:6px}.steps p{color:var(--mute);max-width:34ch}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:34px}}

/* invite band */
.invite{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.invite p{color:rgba(255,255,255,.82);margin-top:16px;max-width:44ch}
.invite .btn{margin-top:28px}
.pair{display:grid;gap:18px}
.pair div{border-radius:var(--r);padding:22px 24px;background:var(--paper);color:var(--ink);border:var(--bw) solid var(--ink);box-shadow:var(--sh)}
.pair div+div{background:var(--butter)}
.pair small{display:block;color:var(--mute);font-weight:600}
.pair b{display:block;font:800 2.5rem/1.1 var(--hd);letter-spacing:-.03em;margin-top:2px}
.pair span{color:var(--pine-d);font-weight:700}
@media(max-width:860px){.invite{grid-template-columns:1fr;gap:36px}}

/* earnings calculator */
.calc{display:grid;grid-template-columns:1.1fr .9fr;border-radius:22px;overflow:hidden;border:var(--bw) solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}
.calc .in{padding:38px}
.calc .out{padding:38px;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center}
.calc .out small{color:#a9b4ae;font-weight:600}
.calc .out b{font:800 clamp(2.6rem,6vw,3.8rem)/1 var(--hd);letter-spacing:-.04em;display:block;margin:6px 0}
.calc .out .lc{color:var(--saffron);font-weight:700;min-height:1.5em}
.calc .out .note{margin-top:18px;font-size:.83rem;color:#a9b4ae}
.calc .big-n{font:800 3.4rem/1 var(--hd);letter-spacing:-.04em;margin:4px 0 18px}
.calc input[type=range]{padding:0;border:0;height:34px;background:transparent;accent-color:var(--pine);box-shadow:none}
.calc .scale{display:flex;justify-content:space-between;color:var(--mute);font-size:.85rem;font-weight:600;margin-top:2px}
.calc .row2{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.calc .row2 button{background:var(--paper);color:var(--ink);padding:8px 16px;font-size:.9rem}
.calc .row2 button.on{background:var(--saffron)}
@media(max-width:860px){.calc{grid-template-columns:1fr}.calc .in,.calc .out{padding:28px}}

/* currency cards */
.rates{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.rate{background:var(--field);border:var(--bw) solid var(--ink);border-radius:14px;padding:18px 20px;transition:transform .12s,box-shadow .12s}
.rate:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-s)}
.rate small{display:flex;align-items:center;gap:7px;color:var(--mute);font-weight:600}
.rate small svg{width:16px;height:16px;color:var(--pine)}
.rate b{display:block;font:800 1.45rem var(--hd);margin-top:6px}
.rate span{color:var(--mute);font-size:.85rem}

/* security row */
.trust{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.trust>div{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--r);border:2px solid #59645f;background:#1d2326}
.trust .ti{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--ink)}
.trust .ti svg{width:22px;height:22px}
.trust h3{margin-bottom:4px;font-size:1.05rem}.trust p{color:#b4beb8;font-size:.93rem}

/* faq */
.faq{max-width:820px}
.faq details{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:14px;padding:0 22px;margin-bottom:12px}
.faq details[open]{box-shadow:var(--sh-s)}
.faq summary{font:700 1.04rem var(--hd);cursor:pointer;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{transition:transform .2s;color:var(--pine)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq p{color:var(--mute);padding:0 0 20px;max-width:62ch}

/* closing cta */
.final{border-radius:24px;padding:60px 44px;background:var(--saffron);color:var(--ink);border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.final h2{max-width:18ch}.final p{margin:14px 0 28px;max-width:44ch;font-size:1.1rem}
.final .btn.coin{background:var(--ink);color:#fff}
@media(max-width:600px){.final{padding:40px 26px}}

/* footer */
footer{background:var(--ink);color:#b4beb8;padding:60px 0 28px;font-size:.93rem;border-top:var(--bw) solid var(--ink)}
footer .logo{color:#fff}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.fgrid p{margin-top:14px;max-width:34ch}
.fgrid h4{margin:0 0 14px;color:#fff;font:700 1rem var(--hd)}
.fgrid a{display:block;color:#b4beb8;text-decoration:none;margin:0 0 9px}
.fgrid a:hover{color:var(--saffron)}
.fbase{margin-top:44px;padding-top:22px;border-top:2px solid #2f373b;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}
footer .wrap{display:block}

/* dashboard */
.promo{background:var(--pine);color:#fff;border-radius:var(--r);padding:26px 28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:0 0 22px;border:var(--bw) solid var(--ink);box-shadow:var(--sh)}
.promo h3{font:800 1.35rem var(--hd)}.promo p{opacity:.9;margin-top:4px}
.promo .btn{background:var(--saffron);color:var(--ink)}
.stat-card .si{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--ink);margin-bottom:14px;border:var(--bw) solid var(--ink)}
.stat-card .si svg{width:20px;height:20px}
.stat-card small{display:block;color:var(--mute);font:600 .85rem var(--bd)}
.stat-card b{display:block;font:800 2rem var(--hd);margin-top:4px;letter-spacing:-.03em}
.stat-card.dark{background:var(--ink);color:#fff}
.stat-card.dark small{color:#a9b4ae}.stat-card.dark .si{background:var(--mint)}
.stat-card.gold{background:var(--saffron)}
.stat-card.gold small{color:#4a3a0a}.stat-card.gold .si{background:var(--paper)}
.tips{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:18px}
.tip{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;background:var(--paper);border:var(--bw) solid var(--ink)}
.tip .ti{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--butter);color:var(--ink);border:var(--bw) solid var(--ink)}
.tip .ti svg{width:19px;height:19px}
.tip h3{font-size:1rem;margin-bottom:2px}.tip p{color:var(--mute);font-size:.9rem}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.share a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--rc);border:var(--bw) solid var(--ink);color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;background:var(--paper)}
.share a:hover{background:var(--mint)}

/* activity list on the dashboard */
.acts{list-style:none;margin:0;padding:0}
.acts li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:2px dashed var(--line)}
.acts li:last-child{border-bottom:0}
.acts .ai{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--mint);border:var(--bw) solid var(--ink)}
.acts .ai.out{background:var(--bad-l)}
.acts .am{flex:1;min-width:0}.acts .am b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acts .am small{color:var(--mute)}
.acts .amt{font:800 1.05rem var(--hd);white-space:nowrap}.acts .amt.neg{color:var(--bad)}

/* tabs (dashboard) */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tabs button{background:var(--paper);color:var(--ink);padding:9px 16px;font-size:.95rem;box-shadow:none}
.tabs button:hover{background:var(--mint-l);box-shadow:none;transform:none}
.tabs button.on{background:var(--ink);color:#fff}
.tabs .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;margin-left:8px;border-radius:99px;font:700 .75rem var(--bd);background:var(--saffron);color:var(--ink)}
#wtabs button{display:inline-flex;align-items:center;gap:8px}
.wpane{display:none}.wpane.on{display:block}
.tdesc{color:var(--mute);max-width:70ch}

/* video player + playlist */
.vwrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:22px;align-items:start}
@media(max-width:900px){.vwrap{grid-template-columns:1fr}}
.vmain{padding:20px}
.vprog{display:grid;gap:8px;margin-bottom:16px;font-weight:600;color:var(--mute)}
.vprog b{color:var(--ink);font:800 1.25rem var(--hd)}
.bar{height:12px;border-radius:99px;background:var(--paper);overflow:hidden;border:var(--bw) solid var(--ink)}
.bar i{display:block;height:100%;background:var(--pine);transition:width .5s}
.player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:var(--bw) solid var(--ink)}
.player iframe,.player #ytmount{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster{position:absolute;inset:0;width:100%;height:100%;border-radius:0;padding:0;border:0;background:#111 center/cover no-repeat;box-shadow:none;display:grid;place-items:center}
.poster::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.poster:hover,.poster:active{transform:none;box-shadow:none}
.pbtn{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--saffron);color:var(--ink);border:var(--bw) solid var(--ink);box-shadow:var(--sh-s);transition:transform .12s}
.poster:hover .pbtn{transform:scale(1.07)}
.pbtn svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.vinfo{margin-top:18px;display:grid;gap:10px}
.vinfo .top{display:flex;align-items:center;gap:10px}
.vinfo .reward{margin-left:auto;text-align:right;line-height:1.2}.vinfo .reward b{font:800 1.3rem var(--hd);display:block}.vinfo .reward small{color:var(--mute);font-weight:600;font-size:.8rem}
.vmsg{min-height:1.4em;font-weight:700;color:var(--mute)}.vmsg svg{vertical-align:-4px;margin-right:6px}.vmsg .money{display:inline}.vmsg .money b{display:inline;font:800 1rem var(--hd)}
.vmsg.bad{color:var(--bad)}.vmsg.good{color:var(--pine)}
.vact{display:flex;gap:10px}
.ghostb{background:var(--paper);color:var(--ink);padding:9px 16px;font-size:.9rem}
.vlist{padding:20px}
.vlist h3{margin-bottom:12px}
.vlist ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:520px;overflow:auto}
.vlist li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;border:2px solid transparent;font-weight:600;font-size:.92rem}
.vlist li .vi{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--field);color:var(--mute)}
.vlist li .vi svg{width:15px;height:15px}
.vlist li .vt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlist li .vr{flex:none;color:var(--mute);font-weight:700;font-size:.85rem}.vlist li .vr b{font:700 .85rem var(--bd)}
.vlist li.now{background:var(--butter);border-color:var(--ink)}.vlist li.now .vi{background:var(--ink);color:#fff}
.vlist li.done{color:var(--mute)}.vlist li.done .vi{background:var(--mint);color:var(--ink)}.vlist li.done .vt{text-decoration:line-through}
.vdone{padding:20px}.vdone .empty{border:0;padding:30px 10px}
ul.plain{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--mute)}
.greet h1{margin-bottom:8px}