/* =====================================================================
   BSMC Optimizing Health Intake — page styles
   Aligned to BSMC brand standard: navy primary, gold accent, teal headings.
   Mirrors the design language used on bsmc.org and the LTC Waitlist page.
   ===================================================================== */

:root {
  --bsmc-navy: #1A2744;
  --bsmc-navy-dark: #0F1A2E;
  --bsmc-gold: #C8922A;
  --bsmc-gold-light: #E2AE45;
  --bsmc-teal: #0A6B77;
  --bsmc-light-navy: #E8ECF2;
  --bsmc-cream: #FAF8F3;
  --bsmc-page-bg: #F3F1EC;
  --bsmc-border: #D5DCE5;
  --bsmc-stone: #2D3445;
  --bsmc-stone-light: #5A6478;
  --bsmc-error: #A8323C;
  --bsmc-white: #FFFFFF;
  --bsmc-radius: 4px;
  --bsmc-radius-lg: 6px;
  --bsmc-shadow-sm: 0 1px 3px rgba(26, 39, 68, 0.06);
  --bsmc-shadow-md: 0 4px 12px rgba(26, 39, 68, 0.08);
  --bsmc-font-display: Georgia, "Times New Roman", serif;
  --bsmc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bsmc-hero,
.bsmc-info-strip,
.bsmc-maf-callout,
.bsmc-eligibility,
.bsmc-form-section,
.bsmc-privacy-footer {
  font-family: var(--bsmc-font-body);
  color: var(--bsmc-stone);
  line-height: 1.6;
}

.bsmc-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

.bsmc-container-narrow {
  max-width: 880px;
}

/* ---------- Hero ---------- */
.bsmc-hero {
  background: var(--bsmc-navy);
  padding: 64px 0 56px;
  color: var(--bsmc-white);
  border-bottom: 3px solid var(--bsmc-gold);
}

.bsmc-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsmc-gold);
  margin-bottom: 14px;
}

.bsmc-hero-title {
  font-family: var(--bsmc-font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--bsmc-white);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.bsmc-hero-lede {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  max-width: 720px;
  margin: 0;
}

/* ---------- Form section ---------- */
.bsmc-form-section {
  background: var(--bsmc-page-bg);
  padding: 32px 0 64px;
}

.bsmc-form-frame {
  background: var(--bsmc-white);
  border: 1px solid var(--bsmc-border);
  border-radius: var(--bsmc-radius-lg);
  padding: 36px 36px 28px;
  box-shadow: var(--bsmc-shadow-md);
}

@media (max-width: 720px) {
  .bsmc-form-frame {
    padding: 24px 18px 20px;
  }
}

.bsmc-form-frame .entity-form,
.bsmc-form-frame .form-horizontal,
.bsmc-form-frame .webform-form {
  margin: 0;
}

.bsmc-form-frame h2,
.bsmc-form-frame h3,
.bsmc-form-frame legend {
  font-family: var(--bsmc-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bsmc-teal);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 8px;
}

.bsmc-form-frame h2::after,
.bsmc-form-frame h3::after,
.bsmc-form-frame legend::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--bsmc-gold);
  margin-top: 8px;
}

