/* =============================================================================
   MERS — SITE DESIGN SYSTEM
   Source of truth: docs/design-system.md + the approved mockup in context/mockups/
   Loaded by functions.php as 'mers-site' at priority 20 — AFTER Divi's stylesheet
   and after Divi's per-page dynamic CSS. That ordering is why these rules win on
   specificity and mostly don't need !important.

   PART 1  MACHINERY      palette, type, buttons, header/nav/footer, page-header band
   PART 2  DIVI DEFENCES  fixes for Divi behaviours that break layouts silently
   PART 3  COMPONENTS     the mockup's signature components (numbered as in the doc)
   PART 4  RESPONSIVE     desktop-first max-width queries

   SCOPE RULE: everything is scoped to a .mers-* class emitted by the page generator
   or the plugins. The only global rules are the brand guarantees in 1.3.
   ============================================================================= */


/* =============================================================================
   PART 1 — MACHINERY
   ============================================================================= */

/* ---------- 1.1 Palette (docs/design-system.md) ----------------------------- */
:root {
  --primary: #172368;
  --primary-dark: #0d2945;
  --primary-mid: #234f7b;
  --primary-tint: #eef2f8;

  --accent: #ebc319;
  --accent-dark: #c8a24f;
  --accent-tint: #fff8e7;

  --blue: #4b92dd;
  --blue-dark: #3a7fc9;

  --white: #ffffff;
  --offwhite: #f8fafc;
  --na-bg: #f6f7f9;
  --border: #d7ddea;
  --mid-gray: #6a7181;
  --dark-gray: #27314a;
  --muted: #5e6675;
  --disabled: #7a808c;

  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --content-max: 1180px;
  --gutter: 6%;
  --gutter-mobile: 5%;
  --radius: 4px;
  --section-gap: 56px;
  --section-gap-mobile: 40px;
}

/* ---------- 1.2 Foundations ------------------------------------------------- */
body,
body.et-db #et-boc .et-l,
.et_pb_module,
.et_pb_module p,
.et_pb_button {
  font-family: var(--sans);
}
body {
  color: var(--muted);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--primary);
  padding-bottom: 0;
}
h1, h2 { font-family: var(--serif); font-weight: 400; }
h3, h4, h5, h6 { font-family: var(--sans); font-weight: 700; }
a { color: var(--primary); }
#main-content .container:before { display: none; }

/* Divi's default section/row spacing fights the 56px rhythm. Pages set explicit
   padding on every section, so neutralise the parent defaults. */
#main-content .et_pb_row { padding: 0; }
.et_pb_section { padding: 0; }

/* ---------- 1.3 Brand guarantees ------------------------------------------- */
/* 4px corners on controls and cards; no shadows anywhere (design hard rules). */
.et_pb_button, .mers-btn, input, select, textarea, button,
.wpforms-container input, .wpforms-container select, .wpforms-container textarea,
.wpforms-container button {
  border-radius: var(--radius) !important;
}
.et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module, .et_pb_button { box-shadow: none !important; }
.et_pb_button:after { display: none !important; content: none !important; }

/* ---------- 1.4 Type scale --------------------------------------------------- */
/* Compound selectors because the generator applies the class to the module
   WRAPPER and the heading level inside is set per instance. */

/* H1 in the page-header band. */
.mers-h1 h1, .mers-h1 h2 {
  font-family: var(--serif) !important;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--primary) !important;
  margin: 0;
}
/* Hero question on the home page. */
.mers-hero-q h1, .mers-hero-q h2 {
  font-family: var(--serif) !important;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--primary) !important;
  text-align: center;
}
/* Section title (6): centred serif H2 with a 48×2 gold rule beneath. */
.mers-section-title h1, .mers-section-title h2, .mers-section-title h3 {
  font-family: var(--serif) !important;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--primary) !important;
  text-align: center;
  padding-bottom: 14px !important;
  position: relative;
}
.mers-section-title h1:after, .mers-section-title h2:after, .mers-section-title h3:after {
  content: '';
  display: block;
  width: 48px; height: 2px;
  background: var(--accent);
  margin: 12px auto 0;
}
/* Left-aligned serif H2 (Board Meetings "Upcoming Meetings", hub "News & Reference"). */
.mers-h2 h1, .mers-h2 h2, .mers-h2 h3 {
  font-family: var(--serif) !important;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--primary) !important;
}
/* Sans H3 card titles. */
.mers-h3 h2, .mers-h3 h3, .mers-h3 h4 {
  font-family: var(--sans) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--primary) !important;
}
/* Eyebrow / column label. */
.mers-eyebrow, .mers-eyebrow p {
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
  color: var(--mid-gray) !important;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
}
/* Body / lead / meta. */
.mers-body p, .mers-body li { font-size: 1rem; color: var(--muted); line-height: 1.55; }
.mers-body p { margin-bottom: 1em; }
.mers-body p:last-child { margin-bottom: 0; }
.mers-body ul, .mers-body ol { margin: 0 0 1em 1.25em; padding: 0; }
.mers-body li { margin-bottom: .35em; }
.mers-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
.mers-body h3 { font-size: 1.05rem; margin: 1.4em 0 .4em; }
.mers-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.mers-body a:hover { color: var(--primary-mid); }
.mers-body strong { color: var(--dark-gray); }
.mers-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .95rem; }
.mers-body th, .mers-body td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
.mers-body th { background: var(--offwhite); color: var(--primary); font-weight: 700; font-size: .85rem; }
.mers-lead p { font-size: 1.05rem; color: var(--muted); line-height: 1.6; }
.mers-center { text-align: center; }
.mers-center .mers-lead { margin-left: auto; margin-right: auto; max-width: 820px; }
.mers-meta, .mers-meta p { font-size: .9rem !important; color: var(--mid-gray) !important; line-height: 1.4 !important; }
.mers-note p { font-size: .85rem; color: var(--mid-gray); font-style: italic; }

