/* the hidden attribute must beat any class that sets display */
[hidden]{display:none!important}
/* Host landing and onboarding. Uses the same brand tokens as crew.css. */
.host{max-width:560px;margin:0 auto;padding:0 22px 60px}

/* landing */
.hl{padding:44px 0 0;text-align:center}
.hl .logo{width:min(260px,62vw);height:auto;display:block;margin:0 auto 30px}
.hl h1{font-family:var(--f-display);font-size:clamp(32px,8vw,52px);line-height:.98;
  margin:0 0 20px;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.hl .lede{font-size:18px;line-height:1.6;color:var(--c-dim);margin:0 auto 14px;max-width:44ch}
/* The direct address. Its own paragraph, and brighter, because it is the
   line that decides whether the host feels spoken to. */
.hl .lede2{color:var(--c-dim2);margin-bottom:28px}
.hl ul{list-style:none;margin:0 0 30px;padding:0;text-align:left}
.hl li{padding:14px 0;border-bottom:1px solid var(--c-line);font-size:17.5px;
  line-height:1.45;display:flex;gap:12px;align-items:flex-start;color:var(--c-dim2)}
.hl li:last-child{border-bottom:0}
/* One accent, used three times, rather than three accents used once. A shared
   marker reads as a set; three colours would imply three kinds of thing. */
.hl li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.52em;
  border-radius:50%;background:var(--c-good)}
.hl li b{font-family:var(--f-label);font-weight:400;font-size:19px;
  letter-spacing:.03em;color:var(--c-paper);margin-right:2px}
.hl .time{margin-top:14px;font-family:var(--f-label);font-size:16px;
  letter-spacing:.08em;color:var(--c-dim)}

/* steps */
.step{padding:30px 0 0}
.prog{display:flex;gap:5px;margin-bottom:26px}
.prog i{flex:1;height:4px;border-radius:2px;background:var(--c-line-dash);display:block}
.prog i.on{background:var(--c-accent)}
.qn{font-family:var(--f-label);font-size:16.5px;letter-spacing:.12em;
  color:var(--c-good);margin-bottom:10px}
.step h2{font-family:var(--f-display);font-size:clamp(27px,7vw,38px);line-height:1.02;
  margin:0 0 8px}
.step .help{font-size:17.5px;line-height:1.5;color:var(--c-dim);margin:0 0 20px}
.step input,.step textarea{width:100%;padding:15px 16px;border-radius:11px;
  border:1px solid var(--c-line-dash);background:var(--c-scrim-deep);color:var(--c-paper);
  font-family:var(--f-body);font-size:17.5px;min-height:56px}
.step textarea{min-height:130px;line-height:1.55;resize:vertical}
.step input:focus,.step textarea:focus{outline:2px solid var(--c-accent);outline-offset:1px}

/* choice list */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:block;width:100%;text-align:left;padding:17px 18px;border-radius:12px;
  border:1px solid var(--c-line-dash);background:var(--c-scrim);color:var(--c-paper);
  font-family:var(--f-label);font-size:19.5px;letter-spacing:.03em;cursor:pointer;min-height:58px}
.opt:hover{background:var(--c-scrim-deep)}
.opt.sel{background:var(--c-paper);color:var(--c-bg);border-color:var(--c-paper)}

.nav{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.nav .btn{flex:1;min-width:130px}
.linkbtn{background:none;border:0;color:var(--c-dim);font-family:var(--f-label);
  font-size:15px;letter-spacing:.06em;cursor:pointer;padding:12px;min-height:44px}
.linkbtn:hover{color:var(--c-paper)}


/* done */
.done h2{margin-bottom:16px}
.lk{margin-top:16px;padding:15px 17px;border-radius:12px;background:var(--c-scrim-deep);
  border:1px dashed var(--c-line-dash)}
.lk .lb{font-family:var(--f-label);font-size:16px;letter-spacing:.1em;
  color:var(--c-good);margin-bottom:7px}
.lk .u{font-size:15px;line-height:1.5;color:var(--c-dim);word-break:break-all;
  font-family:ui-monospace,monospace}
.lk .row2{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.lk .row2 .btn{flex:1;min-width:120px;font-size:15px;padding:12px 16px;min-height:46px}
#status{margin-top:14px;font-size:16px;color:var(--c-good);min-height:20px}
.hl .plead{margin:0 0 4px;text-align:left;font-family:var(--f-label);font-size:16px;
  letter-spacing:.05em;line-height:1.4;color:var(--c-paper)}
.hl .payoff{margin-top:18px;padding-top:16px;border-top:1px solid var(--c-line);
  font-family:var(--f-label);font-size:17px;letter-spacing:.05em;line-height:1.35;
  color:var(--c-accent)}
.chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.chips .chipn{width:100%;font-family:var(--f-label);font-size:15px;letter-spacing:.1em;
  color:var(--c-good);margin-bottom:2px}
.chips .chip{padding:8px 13px;border-radius:var(--r-pill);background:var(--c-fill);
  border:1px solid var(--c-line-strong);font-family:var(--f-label);font-size:16.5px;
  letter-spacing:.04em;color:var(--c-paper)}
.chips .chip.me{background:var(--c-paper);color:var(--c-bg);border-color:var(--c-paper)}
.chips .chip.me b{font-weight:400;opacity:.55;font-size:12.5px;letter-spacing:.1em}
.opt b{display:block;font-weight:400}
.opt .oh{display:block;margin-top:5px;font-family:var(--f-body);font-size:16px;
  letter-spacing:0;color:var(--c-accent)}
.opt .oh.dim{color:var(--c-dim)}
.opt.sel .oh{color:var(--c-bg);opacity:.7}
#moreWrap{margin-top:14px}
.tips{list-style:none;margin:14px 0 0;padding:0}
.tips li{position:relative;padding:7px 0 7px 20px;font-size:16.5px;line-height:1.45;
  color:var(--c-dim)}
.tips li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--c-good)}
.chips .chip.solo{border-style:dashed;border-color:var(--c-accent);color:var(--c-dim2)}
.chips .chipwarn{width:100%;margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--c-accent)}

/* Look, then fix. Stacked and full width so neither reads as secondary. */
.done .donetop{display:block;margin:4px 0 24px}
.done .donetop .btn{display:block;width:100%;text-align:center}
.done .donetop .btn + .btn{margin-top:10px}
/* The link that must never be pasted into a group chat should not look
   like the one that must be. */
.lk.private{border-style:solid;border-color:var(--c-hot);background:var(--c-scrim-deep)}
.lk.private .lb{color:var(--c-hot)}
.keepit{margin:10px 0 0;font-size:15.5px;line-height:1.45;color:var(--c-dim)}