.bsmc-form-frame label,
.bsmc-form-frame .control-label {
  font-weight: 600;
  color: var(--bsmc-navy);
  font-size: 0.92rem;
  margin-bottom: 6px;
  display: block;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.bsmc-form-frame .form-control,
.bsmc-form-frame input[type="text"],
.bsmc-form-frame input[type="email"],
.bsmc-form-frame input[type="tel"],
.bsmc-form-frame input[type="number"],
.bsmc-form-frame input[type="date"],
.bsmc-form-frame select,
.bsmc-form-frame textarea {
  width: 100%;
  border: 1px solid var(--bsmc-border);
  border-radius: var(--bsmc-radius);
  padding: 10px 12px;
  font-size: 0.96rem;
  color: var(--bsmc-navy);
  background: var(--bsmc-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  box-sizing: border-box;
}

.bsmc-form-frame textarea {
  min-height: 110px;
  line-height: 1.55;
  resize: vertical;
}

.bsmc-form-frame .form-control:focus,
.bsmc-form-frame input:focus,
.bsmc-form-frame select:focus,
.bsmc-form-frame textarea:focus {
  outline: none;
  border-color: var(--bsmc-teal);
  box-shadow: 0 0 0 3px rgba(10, 107, 119, 0.12);
}

.bsmc-form-frame .help-block,
.bsmc-form-frame .info {
  font-size: 0.85rem;
  color: var(--bsmc-stone-light);
  margin-top: 6px;
  font-style: italic;
  line-height: 1.45;
}

.bsmc-form-frame .has-error .form-control {
  border-color: var(--bsmc-error);
}

.bsmc-form-frame .has-error .help-block,
.bsmc-form-frame .field-validation-error {
  color: var(--bsmc-error);
  font-style: normal;
}

.bsmc-form-frame .required > label::after,
.bsmc-form-frame .info.required::after {
  content: " *";
  color: var(--bsmc-error);
  font-weight: 700;
}

.bsmc-form-frame input[type="radio"],
.bsmc-form-frame input[type="checkbox"] {
  accent-color: var(--bsmc-teal);
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
}

.bsmc-form-frame .radio label,
.bsmc-form-frame .checkbox label {
  font-weight: 500;
  color: var(--bsmc-stone);
  display: inline-flex;
  align-items: center;
  margin-right: 18px;
}

.bsmc-form-frame .progress,
.bsmc-form-frame .webform-progress {
  background: var(--bsmc-light-navy);
  border-radius: var(--bsmc-radius);
  height: 6px;
  margin-bottom: 28px;
  overflow: hidden;
}

.bsmc-form-frame .progress-bar {
  background: var(--bsmc-gold);
  transition: width 0.3s ease;
}

.bsmc-form-frame .nav-pills,
.bsmc-form-frame .step-list,
.bsmc-form-frame .webform-progress-steps {
  display: flex;
  gap: 4px;
  background: var(--bsmc-white);
  padding: 8px;
  border-radius: var(--bsmc-radius-lg);
  border: 1px solid var(--bsmc-border);
  margin-bottom: 24px;
  list-style: none;
  overflow-x: auto;
}

.bsmc-form-frame .nav-pills > li,
.bsmc-form-frame .step-list > li {
  flex: 1;
  min-width: 110px;
}

.bsmc-form-frame .nav-pills > li > a,
.bsmc-form-frame .step-list > li > a {
  display: block;
  padding: 10px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bsmc-stone-light);
  text-align: center;
  text-decoration: none;
  border-radius: var(--bsmc-radius);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.bsmc-form-frame .nav-pills > li.active > a,
.bsmc-form-frame .step-list > li.active > a {
  background: var(--bsmc-navy);
  color: var(--bsmc-gold);
}

.bsmc-form-frame .actions,
.bsmc-form-frame .form-actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--bsmc-border);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.bsmc-form-frame .btn,
.bsmc-form-frame .btn-primary,
.bsmc-form-frame input[type="submit"],
.bsmc-form-frame button[type="submit"],
.bsmc-form-frame .button.next {
  background: var(--bsmc-navy);
  color: var(--bsmc-gold);
  border: 1px solid var(--bsmc-navy);
  border-radius: var(--bsmc-radius);
  padding: 11px 26px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  letter-spacing: 0.04em;
}

.bsmc-form-frame .btn:hover,
.bsmc-form-frame input[type="submit"]:hover,
.bsmc-form-frame button[type="submit"]:hover,
.bsmc-form-frame .button.next:hover {
  background: var(--bsmc-navy-dark);
  color: var(--bsmc-gold-light);
  transform: translateY(-1px);
}

.bsmc-form-frame .button.submit,
.bsmc-form-frame input[type="submit"].submit,
.bsmc-form-frame button.submit {
  background: var(--bsmc-gold);
  color: var(--bsmc-navy);
  border: 1px solid var(--bsmc-gold);
  text-transform: uppercase;
  padding: 12px 30px;
  letter-spacing: 0.06em;
}

.bsmc-form-frame .button.submit:hover {
  background: var(--bsmc-gold-light);
  color: var(--bsmc-navy);
  border-color: var(--bsmc-gold-light);
}

.bsmc-form-frame .button.previous,
.bsmc-form-frame .btn-default {
  background: var(--bsmc-white);
  color: var(--bsmc-navy);
  border: 1px solid var(--bsmc-navy);
}

.bsmc-form-frame .button.previous:hover,
.bsmc-form-frame .btn-default:hover {
  background: var(--bsmc-light-navy);
  color: var(--bsmc-navy);
  border-color: var(--bsmc-navy);
}

.bsmc-form-frame .alert-success,
.bsmc-form-frame .success-message {
  background: var(--bsmc-cream);
  border-left: 4px solid var(--bsmc-gold);
  color: var(--bsmc-stone);
  padding: 22px 26px;
  border-radius: var(--bsmc-radius);
  font-size: 1rem;
  line-height: 1.6;
}

.bsmc-form-frame .alert-success h2,
.bsmc-form-frame .alert-success h3,
.bsmc-form-frame .success-message h2,
.bsmc-form-frame .success-message h3 {
  color: var(--bsmc-teal);
}

/* ---------- Privacy footer ---------- */
.bsmc-privacy-footer {
  background: var(--bsmc-cream);
  padding: 28px 0;
  border-top: 1px solid var(--bsmc-border);
}

.bsmc-privacy-text {
  font-size: 0.86rem;
  color: var(--bsmc-stone-light);
  text-align: center;
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.6;
}

/* =====================================================================
   LTC Waitlist — eligibility section styles (used by /long-term-care)
   ===================================================================== */
.bsmc-eligibility {
  background: var(--bsmc-white);
  padding: 36px 0 12px;
}

.bsmc-eligibility-card {
  background: var(--bsmc-white);
  border: 1px solid var(--bsmc-border);
  border-radius: var(--bsmc-radius-lg);
  padding: 28px 32px;
  box-shadow: var(--bsmc-shadow-sm);
}

@media (max-width: 720px) {
  .bsmc-eligibility-card { padding: 22px 20px; }
}

.bsmc-eligibility-card h2 {
  font-family: var(--bsmc-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bsmc-teal);
  margin: 0 0 4px;
}

.bsmc-eligibility-card h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--bsmc-gold);
  margin: 8px 0 18px;
}

