/* Founder sign-up on the sign-in page (src/screens/launch.mjs founderOfferHTML; Take B in mock/founder-signup.html):
   the card back and the Booster Box, big, over the Gallery wall on a computer; across the top of the wall on a phone. */
.fo{position:fixed;z-index:1;left:clamp(24px,5vw,90px);top:50%;translate:0 -50%;width:min(470px,38vw);display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:26px 28px;border-radius:14px;background:linear-gradient(180deg,rgba(8,11,14,.82),rgba(8,11,14,.9));box-shadow:0 0 0 1px rgba(215,166,83,.35),0 30px 70px rgba(0,0,0,.7)}
.fo-tag{margin:0;font:700 11px/1.1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--gold2)}
.fo-gifts{display:flex;align-items:flex-end;gap:26px;height:190px;padding-left:6px}
.fo-gifts figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.fo-gifts figcaption{font:700 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#e4d6b6;white-space:nowrap}
.fo-back{flex:none;width:118px;aspect-ratio:5/7;border-radius:6px;box-shadow:0 0 0 1px #6b5430,0 0 24px rgba(255,170,90,.5);rotate:-7deg;animation:foFloat 3.4s ease-in-out infinite alternate}
@keyframes foFloat{to{translate:0 -8px}}
.fo-box{display:grid;place-items:center;overflow:visible}
.fo-box .pr-box{--bw:150px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.fo-box .pr-box-count,.fo-box .pr-box-plate i{display:none}
.fo-h{margin:0;font:700 clamp(24px,2vw,32px)/1.1 var(--cond);letter-spacing:.06em;color:#fff;text-transform:uppercase}
.fo-p{margin:0;color:#d8ccb0;font:500 15px/1.4 "Segoe UI",system-ui,sans-serif}
.fo-p b{color:#fff}
body.no-motion .fo-back{animation:none}
@media (prefers-reduced-motion:reduce){.fo-back{animation:none}}
/* Smaller computer windows: the wall is narrower, so the offer is too and the form keeps clear. */
@media (min-width:761px) and (max-width:1100px){
  .fo{width:31vw;padding:18px 20px;gap:12px}
  .fo-gifts{height:130px;gap:16px;padding:0}.fo-back{width:76px}.fo-box .pr-box{--bw:100px}
  .fo-gifts figcaption{display:none}
  .fo-h{font-size:20px}.fo-p{font-size:13px}
}
/* Narrow windows and upright tablets (the wall fills the page, style.css): the offer stands in the form's column, above the logo, smaller. */
@media (max-width:760px),(orientation:portrait) and (min-width:701px){
  .fo{position:static;translate:none;width:100%;align-items:center;text-align:center;gap:8px;padding:16px 18px}
  .fo-gifts{height:120px;gap:18px;padding:0}
  .fo-back{width:72px}.fo-box .pr-box{--bw:96px}
  .fo-gifts figcaption{display:none}
  .fo-h{font-size:20px}.fo-p{font-size:14px}
}
/* Phones upright: across the top of the wall, under the add-to-home-screen pill; it steps aside while the sheet is up. */
@media (max-width:700px) and (orientation:portrait){
  .fo{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 58px);width:auto;padding:14px 16px 16px;border-radius:12px;transition:opacity .2s}
  .fo-h{font-size:19px}.fo-p{font-size:13px}
  .login:is(.is-typing,.is-tall) .fo{opacity:0;pointer-events:none}
  .login:has(.fo) .login-shade{background:linear-gradient(0deg,#080b0e calc(var(--sheet,45%) + 70px),rgba(8,11,14,.3) calc(var(--sheet,45%) + 200px),rgba(8,11,14,.25) 88%,rgba(8,11,14,.55) 100%)}
}
/* Short phones: the words go, the gifts and the headline stay clear of the logo. */
@media (max-width:700px) and (orientation:portrait) and (max-height:740px){
  .fo-gifts{height:92px}.fo-back{width:54px}.fo-box .pr-box{--bw:74px}.fo-p{display:none}
}
@media (orientation:landscape) and (max-height:500px){.fo{display:none}}

/* "Welcome, Founder" (src/screens/rewards.mjs founderWelcome): shown once, the first time a Founder comes in. */
.fw{width:min(92vw,620px);padding:clamp(22px,3dvh,36px) clamp(20px,3vw,40px);border:2px solid transparent;border-radius:14px;text-align:center;color:#e9dfc6;font-family:var(--cond);
  background:radial-gradient(120% 80% at 50% 0,rgba(255,190,90,.16),transparent 60%) padding-box,linear-gradient(180deg,#141b21,#07090c) padding-box,var(--frame,linear-gradient(160deg,#e2b25a,#6b5430)) border-box;
  box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 60px rgba(255,170,60,.18)}
.fw::backdrop{background:rgba(3,5,7,.78)}
.fw[open]{animation:fwIn .5s cubic-bezier(.2,1.2,.4,1) both}
@keyframes fwIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.fw-kicker{margin:0;font:700 14px/1 var(--cond);letter-spacing:.42em;text-transform:uppercase;color:var(--gold1)}
.fw-h{margin:8px 0 6px;font:800 clamp(30px,4vw,46px)/1 var(--cond);letter-spacing:.04em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff6d8 0,#f2cf7c 40%,#b07a2c 65%,#f6dc95 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fw-sub{margin:0 auto;max-width:440px;font:500 16px/1.4 var(--cond);color:#cfc5ad}
.fw-gifts{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,4vw,48px);margin:24px 0 20px}
.fw-gift{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:200px}
.fw-gift figcaption b{display:block;font:800 17px/1.15 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#fff4dc}
.fw-gift figcaption small{display:block;margin-top:3px;font:500 13px/1.3 var(--cond);color:#a99f86}
.fw-gift--back img{width:96px;aspect-ratio:5/7;border-radius:7px;box-shadow:0 0 0 1px #6b5430,0 0 34px rgba(255,170,90,.55);animation:fwFloat 3.2s ease-in-out infinite alternate}
@keyframes fwFloat{to{transform:translateY(-6px) rotate(-3deg)}}
.fw-boxwrap .pr-box{--bw:120px}
.fw-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.fw-go{padding:14px 30px;border:0;border-radius:8px;cursor:pointer;font:700 17px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#1a1106;
  background:linear-gradient(180deg,#ffe7a6,#e2b25a 45%,#9a6a25);box-shadow:0 0 0 2px #2a1806,0 8px 24px rgba(255,170,60,.35)}
.fw-go:hover{filter:brightness(1.08)}
.fw-later{padding:14px 22px;border-radius:8px;cursor:pointer;font:700 15px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#e9dfc6;background:rgba(10,14,17,.6);border:1px solid #6b5430}
@media (max-width:520px){.fw-gifts{gap:14px}.fw-gift--back img{width:72px}.fw-boxwrap .pr-box{--bw:92px}.fw-gift figcaption b{font-size:14px}}
@media (prefers-reduced-motion:reduce){.fw[open],.fw-gift--back img{animation:none}}
body.no-motion .fw[open],body.no-motion .fw-gift--back img{animation:none}