/* small.css — shared by the three small instruments: doors · superpower · fiveports.
   One column, big taps, no chrome. Borrows every token from site.css. */
.sm-wrap{max-width:640px;margin:0 auto;padding:28px max(20px,env(safe-area-inset-left))
  calc(56px + env(safe-area-inset-bottom))}
.hide{display:none !important}
.sm-eyebrow{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--cyan-text);
  margin:0 0 12px;font-weight:600}
.sm-h1{font-size:clamp(30px,7.6vw,48px);line-height:1.02;letter-spacing:-.025em;margin:0 0 16px;color:var(--navy)}
.sm-h2{font-size:clamp(22px,5.2vw,30px);line-height:1.14;letter-spacing:-.015em;margin:0 0 10px;color:var(--navy)}
.sm-lede{font-size:17.5px;line-height:1.55;color:var(--ink-60);margin:0 0 26px;max-width:52ch}
.sm-small{font-size:13px;color:var(--ink-25);margin:12px 0 0}
.sm-btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:var(--r-s);
  padding:17px 28px;min-height:56px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;
  letter-spacing:.04em;text-decoration:none}
.sm-btn:hover{background:var(--navy-deep)}
.sm-btn.ghost{background:transparent;color:var(--ink-60);border:1px solid var(--line)}
.sm-btn.ghost:hover{background:var(--pale)}
.sm-q{font-size:clamp(20px,4.8vw,26px);line-height:1.25;margin:0 0 18px;color:var(--navy)}
.sm-opts{display:flex;flex-direction:column;gap:9px}
.sm-opt{text-align:left;background:#fff;border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r-s);padding:16px 17px;min-height:56px;font:inherit;font-size:17px;
  line-height:1.4;cursor:pointer;width:100%;transition:border-left-color .12s,background .12s}
.sm-opt:hover{border-left-color:var(--cyan);background:var(--pale)}

/* ── The Cowardice Slider — an INPUT, not a share card. Lets somebody admit they are
      nervous without the word nervous appearing anywhere. ── */
.cow{margin:22px 0 8px}
.cow-track{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cow-step{border:1px solid var(--line);background:#fff;border-radius:var(--r-s);padding:14px 8px;
  min-height:76px;font:inherit;font-size:13.5px;line-height:1.3;cursor:pointer;text-align:center;
  color:var(--ink-60);transition:all .14s var(--ease)}
.cow-step:hover{border-color:var(--cyan);background:var(--pale)}
.cow-step.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}
.cow-rail{height:3px;background:var(--line-2);border-radius:2px;margin-top:10px;overflow:hidden}
.cow-rail i{display:block;height:100%;width:25%;background:var(--cyan);transition:width .25s var(--ease)}

/* ── result ── */
.sm-card{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--pale);margin-bottom:22px}
.sm-kicker{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-25);margin:0 0 8px}
.sm-big{font-size:clamp(26px,6.5vw,40px);line-height:1.04;letter-spacing:-.022em;margin:0 0 10px;color:var(--navy)}
.sm-body{font-size:16.5px;line-height:1.55;color:var(--ink);margin:0 0 10px}
.sm-h4{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--cyan-text);margin:0 0 10px;font-weight:600}
.sm-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.sm-row{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--r-s);
  padding:14px 16px;transition:border-color .15s,background .15s}
.sm-row:hover{border-color:var(--cyan);background:var(--pale)}
.sm-row b{display:block;font-size:16.5px;color:var(--navy);margin-bottom:3px}
.sm-row span{font-size:13.5px;color:var(--ink-40)}
.sm-sec{border-top:1px solid var(--line-2);padding-top:22px;margin-bottom:22px}

/* ── The Wrong Button — petty, specific, and it is how we learn we were wrong ── */
.wrong-opts{display:flex;flex-wrap:wrap;gap:7px}
.wrong-opt{border:1px solid var(--line);background:#fff;border-radius:100px;padding:9px 15px;
  min-height:42px;font:inherit;font-size:14px;color:var(--ink-60);cursor:pointer;transition:all .13s}
.wrong-opt:hover{border-color:var(--orange);color:var(--orange-text);background:#FFF4EF}
.wrong-opt.on{background:var(--orange);border-color:var(--orange);color:#fff}
.wrong-thanks{font-size:14.5px;color:var(--teal-text);margin:10px 0 0}

/* ── The Friend Bait Card — the reluctant companion is the distribution channel ── */
.bait{background:var(--navy);color:#fff;border-radius:var(--r);padding:24px;margin-bottom:14px}
.bait-k{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;opacity:.65;margin:0 0 10px}
.bait-t{font-size:19px;line-height:1.4;margin:0}
.bait-t b{color:var(--hl)}