.bsmc-eligibility-item {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bsmc-border);
}

.bsmc-eligibility-item:last-of-type {
  border-bottom: none;
}

.bsmc-eligibility-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bsmc-navy);
  color: var(--bsmc-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bsmc-font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.bsmc-eligibility-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--bsmc-navy);
  margin: 0 0 4px;
  line-height: 1.4;
}

.bsmc-eligibility-body {
  font-size: 0.9rem;
  color: var(--bsmc-stone-light);
  line-height: 1.55;
  margin: 0;
}

.bsmc-callout-questions {
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--bsmc-cream);
  border-left: 4px solid var(--bsmc-gold);
  font-size: 0.9rem;
  color: var(--bsmc-navy);
  border-radius: 0 var(--bsmc-radius) var(--bsmc-radius) 0;
}

.bsmc-callout-questions strong {
  color: var(--bsmc-navy);
}

/* =====================================================================
   Form rendering fixes  (added after live review)
   ===================================================================== */

/* --- 1. Stray "hamburger" of gold dashes -----------------------------
   Power Pages emits a heading element for every form section even when the
   section label is blank. Combined with the 40x2px gold ::after accent that
   produced a stack of short gold bars that reads as a stray hamburger icon.
   Drop the accent inside the form frame and collapse blank headings.
   The eligibility card keeps its accent (its headings have real text).      */
.bsmc-form-frame h2::after,
.bsmc-form-frame h3::after,
.bsmc-form-frame legend::after {
  content: none;
  display: none;
}

