/* ---- Brand typeface ----
   Montserrat, the Bold Insight brand face, used platform wide.

   Self-hosted rather than loaded from Google's CDN on purpose: these pages
   collect health answers from EU participants, and hotlinking fonts.gstatic.com
   sends every visitor's IP address to a third party, which is a GDPR problem the
   app does not need. Variable font, so one 35KB file covers every weight. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-var.woff2") format("woff2");
}

/* ---- Design tokens (Bold Insight brand palette) ---- */
:root {
  --blue: #2F53AC;
  --blue-dark: #284792;
  --blue-light: #00BBE7;
  /* Button shades. Light blue is too pale for white text (2.3:1), so solid
     buttons pair it with dark text; outline buttons need the darker tint to
     stay legible against white. */
  --btn-bg: #00BBE7;
  --btn-bg-hover: #009fc4;
  --btn-ink: #062831;
  --btn-outline-ink: #007a96;
  --green: #73C06D;
  --purple: #3B2B6F;
  --pink: #A0036C;
  --yellow: #F0C808;
  --red: #A62325;
  --orange: #EE7008;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --muted: #6b7280;
  --bg-soft: #f9fafb;
  --text: #111827;
  --text-secondary: #6b7280;
}

body {
  color: var(--text);
  background: #fff;
  /* Montserrat is the Bold Insight brand face, used platform wide so the app
     matches boldinsight.com. Self-hosted; see the @font-face above.
     The fallbacks matter: font-display is swap, so the first paint uses
     Helvetica/Arial and any metric difference shows as a reflow. */
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Bootstrap primary/link re-theme (Bootstrap's compiled CSS bakes
   .btn-primary/.btn-outline-primary colors into local --bs-btn-* vars per
   rule, so --bs-primary alone doesn't reach them; both layers are set here) ---- */
:root {
  --bs-primary: var(--blue);
  --bs-primary-rgb: 47, 83, 172;
  --bs-link-color-rgb: 47, 83, 172;
  --bs-link-hover-color-rgb: 40, 71, 146;
}

.btn-primary {
  --bs-btn-color: var(--btn-ink);
  --bs-btn-bg: var(--btn-bg);
  --bs-btn-border-color: var(--btn-bg);
  --bs-btn-hover-color: var(--btn-ink);
  --bs-btn-hover-bg: var(--btn-bg-hover);
  --bs-btn-hover-border-color: var(--btn-bg-hover);
  --bs-btn-active-color: var(--btn-ink);
  --bs-btn-active-bg: var(--btn-bg-hover);
  --bs-btn-active-border-color: var(--btn-bg-hover);
  --bs-btn-disabled-color: var(--btn-ink);
  --bs-btn-disabled-bg: var(--btn-bg);
  --bs-btn-disabled-border-color: var(--btn-bg);
  --bs-btn-focus-shadow-rgb: 0, 187, 231;
}

.btn-outline-primary {
  --bs-btn-color: var(--btn-outline-ink);
  --bs-btn-border-color: var(--btn-outline-ink);
  --bs-btn-hover-color: var(--btn-ink);
  --bs-btn-hover-bg: var(--btn-bg);
  --bs-btn-hover-border-color: var(--btn-bg);
  --bs-btn-active-color: var(--btn-ink);
  --bs-btn-active-bg: var(--btn-bg);
  --bs-btn-active-border-color: var(--btn-bg);
  --bs-btn-disabled-color: var(--btn-outline-ink);
  --bs-btn-disabled-border-color: var(--btn-outline-ink);
  --bs-btn-focus-shadow-rgb: 0, 187, 231;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(47, 83, 172, .5);
  box-shadow: 0 0 0 .25rem rgba(47, 83, 172, .25);
}

.form-check-input:checked {
  background-color: var(--blue);
  border-color: var(--blue);
}

/* ---- Buttons ----
   Bootstrap ships .btn at font-weight 400, which reads thin in Montserrat.
   Applies to every button and .btn-styled link across the app. */
.btn {
  font-weight: 600;
}

/* ---- App header (top bar) ---- */
.app-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
}

.app-header .navbar-brand {
  font-weight: 600;
  font-size: 0.9375rem;
}

.brand-logo {
  width: 125px;
  height: auto;
  display: block;
}

.brand-app-name {
  color: var(--text);
  border-left: 1px solid var(--border-strong);
  padding-left: 14px;
  line-height: 1;
}

.brand-app-name:hover {
  color: var(--blue);
}

/* ---- Tab navigation bar ---- */
.app-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.nav-underline-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-underline-tabs::-webkit-scrollbar { display: none; }

.nav-underline-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s;
}

