/* The vendor pages (T-141) — the portal and the sign-up form.
   Self-contained, like every hub module here (no site dependencies), so the pair can be
   dropped into another brand or sold on its own. The sign-up page links this same file. */
:root{
  --bg:#faf7f2; --panel:#fff; --line:#e8e0d4; --ink:#2b2622; --dim:#6b6259;
  --teal:#1f6f5c; --teal-d:#175646; --gold:#c79350; --warn:#8a6f2e;
  --radius:12px; --shadow:0 1px 2px rgba(43,38,34,.05),0 8px 24px rgba(43,38,34,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--teal-d)}
.vh-top{display:flex;align-items:center;gap:16px;padding:14px 20px;background:#fff;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.vh-brand{font-weight:800;letter-spacing:.02em}
.vh-back{color:var(--dim);text-decoration:none;font-size:.9rem}
.vh-back:hover{color:var(--ink)}
main{max-width:720px;margin:0 auto;padding:28px 20px 64px}
h1{font-size:1.7rem;line-height:1.25;margin:0 0 6px}
h2{font-size:1.1rem;margin:26px 0 8px}
.lede{color:var(--dim);margin:0 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
label{display:block;font-size:.86rem;font-weight:600;margin:14px 0 4px}
label .opt{font-weight:400;color:var(--dim)}
input,select,textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
.btn{background:var(--teal);color:#fff;border:0;border-radius:9px;padding:11px 18px;
  font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:var(--teal-d)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:default}
.msg{font-size:.9rem;color:var(--dim);margin-left:10px}
.msg.bad{color:#a33}
.msg.good{color:var(--teal-d)}
.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.76rem;font-weight:700;
  border:1px solid var(--line);color:var(--dim);background:#fff;vertical-align:middle}
.pill.live{color:var(--teal-d);border-color:var(--teal)}
.pill.pending{color:var(--warn);border-color:var(--gold)}
.note{background:#fdf8ee;border-left:3px solid var(--gold);padding:12px 16px;
  border-radius:0 var(--radius) var(--radius) 0;margin:16px 0;font-size:.94rem}
.note p{margin:0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 0}
.tabs button{background:transparent;border:1px solid var(--line);border-radius:20px;
  padding:7px 15px;font:inherit;font-size:.9rem;cursor:pointer;color:var(--dim)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.tabs button[disabled]{opacity:.45;cursor:default}
.fine{font-size:.85rem;color:var(--dim)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }

/* ── The mention-ad format ────────────────────────────────────────────────────
   COPIED VERBATIM from app/lib/mentions.js MENTION_CSS, so the preview a sponsor sees
   while buying is the format a reader gets. test:mentions fails if the two drift —
   a preview that flatters the real thing is a promise we did not keep.
   ── begin MENTION_CSS ── */
.mention{margin:22px 0;padding:0 0 0 14px;border-left:3px solid var(--gold,#c79350);}
.mention-label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:#7a7168;margin-bottom:4px;}
.mention-copy{display:block;font-size:1.05rem;line-height:1.55;color:inherit;}
.mention-copy strong{font-weight:800;}
.mention-a{text-decoration:none;color:inherit;display:block;}
.mention-a:hover .mention-copy strong{text-decoration:underline;text-underline-offset:3px;}
/* ── end MENTION_CSS ── */