.bsmc-form-frame h2:empty,
.bsmc-form-frame h3:empty,
.bsmc-form-frame legend:empty,
.bsmc-form-frame .section-title:empty {
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- 2. Checkbox / statement alignment -------------------------------
   Short labels sat inline with the box while long labels wrapped and pushed
   the box onto its own line underneath. Force a two-column row: control in
   column one, statement in column two, both top-aligned so the box lines up
   with the FIRST line of text no matter how many lines it wraps to.         */
.bsmc-form-frame .checkbox,
.bsmc-form-frame .form-check,
.bsmc-form-frame .control:has(> input[type="checkbox"]),
.bsmc-form-frame .cell:has(> .control > input[type="checkbox"]) > .control {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.bsmc-form-frame .checkbox > input[type="checkbox"],
.bsmc-form-frame .form-check > input[type="checkbox"],
.bsmc-form-frame .control > input[type="checkbox"] {
  order: -1;                 /* box always leads, whatever the source order */
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0.15em 0 0;        /* optical alignment to the first text line */
}

/* Undo the inline-flex/centre rule above so wrapped statements read as a
   normal block of text beside the box rather than a centred inline run.     */
.bsmc-form-frame .checkbox > label,
.bsmc-form-frame .form-check > label,
.bsmc-form-frame .control > input[type="checkbox"] + label {
  order: 0;
  display: block;
  flex: 1 1 auto;
  margin: 0;
  margin-right: 0;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bsmc-stone);
  cursor: pointer;
}

/* Fallback for engines without :has() — keeps box and text on one row. */
@supports not (selector(:has(*))) {
  .bsmc-form-frame .control > input[type="checkbox"] { float: left; margin-right: 0.75rem; }
  .bsmc-form-frame .control > input[type="checkbox"] + label { display: block; overflow: hidden; }
}

/* Generous hit area without enlarging the glyph (WCAG 2.5.8). */
.bsmc-form-frame .checkbox,
.bsmc-form-frame .form-check {
  padding: 0.25rem 0;
  min-height: 24px;
}

.bsmc-form-frame input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--bsmc-navy);
  outline-offset: 2px;
}

/* =====================================================================
   Checkbox alignment — CORRECTED.
   The Dataverse form uses celllabelposition="Top", so Power Pages emits the
   label and the input as SEPARATE sibling divs inside the cell:
       <div class="info"><label>statement</label></div>
       <div class="control"><input type="checkbox"></div>
   The earlier attempt flexed .control (which contains only the input) and so
   changed nothing. The CELL is the flex container; the two children get
   explicit order so the box always leads and the statement sits beside it,
   top-aligned regardless of how many lines it wraps to.
   ===================================================================== */
.bsmc-form-frame .cell:has(input[type="checkbox"]),
.bsmc-form-frame td:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.35rem 0;
}

.bsmc-form-frame .cell:has(input[type="checkbox"]) > .control,
.bsmc-form-frame td:has(input[type="checkbox"]) > .control {
  order: -1;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}

.bsmc-form-frame .cell:has(input[type="checkbox"]) > .info,
.bsmc-form-frame td:has(input[type="checkbox"]) > .info {
  order: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  text-align: left;
  width: auto;
}

.bsmc-form-frame .cell:has(input[type="checkbox"]) > .info > label,
.bsmc-form-frame td:has(input[type="checkbox"]) > .info > label {
  display: block;
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bsmc-stone);
  cursor: pointer;
  text-align: left;
}

.bsmc-form-frame .cell:has(input[type="checkbox"]) input[type="checkbox"],
.bsmc-form-frame td:has(input[type="checkbox"]) input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0.2em 0 0;
  flex: 0 0 auto;
}

/* =====================================================================
   READABILITY & MOBILE — shared by both intake sites.
   Audience skews older (LTC applicants and their adult children), and both
   forms are long. Bootstrap's 16px base is too small here, so body copy and
   every form control step up. Inputs are >=16px specifically so iOS does not
   zoom the viewport on focus, which is what makes long mobile forms painful.
   Targets stay >=44px (WCAG 2.5.8). No colour changes - contrast unchanged.
   ===================================================================== */

.bsmc-hero-lede            { font-size: 1.2rem; line-height: 1.65; }
.bsmc-eligibility-body,
.bsmc-info-card p,
.bsmc-step-card p,
.bsmc-about-card p,
.bsmc-privacy-text,
.bsmc-maf-text             { font-size: 1.0625rem; line-height: 1.65; }
.bsmc-eligibility-title,
.bsmc-info-label,
.bsmc-step-card h3,
.bsmc-about-card h3        { font-size: 1.15rem; }
.bsmc-about-strip p        { font-size: 1.0625rem; }