.nav-underline-tabs .nav-link.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: none;
}

.nav-underline-tabs .nav-link:hover:not(.active) {
  color: var(--text);
  border-bottom-color: var(--border-strong);
  background: none;
  text-decoration: none;
}

.nav-count {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 3px;
  font-weight: 400;
}

/* ---- Cards ---- */
.card {
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  border-radius: 8px;
}

.card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--border);
}

.card .form-label,
.card label {
  font-weight: 600;
  color: #344054;
}

/* ---- Filter toolbar ---- */
.filter-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 0.8125rem;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s;
}

.filter-btn:hover {
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
}

.filter-btn.active-filter {
  background: #e2e7f3;
  border-color: #c1cbe6;
  color: var(--blue);
}

.filter-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  min-width: 160px;
  max-width: 220px;
  flex: 0 1 220px;
}

.filter-search-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,83,172,0.08);
}

.filter-search-wrap svg { flex-shrink: 0; color: var(--muted); }

.filter-search-wrap input {
  border: none;
  outline: none;
  font-size: 0.8125rem;
  color: var(--text);
  width: 100%;
  padding: 0;
  background: transparent;
}

.filter-search-wrap input::placeholder { color: var(--muted); }

/* ---- Participant table ---- */
.participant-table thead th {
  color: #374151;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

.participant-table td {
  white-space: nowrap;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  padding: 10px 12px;
}

.participant-table tbody tr:hover td { background: #fafafa; }
.participant-table tbody tr:last-child td { border-bottom: none; }

/* Participant name + subtitle cell */
.participant-name {
  font-weight: 600;
  color: var(--text);
  display: block;
}

.participant-subtitle {
  font-size: 0.73rem;
  color: var(--muted);
  display: block;
  margin-top: 1px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Status badges (flat, UserInterviews-style) ---- */
.badge-qualified, .badge-reliable {
  background: #ebf6eb !important;
  color: #4b7d47 !important;
  border: none !important;
}

.badge-completed, .badge-paid {
  background: #e2e7f3 !important;
  color: #1f3670 !important;
  border: none !important;
}

.badge-dnc, .badge-removed, .badge-disqualified, .badge-no-show {
  background: #f3e0e0 !important;
  color: #6c1718 !important;
  border: none !important;
}

.badge-neutral, .badge-unknown {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: none !important;
}

.badge-warning-soft {
  background: #fdf7dc !important;
  color: #9c8205 !important;
  border: none !important;
}

/* ---- Pagination ---- */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 8px;
}

.table-pagination .page-numbers {
  display: flex;
  align-items: center;
  gap: 2px;
}

.table-pagination .page-numbers a,
.table-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.1s;
}

.table-pagination .page-numbers a:hover {
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
}

.table-pagination .page-numbers .current-page {
  background: var(--blue);
  color: #fff !important;
  border-color: var(--blue);
  font-weight: 600;
}

.table-pagination .page-numbers .page-ellipsis {
  color: var(--muted);
  border: none;
}

/* ---- Form section labels (inside card) ---- */
.form-section {
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.form-section.form-section-first {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.form-section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Inline checkbox group */
.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.check-item input[type="checkbox"] {
  flex-shrink: 0;
}

.check-item label {
  margin: 0;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text);
}

/* ---- Collapsible layout helpers ---- */
.narrow { width: min(720px, 100%); margin: 0 auto; }

.panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
}

.grid.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.title-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }

