/* One list, one field. The address is saved on the first step; everything
   after is optional and happens in a yellow sheet that drops in. */

/* ---- what arrives when you sign up ---- */
.perks{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.5rem}
.perks li{display:flex;align-items:flex-start;gap:.6rem;font-size:.93rem;line-height:1.45}
.inked{width:22px;height:22px;flex:0 0 auto;margin-top:-.05rem;display:grid;place-items:center;
  color:currentColor;opacity:.9}
.inked svg{width:22px;height:22px;display:block}
.su__lede{font-size:.95rem;line-height:1.5;margin-top:.25rem;opacity:.85}

/* ---- the inline confirmation left behind on the page ---- */
.su__done{display:flex;gap:.8rem;align-items:flex-start;animation:suIn .28s ease both}
.su__tick{width:34px;height:34px;border-radius:50%;background:var(--green);flex:0 0 auto;
  display:grid;place-items:center}
.su__tick svg{width:17px;height:17px;color:#fff}
.su__done h4{font-family:var(--font-display);font-size:1.08rem;margin:0}
.su__done p{font-size:.9rem;opacity:.8;margin-top:.25rem;max-width:42ch}
@keyframes suIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- the sheet ---- */
.snm{position:fixed;inset:0;z-index:200;display:grid;place-items:start center;
  padding:clamp(1rem,5vh,4rem) 1rem 2rem;overflow-y:auto}
.snm[hidden]{display:none}
.snm__scrim{position:fixed;inset:0;background:rgba(30,25,20,.55);
  animation:scrimIn .25s ease both}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}

.snm__sheet{position:relative;width:min(560px,100%);background:var(--yellow);
  border-radius:4px;padding:clamp(1.5rem,4vw,2.3rem);
  box-shadow:7px 9px 0 rgba(30,25,20,.30), 0 34px 64px rgba(30,25,20,.38);
  transform:rotate(-1.6deg);
  background-image:linear-gradient(160deg, rgba(255,255,255,.35), rgba(0,0,0,.04));
  animation:sheetDrop .58s cubic-bezier(.16,1.3,.34,1) both}
@keyframes sheetDrop{
  from{transform:translateY(-60px) rotate(-4deg) scale(.94);opacity:0}
  to{transform:translateY(0) rotate(-1.6deg) scale(1);opacity:1}}

.snm__doodle{position:absolute;left:clamp(1.5rem,4vw,2.3rem);top:-18px;font-size:2rem;
  line-height:1;transform:rotate(-8deg);filter:drop-shadow(2px 3px 3px rgba(30,25,20,.25));
  pointer-events:none}

.snm__x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:none;
  border-radius:50%;background:rgba(45,42,38,.10);cursor:pointer;font-size:1.15rem;
  line-height:1;color:var(--text)}
.snm__x:hover{background:rgba(45,42,38,.20)}

.snm h3{font-family:var(--font-display);font-size:clamp(1.25rem,3vw,1.6rem);
  max-width:22ch;padding-right:1.6rem}
.snm__lede{font-size:.98rem;line-height:1.55;margin-top:.5rem;color:#5c4f18}
.snm .capture{margin-top:1.1rem}
.snm .fineprint{color:#6b5a20}

/* ---- the questions ---- */
.snm__opts{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem}
.snm__opt{display:flex;align-items:flex-start;gap:.65rem;background:rgba(255,255,255,.62);
  border:2px solid transparent;border-radius:10px;padding:.6rem .75rem;cursor:pointer;
  font-size:.95rem;line-height:1.4;transition:background .15s ease, border-color .15s ease}
.snm__opt:hover{background:rgba(255,255,255,.85)}
.snm__opt input{position:absolute;opacity:0;pointer-events:none}
.snm__box{width:20px;height:20px;border-radius:6px;background:#fff;flex:0 0 auto;
  border:2px solid rgba(45,42,38,.25);display:grid;place-items:center;margin-top:.05rem;
  transition:background .15s ease, border-color .15s ease}
.snm__box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .15s ease}
.snm__opt input:checked + .snm__box{background:var(--green);border-color:var(--green)}
.snm__opt input:checked + .snm__box svg{opacity:1}
.snm__opt:has(input:checked){background:#fff;border-color:var(--text)}

.snm__label{display:block;font-family:var(--font-display);font-weight:700;font-size:.95rem;
  margin:1.2rem 0 .5rem}

/* age and interest answers are chips, so three questions still fit on one
   sheet without it turning into a form */
.snm__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.snm__chip{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.62);
  border:2px solid transparent;border-radius:var(--r-pill);padding:.35rem .8rem;cursor:pointer;
  font-size:.9rem;line-height:1.3;transition:background .15s ease, border-color .15s ease,
  transform .12s ease}
.snm__chip:hover{background:rgba(255,255,255,.9);transform:translateY(-1px)}
.snm__chip input{position:absolute;opacity:0;pointer-events:none}
.snm__chiptick{width:0;overflow:hidden;display:grid;place-items:center;
  transition:width .15s ease}
.snm__chiptick svg{width:11px;height:11px;color:var(--green-ink)}
.snm__chip:has(input:checked){background:#fff;border-color:var(--text)}
.snm__chip:has(input:checked) .snm__chiptick{width:13px}
.snm textarea{width:100%;min-height:84px;border:2px solid rgba(45,42,38,.22);border-radius:10px;
  padding:.7rem .8rem;font-family:var(--font-body);font-size:.94rem;background:#fff;resize:vertical}
.snm textarea:focus{outline:3px solid var(--blue);outline-offset:1px}

.snm__row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.3rem}
.snm__skip{font-size:.9rem;color:#6b5a20;text-decoration:underline;cursor:pointer;
  background:none;border:none;font-family:var(--font-body)}

.snm__thanks{display:flex;gap:.9rem;align-items:flex-start}
.snm__thanks h3{padding-right:0}
.snm__thanks p{font-size:.96rem;line-height:1.6;margin-top:.4rem;color:#5c4f18}

@media (prefers-reduced-motion: reduce){
  .snm__sheet{animation:none;transform:rotate(-1.6deg)}
  .snm__scrim{animation:none}
}

/* honeypot: a field no person sees; bots fill it and get a polite nothing */
.capture .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.capture{position:relative}
.su__error{margin-top:.6rem;font-size:.9rem;color:var(--coral-ink,#9a2f22)}

/* follow along, at the end of the flow */
.snm__follow{margin-top:1.1rem;padding-top:.9rem;border-top:1px dashed rgba(45,42,38,.3)}
.snm__follow p{font-size:.92rem;margin:0 0 .45rem}
.snm__follow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.snm__follow a{font-family:var(--font-display);font-size:.92rem;color:inherit;text-decoration:none;border-bottom:2px solid rgba(45,42,38,.35)}
.snm__follow a:hover{border-color:var(--coral)}
.snm__follow--compact{margin-top:.8rem;padding-top:.7rem}
.snm__follow--compact p{font-size:.85rem}