/* ---- Form: labels, inputs, choices ---- */
.bsmc-form-frame label,
.bsmc-form-frame .control-label,
.bsmc-form-frame .info label { font-size: 1.0625rem; line-height: 1.5; }

.bsmc-form-frame input[type="text"],
.bsmc-form-frame input[type="email"],
.bsmc-form-frame input[type="tel"],
.bsmc-form-frame input[type="number"],
.bsmc-form-frame input[type="date"],
.bsmc-form-frame select,
.bsmc-form-frame textarea {
  font-size: 1.0625rem;      /* >=16px: prevents iOS zoom-on-focus */
  line-height: 1.5;
  min-height: 48px;
  padding: 10px 12px;
}
.bsmc-form-frame textarea { min-height: 110px; }

/* Bigger tick targets for the acknowledgment checkboxes */
.bsmc-form-frame input[type="checkbox"],
.bsmc-form-frame input[type="radio"] { width: 22px; height: 22px; }
.bsmc-form-frame .cell:has(input[type="checkbox"]),
.bsmc-form-frame td:has(input[type="checkbox"]) { min-height: 44px; padding: .5rem 0; }

/* Buttons: full-size targets, readable labels */
.bsmc-form-frame input[type="submit"],
.bsmc-form-frame button,
.bsmc-btn-primary,
.bsmc-btn-secondary {
  font-size: 1.0625rem;
  min-height: 48px;
  padding: 12px 28px;
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  .bsmc-hero { padding: 40px 0 32px; }
  .bsmc-hero-title { font-size: 2rem; line-height: 1.15; }
  .bsmc-hero-lede { font-size: 1.0625rem; }
  .bsmc-container { padding: 0 18px; }
  .bsmc-form-frame { padding: 20px 16px; }
  .bsmc-eligibility-card { padding: 22px 18px; }

  /* Stack every form row and let controls fill the width */
  .bsmc-form-frame .cell,
  .bsmc-form-frame td { display: block; width: 100% !important; }
  .bsmc-form-frame input[type="text"],
  .bsmc-form-frame input[type="email"],
  .bsmc-form-frame input[type="tel"],
  .bsmc-form-frame input[type="number"],
  .bsmc-form-frame input[type="date"],
  .bsmc-form-frame select,
  .bsmc-form-frame textarea { width: 100% !important; }

  /* Checkbox rows must stay two-column so the box sits beside its statement */
  .bsmc-form-frame .cell:has(input[type="checkbox"]),
  .bsmc-form-frame td:has(input[type="checkbox"]) { display: flex !important; }

  /* Full-width action buttons, comfortably spaced */
  .bsmc-form-frame input[type="submit"],
  .bsmc-form-frame button { width: 100%; margin-bottom: 10px; }
}

/* =====================================================================
   Optimizing Health — components mirrored from LTC's own rules so the two
   sites share one visual language:
     section heading  = TEAL + 40px gold underline   (.bsmc-eligibility-card h2)
     numbered circle  = navy disc with GOLD numeral  (.bsmc-eligibility-num)
     card             = white, 1px border, soft shadow, NO top rule
     callout          = cream with 4px gold left border (.bsmc-callout-questions)
   Contrast: teal #0A6B77 on white 6.21:1, navy 14.81:1, stone-light 5.95:1,
   gold on navy 5.36:1 (gold is safe as a numeral on the navy disc).
   ===================================================================== */

.bsmc-section-title,
.bsmc-about-strip h2,
.bsmc-steps-section h2,
.bsmc-info-strip h2,
.bsmc-maf-box h2,
.bsmc-maf-callout h2,
.bsmc-contact-footer h2 {
  font-family: var(--bsmc-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bsmc-teal);
  margin: 0 0 4px;
}
.bsmc-section-title::after,
.bsmc-about-strip h2::after,
.bsmc-steps-section h2::after,
.bsmc-info-strip h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--bsmc-gold);
  margin: 8px 0 18px;
}
.bsmc-section-title { text-align: left; }