h1, h2, h3 { line-height: 1.2; }
h1 { margin: 0 0 20px; }
h2 { margin-top: 0; font-size: 20px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 650; margin-bottom: 5px; }
.checkbox label { display: inline; font-weight: 500; }

/* ---- Choice groups (radio / multi-checkbox) ----
   One visible option per line instead of a dropdown, the style the screener
   preview already used for yes/no questions. Applied to the intake demographics
   too so the whole platform asks a choice question the same way.

   The wrapper class comes from the templates, not the widget: Django copies
   widget attrs onto every option <input> as well as the group container, so a
   class set there would land on each radio.

   fieldset/legend need resetting because the browser defaults (indent, border,
   float behaviour) fight the surrounding form layout. */
.field-legend {
  display: block;
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
}

.choice-group > div {
  margin-bottom: 2px;
}

/* Django renders each option as <label><input> Text</label>, so the label is the
   whole clickable row. It has to override .field label's block display and bold
   weight, which are meant for the question, not the answers. */
.choice-group label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
  padding: 5px 0;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
}

/* Sized up from the browser default 13px. A 20px target is comfortably clickable
   and matches the visual weight of the 16px option text next to it.

   width/height/margin carry !important only because the global "Checkbox fix"
   block further down this file pins every checkbox to 16px with !important, so
   without it radios and checkboxes in the same group render at different sizes.
   Higher specificity is not enough to beat !important; matching it is. Dropping
   the global rule's !important would be the real fix, but it guards checkboxes
   across the whole staff tool, so that is a separate change. */
.choice-group input[type="radio"],
.choice-group input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
  /* Optical centring against a 1.45 line-height first line. */
  margin: 2px 0 0 !important;
  accent-color: var(--blue);
  cursor: pointer;
}

.choice-group input[type="radio"]:focus-visible,
.choice-group input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ---- Panel/narrow form elements ---- */
.panel input:not([type="checkbox"]),
.panel select,
.panel textarea,
.narrow input:not([type="checkbox"]),
.narrow select,
.narrow textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 10px;
  font: inherit;
}

input[type="checkbox"] { width: auto; margin-right: 6px; }

.panel button:not(.btn),
.narrow button:not(.btn),
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--btn-bg);
  border-radius: 0.375rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
}

.panel button:not(.btn):hover,
.narrow button:not(.btn):hover,
.button:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-ink);
  text-decoration: none;
}

.button.secondary, .secondary {
  background: #fff;
  color: var(--btn-outline-ink);
}

.button.secondary:hover, .secondary:hover {
  background: var(--bg-soft);
  color: var(--btn-ink);
}

/* ---- Misc components ---- */
.contact-methods .btn { min-width: 72px; }

.filter-empty-state {
  background: #f8fafc;
  border-style: dashed !important;
}

