/* Earn at /earn (earn.py): the marketing page's stylesheet is loaded first,
   and this adds the form that page does not have. No dashboard rule reaches
   here: coast.css is not loaded. */
.earnpage .nav{background:rgba(0,0,0,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.earnpage .hero{padding-bottom:64px}
.earnpage .earnhow{padding:0 0 110px}
.earnhow .ticks{max-width:560px;margin-inline:auto;font-size:15px}
.earnpage .earnhead{padding:140px 0 44px;text-align:center}
.earnhead h1{margin-top:22px}
.earnpage .earnblock{padding:0 0 110px}
.earn{max-width:640px}
.earn h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.earn>p{color:var(--dim);margin:12px 0 26px}
.earn .copy{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;background:var(--panel);
  border:1px solid var(--line);border-radius:100px}
.earn .copy code{flex:1;min-width:0;overflow-wrap:anywhere;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.earn button{height:40px;padding:0 18px;border-radius:100px;font-size:14px;font-weight:500;white-space:nowrap;
  background:#1b1b1e;border:1px solid var(--line);transition:background .2s var(--ease-soft),transform .12s var(--ease-out)}
.earn button:active{transform:scale(.97)}
.earn .copybtn{background:#fff;color:#000;border-color:#fff}
.earn .reward{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;color:var(--dim)}
.earn .reward label{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.earn .reward input{accent-color:#fff;color-scheme:dark;width:16px;height:16px;margin:0}
.earn .payout{display:flex;gap:10px;margin-top:16px}
.earn .payout input{flex:1;min-width:0;height:40px;padding:0 18px;font:inherit;color:var(--text);background:var(--panel);
  border:1px solid var(--line);border-radius:100px}
.earn .payout input::placeholder{color:var(--faint)}
.earn :focus-visible,.foot button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* A free month is paid to nobody: the box goes, Save stays, and the handle is still sent. */
.reward:has(input[value=month]:checked)+.payout input{display:none}
.earn .friends{list-style:none;padding:0;margin-top:36px}
.earn .friends li{padding:14px 0;border-top:1px solid var(--line);color:var(--dim);font-size:14px}
.earn .friends b{color:var(--text);font-weight:500;margin-right:10px}
.earn .dim{color:var(--faint);margin-top:32px;font-size:14px}
.foot form{display:inline;margin-left:24px}
.foot button{font-size:inherit;transition:color .4s var(--ease-soft)}
@media (hover:hover){.earn button:hover{background:#26262a}.earn .copybtn:hover{background:#e7e7ea}.foot button:hover{color:#fff}}
@media (max-width:520px){.earn .copy{flex-direction:column;align-items:stretch;gap:10px;padding:14px;border-radius:18px}
  .earnpage .earnhead{padding-top:110px}}
/* "Saved", once, after Save (earn.js), as the dashboard says it: a note that rises from the foot and leaves. */
.toast{position:fixed;z-index:60;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);
  padding:8px 16px;border-radius:100px;background:#fff;color:#000;font-size:14px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4);pointer-events:none}
.mstatus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:toastin 300ms cubic-bezier(.34,1.3,.64,1) both}
  .toast.out{animation:toastout 250ms ease-in both}}
@keyframes toastin{from{opacity:0;transform:translate(-50%,16px)}}
@keyframes toastout{to{opacity:0;transform:translate(-50%,12px)}}