/* Cards — identical treatment to LTC's eligibility card */
.bsmc-step-card,
.bsmc-about-card,
.bsmc-info-card {
  background: var(--bsmc-white);
  border: 1px solid var(--bsmc-border);
  border-radius: var(--bsmc-radius-lg);
  padding: 28px 32px;
  box-shadow: var(--bsmc-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bsmc-step-card h3, .bsmc-about-card h3, .bsmc-about-card h2,
.bsmc-info-label {
  font-family: var(--bsmc-font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bsmc-navy);
  margin: 0 0 4px;
  line-height: 1.4;
}
.bsmc-step-card p, .bsmc-about-card p, .bsmc-info-card p {
  font-family: var(--bsmc-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--bsmc-stone-light);
  margin: 0;
}

/* Numbered disc — navy with a GOLD numeral, exactly as LTC */
.bsmc-step-num,
.bsmc-info-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bsmc-navy);
  color: var(--bsmc-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bsmc-font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Grids */
.bsmc-steps-grid, .bsmc-about-grid, .bsmc-info-grid, .bsmc-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Bands — alternate white / cream like LTC's page rhythm */
.bsmc-about-strip  { background: var(--bsmc-white); padding: 56px 0; }
.bsmc-steps-section,
.bsmc-info-strip   { background: var(--bsmc-cream); padding: 56px 0; }
.bsmc-cta-section  { background: var(--bsmc-white); padding: 56px 0; }
.bsmc-contact-footer { background: var(--bsmc-cream); padding: 48px 0; border-top: 1px solid var(--bsmc-border); }
.bsmc-about-strip p { font-size: 1.0625rem; line-height: 1.7; color: var(--bsmc-stone); }

/* Callout — cream with gold left border, as LTC's Questions? box */
.bsmc-maf-box, .bsmc-maf-callout {
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--bsmc-cream);
  border-left: 4px solid var(--bsmc-gold);
  border-radius: 0 var(--bsmc-radius) var(--bsmc-radius) 0;
  color: var(--bsmc-navy);
}
.bsmc-maf-text { font-size: 1.0625rem; line-height: 1.65; color: var(--bsmc-navy); margin: 0; }

/* CTA — navy panel, gold rule, mirrors the hero */
.bsmc-cta-box {
  background: var(--bsmc-navy);
  border-bottom: 3px solid var(--bsmc-gold);
  border-radius: var(--bsmc-radius-lg);
  padding: 40px 32px;
  text-align: center;
  color: var(--bsmc-white);
}
.bsmc-cta-box h2 {
  font-family: var(--bsmc-font-display);
  font-size: 1.5rem; font-weight: 700;
  color: var(--bsmc-white); margin: 0 0 12px;
}
.bsmc-cta-box h2::after { content: none; }
.bsmc-cta-box p { color: var(--bsmc-white); font-size: 1.0625rem; line-height: 1.65; margin: 0 0 24px; }

/* Buttons */
.bsmc-btn-primary, .bsmc-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 30px;
  font-family: var(--bsmc-font-body);
  font-size: 1.0625rem; font-weight: 700;
  border-radius: var(--bsmc-radius);
  text-decoration: none; cursor: pointer;
}
.bsmc-btn-primary { color: var(--bsmc-navy); background: var(--bsmc-white); border: 2px solid var(--bsmc-white); }
.bsmc-btn-primary:hover { background: var(--bsmc-cream); }
.bsmc-btn-primary:focus-visible { outline: 3px solid var(--bsmc-gold-light); outline-offset: 3px; }
.bsmc-btn-secondary { color: var(--bsmc-navy); background: var(--bsmc-white); border: 2px solid var(--bsmc-navy); }
.bsmc-btn-secondary:hover { background: var(--bsmc-light-navy); }
.bsmc-btn-secondary:focus-visible { outline: 3px solid var(--bsmc-navy); outline-offset: 3px; }

.bsmc-contact-footer a {
  color: var(--bsmc-navy); text-decoration: underline; text-underline-offset: 2px;
  font-weight: 600; min-height: 24px; display: inline-flex; align-items: center;
}
.bsmc-contact-footer a:focus-visible { outline: 3px solid var(--bsmc-navy); outline-offset: 2px; }