.filter-row {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.response-card { background: #fff; }
.response-card th { color: #344054; font-weight: 600; white-space: normal; }
.response-card td { white-space: normal; }

.pill { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; margin: 0 4px 4px 0; font-size: 13px; }
.muted, small { color: var(--muted); }
/* Validation errors ("This field is required.") must be easy to spot on a failed
   submit: red and bold. The checkbox branch of _form_fields.html nests the error
   in a <small>, which would otherwise pick up the grey `small` rule above and
   shrink, so re-assert red/bold/full-size on the nested element too. */
.error { color: var(--red); font-size: 14px; font-weight: 700; }
.error small { color: var(--red); font-weight: 700; font-size: inherit; }
.messages { border-left: 4px solid var(--blue); padding: 8px 14px; background: var(--bg-soft); margin-bottom: 20px; }
article.item { border-top: 1px solid var(--border); padding: 12px 0; }
.question-block { border-bottom: 1px solid var(--border); padding: 14px 0; }
.pagination { margin: 18px 0; display: flex; gap: 16px; align-items: center; }

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .site-header, .title-row { align-items: flex-start; flex-direction: column; }
  .grid.two { grid-template-columns: 1fr; }
  .filter-toolbar { gap: 4px; }
}

/* ---- Clickable profile values and collapsible history ---- */
.clickable-row { cursor: pointer; }

.chevron-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.75rem;
}

.clickable-row[aria-expanded="true"] .chevron-icon {
  transform: rotate(90deg);
}

/* ---- Checkbox fix ---- */
.checkbox {
  display: flex !important;
  /* flex-start, not center: a consent label that wraps to two lines (e.g. the
     voluntary-participation tick on the intake form) would otherwise float the
     box in the vertical middle of the block instead of by the first line. */
  align-items: flex-start !important;
  /* The wrapper also carries Bootstrap's .form-check, whose padding-left: 1.5em
     indented these rows to the right of every other field (the radio groups use
     .choice-group and have no such indent). Zero it so the boxes line up with
     the questions and inputs above them. */
  padding-left: 0 !important;
}

/* Nudge the box down to sit on the first line's text rather than its top edge.
   Overrides the margin-top:0 from the global input rule below via specificity. */
.checkbox input[type="checkbox"] {
  margin-top: 2px !important;
}

input[type="checkbox"] {
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
}

.checkbox label {
  display: inline-block !important;
  font-weight: 500;
  margin: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer;
}

/* ---- Tom Select sizing ---- */
/* Strip Bootstrap's visual chrome from the wrapper (border, padding, arrow)
   so only .ts-control renders them, then pin .ts-control to Bootstrap's form-control height. */
.ts-wrapper.form-select,
.ts-wrapper.form-control {
  padding: 0 !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
}

.ts-wrapper.single .ts-control {
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.375rem !important;
}

.ts-wrapper.single .ts-control input {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* ---- Participants hub: segments sidebar ---- */
.hub-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.hub-main {
  flex: 1 1 auto;
  min-width: 0; /* lets the responsive table shrink instead of overflowing the flex row */
}

.segments-sidebar {
  flex: 0 0 232px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  position: sticky;
  top: 106px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

.segment-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  text-decoration: none;
}

.segment-link:hover {
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
}

.segment-link.active {
  background: #e2e7f3;
  color: var(--blue);
  font-weight: 600;
}

.segment-link .nav-count { margin-left: auto; }

.segment-empty {
  display: block;
  padding: 4px 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.segments-group {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.segments-group-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
  padding: 0 8px;
}

.segments-group-title a {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
}

@media (max-width: 991px) {
  .hub-layout { flex-direction: column; }
  .segments-sidebar {
    position: static;
    width: 100%;
    flex: none;
    max-height: none;
  }
}

/* ---- Study recruiting funnel strip ---- */
.funnel-strip {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-soft);
  overflow-x: auto;
}

.funnel-stage {
  flex: 1 1 0;
  min-width: 84px;
  text-align: center;
  padding: 8px 10px;
}

.funnel-stage + .funnel-stage { border-left: 1px solid var(--border); }

.funnel-stage .funnel-label {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.funnel-stage .funnel-value {
  font-weight: 600;
  font-size: 0.95rem;
}

.funnel-stage-empty .funnel-value { color: var(--border-strong); }

.funnel-stage-meta { background: #fff; }

/* ---- Sortable table headers ---- */
.sort-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.sort-link:hover {
  color: var(--blue);
  text-decoration: none;
}

/* ---- Participant detail prev/next pager ---- */
.detail-pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.detail-pager .filter-btn.disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- Screener review verdict chips ---- */
.verdict-chip-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
  white-space: normal;
}

/* ---- Site footer (participant-facing pages) ----
   A deliberate pixel-match of the boldinsight.com footer. Every number below was
   measured off the live site with getComputedStyle rather than eyeballed, so
   treat them as data: changing one to "look better" makes this diverge from the
   marketing site, which is the whole point of the component.

   Only two bands remain. The marketing band above them (logo, contact, socials,
   newsletter and hiring CTAs, office and partner columns) was removed on request,
   along with its rules; the values below are the ones still in use.

   Measured 2026-07-31 at a 1295px viewport:
     font            Montserrat 500 / 600 / 700
     dark band       #000, padding 25px top / 20px bottom
     legal bar       WHITE background, BLACK text, 16px/600
     lead            20px/700 #06BBE6, line-height 24px
     city heading    17px/600
     body + address  16px/500, line-height 22.4px / 20.8px
     pill            white, radius 8px, 14px (600 here, see below)
     speech bubbles  133x133
     container       1184px */

.site-footer {
  /* Montserrat is inherited from body; only the footer's own metrics are set
     here, matching the live site rather than the app's usual rem scale. */
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
}

.footer-inner {
  max-width: 1184px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The buttons carried over from the marketing site. Squared-off 8px corners,
   not a full pill, and no shadow. The wide right padding is what leaves room
   for the chevron. */
.footer-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  color: #000;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 14px;
  /* The live site uses 500 here. 600 is a deliberate deviation, asked for so the
     button text reads more strongly; it is the only intentional difference from
     the measured values above. */
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
}

.footer-pill:hover {
  background: #06BBE6;
  color: #062831;
  text-decoration: none;
}

.footer-pill .chev {
  /* Matches the 30px right padding on the real button. */
  padding-left: 6px;
  opacity: 0.75;
}

/* Band 2: dark, addressed to participants. The vertical padding is more
   generous than the live site's 25/20, on request. */
.footer-suites {
  background: #000;
  color: #fff;
  padding: 48px 0 44px;
}

/* Three regions: the icon, the "research study?" intro with its FAQ button, and
   the suites block (heading + two office columns). */
.footer-suites-grid {
  display: grid;
  grid-template-columns: 133px minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
}

.footer-suites-intro .footer-pill {
  margin-top: 4px;
}

/* "Visit our research suites:" now heads the two office columns instead of
   sitting under the lead. */
.footer-suites-heading {
  font-size: 17px;
  font-weight: 600;
  line-height: 20.4px;
  margin: 0 0 16px;
}

.footer-suites-offices {
  display: grid;
  grid-template-columns: 247.2px 247.2px;
  gap: 32px;
  align-items: start;
}

/* The image carries its own #ededed circle and transparent corners, so no
   background or border-radius here. Rendered at its natural 133px, matching the
   live site. */
.footer-suites-icon {
  display: block;
  width: 133px;
  height: 133px;
}

.footer-suites-lead {
  color: #06BBE6;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 0 8px;
}

.footer-suites h2 {
  font-size: 17px;
  font-weight: 600;
  line-height: 20.4px;
  margin: 0 0 10px;
}

.footer-suites address {
  font-style: normal;
  line-height: 20.8px;
  margin: 0 0 18px;
}

.footer-suites a:not(.footer-pill) {
  color: #fff;
  text-decoration: none;
}

.footer-suites a:not(.footer-pill):hover {
  text-decoration: underline;
}

/* Band 3: legal bar. White, NOT black. The black strip visible above it is the
   bottom of the dark band; a low-resolution screenshot reads as white-on-black
   and it is an easy thing to get backwards. */
.footer-legal {
  background: #fff;
  color: #000;
  /* Tighter than the live site's 32px, on request. */
  padding: 10px 0;
  font-size: 16px;
  font-weight: 600;
}

.footer-legal-inner {
  max-width: 1184px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
}

.footer-legal a {
  color: #000;
  text-decoration: none;
}

.footer-legal a:hover {
  text-decoration: underline;
}

.footer-legal-mid {
  text-align: center;
}

@media (max-width: 980px) {
  .footer-suites-grid {
    grid-template-columns: 1fr;
  }

  .footer-suites-offices {
    grid-template-columns: 1fr;
  }

  .footer-legal-inner {
    justify-content: flex-start;
  }

  .footer-legal-mid {
    text-align: left;
  }
}

/* ---- Participant page heading ----
   Every participant-facing page (join, login, portal, screener) leads with a
   large, extra-bold title (40px / 800), per the recruiting team's spec. Named
   join-title for historical reasons; it is the shared participant page title. */
.join-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}

.join-intro {
  color: var(--text);
}

/* ---- Participant pages: no muted body text ----
   The recruiting team wants participant-facing copy in the same near-black as
   the rest of the page, not a muted grey. Scoped to <main.participant-page> so
   the footer's deliberately muted brand greys (measured off boldinsight.com)
   are untouched. Bootstrap's .text-secondary / .text-muted carry !important, so
   the override must too. */
.participant-page .text-secondary,
.participant-page .text-body-secondary,
.participant-page .text-muted {
  color: var(--text) !important;
}

/* Question help/description text. Bootstrap makes .form-text small and muted,
   and the form partials nest it in <small>, so it renders around 12px grey. For
   accessibility on the participant forms, keep it near-black and bump it up
   (the inner <small> inherits rather than shrinking again). */
.participant-page .form-text {
  color: var(--text);
  font-size: 0.95rem;
}

.participant-page .form-text small {
  font-size: inherit;
}

/* ---- Brand green button (black text) ----
   The confirm action uses the brand green with black text, per the palette,
   rather than Bootstrap's success green with white text. Re-themed through the
   same --bs-btn-* vars as .btn-primary above. */
.btn-brand-green {
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-color: var(--blue);
  --bs-btn-hover-bg: var(--green);
  --bs-btn-hover-border-color: var(--green);
  --bs-btn-active-color: var(--blue);
  --bs-btn-active-bg: var(--green);
  --bs-btn-active-border-color: var(--green);
}

/* ---- Ink outline button (black text, blue on hover) ----
   The profile "Update my information" action: black label in a neutral outline
   at rest, turning brand blue (text and border) on hover, rather than Bootstrap's
   filled-on-hover outline-primary. */
.btn-outline-ink {
  --bs-btn-color: var(--text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--blue);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--blue);
  --bs-btn-active-color: var(--blue);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--blue);
}

