/* nembo.app, waiting-list page (D-112). Source of the page's own styles; the slingshot and the footer
   come from site/components/ through scripts/build-lista.mjs (lista/slingshot.css, lista/footer.css).
   Fonts are served from /fonts/ (CSP font-src 'self'): Jost, Nunito Sans and IBM Plex Mono, SIL OFL 1.1,
   latin subsets from Fontsource 5.3.0. */
@font-face{font-family:"Jost";font-style:normal;font-display:swap;font-weight:100 900;src:url("/fonts/jost-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-display:swap;font-weight:200 1000;src:url("/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}

/* Layout: white page, one centred column. The icon and the wordmark on top; a Nembo turning slowly;
   the promise; the form, where a slingshot throws your email in; one lenticular line; then the
   approved footer. */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --ink:#1F2A44; --muted:#5E5752; --line:#E8DDD2;
  --terra:#BB624C; --kiln:#9A4A37; --on-terra:#FFF6EC; --err:#8A3B4E;
  --display:"Jost","Futura","Avenir Next","Century Gothic",system-ui,sans-serif;
  --text:"Nunito Sans","Nunito","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; /* taste-skill-ignore: brand data face */
  --ease:cubic-bezier(.2,.7,.2,1);
  --band:#B35B45; --on-band:#FFFFFF;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* header: the app icon (D-106) beside the Fredoka wordmark, as on the box */
.top .wrap{padding-block:24px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo .sym{width:36px;height:36px;flex:none}
.logo .wm{height:25px;width:auto;fill:var(--terra)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lang{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:8px 2px}
.lang:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

.hero{display:grid;justify-items:center;text-align:center;padding-block:0 56px}
/* the Nembo turns once every 12.6 s (founder, 2026-10-27: slower, and no dots over it) */
.stage{width:min(360px,100%);aspect-ratio:480/400}
.turn{display:block;width:100%;height:100%;object-fit:contain;background:var(--bg)}
h1{font-family:var(--display);font-weight:300;font-size:clamp(40px,6vw,68px);line-height:1;letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance}
h1 b{font-weight:500;color:var(--terra)}
.sub{font-size:18px;margin:0 0 28px;max-width:40ch;text-wrap:balance}
.sub b{font-weight:700;color:var(--kiln)}

form{display:grid;gap:14px;width:min(560px,100%);text-align:left}
#email{width:100%;font:inherit;font-size:18px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px}
#email::placeholder{color:#9C938B}
#email:focus{border-color:var(--ink);outline:none}
#email[aria-invalid="true"]{border-color:var(--err)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--muted);cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--kiln);flex:none}

/* the slingshot takes the button's place: Bencho's block is 360 × 260, scaled down here so the
   ball is about the size of a thumb; the frame keeps the block's own proportions */
.fire{--s:.8;display:grid;justify-items:center;text-align:center;gap:2px;margin-top:2px}
/* the block's empty top half is only sky for the throw, so it tucks up under the checkbox: the ball
   sits about 20 px below it. Its floor tucks over the caption the same way; a full pull passes over
   the words. The block lets clicks through; only the socket takes them */
.sling{width:calc(360px * var(--s));height:calc(260px * var(--s));margin-top:calc(20px - 101px * var(--s));margin-bottom:calc(28px - 101px * var(--s));position:relative;z-index:3;pointer-events:none}
.sling .sls{transform:scale(var(--s));transform-origin:0 0;touch-action:pan-y}
/* nembo.app page: only the ball's socket holds the finger, so the rest of the block still scrolls */
.sls-grip{position:absolute;left:137px;top:87px;width:86px;height:86px;border-radius:50%;touch-action:none;cursor:grab;pointer-events:auto}
.sls-grip:active{cursor:grabbing}
.pull{font-weight:700;font-size:17px;margin:0;color:var(--ink)}
.price{font-size:15px;margin:0;color:var(--ink)}
.go{position:absolute;left:-9999px;font:inherit;font-weight:700;font-size:16px;background:var(--kiln);color:var(--on-terra);border:0;border-radius:12px;padding:12px 20px;cursor:pointer}
.go:focus-visible{position:static;margin-top:8px}
.fine{font-size:14px;color:var(--muted);margin:0}
.fine a{color:var(--muted)}
.status{min-height:1.4em;font-size:15px;margin:0;color:var(--err);text-align:center}

.done{width:min(560px,100%);background:#F6F1EC;scroll-margin-top:24px;border-radius:18px;padding:24px;text-align:left}
.done h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 6px}
.done p{margin:0 0 8px}
.linkbtn{all:unset;cursor:pointer;color:var(--muted);text-decoration:underline;font-size:14px}
.done .to{font-weight:700;color:var(--kiln);overflow-wrap:anywhere}
.done .to:empty{display:none}
#sentDebug:empty{display:none}
/* without script the form posts itself and the Worker sends the browser back to #sent */
#sent:target{display:block!important}
/* honeypot: out of sight, out of the tab order; people leave it empty */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* footer: the pre-sale has no page yet, so its entry is plain text with the date beside it */
.cols .plain{color:var(--on-band);font-size:16px}

/* one lenticular line per layout (brand book, Visual rules): the wave on the P11's front, stacked */
.lenti{display:block;width:min(600px,100%);height:auto;margin-top:72px}
.lenti path{fill:none;stroke:var(--terra);stroke-linecap:round}

@media (max-width:480px){
  .stage{width:min(240px,100%)} .top .wrap{padding-block:14px}
  h1{font-size:38px;margin-bottom:10px} .sub{font-size:16px;margin-bottom:18px}
  .lenti{margin-top:56px} .fire{--s:.7}
} /* marketer: on a 375 × 667 phone the email field is still on the first screen */