@media (max-width: 767.98px) {
  .bsmc-step-card, .bsmc-about-card, .bsmc-info-card { padding: 22px 18px; }
  .bsmc-steps-section, .bsmc-about-strip, .bsmc-info-strip, .bsmc-cta-section { padding: 36px 0; }
  .bsmc-cta-box { padding: 28px 20px; }
  .bsmc-btn-primary, .bsmc-btn-secondary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bsmc-step-card, .bsmc-about-card, .bsmc-info-card,
  .bsmc-btn-primary, .bsmc-btn-secondary { transition: none !important; }
}
@media (forced-colors: active) {
  .bsmc-step-card, .bsmc-about-card, .bsmc-info-card { border: 1px solid CanvasText; }
  .bsmc-step-num, .bsmc-info-num { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .bsmc-cta-box { border: 1px solid CanvasText; }
}

/* =====================================================================
   SITE HEADER - constrain oversized logo image
   The brand mark img has no intrinsic size limit and was rendering at its
   full 2200x737 natural size, breaking the header layout. Matches the
   theme.css .logo-container convention (51px tall) used elsewhere on the
   site so the header reads the same as the LTC Waitlist page.
   ===================================================================== */
.bsmc-brand-mark {
  height: 51px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.bsmc-brand {
  display: inline-flex;
  align-items: center;
}

/* =====================================================================
   ROOT FONT-SIZE FIX
   bootstrap.min.css on this site sets html { font-size: 10px } (a 62.5%
   rem-basing convention). Every rem value in this stylesheet was authored
   assuming the browser default of 16px, so under the 10px root everything
   here was rendering at ~62.5% of its intended size (e.g. 1.0625rem body
   copy was showing as ~10.6px instead of ~17px). Restore the standard
   16px root so text reads at the sizes actually specified above.
   Bootstrap's own layout is unaffected: it is authored almost entirely in
   px, not rem, so this does not change spacing/sizing elsewhere on the
   page (the one exception, a dropdown arrow's background-position: .75rem,
   shifts by a few px and is not visually significant).
   ===================================================================== */
html {
  font-size: 100% !important;
}

/* =====================================================================
   STEP NAVIGATION FIX
   The advanced form renders its 16-step navigator as <ol class="progress
   list-group top"><li class="list-group-item active|incomplete">...
   Our earlier ".bsmc-form-frame .progress { height:6px; overflow:hidden }"
   rule (written for a plain Bootstrap meter bar) was matching this SAME
   .progress class name and crushing all 16 steps into an unreadable
   6px-tall sliver. Scope that old rule away from list-group and give the
   step list its own proper treatment: a wrapping row of small pills,
   navy+gold for the active step, muted for the rest.
   ===================================================================== */
.bsmc-form-frame .progress:not(.list-group),
.bsmc-form-frame .webform-progress:not(.list-group) {
  background: var(--bsmc-light-navy);
  border-radius: var(--bsmc-radius);
  height: 6px;
  margin-bottom: 28px;
  overflow: hidden;
}

.bsmc-form-frame ol.progress.list-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  height: auto;
  overflow: visible;
  background: none;
}

.bsmc-form-frame ol.progress.list-group > li {
  font-family: var(--bsmc-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bsmc-light-navy);
  color: var(--bsmc-stone-light);
  white-space: nowrap;
}

.bsmc-form-frame ol.progress.list-group > li.active {
  background: var(--bsmc-navy);
  color: var(--bsmc-gold);
}

.bsmc-form-frame ol.progress.list-group > li.complete {
  background: var(--bsmc-teal);
  color: var(--bsmc-white);
}

@media (max-width: 767.98px) {
  .bsmc-form-frame ol.progress.list-group > li {
    font-size: 0.72rem;
    padding: 5px 10px;
  }
}

/* Validation summary: Power Pages toggles this to display:block only when
   real errors exist, so we only need to style it (not hide it) - it
   already ships with inline display:none when empty. */
.bsmc-form-frame .validation-summary.alert-danger {
  background: #FBEAEA;
  border: 1px solid var(--bsmc-error);
  border-radius: var(--bsmc-radius);
  color: var(--bsmc-error);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

/* The validation-summary box was appearing empty on page load (Power
   Pages' own client script toggles it visible regardless of whether there
   are actual errors). Force it hidden whenever it has no error list items,
   regardless of what the inline style says; it only needs to show once
   real validation errors are present. */
.bsmc-form-frame .validation-summary:not(:has(li)) {
  display: none !important;
}