/* ---------- 1.5 Buttons (16) ---------------------------------------------- */
/* Divi emits no button padding from JSON attributes (§6.7): padding lives here.
   Three variants, each in a Divi-module form (.mers-btn-* .et_pb_button) and a
   raw-anchor form (a.mers-btn.mers-btn--*). */
.mers-btn,
.mers-btn-primary .et_pb_button, .mers-btn-outline .et_pb_button, .mers-btn-blue .et_pb_button {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 11px 18px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mers-btn--primary, .mers-btn-primary .et_pb_button {
  background: var(--primary) !important;
  color: var(--white) !important;
  border-color: var(--primary) !important;
}
.mers-btn--primary:hover, .mers-btn-primary .et_pb_button:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: var(--white) !important;
  padding: 11px 18px !important;
}
.mers-btn--outline, .mers-btn-outline .et_pb_button {
  background: var(--white) !important;
  color: var(--primary) !important;
  border-color: var(--border) !important;
}
.mers-btn--outline:hover, .mers-btn-outline .et_pb_button:hover {
  background: var(--primary-tint) !important;
  color: var(--primary) !important;
  padding: 11px 18px !important;
}
.mers-btn--blue, .mers-btn-blue .et_pb_button {
  background: var(--blue) !important;
  color: var(--white) !important;
  border-color: var(--blue) !important;
}
.mers-btn--blue:hover, .mers-btn-blue .et_pb_button:hover {
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
  color: var(--white) !important;
  padding: 11px 18px !important;
}
/* Full-width document button (meeting rows). */
.mers-btn--block { display: block; width: 100%; text-align: center; }
/* Text link with chevron ("View ›"). */
.mers-link { color: var(--primary); font-weight: 700; font-size: .9rem; text-decoration: none; }
.mers-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Divi module buttons: kill the wrapper's default alignment margin. */
.et_pb_button_module_wrapper.mers-btn-primary,
.et_pb_button_module_wrapper.mers-btn-outline,
.et_pb_button_module_wrapper.mers-btn-blue { margin-top: 8px; }
.mers-btn-center { text-align: center; }

/* ---------- 1.6 Header: utility bar (1), masthead (2), nav (3) ------------- */
#main-header.mers-header {
  position: relative;
  top: auto;
  box-shadow: none;
  background: var(--white);
  border-bottom: none;
  z-index: 100;
}
/* Divi's fixed-header padding compensation is not wanted (header scrolls). */
#page-container { padding-top: 0 !important; }
.et_fixed_nav #page-container { padding-top: 0 !important; }
#main-header.mers-header .mers-utility__inner,
#main-header.mers-header .mers-masthead__inner,
#main-header.mers-header .mers-nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0;
}
#main-header.mers-header .mers-masthead__inner { padding-left: 32px; padding-right: 32px; }

.mers-utility {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  min-height: 36px;
  font-size: .82rem;
  color: var(--mid-gray);
}
.mers-utility__inner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 36px; flex-wrap: wrap;
}
.mers-utility a { color: var(--mid-gray); text-decoration: none; }
.mers-utility a:hover { color: var(--primary); text-decoration: underline; }
.mers-dot { margin: 0 8px; color: var(--mid-gray); }

