/* =======================================================================
   launch.css — the Book Launch Update page, and the launch button on Home.
   ======================================================================= */

/* --- the button on the home page --------------------------------------- */
.launchpill{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--s3);
  padding:9px 18px 9px 12px;border-radius:999px;text-decoration:none;
  background:var(--sun);color:var(--ink);font-weight:700;font-size:15px;line-height:1;
  box-shadow:0 2px 0 #C9921C;border:0;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;
}
.launchpill:hover{transform:translateY(-2px);box-shadow:0 4px 0 #C9921C}
.launchpill .rk{
  width:28px;height:28px;border-radius:50%;background:var(--paper);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.launchpill .rk svg{width:21px;height:21px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.launchpill:hover .rk svg{transform:translate(2px,-2px)}
.launchpill .ar{transition:transform .18s cubic-bezier(.34,1.4,.64,1)}
.launchpill:hover .ar{transform:translateX(3px)}

/* --- page hero ----------------------------------------------------------- */
.lhero{padding:var(--s6) 0 var(--s6);overflow:hidden}
.lhero .eyebrow{margin-bottom:var(--s3)}
.lhero h1{font-size:clamp(42px,5.6vw,76px);max-width:11ch}
.lhero .lede{margin-top:var(--s4)}
.lhero .ask{
  font-family:var(--disp);font-weight:600;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-size:clamp(20px,1.9vw,25px);line-height:1.35;letter-spacing:-.015em;color:var(--ink);
  margin:var(--s4) 0 0;max-width:30ch;
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line-2);font-size:14px;font-weight:600;color:var(--ink-2);
}
.chip b{color:var(--fern);font-weight:700}

/* the rocket */
.rocketstage{position:relative;max-width:440px;width:100%;justify-self:end}
.rocketstage svg{width:100%;height:auto;display:block;overflow:visible}
.rk-ship{animation:hover 4.2s ease-in-out infinite;transform-origin:180px 230px}
.rk-flame{animation:flicker .18s steps(2) infinite alternate;transform-origin:180px 318px}
.rk-puff{animation:puff 4.2s ease-in-out infinite}
.rk-puff.p2{animation-delay:-1.4s}
.rk-puff.p3{animation-delay:-2.8s}
.rk-star{animation:twinkle 3s ease-in-out infinite}
.rk-star.s2{animation-delay:-1s}
.rk-star.s3{animation-delay:-2s}
@keyframes hover{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes flicker{from{transform:scaleY(1)}to{transform:scaleY(.84)}}
@keyframes puff{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.rocketstage .tag{
  position:absolute;left:-10%;top:1%;transform:rotate(-6deg);
  background:var(--paper);border:1.5px solid var(--trail);border-radius:10px;
  padding:9px 14px 10px;font-family:var(--hand);font-weight:700;font-size:15px;line-height:1.25;
  color:var(--trail);text-align:center;box-shadow:0 10px 22px -16px rgba(34,48,31,.55);
}
.rocketstage .tag b{display:block;font-family:var(--disp);font-size:22px;color:var(--berry);letter-spacing:-.01em}
@media(max-width:900px){
  .rocketstage{justify-self:center !important;max-width:280px;margin-top:0}
  .rocketstage .tag{left:-22%;top:0;font-size:13px;padding:7px 11px 8px}
  .rocketstage .tag b{font-size:18px}
  .lhero{padding-bottom:var(--s5)}
}

/* --- the two options ----------------------------------------------------- */
.opts{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:start}
.opt{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:var(--s5) var(--s5) var(--s4);position:relative;
  box-shadow:0 22px 44px -34px rgba(34,48,31,.55);
}
.opt.one{grid-column:1 / span 8}
.side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:var(--gut)}
.opt.two,.opt.three{border-style:dashed;border-color:var(--line-2);box-shadow:none;background:transparent}
@media(max-width:1000px){.opt.one,.side{grid-column:1 / -1}}
@media(max-width:600px){.opt{padding:var(--s4) var(--s3) var(--s3)}}
.opt .num{
  font-family:var(--disp);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 1;
  font-size:64px;line-height:.8;color:var(--clay);display:block;margin-bottom:var(--s2);
}
.opt h2{font-size:clamp(28px,3vw,40px);max-width:18ch}
.opt.two h2,.opt.three h2{font-size:clamp(22px,2vw,27px)}
@media(min-width:1001px){.side{position:sticky;top:calc(var(--nav-h) + 24px)}}
.opt-art{position:absolute;right:var(--s4);top:var(--s4);width:96px;height:auto}
.opt.two p,.opt.three p{color:var(--ink-2)}
.opt.three p{margin-bottom:0}
.opt.three a{color:var(--fern);font-weight:600;overflow-wrap:anywhere}

.step{display:grid;grid-template-columns:44px 1fr;gap:var(--s3);padding-top:var(--s4);margin-top:var(--s4);border-top:1px solid var(--line)}
.step .lt{
  width:44px;height:44px;border-radius:50%;background:var(--fern);color:var(--paper);
  font-family:var(--disp);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;
}
.step.b .lt{background:var(--trail)}
.step p{margin-bottom:var(--s2)}
@media(max-width:600px){
  .step{grid-template-columns:1fr;gap:12px}
  .step .lt{width:36px;height:36px;font-size:17px}
}
.why{font-size:15px;color:var(--ink-2);background:var(--paper-2);border-radius:10px;padding:12px 16px;margin:0 0 var(--s3)}

/* example review slips */
.slips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:var(--s2) 0 var(--s3)}
@media(max-width:600px){.slips{grid-template-columns:1fr}}
.slip{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px 13px;
  font-size:15px;line-height:1.45;color:var(--ink);margin:0;
}
.slip:nth-child(1){transform:rotate(-.6deg)}
.slip:nth-child(2){transform:rotate(.5deg)}
.slip:nth-child(3){transform:rotate(.4deg)}
.slip:nth-child(4){transform:rotate(-.5deg)}
.minihd{font-family:var(--hand);font-weight:600;font-size:15px;color:var(--trail);margin:0}

/* sign-up */
.joinbox{background:var(--paper-2);border-radius:14px;padding:var(--s3);margin-top:var(--s2)}
.joinbox h3{font-size:21px;margin:0 0 6px}
.joinbox > p{font-size:15px;color:var(--ink-2);margin:0 0 var(--s2)}
.joinform{display:flex;gap:10px;flex-wrap:wrap}
.joinform input[type=text],.joinform input[type=email]{flex:1 1 180px;width:auto;border-radius:999px}
.joinform .sumcheck{flex-basis:100%;margin:2px 0 0}
.joinform .sumcheck input{flex:0 0 84px;width:84px;border-radius:9px}
.joinform .formmsg{flex-basis:100%}
.fineprint{font-size:12.8px;color:var(--ink-3);line-height:1.55;margin:18px 0 0;max-width:none}

/* example email */
.mail{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:var(--s2) 0 var(--s3)}
.mail .row{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:15px}
.mail .row span{color:var(--ink-3);font-size:13px;font-weight:600;padding-top:1px}
.mail .body{padding:14px 16px 16px;font-size:15.5px;line-height:1.55}
.mail .body a{color:var(--fern)}
.sharebtns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.copied{font-family:var(--hand);font-weight:600;font-size:14px;color:var(--fern);opacity:0;transition:opacity .2s}
.copied.on{opacity:1}

/* --- thank you ------------------------------------------------------------ */
.thanks{text-align:center;overflow:hidden}
.thanks h2{max-width:20ch;margin:0 auto}
.thanks .force{
  font-family:var(--hand);font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--sun);
  margin:var(--s3) auto 0;max-width:none;
}
.thanks .signed{font-family:var(--hand);font-weight:700;font-size:34px;color:#FBF6E9;margin:var(--s4) auto 0;max-width:none}
.note{font-size:14.5px;line-height:1.6;color:var(--ink-2);border-left:3px solid var(--sun);padding:2px 0 2px 14px;margin:0 0 var(--s3)}