/* ---- Divider before the consent block ----
   A light rule that sets the consent checkboxes apart from the questions above
   them, matching the separator on the reference intake form. Not Bootstrap's
   faded <hr>: a full-opacity hairline in the same grey as the other borders. */
.form-divider {
  border: 0;
  border-top: 1px solid var(--border);
  opacity: 1;
  margin: 1.5rem 0 1.25rem;
}

/* ---- Beta note (staff pages still under active development) ----
   A quiet banner, not an error alert: light brand-blue wash with a solid pill
   badge, so it reads as "heads up" rather than "something is wrong". */
.beta-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue-light);
  border-radius: 8px;
  background: #f0fbfe;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.beta-note-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--btn-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Keep the footer at the bottom of short pages rather than floating mid-screen. */
.footer-sticky-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer-sticky-body > main {
  flex: 1 0 auto;
}

/* ---- Slim footer (internal staff pages) ----
   The staff tool gets the branding and the legal links only. Office addresses
   and participant-facing copy would be noise under a data table. */
.staff-footer {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 18px 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.staff-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.staff-footer img {
  width: 96px;
  height: auto;
  display: block;
}

.staff-footer .staff-footer-links {
  margin-left: auto;
  display: flex;
  gap: 14px;
}

.staff-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}

.staff-footer a:hover {
  color: var(--blue);
  text-decoration: underline;
}