.mers-masthead { background: var(--white); }
.mers-masthead__inner {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 24px !important; padding-bottom: 20px !important;
}
.mers-logo { display: block; line-height: 0; }
.mers-logo img { display: block; width: 285px; max-width: 48vw; height: auto; }
.mers-portals { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.mers-portals .mers-btn { padding: 12px 20px !important; font-size: .95rem !important; }

.mers-nav { background: transparent; }
.mers-nav__inner { display: block; background: var(--primary); padding: 0 6px !important; }
ul.mers-menu {
  display: flex; align-items: stretch; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
ul.mers-menu > li { margin: 0; padding: 0; list-style: none; }
ul.mers-menu > li > a {
  display: block;
  color: var(--white);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  padding: 18px 14px 15px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
ul.mers-menu > li > a:hover { border-bottom-color: var(--accent); }
ul.mers-menu > li.current-menu-item > a,
ul.mers-menu > li.current_page_parent > a,
ul.mers-menu > li.current-menu-ancestor > a { border-bottom-color: var(--accent); }
ul.mers-menu .sub-menu { display: none; }

/* ---------- 1.7 Page-header band (4) -------------------------------------- */
.mers-pagehead.et_pb_section,
.mers-pagehead {
  background: var(--offwhite) !important;
  border-bottom: 1px solid var(--border);
  padding: 40px var(--gutter) !important;
}
.mers-pagehead .et_pb_row,
.mers-pagehead__inner { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 0; }
.mers-pagehead .et_pb_module { margin-bottom: 0 !important; }
.mers-pagehead__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1.15;
  color: var(--primary); margin: 0; padding: 0;
}
.mers-pagehead__meta { color: var(--mid-gray); font-size: .9rem; margin: 10px 0 0; }
.mers-crumb { font-size: .85rem; color: var(--mid-gray); margin: 0 0 14px; line-height: 1.4; }
.mers-crumb a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.mers-crumb a:hover { color: var(--primary-mid); }
.mers-crumb__sep { margin: 0 7px; }
.mers-crumb__current { color: var(--mid-gray); }
.mers-pagehead .mers-crumb { margin-bottom: 14px; }
.mers-pagehead .mers-crumb-mod .et_pb_text_inner p { margin: 0; }

/* ---------- 1.8 Footer (17) ------------------------------------------------- */
#main-footer.mers-footer {
  background: var(--primary);
  color: var(--white);
  padding: 48px var(--gutter);
  border: none;
  margin-top: 0;
}
.mers-footer__inner { max-width: var(--content-max); margin: 0 auto; }
.mers-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}
.mers-footer__name { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--white); margin: 0 0 22px; }
.mers-footer__addr, .mers-footer__phones { font-size: .95rem; color: var(--white); line-height: 1.5; margin: 0 0 22px; }
.mers-footer__phones { margin-bottom: 0; }
.mers-footer a { color: var(--white); text-decoration: none; }
.mers-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mers-footer__col h4 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--white); margin: 0 0 22px; padding: 0; }
.mers-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mers-footer__col li { list-style: none; font-size: .95rem; }
.mers-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: 40px; padding-top: 18px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.mers-footer__bottom p { font-size: .82rem; color: rgba(255, 255, 255, .75); margin: 0; }
.mers-footer__bottom a { color: rgba(255, 255, 255, .75); }

/* ---------- 1.9 Section rhythm --------------------------------------------- */
.mers-section .et_pb_row { max-width: var(--content-max); width: 100%; }
.mers-section .et_pb_module { margin-bottom: 0; }
.mers-section .mers-h2 { margin-bottom: 16px; }
.mers-section .mers-section-title { margin-bottom: 24px; }
.mers-section .mers-lead { margin-bottom: 22px; }
.mers-gap-sm { margin-bottom: 16px !important; }
.mers-gap-md { margin-bottom: 28px !important; }
.mers-gap-lg { margin-bottom: 44px !important; }

/* ---------- 1.10 WPForms (Contact / Public Records) ----------------------- */
.mers-form .wpforms-container { margin: 0; }
.mers-form .wpforms-form .wpforms-field { padding: 0 0 14px; }
.mers-form .wpforms-form .wpforms-field-label {
  font-size: .85rem !important; font-weight: 700 !important; color: var(--dark-gray) !important;
  margin-bottom: 6px !important;
}
.mers-form .wpforms-form .wpforms-required-label { color: var(--accent-dark) !important; }
.mers-form .wpforms-form input[type=text],
.mers-form .wpforms-form input[type=email],
.mers-form .wpforms-form input[type=tel],
.mers-form .wpforms-form select,
.mers-form .wpforms-form textarea {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  padding: 10px 12px !important;
  font-family: var(--sans) !important;
  font-size: .95rem !important;
  color: var(--dark-gray) !important;
  width: 100% !important; max-width: 100% !important;
  box-shadow: none !important;
}
.mers-form .wpforms-form input:focus,
.mers-form .wpforms-form select:focus,
.mers-form .wpforms-form textarea:focus { border-color: var(--primary) !important; outline: 2px solid var(--primary-tint) !important; }
.mers-form .wpforms-form textarea { min-height: 130px; resize: vertical; }
.mers-form .wpforms-form button[type=submit] {
  background: var(--primary) !important; color: var(--white) !important;
  font-family: var(--sans) !important; font-size: .9rem !important; font-weight: 700 !important;
  padding: 12px 22px !important; border: none !important;
}
.mers-form .wpforms-form button[type=submit]:hover { background: var(--primary-dark) !important; }
.mers-form .wpforms-form .wpforms-one-half { width: 48.5% !important; margin-left: 3% !important; }
.mers-form .wpforms-form .wpforms-one-half.wpforms-first { margin-left: 0 !important; }
.mers-form .wpforms-confirmation-container-full {
  background: var(--primary-tint) !important; border: 1px solid var(--border) !important; color: var(--primary) !important;
}


/* =============================================================================
   PART 2 — DIVI DEFENCES (docs/divi5-reference.md §6)
   ============================================================================= */

/* 2.1 Overlay containing-block fix (§6.8) — kept for any future overlay module. */
.mers-overlay { position: absolute !important; inset: 0; margin: 0 !important; pointer-events: none; }
.mers-overlay .et_pb_text_inner { position: static; }
.mers-overlay a { pointer-events: auto; }

/* 2.2 Mobile row wrap safety net (§6.6) lives in PART 4 (<=980px). */

/* 2.3 Divi injects a top padding on #main-content for fixed headers; unwanted. */
.et_pb_pagebuilder_layout #main-content { padding-top: 0; }


/* =============================================================================
   PART 3 — COMPONENTS (numbers = docs/design-system.md "Signature components")
   ============================================================================= */

