/* boatswipe — "would you get in it?". Full-bleed photo cards, thumb-first.
   The photo is the whole product, so the chrome gets out of its way. */
.bs-wrap{max-width:660px;margin:0 auto;padding:30px max(20px,env(safe-area-inset-left))
  calc(56px + env(safe-area-inset-bottom))}
.hide{display:none !important}
.bs-eyebrow{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--cyan-text);
  margin:0 0 12px;font-weight:600}
.bs-h1{font-size:clamp(34px,9vw,58px);line-height:1;letter-spacing:-.028em;margin:0 0 16px;color:var(--navy)}
.bs-h2{font-size:clamp(26px,6.4vw,40px);line-height:1.06;letter-spacing:-.022em;margin:0 0 12px;color:var(--navy)}
.bs-lede{font-size:18px;line-height:1.55;color:var(--ink-60);margin:0 0 28px;max-width:50ch}
.bs-plain{font-size:17px;line-height:1.55;color:var(--ink-60);margin:0 0 26px}
.bs-small{font-size:13px;color:var(--ink-25);margin:14px 0 0}
.bs-btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:var(--r-s);
  padding:17px 30px;min-height:56px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;
  letter-spacing:.04em;text-decoration:none;transition:background .15s var(--ease)}
.bs-btn:hover{background:var(--navy-deep)}
.bs-btn.ghost{background:transparent;color:var(--ink-60);border:1px solid var(--line)}
.bs-btn.ghost:hover{background:var(--pale)}

/* ── play ── */
.bs-play{max-width:520px;margin:0 auto;padding:14px max(14px,env(safe-area-inset-left))
  calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.bs-hud{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-40)}
.bs-hud b{color:var(--navy);font-variant-numeric:tabular-nums}
.bs-kept{margin-left:auto}
.bs-quit{background:none;border:0;color:var(--ink-25);font:inherit;font-size:13px;cursor:pointer;
  text-decoration:underline;padding:6px}
.bs-deck{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--pale);box-shadow:var(--shadow-2)}
.bs-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center;will-change:transform,opacity;
  touch-action:pan-y;cursor:grab}
.bs-card.gone{transition:transform .32s var(--ease),opacity .32s var(--ease)}
.bs-meta{background:linear-gradient(to top,rgba(2,27,87,.86),rgba(2,27,87,0));
  color:#fff;padding:34px 18px 16px}
.bs-name{font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.bs-sub{font-size:12.5px;opacity:.8;margin-top:4px}
.bs-stamp{position:absolute;top:20px;font-size:26px;font-weight:800;letter-spacing:.06em;
  padding:8px 16px;border:3px solid;border-radius:8px;opacity:0;transform:rotate(-11deg);
  pointer-events:none;text-transform:uppercase}
.bs-stamp.y{left:18px;color:#1c8b62;border-color:#1c8b62}
.bs-stamp.n{right:18px;color:#D8442A;border-color:#D8442A}
.bs-controls{display:flex;gap:16px;justify-content:center}
.bs-no,.bs-yes{width:70px;height:70px;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:27px;cursor:pointer;box-shadow:var(--shadow-1);
  transition:transform .1s var(--ease),background .15s}
.bs-no{color:#D8442A}.bs-yes{color:#1c8b62}
.bs-no:hover{background:#FFF3F1}.bs-yes:hover{background:#EFFAF5}
.bs-no:active,.bs-yes:active{transform:scale(.92)}
.bs-hint{text-align:center;font-size:12px;color:var(--ink-25);margin:0}

/* ── result ── */
.bs-read{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.bs-line{display:flex;gap:12px;align-items:baseline;font-size:16.5px;line-height:1.5;
  background:var(--pale);border-radius:var(--r-s);padding:13px 15px;color:var(--ink)}
.bs-line b{color:var(--navy);white-space:nowrap}
.bs-h4{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--cyan-text);
  margin:0 0 12px;font-weight:600}
.bs-keptbox{margin-bottom:26px}
.bs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.bs-tile{position:relative;aspect-ratio:4/3;border-radius:var(--r-s);overflow:hidden;
  background-size:cover;background-position:center;text-decoration:none;display:block}
.bs-tile span{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;color:#fff;
  font-size:11.5px;font-weight:600;line-height:1.2;
  background:linear-gradient(to top,rgba(2,27,87,.9),rgba(2,27,87,0))}
.bs-honest{font-size:14px;line-height:1.6;color:var(--ink-25);
  border-top:1px solid var(--line-2);padding-top:20px;margin:0 0 24px}
.bs-actions{display:flex;flex-wrap:wrap;gap:10px}

/* three-state controls — the middle button is deliberately smaller than the outer two */
.bs-maybe{width:58px;height:58px;align-self:center;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:22px;font-weight:700;color:var(--ink-40);cursor:pointer;
  box-shadow:var(--shadow-1);transition:transform .1s var(--ease),background .15s}
.bs-maybe:hover{background:var(--pale);color:var(--navy)}
.bs-maybe:active{transform:scale(.92)}
.bs-price{position:absolute;top:14px;right:14px;background:rgba(2,27,87,.9);color:#fff;
  padding:7px 12px;border-radius:100px;font-size:14px;font-weight:700}
.bs-stale{position:absolute;top:14px;left:14px;background:var(--orange);color:#fff;
  padding:6px 11px;border-radius:100px;font-size:11.5px;font-weight:600}