/* Wholesale Buyer List — sign-up surface.
   Token values are the approved brand package's
   assets/brand/WBL-Developer-Package/WBL-Developer-Package/brand/tokens.css,
   copied here so the published directory is self-contained. */
:root {
  --blue: #124da0;
  --blue-dark: #0b2854;
  --orange: #f58220;
  --ink: #13233d;
  --muted: #52627b;
  --paper: #f4f6fa;
  --line: #dce3ed;
  --white: #fff;
  --success: #14663e;
  --danger: #b42318;
  --radius: 16px;
  --radius-sm: 8px;
  --font: Arial, Helvetica, sans-serif;
  --shadow: 0 12px 35px rgba(11, 40, 84, 0.07);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/24px var(--font);
}

.wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }

header.hero {
  background: var(--blue-dark);
  color: var(--white);
  padding: 32px 16px;
}
header.hero .wrap { padding-bottom: 8px; }
header.hero img { width: 240px; max-width: 70vw; height: auto; display: block; }
header.hero h1 { font-size: 43px; line-height: 46px; margin: 24px 0 8px; }
header.hero p { color: #cfdbec; margin: 0 0 16px; max-width: 46rem; }
@media (min-width: 701px) {
  header.hero h1 { font-size: 52px; line-height: 56px; }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-top: 24px;
}
.card h2 { font-size: 29px; line-height: 35px; margin: 0 0 4px; }
.card > p.hint { color: var(--muted); margin: 0 0 16px; }

fieldset { border: 0; margin: 0 0 24px; padding: 0; }
legend { font-weight: bold; font-size: 16px; padding: 0; margin-bottom: 8px; }
.q { color: var(--muted); margin: 0 0 12px; }

label { display: block; font-size: 12px; line-height: 18px; font-weight: bold; margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
select[multiple] { min-height: 150px; }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 701px) { .grid.two { grid-template-columns: 1fr 1fr; } }

.options { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 701px) { .options { grid-template-columns: 1fr 1fr; } }
.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
}
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }

.consent { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px; }
.consent .opt { border: 0; padding: 0; font-weight: bold; }
.consent .disclosure { color: var(--muted); font-size: 14px; line-height: 21px; margin: 8px 0 0; }
.consent ul.disclosure { padding-left: 22px; }
.consent ul.disclosure li { margin: 0 0 4px; }

:is(input, select, button, a):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

button.primary {
  min-height: 48px;
  padding: 12px 24px;
  font: inherit;
  font-weight: bold;
  color: var(--ink);
  background: var(--orange);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
button.primary[disabled] { opacity: 0.6; cursor: progress; }

.status { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-sm); display: none; }
.status[data-state="loading"] { display: block; background: #eef3fb; color: var(--blue-dark); }
.status[data-state="error"] { display: block; background: #fdeceb; color: var(--danger); border: 1px solid var(--danger); }
.status[data-state="success"] { display: block; background: #e9f4ee; color: var(--success); border: 1px solid var(--success); }
.field-error { color: var(--danger); font-size: 14px; font-weight: normal; margin: 4px 0 0; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

footer.site { border-top: 1px solid var(--line); margin-top: 24px; }
footer.site .wrap { padding: 24px 16px; color: var(--muted); font-size: 14px; line-height: 21px; }
footer.site a { color: var(--blue); }

.legal { background: var(--white); }
.legal .wrap { max-width: 720px; }
.legal h1 { font-size: 35px; line-height: 39px; }
.legal-source { color: var(--muted); font-size: 14px; line-height: 21px; margin: 0 0 4px; }
.legal-body h2 { font-size: 19px; line-height: 25px; margin: 28px 0 8px; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px; padding-left: 22px; }
.legal-body li { margin: 0 0 6px; }