/* ---------- 5. Hero panel (home) ------------------------------------------ */
.mers-hero.et_pb_section {
  background: var(--white) !important;
  padding: 40px var(--gutter) 0 !important;
}
.mers-hero .et_pb_row {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 56px 48px 48px !important;
  max-width: var(--content-max);
  width: 100%;
}
.mers-hero .mers-hero-q { margin-bottom: 34px !important; }

/* The three audience cards are one Divi MODULE EACH (operator, 2026-09-16).
   They cannot be Divi columns: they sit inside the hero panel, and the panel is
   the row itself — Divi rows do not nest. So the hero's single column is the
   grid instead, with the H1 spanning all three tracks. `row-gap: 0` because the
   H1 already carries the 34px below it; the column gap is the card gutter.
   Divi's clearfix pseudo-elements would otherwise become grid items (the same
   trap as §5.8) and push a card onto its own line. */
.mers-hero .et_pb_column {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 0;
  align-items: stretch;
}
.mers-hero .et_pb_column::before,
.mers-hero .et_pb_column::after { display: none; }
.mers-hero .et_pb_column > .mers-hero-q { grid-column: 1 / -1; }
.mers-hero .mers-choicemod .et_pb_text_inner,
.mers-hero .mers-choicemod .et_pb_text_inner > p,
.mers-hero .mers-choicemod .mers-choice { height: 100%; }
.mers-hero .mers-choicemod .et_pb_text_inner > p { margin: 0 !important; }
.mers-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mers-choice {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 22px 28px; text-align: center; text-decoration: none !important;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: border-color .15s ease, background-color .15s ease;
}
.mers-choice:hover { border-color: var(--primary-mid); background: #fbfcfe; }
.mers-choice .ico {
  width: 52px; height: 52px; border-radius: 50%; background: var(--primary-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.mers-choice .ico svg { width: 22px; height: 22px; stroke: var(--primary); fill: none; stroke-width: 1.8; }
.mers-choice .eyebrow { font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mid-gray); }
.mers-choice .t { font-family: var(--serif); font-size: 1.75rem; line-height: 1.15; color: var(--primary); }
.mers-choice .go { font-size: .9rem; font-weight: 700; color: var(--primary); margin-top: 6px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.mers-choice .go .chev { font-size: .8rem; }

/* ---------- 7. Announcements ----------------------------------------------- */
.mers-announcements { display: flex; flex-direction: column; gap: 32px; }
.mers-banner {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--primary-dark);
  border-radius: var(--radius);
  padding: 44px 88px 56px;
  min-height: 230px;
  color: var(--white);
}
.mers-banner__slide.is-active { display: block; }
.mers-banner__title {
  font-family: var(--serif); font-weight: 400; color: var(--white);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.15; margin: 0 0 14px; padding: 0;
}
.mers-banner__text { font-size: 1.05rem; line-height: 1.6; color: var(--white); margin: 0 0 14px; max-width: 640px; }
.mers-banner__link { color: var(--white); font-weight: 700; font-size: .95rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }
.mers-banner__link:hover { border-bottom-color: var(--white); }
.mers-banner__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--white); color: var(--primary); border: 1px solid var(--border);
  font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mers-banner__arrow--prev { left: 22px; }
.mers-banner__arrow--next { right: 22px; }
.mers-banner__arrow:hover { background: var(--primary-tint); }
.mers-banner__dots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; }
.mers-banner__dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  background: rgba(255,255,255,.35);
}
.mers-banner__dot.is-active { background: var(--white); }
.mers-anncards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mers-anncard {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.mers-chip {
  display: inline-block; background: var(--primary-tint); color: var(--dark-gray);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius);
}
.mers-anncard__title { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; color: var(--primary); margin: 4px 0 0; padding: 0; }
.mers-anncard__text { font-size: .95rem; line-height: 1.5; color: var(--muted); margin: 0 0 6px; flex: 1 1 auto; }

/* ---------- 9. Card + grids (hubs) ---------------------------------------- */
.mers-grid { display: grid; gap: 16px; }
.mers-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mers-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mers-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mers-card {
  display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; text-decoration: none !important; color: var(--muted);
  transition: border-color .15s ease, background-color .15s ease;
}
a.mers-card:hover { border-color: var(--primary-mid); background: #fbfcfe; }
.mers-card .t, .mers-card h3 {
  display: block; font-family: var(--sans); font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  color: var(--primary); margin: 0 0 8px; padding: 0;
}
.mers-card .d, .mers-card p { display: block; font-size: .95rem; line-height: 1.5; color: var(--muted); margin: 0; }
.mers-card .more { display: inline-block; margin-top: 10px; font-size: .9rem; font-weight: 700; color: var(--primary); }
.mers-card--center { text-align: center; }
.mers-card--center .t { margin-top: 14px; }
.mers-card--center .d { margin-bottom: 14px; }
.mers-card .mers-eyebrow { margin-bottom: 8px !important; }

/* Simple bordered info panel (address, hours, notes). */
.mers-panel {
  background: var(--offwhite); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
}
.mers-panel h3 { font-size: 1.05rem; margin: 0 0 8px; padding: 0; }
.mers-panel p { margin: 0 0 8px; font-size: .95rem; }
.mers-panel p:last-child { margin-bottom: 0; }

/* Callout (gold-ruled note). */
.mers-callout {
  background: var(--accent-tint); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 16px 18px; font-size: .95rem; line-height: 1.6; color: var(--dark-gray);
}
.mers-callout p { margin: 0; }

/* ---------- 11. Publication / legislation row (theme version) ------------- */
.mers-pub-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; background: var(--white);
  margin-bottom: 12px;
}
.mers-pub-row .l .t { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--primary); }
.mers-pub-row .l .s { display: block; font-size: .85rem; color: var(--mid-gray); margin-top: 4px; }

/* ---------- 14. People card (Board / Staff) ------------------------------- */
.mers-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mers-person {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 20px;
}
.mers-person .ph {
  width: 88px; height: 112px; display: block; object-fit: cover; object-position: center top;
  border: 1px solid var(--border); border-radius: 2px; background: var(--offwhite); margin-bottom: 14px;
}
.mers-person .ph--placeholder { display: flex; align-items: center; justify-content: center; }
.mers-person .ph--placeholder svg { width: 40px; height: 40px; stroke: var(--border); fill: none; stroke-width: 1.5; }
.mers-person .n { display: block; font-weight: 700; font-size: 1.05rem; color: var(--primary); margin: 0 0 6px; }
.mers-person .r { display: block; font-weight: 700; font-size: .9rem; color: var(--primary); margin: 0 0 4px; }
.mers-person .a { display: block; font-size: .9rem; color: var(--muted); }
.mers-person .c { display: block; font-size: .9rem; color: var(--muted); margin-top: 6px; }
.mers-person .c a { color: var(--primary); text-decoration: none; }
.mers-person .c a:hover { text-decoration: underline; }

/* ---------- Steps (Employers "New to Handling MERS?") -------------------- */
ol.mers-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mers-step {
  list-style: none; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px;
}
.mers-step .num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--white);
  font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center;
}
.mers-step .t { display: block; font-weight: 700; color: var(--primary); font-size: 1rem; margin-bottom: 4px; }
.mers-step .d { display: block; font-size: .95rem; color: var(--muted); line-height: 1.5; }

/* ---------- FAQ accordion ------------------------------------------------- */
details.mers-faq {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 18px; margin-bottom: 10px;
}
details.mers-faq summary {
  cursor: pointer; padding: 15px 0; font-weight: 700; color: var(--primary); font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
details.mers-faq summary::-webkit-details-marker { display: none; }
details.mers-faq summary:after { content: '+'; font-weight: 400; font-size: 1.3rem; color: var(--mid-gray); line-height: 1; }
details.mers-faq[open] summary:after { content: '−'; }
details.mers-faq .body { padding: 0 0 16px; }
details.mers-faq .body p, details.mers-faq .body li { font-size: .95rem; line-height: 1.6; color: var(--muted); }
details.mers-faq .body p { margin: 0 0 .8em; }
details.mers-faq .body ul { margin: 0 0 .8em 1.2em; }

/* ---------- Definition list (contact, hours) ------------------------------ */
.mers-dl { margin: 0; display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: .95rem; }
.mers-dl dt { font-weight: 700; color: var(--dark-gray); }
.mers-dl dd { margin: 0; color: var(--muted); }

/* ---------- Single announcement post ------------------------------------- */
.mers-article__inner { max-width: var(--content-max); margin: 0 auto; padding: 48px var(--gutter) 64px; }
.mers-article__body { max-width: 780px; font-size: 1.05rem; line-height: 1.7; color: var(--muted); }
.mers-article__body p { margin: 0 0 1.1em; }
.mers-article__body h2 { font-family: var(--serif); font-size: 1.5rem; margin: 1.6em 0 .5em; }
.mers-article__body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.mers-article__body a { color: var(--primary); text-decoration: underline; }
.mers-article__back { margin: 32px 0 0; }

/* ---------- Search page / 404 (Divi defaults reined in) ------------------ */
.error404 #main-content .container, .search #main-content .container { padding: 56px 0; }


/* =============================================================================
   PART 4 — RESPONSIVE (desktop-first; 980px = Divi's own stacking breakpoint)
   ============================================================================= */

@media (max-width: 1100px) {
  ul.mers-menu > li > a { padding: 16px 11px 13px; font-size: .86rem; }
}

@media (max-width: 980px) {
  /* KEEP: Divi emits display:flex on rows with vertical alignment but never
     flex-wrap, so its own width:100% mobile rule leaves columns on one line and
     the page scrolls sideways (§6.6). Verify with tools/find-overflow.js. */
  .et_pb_row { flex-wrap: wrap !important; }
  .et_pb_row > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  /* Header stacks; nav becomes the mockup's wrapping grid of navy buttons. */
  .mers-masthead__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mers-portals { justify-content: flex-start; }
  .mers-nav { padding: 0 var(--gutter-mobile); }
  .mers-nav__inner { padding: 0 12px !important; }
  ul.mers-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 0; }
  ul.mers-menu > li > a,
  ul.mers-menu > li:first-child > a {
    text-align: center; padding: 12px 8px; border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius); background: rgba(255,255,255,.06); font-size: .85rem; line-height: 1.2;
  }
  ul.mers-menu > li > a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
  ul.mers-menu > li.current-menu-item > a { border-color: var(--accent); }

  .mers-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .mers-footer__brand { grid-column: 1 / -1; }

  .mers-hero .et_pb_row { padding: 40px 28px 32px !important; }
  .mers-choice-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Cards stack under 980, as the .mers-choice-grid rule above always did. The
     gap goes on the cards rather than the grid so it does NOT stack with the
     H1's own 34px bottom margin (a row-gap here added a phantom 16px under the
     question). !important because `.mers-hero .et_pb_module + .et_pb_module
     { margin-top: 0 }` sits later in this file at equal specificity. */
  .mers-hero .et_pb_column { grid-template-columns: 1fr; row-gap: 0; }
  .mers-hero .mers-choicemod + .mers-choicemod { margin-top: 16px !important; }
  .mers-grid--3, .mers-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mers-anncards { grid-template-columns: 1fr; }
  .mers-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mers-banner { padding: 36px 64px 56px; }
}

@media (max-width: 767px) {
  :root { --section-gap: var(--section-gap-mobile); }
  #main-header.mers-header .mers-utility__inner,
  #main-header.mers-header .mers-masthead__inner,
  .mers-pagehead, .mers-pagehead.et_pb_section, #main-footer.mers-footer,
  .mers-article__inner { padding-left: var(--gutter-mobile) !important; padding-right: var(--gutter-mobile) !important; }
  .mers-utility__inner { justify-content: flex-start; padding-top: 6px; padding-bottom: 6px; }
  .mers-portals { width: 100%; }
  .mers-portals .mers-btn { flex: 1 1 40%; text-align: center; padding: 11px 12px !important; font-size: .9rem !important; }
  .mers-pagehead.et_pb_section, .mers-pagehead { padding-top: 28px !important; padding-bottom: 28px !important; }

  .mers-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .mers-footer__bottom { flex-direction: column; }

  .mers-hero.et_pb_section { padding-left: var(--gutter-mobile) !important; padding-right: var(--gutter-mobile) !important; }
  .mers-hero .et_pb_row { padding: 32px 18px 24px !important; }
  .mers-grid--2, .mers-grid--3, .mers-grid--4, .mers-people { grid-template-columns: 1fr; }
  .mers-banner { padding: 32px 22px 58px; }
  .mers-banner__arrow { top: auto; bottom: 14px; transform: none; width: 32px; height: 32px; }
  .mers-banner__arrow--prev { left: 18px; }
  .mers-banner__arrow--next { right: 18px; }
  .mers-pub-row { flex-direction: column; align-items: flex-start; }
  .mers-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .mers-dl dd { margin-bottom: 10px; }
  .mers-step { grid-template-columns: 32px 1fr; padding: 16px; }

  .mers-form .wpforms-form .wpforms-one-half { width: 100% !important; margin-left: 0 !important; }
}

@media (max-width: 560px) {
  ul.mers-menu { gap: 6px; }
  ul.mers-menu > li > a, ul.mers-menu > li:first-child > a { font-size: .8rem; padding: 11px 6px; }
  .mers-logo img { width: 240px; max-width: 70vw; }
}

/* ---------- Builder helpers added with tools/lib/content.js ---------------- */
.mers-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.mers-btn-row.mers-btn-center { justify-content: center; }
.mers-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0 !important; }
.mers-docs-h { font-size: 1.05rem; margin: 28px 0 12px; padding: 0; }
.mers-doc-rows .mers-pub-row:last-child { margin-bottom: 0; }
.mers-step__body { display: block; }
.mers-step .d p { margin: 0 0 .6em; }
.mers-step .d p:last-child { margin-bottom: 0; }
.mers-step .d ul { margin: .4em 0 .6em 1.2em; }
.mers-step .d .mers-btn { margin: 8px 8px 0 0; }
.mers-section .et_pb_module + .et_pb_module { margin-top: 24px; }
.mers-section .mers-h2 + .et_pb_module { margin-top: 0; }
.mers-section .mers-section-title + .et_pb_module { margin-top: 0; }
.mers-section .mers-lead + .et_pb_module { margin-top: 0; }
.mers-section .et_pb_module.mers-h2 { margin-top: 44px; }
.mers-section .et_pb_module.mers-h2:first-child { margin-top: 0; }
.mers-pagehead .mers-crumb-mod + .et_pb_module { margin-top: 0; }
.mers-pagehead .et_pb_module { margin-bottom: 0 !important; }
.mers-pagehead-extra { margin-top: 10px; }
.mers-hero .et_pb_module + .et_pb_module { margin-top: 0; }
.mers-card.mers-body h3 { margin: 0 0 10px; }
.mers-body h2, .mers-body h3, .mers-body h4, .mers-card h3, .mers-docs-h, .mers-panel h3 { font-family: var(--sans) !important; }

/* =============================================================================
   PART 5 — COMPONENT FIXES FOUND DURING THE PAGE BUILD
   Each of these fixes a shared component, not one page. Merged from the four
   page-building passes (work/css-*.css), which is why they arrive together.
   ============================================================================= */

/* 5.1 "Supporting Documents" heading (C.docRows).
   It had a size and margin but no weight or family of its own, so it inherited
   the global serif at weight 400 and read as body copy instead of a section
   label. Every other section label in the design is bold sans navy. */
.mers-docs-h {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}

/* 5.2 Button rows (C.buttons) and in-card action rows (C.richCards).
   Flex + gap so several buttons wrap with an even gutter instead of relying on
   inline-block whitespace. */
.mers-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mers-btn-row.mers-btn-center { justify-content: center; }
.mers-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }

/* 5.3 Cards in a grid stretch to the tallest sibling but top-align their
   content, so a button under short copy floated mid-card. Pin the actions row
   to the bottom and the buttons line up across the row, as the mockup shows. */
.mers-grid .mers-card { display: flex; flex-direction: column; }
.mers-grid .mers-card__actions {
  /* !important because the helper rule above sets `margin` with !important to
     beat Divi's <p> margins; without matching weight the auto never applies and
     buttons float mid-card. Exposed by mockup-2's 3-up tax grid, 2026-09-04. */
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 14px;
}

/* 5.4 Wide tables (contribution rates) scroll inside their own container so the
   PAGE never scrolls sideways (docs/divi5-reference.md §6.6 is about rows; this
   is the content equivalent). */
.mers-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mers-tablewrap > table { min-width: 520px; }

/* 5.5 Two-column grid of outlined links inside a panel (the mockup's
   .resourcebuttons on the Employers hub). */
.mers-linkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mers-linkgrid > .mers-btn { text-align: left; }
.mers-grid--2 > .mers-panel { display: flex; flex-direction: column; }
.mers-grid--2 > .mers-panel > .mers-linkgrid { margin-top: auto; }

@media (max-width: 700px) {
  .mers-linkgrid { grid-template-columns: 1fr; }
}

/* mockup-2 copy alignment (2026-09-11): the home "Next Board Meeting" label is
   title case in the mockup (.meetingbar-label has no text-transform), while the
   shared eyebrow atom uppercases. Override for that one label only. */
.mers-next-meeting .mers-eyebrow { text-transform: none; letter-spacing: .02em; }

/* 5.6 About MERS — four topic cards as four SEPARATE Divi modules.
   The page used to carry them as one divi/text module wrapping a .mers-grid--2
   of four divs, so the client could not edit a single card in the Visual
   Builder (operator request, 2026-09-16). They are now one module per column
   across two `1_2,1_2` rows. Divi's gutter width 1 is a ZERO gap (§4.1), so the
   16px gutter, the row rhythm and the equal-height stretch come from here.
   The <=980px block below is NOT optional: the §6.6 stacking safety net sits
   earlier in this file at the same specificity, so these desktop widths would
   otherwise win on source order and leave the cards side by side on a phone. */
.mers-about-grid.et_pb_row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px !important; }
/* Same clearfix-as-flex-item trap as §5.8 — without this each row carries a
   phantom 16px of row-gap below its cards. */
.mers-about-grid.et_pb_row::before,
.mers-about-grid.et_pb_row::after { display: none; }
.mers-about-grid > .et_pb_column { width: calc(50% - 8px) !important; margin: 0 !important; display: flex; }
.mers-about-grid > .et_pb_column > .et_pb_module { flex: 1 1 auto; margin-bottom: 0 !important; }

/* The mockup's `.plan-mini` pair inside the Retirement Plans card: two distinct
   gold-ruled tiles, not list bullets. The adjacent-sibling reset stops the
   intro paragraph's 1em bottom margin stacking with the pair's own top margin;
   the standalone margin-top is kept for the case with no paragraph above. */
.mers-plan-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mers-about-block p + .mers-plan-pair { margin-top: 0; }
.mers-plan-mini { background: var(--offwhite); border-left: 4px solid var(--accent); padding: 14px; }
.mers-plan-mini strong { display: block; color: var(--primary); font-weight: 700; margin-bottom: 5px; }
.mers-plan-mini span { display: block; font-size: .95rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 980px) {
  .mers-about-grid > .et_pb_column { width: 100% !important; }
}
@media (max-width: 720px) {
  .mers-plan-pair { grid-template-columns: 1fr; }
}

/* 5.7 Stacked card actions (C.richCards `stack: true`).
   A card that is nothing BUT a list of form buttons — the mockup's DROP Forms
   card, `<button><br><br><button>` — wants a column of buttons directly under
   the heading, each sized to its own label, not the default bottom-pinned row.

   TWO rules have to be beaten, and BOTH need the `.mers-card` prefix to get
   there (found on /members/drop/, 2026-09-16):
     * `.mers-card .d, .mers-card p { display: block }` (§9, 0-2-0) outweighs
       `.mers-card__actions { display: flex }` (§5.2, 0-1-0), so an actions row
       inside a card has never actually been a flex container — its buttons
       flow as inline-block text and wrap ragged (here: 1 + 2).
     * `.mers-grid .mers-card__actions { margin-top: auto !important }` (§5.3)
       makes it a flex ITEM of the flex-column card and pushes it to the card
       bottom, which on a card with no body copy leaves a hole above it.
   Equal specificity plus later source order is what wins both. */
.mers-card .mers-card__actions--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0 !important;
  padding-top: 0;
}

/* 5.8 Hub card grids built from real Divi columns (C.cardRows / hubPage
   `discrete: true`). One module per card, so the team can edit a single card in
   the Visual Builder instead of one text module holding the whole grid
   (operator, 2026-09-16).

   This must reproduce .mers-grid exactly: 16px gutter, equal-height cards,
   3/4-up dropping to 2-up at 980px and everything to 1-up at 767px. Divi's
   gutter width 1 is a ZERO gap (§4.1), so every width here is ours. The two
   media queries are load-bearing for the same reason as §5.6 — the §6.6
   stacking safety net is earlier in this file at equal specificity and these
   widths would otherwise beat it on source order. */
.mers-cardrow.et_pb_row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px !important; }
/* Divi's clearfix ::before/::after on a row become FLEX ITEMS here, wrap onto a
   second flex line and add a phantom 16px row-gap under every card row. */
.mers-cardrow.et_pb_row::before,
.mers-cardrow.et_pb_row::after { display: none; }
.mers-cardrow > .et_pb_column { margin: 0 !important; display: flex; }
.mers-cardrow > .et_pb_column > .et_pb_module { flex: 1 1 auto; margin-bottom: 0 !important; }

/* Equal-height chain down to the card. The <p> step is there because wpautop
   p-wraps a bare anchor, which is exactly what a linked card is. The same chain
   serves the other things that sit one-per-column: `.mers-choice` bigchoice
   cards (§5.10) and `.mers-panel` info panels. */
.mers-cardrow .et_pb_text_inner,
.mers-cardrow .et_pb_text_inner > p,
.mers-cardrow .mers-card,
.mers-cardrow .mers-choice,
.mers-cardrow .mers-panel { height: 100%; }
.mers-cardrow .et_pb_text_inner > p { margin: 0 !important; }
.mers-cardrow .mers-card,
.mers-cardrow .mers-panel { display: flex; flex-direction: column; }
/* Was `.mers-grid--2 > .mers-panel > .mers-linkgrid` (§5.5) — keep the link grid
   pinned to the panel bottom now that the grid parent is a Divi row. */
.mers-cardrow .mers-panel > .mers-linkgrid { margin-top: auto; }

.mers-cardrow--2 > .et_pb_column { width: calc((100% - 16px) / 2) !important; }
.mers-cardrow--3 > .et_pb_column { width: calc((100% - 32px) / 3) !important; }
.mers-cardrow--4 > .et_pb_column { width: calc((100% - 48px) / 4) !important; }

/* Row rhythm, mirroring the module rhythm these pages used to get from
   `.mers-section .et_pb_module + .et_pb_module`: 16px between the rows of one
   grid (above), 44px before a section H2, and no extra gap between that H2 and
   the first row of its group. */
.mers-headrow.et_pb_row { margin-top: 44px !important; }
.mers-contentrow.et_pb_row { margin-top: 24px !important; }
.mers-section .mers-headrow + .mers-cardrow.et_pb_row { margin-top: 0 !important; }
.mers-section > .et_pb_row:first-child { margin-top: 0 !important; }

@media (max-width: 980px) {
  .mers-cardrow--3 > .et_pb_column,
  .mers-cardrow--4 > .et_pb_column { width: calc((100% - 16px) / 2) !important; }
}
@media (max-width: 767px) {
  .mers-cardrow > .et_pb_column { width: 100% !important; }
}

/* 5.9 Numbered steps as one module per step (C.stepModules).
   `ol.mers-steps` was a grid with `gap: 12px`; once each step is its own module
   that gap is gone and the generic `.mers-section .et_pb_module + .et_pb_module`
   24px rhythm takes over, which reads as two unrelated boxes. Restore 12px
   between consecutive steps only — the module before the first step and the
   one after the last keep the section's normal 24px. */
.mers-section .mers-stepmod + .mers-stepmod { margin-top: 12px !important; }

/* 5.10 `.mers-choice` as the Employer Center's three primary cards.
   The component already existed for the home hero's three audience cards
   (§ "Choice grid"); mockup-2 draws the Employer Center cards with the same
   icon circle and serif title, plus a description line and a "View ›" label,
   so those two additions live here. Missing icons were the operator's note on
   2026-09-16 — the page had been built with plain `.mers-card`s. */
.mers-choice .d {
  font-size: .95rem; line-height: 1.5; color: var(--muted); margin: 0;
}
.mers-cardrow .mers-choice { justify-content: flex-start; }
/* Push the "View ›" label to the bottom so it lines up across the three cards
   however long the descriptions run. */
.mers-cardrow .mers-choice .go { margin-top: auto; padding-top: 10px; }

/* 5.11 FAQ accordion as one module per question (C.faqModules).
   `details.mers-faq` carried its own `margin-bottom: 10px` for the stack; once
   each question is a module the generic 24px module rhythm takes over, so move
   the 10px onto the module gap and zero the element's own margin. */
.mers-section .mers-faqmod + .mers-faqmod { margin-top: 10px !important; }
.mers-faqmod details.mers-faq { margin-bottom: 0; }

/* People cards, one per column, need the same equal-height chain as the others
   so photos and names line up across a row (§5.8). */
.mers-cardrow .mers-person { height: 100%; }

/* 5.12 Gold top-accent panel — the mockup's `.info-accent`, `.portal-action`,
   `.enroll-action` and `.about-summary`, which are all one treatment: a 4px
   gold rule across the top over rounded top corners. It had been built on
   /about/mers/ only, by hand in the Visual Builder, and missed everywhere else
   (operator, 2026-09-16); it is a shared class now so there is one source.

   The radius is the one a team member chose on /about/mers/ — 16px top, the
   design system's 4px bottom — rather than the mockup's flat 14/16px all round,
   so the accent reads as a lid on an otherwise square card.

   `--soft` is the action-panel variant (`.portal-action` / `.enroll-action`):
   the same lid over an offwhite panel rather than a white card. */
.mers-accent {
  border-top: 4px solid var(--accent) !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}
.mers-accent--soft {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent) !important;
}
.mers-accent--soft h3 { margin-top: 0; }