/* ============================================================
   ICQUOTES.COM - BROKER SUBPAGES (shared)
   ichra-university.htm, census-form.htm, ichra-certification.htm,
   find-a-broker.htm, ichra-rules.htm

   LOAD ORDER:  styles-a.css  ->  styles-broker.css  ->  styles-sub.css
   styles-a.css supplies the colours, fonts, header, footer and the
   pill buttons (.button .button-primary / .button-outline).
   styles-broker.css supplies .visually-hidden and .text-link.
   This file adds the pieces every subpage shares. Nothing here needs
   JavaScript, and nothing hides content from people without CSS.

   Every class is prefixed or specific enough not to collide with the
   two stylesheets above. The last five sections (ICHRA UNIVERSITY,
   CENSUS FORM, ICHRA CERTIFICATION, FIND AN ICHRA BROKER, ICHRA RULES)
   are each scoped to one page.

   ------------------------------------------------------------
   COMPONENTS (class names + minimal markup)
   ------------------------------------------------------------

   1. COMPACT HERO + BREADCRUMB  (.sub-hero, .crumbs)
      Misty mountains, about 240px tall on desktop.
      <div class="sub-hero">
        <div class="container sub-hero-inner">
          <nav class="crumbs" aria-label="Breadcrumb">
            <ol>
              <li><a href="broker-portal.htm">Broker Portal</a></li>
              <li aria-current="page">Page Name</li>
            </ol>
          </nav>
          <h1>Page Name</h1>
          <p class="sub-hero-lead">One short sentence.</p>
          <div class="sub-hero-actions">
            <a class="button button-primary" href="...">Do it <span class="button-arrow" aria-hidden="true">&rarr;</span></a>
            <a class="button button-outline" href="...">Other</a>
          </div>
        </div>
      </div>
      Optional: an icon inside any .button -
        <svg class="button-icon" aria-hidden="true" focusable="false"><use href="#i-..."></use></svg>

   2. SECTIONS  (.sub-section, .sub-band, .is-ruled)
      <section class="sub-section" aria-labelledby="x-title">  white
      <section class="sub-section sub-band" ...>               ice band
      <section class="sub-section is-ruled" ...>  white, with a hairline
        at the top - use when two white sections follow each other.
        <div class="container"> ... </div>
      </section>
      Tighter vertical padding: add .is-tight.

   3. SECTION HEADING  (.sub-head, .sub-kicker, .sub-title, .sub-intro)
      <div class="sub-head">                 (add .is-center to centre)
        <p class="sub-kicker">Small blue caps</p>
        <h2 class="sub-title" id="x-title">Georgia heading</h2>
        <p class="sub-intro">A sentence or two.</p>
      </div>
      Smaller heading inside a card or column: <h3 class="sub-h3">.

   4. CARDS AND GRIDS  (.sub-card, .sub-grid)
      <div class="sub-grid">            3 columns   (.is-2 / .is-4)
        <div class="sub-card"> <h3 class="sub-h3">..</h3> <p>..</p> </div>
      </div>
      White, 15px radius, hairline border - works on white and ice.
      Two-column "heading on the left, content on the right":
      <div class="sub-split">
        <div class="sub-split-side"> heading, intro </div>
        <div class="sub-split-main"> list, form, cards </div>
        <div class="sub-split-after"> extra links </div>   (optional)
      </div>
      .sub-split-after sits under the heading on wide screens, but
      AFTER the main column once the split stacks (1050px and under),
      so on a phone the main content comes first.

   5. NUMBERED STEPS  (.sub-steps, .sub-step-num)
      <ol class="sub-steps">           4 across  (.is-2 / .is-3)
        <li>
          <span class="sub-step-num" aria-hidden="true">1</span>
          <h3>Step title</h3>             (h3 or h4 - whatever keeps
          <p>Step text.</p>                the heading order unbroken)
        </li>
      </ol>

   6. FORM CARD  (.form-card, .field-label, .field-row, .field-input)
      A labelled text field and a submit button on one line
      (they stack under 560px).
      <form class="form-card" method="post" action="...">
        <label class="field-label" for="q">Label text</label>
        <span class="field-hint" id="q-hint">Optional hint.</span>
        <div class="field-row">
          <input class="field-input" type="text" id="q" name="..." aria-describedby="q-hint">
          <button class="button button-primary" type="submit">Search</button>
        </div>
      </form>

   7. FORM PAIR  (.form-pair, .form-choice)
      Two POST forms side by side, each a small card with a heading,
      a line of text and its own submit button (stacks under 760px).
      <div class="form-pair">
        <form class="form-choice" method="post" action="...">
          <input type="hidden" name="..." value="...">
          <h3 class="sub-h3">New here?</h3>
          <p>One line.</p>
          <button class="button button-primary" type="submit">Start</button>
        </form>
        <form class="form-choice" method="post" action="..."> ... </form>
      </div>
      Just two buttons in a row, no cards: wrap the forms in
      <div class="button-pair"> instead.

   8. VIDEOS  (.video-list / .video-row, .video-tiles / .video-tile,
               .video-feature)
      Every video link: target="_blank" rel="noopener", and ends with
      <span class="visually-hidden"> (opens in a new tab)</span>.
      a) List, one video per row:
      <ol class="video-list">
        <li>
          <a class="video-row" href="..." target="_blank" rel="noopener">
            <span class="video-play" aria-hidden="true"><svg><use href="#i-play"></use></svg></span>
            <span class="video-text">
              <span class="video-flag">Start here</span>        (optional)
              <span class="video-title">Title</span>
              <span class="video-meta">Zoom recording</span>    (optional)
            </span>
            <span class="video-len"><span class="visually-hidden">Length </span><time datetime="PT6M13S">6:13</time></span>
            <span class="visually-hidden"> (opens in a new tab)</span>
          </a>
        </li>
      </ol>
      b) Tiles, a numbered series in a grid (4 / 2 / 1 across):
      <ol class="video-tiles">
        <li>
          <a class="video-tile" href="..." target="_blank" rel="noopener">
            <span class="video-tile-top">
              <span class="sub-step-num" aria-hidden="true">1</span>
              <span class="video-len">...</span>
            </span>
            <span class="video-tile-title">Title</span>
            <span class="video-tile-go"><span class="video-play" aria-hidden="true"><svg><use href="#i-play"></use></svg></span>Watch</span>
            <span class="visually-hidden"> (opens in a new tab)</span>
          </a>
        </li>
      </ol>
      c) Featured video - poster on the left, text on the right:
      <div class="video-feature">
        <a class="video-poster" href="..." target="_blank" rel="noopener" tabindex="-1" aria-hidden="true">
          <img src="assets/video-poster.jpg" width="500" height="280" alt="">
        </a>
        <div class="video-feature-body"> kicker, h2, .video-feature-meta, p, buttons </div>
      </div>
      The poster is never drawn wider than its 500px.

   9. DOCUMENT / LINK CARD  (.doc-list, .doc-card, .doc-badge)
      <ul class="doc-list">
        <li>
          <a class="doc-card" href="....pdf" target="_blank" rel="noopener">
            <span class="doc-badge" aria-hidden="true">PDF</span>
                (or an icon: <span class="doc-badge"><svg><use href="#i-..."></use></svg></span>)
            <span class="doc-text">
              <span class="doc-title">Title</span>
              <span class="doc-desc">Optional line.</span>
            </span>
            <svg class="doc-arrow" aria-hidden="true" focusable="false"><use href="#i-line-arrow"></use></svg>
            <span class="visually-hidden"> (PDF, opens in a new tab)</span>
          </a>
        </li>
      </ul>
      .doc-list.is-grid lays the cards out 2 across (1 on phones).

   10. NOTE  (.sub-note)   a quiet ice box with a blue edge.
      <p class="sub-note">More videos are on the way.</p>

   11. BACK TO THE PORTAL  (.back-band, .back-card)
      <div class="back-band">
        <div class="container">
          <div class="back-card">
            <div class="back-copy">
              <h2 class="back-title"><a href="broker-portal.htm">
                <svg aria-hidden="true" focusable="false"><use href="#i-line-arrow"></use></svg>
                Back to the Broker Portal</a></h2>
              <p>One sentence.</p>
            </div>
            <div class="back-actions">
              <a class="button button-primary" href="https://icquotes.com/cgi-bin/AgencyPortalLogin.pl">Log in to your portal <span class="button-arrow" aria-hidden="true">&rarr;</span></a>
              <a class="button button-outline" href="https://www.ichrasystems.com/cgi-bin/ICHRAContact.pl">Book a Demo</a>
            </div>
          </div>
        </div>
      </div>

   ICONS the components expect in the page's <svg> sprite:
     #i-arrow, #i-line-arrow, #i-play  (copy them from ichra-university.htm)

   BREAKPOINTS match styles-a.css / styles-broker.css:
     1360, 1250, 1050, 760, 560, 480, 420
   ============================================================ */


/* ---------- SMALL SHARED BITS ---------- */

/* <button> needs the page font; <a class="button"> already has it. */
button.button {
  font-family: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #00428e; outline-offset: 4px; }

/* styles-a.css resets the margins of h1-h3 only. */
h4 { margin: 0; }

/* An icon inside a pill button. */
.button-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* In-page jumps land a little below the top edge. */
.sub-section[id],
.sub-section [id] { scroll-margin-top: 16px; }


/* ============================================================
   1. COMPACT HERO + BREADCRUMB
   Same two pictures and white wash as .broker-hero, only shorter.
   ============================================================ */
.sub-hero {
  background-color: #eaf3fb;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .66) 38%, rgba(255, 255, 255, .12) 64%, rgba(255, 255, 255, 0) 100%),
    url("assets/broker-hero-panorama.jpg");
  background-position: center, var(--sub-hero-position, center 58%);
  background-size: cover, cover;
  background-repeat: no-repeat;
}
.sub-hero-inner { padding: 22px 0 30px; }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: 14px;
  line-height: 1.4;
}
.crumbs li { display: flex; align-items: center; color: #3b4a61; }
.crumbs li + li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0 13px 0 9px;
  border-top: 1.6px solid #6d7d94;
  border-right: 1.6px solid #6d7d94;
  transform: rotate(45deg);
}
.crumbs a { color: var(--blue); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.crumbs a:focus-visible { outline-offset: 3px; }

.sub-hero h1 {
  margin-top: 12px;
  color: var(--navy);
  font-size: clamp(44px, 3.3vw, 58px);
  letter-spacing: -1.9px;
  line-height: 1.03;
}
.sub-hero-lead {
  max-width: 720px;
  margin-top: 8px;
  color: #3b4a61;
  font-size: clamp(16px, 1.1vw, 18.5px);
  line-height: 1.5;
}
.sub-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.sub-hero-actions .button { min-height: 48px; padding: 10px 24px; font-size: 15.5px; gap: 12px; }


/* ============================================================
   2-3. SECTIONS AND HEADINGS
   ============================================================ */
.sub-section { padding: 54px 0 58px; background: #fff; }
.sub-section.sub-band { background: var(--ice); }
.sub-section.is-tight { padding: 36px 0 40px; }
.sub-section.is-ruled { padding-top: 0; }
.sub-section.is-ruled > .container { padding-top: 52px; border-top: 1px solid var(--line); }

.sub-head { max-width: 760px; margin-bottom: 30px; }
.sub-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.sub-kicker {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  line-height: 1.5;
  text-transform: uppercase;
}
.sub-title {
  margin-top: 8px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(29px, 2.25vw, 38px);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.15;
}
.sub-intro {
  margin-top: 12px;
  color: var(--body-text);
  font-size: 16.5px;
  line-height: 1.6;
}
.sub-h3 {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -.4px;
  line-height: 1.25;
}


/* ============================================================
   4. CARDS, GRIDS AND THE SPLIT LAYOUT
   ============================================================ */
.sub-card {
  min-width: 0;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(8, 30, 59, .04);
}
.sub-card p { margin-top: 8px; color: var(--body-text); font-size: 15px; line-height: 1.55; }

.sub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sub-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sub-split {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "side main" "after main";
  gap: 28px 64px;
  align-items: start;
}
.sub-split-side  { grid-area: side; min-width: 0; }
.sub-split-main  { grid-area: main; min-width: 0; }
.sub-split-after { grid-area: after; min-width: 0; }
.sub-split-side .sub-head { margin-bottom: 0; }


/* ============================================================
   5. NUMBERED STEPS
   ============================================================ */
.sub-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.sub-steps.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-steps.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub-steps > li { min-width: 0; }
.sub-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #0a6bc8;
  background: #dceeff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
.sub-steps .sub-step-num { margin-bottom: 13px; }
.sub-steps h3,
.sub-steps h4 {
  margin: 0;               /* styles-a.css resets h1-h3 only */
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.3px;
  line-height: 1.3;
}
.sub-steps p { margin-top: 7px; color: var(--body-text); font-size: 15px; line-height: 1.56; }


/* ============================================================
   6-7. FORMS
   ============================================================ */
.form-card {
  min-width: 0;
  padding: 26px 28px 28px;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: var(--card-radius);
  box-shadow: 0 12px 30px rgba(8, 30, 59, .07);
}
.field-label {
  display: block;
  color: var(--navy);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
}
.field-hint { display: block; margin-top: 4px; color: var(--body-text); font-size: 14px; line-height: 1.5; }
.field-row { display: flex; gap: 12px; margin-top: 14px; }
.field-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  padding: 12px 22px;
  color: var(--navy);
  background: #fff;
  border: 1px solid #6d8db0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
}
.field-input:hover { border-color: var(--blue); }
.field-input:focus { border-color: var(--blue); outline: 3px solid #00428e; outline-offset: 2px; }
.field-row .button { flex: 0 0 auto; }

.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 26px 28px 28px;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(8, 30, 59, .04);
}
.form-choice p { color: var(--body-text); font-size: 15px; line-height: 1.55; }
.form-choice .button { margin-top: auto; }
.form-choice p + .button { margin-top: 8px; }

.button-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.button-pair > form { margin: 0; }


/* ============================================================
   8. VIDEOS
   ============================================================ */
.video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--button-blue);
  transition: background-color .15s ease;
}
.video-play svg { width: 16px; height: 16px; margin-left: 3px; fill: #fff; }

.video-len {
  flex: 0 0 auto;
  padding: 3px 11px;
  color: #3b4a61;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}

/* a) the list */
.video-list { border-top: 1px solid var(--line); }
.video-list > li { border-bottom: 1px solid var(--line); }
.video-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 10px;
}
.video-row:hover { background: var(--ice); }
.video-row:hover .video-play { background: #0055ad; }
.video-row:focus-visible { outline: 3px solid #00428e; outline-offset: -3px; }
.video-text { display: block; min-width: 0; }
.video-flag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  color: var(--blue);
  background: #e0efff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.6;
  text-transform: uppercase;
}
.video-title {
  display: block;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 19px;
  letter-spacing: -.4px;
  line-height: 1.3;
}
.video-meta { display: block; margin-top: 4px; color: var(--body-text); font-size: 14px; line-height: 1.45; }

/* b) the tiles */
.video-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.video-tiles > li { display: flex; min-width: 0; }
.video-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px 20px 18px;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(8, 30, 59, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.video-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(8, 30, 59, .12); }
.video-tile:hover .video-play { background: #0055ad; }
.video-tile:focus-visible { outline: 3px solid #00428e; outline-offset: 3px; }
.video-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.video-tile-title {
  display: block;
  margin-top: 16px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: -.3px;
  line-height: 1.3;
}
.video-tile-go {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
}
.video-tile-go .video-play { flex-basis: 34px; width: 34px; height: 34px; }
.video-tile-go .video-play svg { width: 13px; height: 13px; margin-left: 2px; }

/* c) the featured video */
.video-feature {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 44px rgba(8, 30, 59, .10), 0 2px 6px rgba(8, 30, 59, .05);
}
.video-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-right: 1px solid var(--line);
}
.video-poster img { width: 100%; max-width: 500px; height: auto; }
.video-feature-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 30px 40px 32px;
}
.video-feature-body .sub-title { font-size: clamp(26px, 1.9vw, 32px); }
.video-feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  color: var(--body-text);
  font-size: 14.5px;
}
.video-feature-body p:not(.sub-kicker) { color: var(--body-text); font-size: 15.5px; line-height: 1.55; }
.video-feature-meta + p { margin-top: 12px; }
.video-feature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 20px;
}
.video-feature-actions .button { min-height: 50px; }


/* ============================================================
   9. DOCUMENT / LINK CARDS
   ============================================================ */
.doc-list { display: grid; gap: 12px; }
.doc-list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-list > li { display: flex; min-width: 0; }
.doc-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px 13px 14px;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.doc-card:hover { border-color: #9cc4ec; box-shadow: 0 8px 18px rgba(8, 30, 59, .08); }
.doc-card:focus-visible { outline: 3px solid #00428e; outline-offset: 3px; }
.doc-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 48px;
  color: var(--blue);
  background: #e0efff;
  border-radius: 6px 14px 6px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
}
.doc-badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.doc-badge svg.is-solid { fill: currentColor; stroke: none; margin-left: 2px; width: 16px; height: 16px; }
.doc-text { display: block; min-width: 0; }
.doc-title {
  display: block;
  color: var(--navy);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}
.doc-desc { display: block; margin-top: 3px; color: var(--body-text); font-size: 14px; line-height: 1.45; }
.doc-arrow {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}
.doc-card:hover .doc-arrow { transform: translateX(3px); }


/* ============================================================
   10. NOTE
   ============================================================ */
.sub-note {
  padding: 13px 18px;
  color: #3b4a61;
  background: var(--ice);
  border-left: 3px solid var(--button-blue);
  border-radius: 4px 10px 10px 4px;
  font-size: 15px;
  line-height: 1.5;
}
.sub-band .sub-note { background: #fff; }


/* ============================================================
   11. BACK TO THE PORTAL
   ============================================================ */
.back-band { padding: 38px 0 42px; background: var(--ice); }
.back-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
  padding: 28px 34px;
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(8, 30, 59, .04);
}
.back-copy { min-width: 0; flex: 1 1 380px; }
.back-title {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(24px, 1.8vw, 30px);
  font-weight: 400;
  letter-spacing: -.7px;
  line-height: 1.2;
}
.back-title a { display: inline-flex; align-items: center; gap: 14px; }
.back-title a:hover { color: var(--blue); }
.back-title svg {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(-1);
  transition: transform .15s ease;
}
.back-title a:hover svg { transform: scaleX(-1) translateX(3px); }
.back-copy p { margin-top: 8px; color: var(--body-text); font-size: 15.5px; line-height: 1.55; }
.back-actions { display: flex; flex-wrap: wrap; gap: 12px; }


/* ============================================================
   RESPONSIVE - shared components
   ============================================================ */
@media (max-width: 1360px) {
  .sub-split { grid-template-columns: minmax(0, 310px) minmax(0, 1fr); column-gap: 48px; }
  .video-feature { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}

@media (max-width: 1250px) {
  .sub-steps { gap: 24px 24px; }
  .sub-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-tiles { gap: 14px; }
  .video-tile { padding: 18px 16px 16px; }
  .video-tile-title { font-size: 17px; }
  .video-feature-body { padding: 26px 32px 28px; }
}

/* Tablets: the hero switches picture, the split stacks, four-across
   grids go to two. */
@media (max-width: 1050px) {
  .sub-hero {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, .34) 100%),
      url("assets/broker-hero-mountains.jpg");
    background-position: center, center 62%;
  }
  .sub-hero-inner { padding: 24px 0 32px; }
  .sub-hero h1 { font-size: clamp(40px, 5vw, 50px); letter-spacing: -1.5px; }
  .sub-section { padding: 44px 0 48px; }
  .sub-section.is-ruled > .container { padding-top: 44px; }
  .sub-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "side" "main" "after";
    gap: 26px;
  }
  .sub-split-side .sub-head { max-width: 680px; }
  .sub-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-steps.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .video-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .sub-hero-inner { padding: 20px 0 28px; }
  .sub-hero h1 { font-size: clamp(38px, 7vw, 46px); letter-spacing: -1.3px; }
  .sub-hero-lead { margin-top: 8px; }
  .sub-hero-actions { margin-top: 18px; gap: 10px; }
  .sub-section { padding: 36px 0 40px; }
  .sub-section.is-tight { padding: 28px 0 32px; }
  .sub-section.is-ruled > .container { padding-top: 36px; }
  .sub-head { margin-bottom: 22px; }
  .sub-title { font-size: 28px; letter-spacing: -.8px; }
  .sub-intro { font-size: 15.5px; }
  .sub-grid,
  .sub-grid.is-2,
  .sub-grid.is-4 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sub-steps.is-3 { grid-template-columns: minmax(0, 1fr); }
  .form-pair { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .doc-list.is-grid { grid-template-columns: minmax(0, 1fr); }
  .video-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; padding: 14px 4px; }
  .video-row .video-play { flex-basis: 38px; width: 38px; height: 38px; }
  .video-row .video-play svg { width: 14px; height: 14px; }
  .video-title { font-size: 17.5px; }
  /* The poster goes on top; it keeps its own 500px limit. */
  .video-feature { grid-template-columns: minmax(0, 1fr); }
  .video-poster { border-right: 0; border-bottom: 1px solid var(--line); }
  .video-feature-body { padding: 22px 22px 24px; }
  .back-band { padding: 30px 0 34px; }
  .back-card { padding: 24px 22px; }
  .back-copy { flex-basis: 100%; }
}

@media (max-width: 560px) {
  .sub-hero-actions .button { flex: 1 1 auto; padding: 10px 18px; }
  .sub-steps,
  .sub-steps.is-2 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* The number sits beside the step instead of above it. */
  .sub-steps > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .sub-steps .sub-step-num { grid-row: 1 / span 2; width: 34px; height: 34px; margin-bottom: 0; font-size: 16px; }
  .sub-steps > li > :not(.sub-step-num) { grid-column: 2; }
  .sub-steps h3,
  .sub-steps h4 { padding-top: 6px; }
  .video-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Tiles become compact rows: number | title and length | play. */
  .video-tile {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 14px 14px 16px;
  }
  .video-tile-top { display: contents; }
  .video-tile .sub-step-num { grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; font-size: 16px; }
  .video-tile-title { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 17px; }
  .video-tile .video-len { grid-column: 2; grid-row: 2; justify-self: start; padding: 1px 9px; font-size: 13px; }
  .video-tile-go { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; gap: 0; font-size: 0; }
  .field-row { flex-direction: column; }
  .field-row .button { width: 100%; }
  .form-card,
  .form-choice,
  .sub-card { padding: 22px 20px; }
  /* The length drops under the title rather than squeezing it. */
  .video-row { grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
  .video-row .video-len { grid-column: 2; justify-self: start; margin-top: -4px; }
}

/* Long button labels have to wrap on a phone, or the page scrolls
   sideways (styles-a.css sets white-space:nowrap on .button). */
@media (max-width: 480px) {
  .back-actions .button,
  .video-feature-actions .button,
  .form-choice .button { width: 100%; white-space: normal; }
  .button-pair,
  .button-pair > form,
  .button-pair .button { width: 100%; }
  .button-pair .button { white-space: normal; }
}

@media (max-width: 420px) {
  .sub-hero h1 { font-size: 36px; letter-spacing: -1px; }
  .sub-hero-lead { font-size: 15.5px; }
  .crumbs ol { font-size: 13.5px; }
  .sub-title { font-size: 26px; }
  .video-feature-body { padding: 20px 18px 22px; }
  .video-feature-body .sub-title { font-size: 24px; letter-spacing: -.6px; }
  .video-title { font-size: 17px; }
  .doc-card { grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 12px; padding: 12px; }
  .doc-badge { width: 38px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-tile, .doc-card, .doc-arrow, .back-title svg, .video-play { transition: none; }
  .video-tile:hover { transform: none; }
  .doc-card:hover .doc-arrow { transform: none; }
  .back-title a:hover svg { transform: scaleX(-1); }
}

@media print {
  .sub-hero { background: none; }
  .sub-hero-actions, .back-actions { display: none; }
  .sub-band, .back-band { background: none; }
  .video-feature, .video-tile, .form-card { box-shadow: none; }
}


/* ============================================================
   ICHRA UNIVERSITY (ichra-university.htm only)
   Everything below is scoped with the .uni- prefix.
   ============================================================ */

/* The round blue icon at the top of each track. */
.uni-track-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1b7fe3 0%, var(--blue) 100%);
  box-shadow: 0 6px 14px rgba(7, 90, 189, .22);
}
.uni-track-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The resources under each track's heading. */
.uni-resources { margin: 0; }
.uni-resources-title {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.uni-side-action { margin-top: 24px; }

/* "Then: the step-by-step series" at the foot of a track's list. */
.uni-next {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 20px;
  color: var(--navy);
  background: var(--ice);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.45;
}
.uni-next:hover { background: #e4effa; }
.uni-next:focus-visible { outline: 3px solid #00428e; outline-offset: 3px; }
.uni-next-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  color: #fff;
  background: var(--button-blue);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.uni-next-text { flex: 1 1 auto; min-width: 0; }
.uni-next-text b { display: block; font-family: var(--font-heading); font-size: 18px; font-weight: 400; letter-spacing: -.3px; }
.uni-next-text span { color: var(--body-text); }
.uni-next svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
}

/* The employee track's "How an ICHRA works" card. */
.uni-explainer { margin-top: 28px; padding: 28px 30px 30px; }
.uni-explainer > p { margin-top: 10px; font-size: 15.5px; }
.uni-explainer .sub-steps { margin-top: 24px; gap: 24px 30px; }
.uni-explainer .sub-steps p { margin-top: 6px; font-size: 14.5px; }
.uni-note { margin-top: 18px; }

@media (max-width: 1050px) {
  .uni-track-icon { width: 50px; height: 50px; margin-bottom: 14px; }
  .uni-track-icon svg { width: 23px; height: 23px; }
  .uni-resources .doc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .uni-resources .doc-list { grid-template-columns: minmax(0, 1fr); }
  .uni-explainer { padding: 22px 20px 24px; }
}
@media (max-width: 420px) {
  .uni-next { gap: 12px; padding: 14px; }
  .uni-next svg { display: none; }   /* decorative; the text says where it goes */
  .uni-next-badge { min-width: 40px; height: 40px; font-size: 13px; }
  .uni-next-text b { font-size: 17px; }
}


/* ============================================================
   CENSUS FORM (census-form.htm only)
   Page section, like "ICHRA UNIVERSITY". Every rule is scoped under
   body.page-census-form and every new class uses the .cf- prefix.

   PIECES
   .cf-filetag       the "XLSX" tag inside the hero's download pill
   .cf-how           "How it works": heading + three steps in one card
   .cf-fields        the six company fields, as quiet ice tiles
   .cf-compare       the seven contribution strategies: one row each,
                     the form's own sentence on the left and three
                     facts restated on the right (pays / plan / for).
                     Wide screens show a column-heading row (hidden
                     from screen readers); every row also carries
                     its own <dt> labels, visually hidden. At 1050px
                     and under the facts become chips under the text.
   .cf-sheet         the census columns as a spreadsheet illustration
                     (empty rows). At 760px and under the headings
                     become a two-column grid and the empty rows go.
   .cf-contacts      email / phone / fax tiles
   .cf-next          "What happens next"
   .cf-side-title    small caps title over the related videos
   ============================================================ */

/* ---------- HERO: file tag in the download pill ---------- */
body.page-census-form .cf-filetag {
  margin-left: -2px;
  padding: 1px 8px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.5;
}

/* ---------- HOW IT WORKS ---------- */
body.page-census-form .cf-how {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  align-items: start;
  gap: 24px 56px;
  padding: 30px 36px 32px;
}
/* .sub-card p would otherwise set the kicker in 15px grey. */
body.page-census-form .cf-how-head .sub-kicker { margin-top: 0; color: var(--blue); font-size: 11px; }
body.page-census-form .cf-how-head .sub-title { font-size: clamp(27px, 1.9vw, 32px); }
body.page-census-form .cf-how .sub-steps { gap: 24px 44px; }
body.page-census-form .cf-how .sub-steps > li { position: relative; }
/* A dashed line joins each step number to the next. */
body.page-census-form .cf-how .sub-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 52px;
  right: -30px;
  border-top: 1.5px dashed #b9d5f1;
}
body.page-census-form .cf-how .text-link { justify-self: start; margin-top: 12px; }

/* ---------- COMPANY DETAILS ---------- */
body.page-census-form #company .sub-split-side .sub-head { padding-top: 4px; }
body.page-census-form .cf-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.page-census-form .cf-fields li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 18px 14px 14px;
  color: var(--navy);
  background: var(--ice);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
body.page-census-form .cf-field-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(8, 30, 59, .06);
}
body.page-census-form .cf-field-icon svg,
body.page-census-form .cf-for svg,
body.page-census-form .cf-sheet-bar svg,
body.page-census-form .cf-contact-icon svg,
body.page-census-form .cf-next-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.page-census-form .cf-field-icon svg { width: 20px; height: 20px; color: var(--blue); }

/* ---------- COMPANY CONTRIBUTION: the seven strategies ---------- */
body.page-census-form .cf-compare {
  --cf-facts: 150px 180px minmax(0, 1fr);
  --cf-facts-width: 600px;
  padding: 6px 34px 12px;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: var(--card-radius);
  box-shadow: 0 12px 30px rgba(8, 30, 59, .06);
}
body.page-census-form .cf-compare-head,
body.page-census-form .cf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cf-facts-width);
  column-gap: 48px;
}
body.page-census-form .cf-head-facts,
body.page-census-form .cf-facts {
  display: grid;
  grid-template-columns: var(--cf-facts);
  column-gap: 28px;
  align-items: center;
}
body.page-census-form .cf-compare-head {
  padding: 18px 0 13px;
  border-bottom: 1px solid var(--line);
  color: #3b4a61;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.4;
  text-transform: uppercase;
}

/* The two groups: "Percentage of a plan" and "Lump amount". */
body.page-census-form .cf-group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0 4px;
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  line-height: 1.5;
  text-transform: uppercase;
}
body.page-census-form .cf-group::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid #e3eef9;
}
body.page-census-form .cf-rows + .cf-group { margin-top: 4px; border-top: 1px solid var(--line); }

body.page-census-form .cf-row {
  align-items: center;
  padding: 17px 0 18px;
  border-bottom: 1px solid #e3eef9;
}
body.page-census-form .cf-rows > li:last-child { border-bottom: 0; }
body.page-census-form .cf-strategy { min-width: 0; }
body.page-census-form .cf-name {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.4px;
  line-height: 1.25;
}
body.page-census-form .cf-words {
  max-width: 70ch;
  margin-top: 5px;
  color: var(--body-text);
  font-size: 15px;
  line-height: 1.55;
}
body.page-census-form .cf-blank-text { color: #6d7d94; letter-spacing: 1px; }

/* The facts. On wide screens the column headings name them, so the
   <dt>s are read out but not shown. */
body.page-census-form .cf-facts { margin: 0; }
body.page-census-form .cf-facts > div { min-width: 0; }
body.page-census-form .cf-facts dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.page-census-form .cf-facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 9px;
  margin: 0;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.4;
}
body.page-census-form .cf-num {
  display: inline-flex;
  align-items: baseline;
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 34px;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
body.page-census-form .cf-num-sub {
  flex-basis: 100%;
  color: var(--body-text);
  font-size: 13.5px;
  line-height: 1.35;
}
/* The "$___" blank of the lump amounts. */
body.page-census-form .cf-blank {
  display: inline-block;
  width: 46px;
  margin-left: 4px;
  border-bottom: 2px solid #9cc4ec;
}
/* Silver / bronze dot beside the plan name (decoration only). */
body.page-census-form .cf-tier {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
body.page-census-form .cf-tier.is-silver { background: linear-gradient(135deg, #e3e8ee 0%, #a3adb9 100%); box-shadow: inset 0 0 0 1px #8f9aa7; }
body.page-census-form .cf-tier.is-bronze { background: linear-gradient(135deg, #e2a878 0%, #a8683a 100%); box-shadow: inset 0 0 0 1px #94592f; }
body.page-census-form .cf-plan dd { font-weight: 600; }
/* Lump amounts name no plan: a dash in the table, words in the chips. */
body.page-census-form .cf-dash { color: #3b4a61; font-weight: 400; }
body.page-census-form .cf-none {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.page-census-form .cf-for dd { flex-wrap: nowrap; align-items: flex-start; color: #3b4a61; }
body.page-census-form .cf-for svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--blue); }

/* ---------- THE CENSUS: spreadsheet illustration ---------- */
body.page-census-form .cf-sheet {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: var(--card-radius);
  box-shadow: 0 12px 30px rgba(8, 30, 59, .07);
}
body.page-census-form .cf-sheet-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  color: var(--navy);
  background: var(--ice);
  border-bottom: 1px solid #dbe8f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
body.page-census-form .cf-sheet-bar svg { width: 18px; height: 18px; color: var(--blue); }
body.page-census-form .cf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
body.page-census-form .cf-table th {
  padding: 14px 14px 13px;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  border-right: 1px solid #e3eef9;
  border-bottom: 2px solid var(--line);
}
body.page-census-form .cf-table th:last-child,
body.page-census-form .cf-table td:last-child { border-right: 0; }
body.page-census-form .cf-col {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
body.page-census-form .cf-fmt,
body.page-census-form .cf-opt {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
body.page-census-form .cf-fmt { color: var(--blue); background: #e0efff; font-variant-numeric: tabular-nums; }
body.page-census-form .cf-opt {
  color: #3b4a61;
  border: 1px dashed #97abc2;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
body.page-census-form .cf-table td {
  height: 38px;
  border-right: 1px solid #e3eef9;
  border-bottom: 1px solid #e3eef9;
}
/* The empty rows fade out: the list goes on for as many people as
   the group has. */
body.page-census-form .cf-table tbody tr:nth-child(3) td { height: 30px; border-bottom-color: #eef4fb; border-right-color: #eef4fb; }
body.page-census-form .cf-table tbody tr:nth-child(4) td { height: 18px; border-bottom: 0; border-right-color: #f4f8fc; }
body.page-census-form .cf-sheet-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
  padding: 13px 18px 14px;
  color: var(--body-text);
  border-top: 1px solid #e3eef9;
  font-size: 14px;
  line-height: 1.5;
}
body.page-census-form .cf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: #3b4a61; }
body.page-census-form .cf-legend b { color: var(--navy); font-weight: 600; }
body.page-census-form .cf-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  color: var(--blue);
  background: #e0efff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- SEND IT BACK ---------- */
body.page-census-form .cf-contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.page-census-form .cf-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: 12px;
}
body.page-census-form .cf-contact.is-wide { grid-column: 1 / -1; }
body.page-census-form .cf-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(140deg, #1b7fe3 0%, var(--blue) 100%);
  box-shadow: 0 5px 12px rgba(7, 90, 189, .2);
}
body.page-census-form .cf-contact-icon svg { width: 21px; height: 21px; stroke-width: 1.7; }
body.page-census-form .cf-contact-text { display: block; min-width: 0; }
body.page-census-form .cf-contact-label {
  display: block;
  color: #3b4a61;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.4;
  text-transform: uppercase;
}
body.page-census-form .cf-contact-value {
  display: inline-block;
  margin-top: 2px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: -.3px;
  line-height: 1.3;
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}
body.page-census-form a.cf-contact-value {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: rgba(7, 90, 189, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
body.page-census-form a.cf-contact-value:hover { text-decoration-color: currentColor; }
body.page-census-form a.cf-contact-value:focus-visible { outline-offset: 3px; }

body.page-census-form .cf-next {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 20px;
  padding: 22px 26px 24px;
  background: var(--ice);
  border-left: 3px solid var(--button-blue);
  border-radius: 4px var(--card-radius) var(--card-radius) 4px;
}
body.page-census-form .cf-next-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: var(--blue);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(8, 30, 59, .06);
}
body.page-census-form .cf-next-icon svg { width: 22px; height: 22px; }
body.page-census-form .cf-next-text { min-width: 0; }
body.page-census-form .cf-next p { margin-top: 6px; color: #3b4a61; font-size: 16px; line-height: 1.6; }

body.page-census-form .cf-side-title {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 1.5;
  text-transform: uppercase;
}
body.page-census-form .cf-side-link { margin-top: 16px; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1360px) {
  body.page-census-form .cf-compare { --cf-facts: 140px 160px minmax(0, 1fr); --cf-facts-width: 550px; }
  body.page-census-form .cf-compare-head,
  body.page-census-form .cf-row { column-gap: 40px; }
}

@media (max-width: 1250px) {
  body.page-census-form .cf-how { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px 36px; padding: 28px 30px 30px; }
  body.page-census-form .cf-how .sub-steps { gap: 24px 36px; }
  body.page-census-form .cf-how .sub-steps > li:not(:last-child)::after { right: -24px; }
  body.page-census-form .cf-fields { gap: 10px; }
  body.page-census-form .cf-fields li { gap: 12px; padding: 12px 12px 12px 12px; font-size: 15px; }
  body.page-census-form .cf-field-icon { flex-basis: 36px; width: 36px; height: 36px; }
  body.page-census-form .cf-field-icon svg { width: 19px; height: 19px; }
  body.page-census-form .cf-compare { --cf-facts: 118px 150px minmax(0, 1fr); --cf-facts-width: 470px; padding: 6px 28px 12px; }
  body.page-census-form .cf-compare-head,
  body.page-census-form .cf-row { column-gap: 32px; }
  body.page-census-form .cf-head-facts,
  body.page-census-form .cf-facts { column-gap: 22px; }
  body.page-census-form .cf-num { font-size: 30px; }
  body.page-census-form .cf-col { font-size: 14px; }
  body.page-census-form .cf-table th { padding: 13px 11px 12px; }
}

/* Tablets: the strategies drop their column headings; each row's
   facts become chips under its sentence. */
@media (max-width: 1050px) {
  body.page-census-form .cf-how { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  body.page-census-form .cf-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-census-form .cf-compare { padding: 4px 26px 10px; }
  body.page-census-form .cf-compare-head { display: none; }
  body.page-census-form .cf-row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  body.page-census-form .cf-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  body.page-census-form .cf-facts dd {
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 34px;
    padding: 5px 13px;
    background: var(--ice);
    border-radius: 999px;
    font-size: 14px;
  }
  body.page-census-form .cf-num { font-size: 19px; letter-spacing: -.3px; }
  body.page-census-form .cf-num-sub { flex-basis: auto; font-size: 13.5px; }
  body.page-census-form .cf-blank { width: 30px; }
  body.page-census-form .cf-for svg { flex-basis: 18px; width: 18px; height: 18px; }
  body.page-census-form .cf-for dd { align-items: center; }
  body.page-census-form .cf-dash { display: none; }
  body.page-census-form .cf-none { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-weight: 400; color: #3b4a61; }
}

/* Phones: the census headings become a two-column grid. */
@media (max-width: 760px) {
  body.page-census-form .cf-how { padding: 24px 22px 26px; }
  body.page-census-form .cf-how .sub-steps > li:not(:last-child)::after { display: none; }
  /* One step per line from here down, so the number sits beside the
     step (styles-sub.css only does this under 560px). */
  body.page-census-form .cf-how .sub-steps > li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; }
  body.page-census-form .cf-how .sub-steps .sub-step-num { grid-row: 1 / span 3; margin-bottom: 0; }
  body.page-census-form .cf-how .sub-steps > li > :not(.sub-step-num) { grid-column: 2; }
  body.page-census-form .cf-how .sub-steps h3 { padding-top: 7px; }
  body.page-census-form .cf-how .text-link { margin-top: 10px; }
  body.page-census-form .cf-compare { padding: 2px 20px 8px; }
  body.page-census-form .cf-group { padding-top: 18px; }
  body.page-census-form .cf-row { padding: 15px 0 16px; }
  body.page-census-form .cf-name { font-size: 19px; }
  body.page-census-form .cf-table,
  body.page-census-form .cf-table thead { display: block; }
  body.page-census-form .cf-table thead tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.page-census-form .cf-table th {
    display: block;
    min-width: 0;
    padding: 13px 14px 11px;
    border-bottom: 1px solid #e3eef9;
  }
  body.page-census-form .cf-table th:nth-child(odd) { border-right: 1px solid #e3eef9; }
  body.page-census-form .cf-table th:nth-child(even) { border-right: 0; }
  body.page-census-form .cf-table th:nth-last-child(-n+2) { border-bottom: 0; }
  body.page-census-form .cf-table tbody { display: none; }
  body.page-census-form .cf-sheet-note { padding: 13px 14px 14px; }
  body.page-census-form .cf-contact { padding: 16px 16px; gap: 14px; }
  body.page-census-form .cf-contact-value { font-size: 20px; }
  body.page-census-form .cf-next { gap: 14px; padding: 20px 18px 22px; }
}

@media (max-width: 560px) {
  body.page-census-form .cf-how .sub-steps > li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  body.page-census-form .cf-how .sub-steps .sub-step-num { grid-row: 1 / span 3; }
  body.page-census-form .cf-how .sub-steps h3 { padding-top: 6px; }
  body.page-census-form .cf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The download pill has to fit a 320px screen. */
  body.page-census-form .sub-hero-actions .button { gap: 10px; }
}

@media (max-width: 480px) {
  body.page-census-form .cf-contacts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.page-census-form .cf-next-icon { flex-basis: 38px; width: 38px; height: 38px; }
  body.page-census-form .cf-next-icon svg { width: 19px; height: 19px; }
  body.page-census-form .cf-next p { font-size: 15px; }
}

@media (max-width: 420px) {
  body.page-census-form .cf-fields li { gap: 10px; padding: 10px 10px 10px 10px; font-size: 14.5px; }
  body.page-census-form .cf-field-icon { flex-basis: 34px; width: 34px; height: 34px; }
  body.page-census-form .cf-field-icon svg { width: 18px; height: 18px; }
  body.page-census-form .cf-compare { padding: 2px 16px 6px; }
  body.page-census-form .cf-facts dd { padding: 5px 11px; font-size: 13.5px; }
  body.page-census-form .cf-table th { padding: 12px 11px 10px; }
  body.page-census-form .cf-col { font-size: 14px; }
  body.page-census-form .cf-contact { gap: 12px; padding: 14px; }
  body.page-census-form .cf-contact-icon { flex-basis: 36px; width: 36px; height: 36px; }
  body.page-census-form .cf-contact-icon svg { width: 18px; height: 18px; }
  body.page-census-form .cf-contact-value { font-size: 18px; }
  /* The XLSX tag goes on very small screens (the step below still
     says XLSX; screen readers hear "Excel spreadsheet" throughout). */
  body.page-census-form .cf-filetag { display: none; }
}

@media print {
  body.page-census-form .cf-compare,
  body.page-census-form .cf-sheet { box-shadow: none; }
  body.page-census-form .cf-filetag { display: none; }
}


/* ============================================================
   ICHRA CERTIFICATION (ichra-certification.htm only)
   Page section. Every rule is scoped to
   body.page-ichra-certification, so nothing else changes.

   .cert-feature   the "Why get certified" card: the team photo on
                   the left, the statement and "Who it's for" on the
                   right. Built like .video-feature.
   .cert-statement the verbatim sales-leads sentence, in Georgia.
   .cert-label     small caps label ("Who it's for").
   .cert-who       the three audience chips with round blue icons.

   PHOTO: assets/broker-team.jpg, 500 x 375. It covers its column,
   and the column is sized so the picture is never drawn larger
   than 500 x 375 on desktop: 500px wide with a 375px minimum card
   height above 1360px, 460 x 345 from 1051 to 1360px, and a
   smaller crop from 761 to 1050px. At 760px and under it becomes a
   banner the card's width, so all three people stay in view; from
   561 to 760px (small tablets) that draws it up to 1.4x. Measured
   at every breakpoint edge from 320 to 1920px.

   The two hero buttons are the certification's two POST forms, so
   each button sits inside its own <form> in .sub-hero-actions
   .button-pair; the 560px rule below lets the forms fill the row.
   ============================================================ */

body.page-ichra-certification .cert-feature {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  min-height: 375px;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 44px rgba(8, 30, 59, .10), 0 2px 6px rgba(8, 30, 59, .05);
}

/* ---------- THE PHOTO ---------- */
body.page-ichra-certification .cert-photo {
  position: relative;
  min-height: 100%;
  background: #dfe9f4;
  border-right: 1px solid var(--line);
}
body.page-ichra-certification .cert-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 46% 30%;
}
/* The same soft plate as the broker page's photo panel. */
body.page-ichra-certification .cert-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 30, 59, 0) 62%, rgba(8, 30, 59, .22) 100%),
    linear-gradient(90deg, rgba(7, 90, 189, .08) 0%, rgba(7, 90, 189, 0) 40%);
  pointer-events: none;
}

/* ---------- THE TEXT ---------- */
body.page-ichra-certification .cert-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 36px 48px 38px;
}
body.page-ichra-certification .cert-statement {
  max-width: 21em;
  margin-top: 12px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(27px, 1.95vw, 34px);
  font-weight: 400;
  letter-spacing: -.8px;
  line-height: 1.2;
}

/* A hairline with a short blue bar at its start, as on the
   broker page's "Why Brokers Choose" card. */
body.page-ichra-certification .cert-label {
  position: relative;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 1.5;
  text-transform: uppercase;
}
body.page-ichra-certification .cert-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--button-blue);
}

body.page-ichra-certification .cert-who {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 14px;
}
body.page-ichra-certification .cert-who li {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 6px 20px 6px 7px;
  color: var(--navy);
  background: var(--ice);
  border: 1px solid #dbe8f5;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}
body.page-ichra-certification .cert-who-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1b7fe3 0%, var(--blue) 100%);
  box-shadow: 0 3px 8px rgba(7, 90, 189, .22);
}
body.page-ichra-certification .cert-who-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   RESPONSIVE (same breakpoints as styles-sub.css)
   ============================================================ */

/* 1051-1360px: 460 x 345, the same as .video-feature. */
@media (max-width: 1360px) {
  body.page-ichra-certification .cert-feature { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); min-height: 345px; }
}

@media (max-width: 1250px) {
  body.page-ichra-certification .cert-body { padding: 30px 36px 32px; }
}

/* Tablets: a narrower photo column, cropped to the text's height
   (still never over 500 x 375). Smaller chips keep all three on one
   line, which keeps the card - and so the crop - short. The crop
   leans left so it ends between two people, not through a face. */
@media (max-width: 1050px) {
  body.page-ichra-certification .cert-feature { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); min-height: 0; }
  body.page-ichra-certification .cert-photo img { object-position: 8% 30%; }
  body.page-ichra-certification .cert-body { padding: 28px 28px 30px; }
  body.page-ichra-certification .cert-statement { font-size: 25px; letter-spacing: -.6px; }
  body.page-ichra-certification .cert-label { margin-top: 22px; padding-top: 18px; }
  body.page-ichra-certification .cert-who { gap: 8px; }
  body.page-ichra-certification .cert-who li { gap: 9px; min-height: 42px; padding: 5px 14px 5px 6px; font-size: 15px; }
  body.page-ichra-certification .cert-who-icon { flex-basis: 30px; width: 30px; height: 30px; }
  body.page-ichra-certification .cert-who-icon svg { width: 16px; height: 16px; }
}

/* Phones and small tablets: the photo becomes a short banner above
   the text, so all three people stay in the picture. */
@media (max-width: 760px) {
  body.page-ichra-certification .cert-feature { grid-template-columns: minmax(0, 1fr); }
  body.page-ichra-certification .cert-photo { height: 210px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  body.page-ichra-certification .cert-photo img { object-position: 50% 28%; }
  body.page-ichra-certification .cert-body { padding: 24px 24px 26px; }
  body.page-ichra-certification .cert-statement { font-size: 23px; }
}

/* The two hero forms share the row and grow to fill it, like the
   University page's pills (styles-sub.css does this for bare buttons;
   here each button sits inside its own <form>). */
@media (max-width: 560px) {
  body.page-ichra-certification .sub-hero-actions.button-pair > form { flex: 1 1 auto; }
  body.page-ichra-certification .sub-hero-actions.button-pair .button { width: 100%; }
  body.page-ichra-certification .cert-photo { height: 190px; }
  body.page-ichra-certification .cert-body { padding: 22px 20px 24px; }
}

@media (max-width: 420px) {
  body.page-ichra-certification .cert-photo { height: 170px; }
  body.page-ichra-certification .cert-body { padding: 20px 18px 22px; }
  body.page-ichra-certification .cert-statement { font-size: 22px; letter-spacing: -.5px; }
  body.page-ichra-certification .cert-who { gap: 8px; }
  body.page-ichra-certification .cert-who li { gap: 9px; padding-right: 14px; font-size: 14.5px; }
}

@media print {
  body.page-ichra-certification .cert-feature { box-shadow: none; border: 1px solid #ccc; }
  body.page-ichra-certification .cert-photo::after { display: none; }
}


/* ============================================================
   FIND AN ICHRA BROKER (find-a-broker.htm only)
   Page section. Every rule is scoped under
   body.page-find-a-broker and uses the .fab- prefix, so nothing on
   the other subpages changes.

   .fab-search       the search card: form on the left, team photo
                     on the right (a banner on top at 560px and under)
   .fab-form         the search form inside it (uses .field-label,
                     .field-row, .field-input from styles-sub.css)
   .fab-search-alt   "No broker yet? Other ways to get help"
   .fab-help         the three "Other ways to get help" cards
   .fab-icon         round blue icon (.is-large above a heading)
   .fab-len          a video length after a text link
   .fab-rows         the Broker Portal's .rows inside the split
   .fab-new          "New here?" strip under the broker rows

   PHOTO: assets/broker-team.jpg, 500 x 375. The photo column is
   capped at 460px and the card stays under 375px tall on desktop,
   so the photo is never drawn larger than its own pixels there.
   ============================================================ */

/* ---------- THE SEARCH CARD ---------- */
body.page-find-a-broker .fab-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 44px rgba(8, 30, 59, .10), 0 2px 6px rgba(8, 30, 59, .05);
}
body.page-find-a-broker .fab-search-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 34px 48px 32px;
}
body.page-find-a-broker .fab-search-body .sub-title { font-size: clamp(26px, 1.9vw, 32px); }

body.page-find-a-broker .fab-form { margin: 22px 0 0; }
body.page-find-a-broker .fab-form .field-label { text-wrap: balance; }
body.page-find-a-broker .fab-form .field-row .button {
  min-height: 54px;
  padding: 12px 30px;
  gap: 10px;
}

body.page-find-a-broker .fab-search-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 20px;
  color: var(--body-text);
  font-size: 15px;
}
/* The arrow points down the page. */
body.page-find-a-broker .fab-search-alt .text-link svg { transform: rotate(90deg); }
body.page-find-a-broker .fab-search-alt a.text-link:hover svg { transform: rotate(90deg) translateX(3px); }
body.page-find-a-broker .fab-search-alt a.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The photo fills its column and is cropped to the card's height.
   The same soft shade and white seam as the Broker Portal's
   featured card. */
body.page-find-a-broker .fab-search-photo {
  position: relative;
  min-height: 100%;
  background: #dfe9f4;
}
body.page-find-a-broker .fab-search-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 46% 30%;
}
body.page-find-a-broker .fab-search-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 30, 59, 0) 58%, rgba(8, 30, 59, .26) 100%),
    linear-gradient(270deg, rgba(7, 90, 189, .10) 0%, rgba(7, 90, 189, 0) 40%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .7);
  pointer-events: none;
}

/* ---------- ROUND ICONS ---------- */
body.page-find-a-broker .fab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1b7fe3 0%, var(--blue) 100%);
  box-shadow: 0 6px 14px rgba(7, 90, 189, .22);
}
body.page-find-a-broker .fab-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.page-find-a-broker .fab-icon.is-large { width: 56px; height: 56px; }
body.page-find-a-broker .fab-icon.is-large svg { width: 26px; height: 26px; }

/* ---------- OTHER WAYS TO GET HELP ---------- */
body.page-find-a-broker .fab-help-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 30px 28px;
}
body.page-find-a-broker .fab-help-card > p { margin-top: 8px; }
body.page-find-a-broker .fab-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: auto;
  padding-top: 22px;
}
body.page-find-a-broker .fab-card-actions .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* A length after a text link: the same pill as .video-len, smaller. */
body.page-find-a-broker .fab-len {
  padding: 0 8px;
  color: #3b4a61;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  white-space: nowrap;
}

/* ---------- FOR BROKERS ---------- */
/* The Broker Portal's rows, inside the right-hand column. */
body.page-find-a-broker .fab-rows .row { padding-left: 6px; padding-right: 6px; }

/* "New here?" - an ice strip under the rows: text | button. */
body.page-find-a-broker .fab-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 22px;
  padding: 20px 24px;
  background: var(--ice);
  border-radius: 12px;
}
body.page-find-a-broker .fab-new-copy { flex: 1 1 300px; min-width: 0; }
body.page-find-a-broker .fab-new-title {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.3px;
  line-height: 1.3;
}
body.page-find-a-broker .fab-new p {
  margin-top: 4px;
  color: var(--body-text);
  font-size: 15px;
  line-height: 1.55;
}
body.page-find-a-broker .fab-new .button {
  flex: 0 1 auto;
  min-height: 50px;
  white-space: normal;
  text-align: center;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1360px) {
  body.page-find-a-broker .fab-search { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  body.page-find-a-broker .fab-search-body { padding: 32px 40px 30px; }
}

@media (max-width: 1250px) {
  body.page-find-a-broker .fab-search { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); }
  body.page-find-a-broker .fab-search-body { padding: 28px 34px 28px; }
  body.page-find-a-broker .fab-help-card { padding: 24px 24px 26px; }
}

/* Tablets: the three help cards become one card per line, laid out
   sideways - icon | heading and text | actions. */
@media (max-width: 1050px) {
  body.page-find-a-broker .fab-search { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); }
  body.page-find-a-broker .fab-help { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.page-find-a-broker .fab-help-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 22px;
    padding: 22px 26px;
  }
  body.page-find-a-broker .fab-help-card .fab-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; }
  body.page-find-a-broker .fab-help-card h3 { grid-column: 2; grid-row: 1; align-self: end; }
  body.page-find-a-broker .fab-help-card > p { grid-column: 2; grid-row: 2; align-self: start; }
  body.page-find-a-broker .fab-card-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-items: flex-end;
    gap: 12px;
    margin: 0;
    padding: 0;
  }
  body.page-find-a-broker .fab-icon.is-large { width: 50px; height: 50px; margin-bottom: 14px; }
  body.page-find-a-broker .fab-icon.is-large svg { width: 23px; height: 23px; }
}

/* Small tablets: the photo stays beside the form (as a banner it
   would be wider than its 500px), and the help cards' actions drop
   under their text. */
@media (max-width: 760px) {
  body.page-find-a-broker .fab-search { grid-template-columns: minmax(0, 1fr) minmax(0, 32%); }
  body.page-find-a-broker .fab-search-body { padding: 24px 26px 26px; }
  body.page-find-a-broker .fab-help-card { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 22px 22px 24px; }
  body.page-find-a-broker .fab-help-card .fab-icon { width: 44px; height: 44px; }
  body.page-find-a-broker .fab-help-card .fab-icon svg { width: 21px; height: 21px; }
  body.page-find-a-broker .fab-card-actions {
    grid-column: 2;
    grid-row: 3;
    align-items: flex-start;
    gap: 14px;
    padding-top: 18px;
  }
}

/* Phones: the photo becomes a short banner above the form (the card
   is at most 512px wide here, so the photo is drawn at about its own
   size or smaller). */
@media (max-width: 560px) {
  body.page-find-a-broker .fab-search { grid-template-columns: minmax(0, 1fr); }
  body.page-find-a-broker .fab-search-photo { order: -1; height: 150px; min-height: 0; }
  body.page-find-a-broker .fab-search-photo img { object-position: 50% 26%; }
  body.page-find-a-broker .fab-search-photo::after {
    background: linear-gradient(180deg, rgba(8, 30, 59, 0) 55%, rgba(8, 30, 59, .22) 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7);
  }
  body.page-find-a-broker .fab-search-body { padding: 22px 20px 24px; }
  body.page-find-a-broker .fab-help-card { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 24px; }
  body.page-find-a-broker .fab-help-card .fab-icon { grid-row: 1; margin-bottom: 14px; }
  body.page-find-a-broker .fab-help-card h3,
  body.page-find-a-broker .fab-help-card > p,
  body.page-find-a-broker .fab-card-actions { grid-column: 1; }
  body.page-find-a-broker .fab-help-card h3 { grid-row: 2; }
  body.page-find-a-broker .fab-help-card > p { grid-row: 3; }
  body.page-find-a-broker .fab-card-actions { grid-row: 4; }
}

/* Long button labels have to wrap on a phone (styles-a.css sets
   white-space:nowrap on .button). */
@media (max-width: 480px) {
  body.page-find-a-broker .fab-card-actions,
  body.page-find-a-broker .fab-card-actions .button,
  body.page-find-a-broker .fab-new .button { width: 100%; }
  body.page-find-a-broker .fab-card-actions .button { white-space: normal; text-align: center; }
  /* A text link that wraps keeps its arrow after the last word,
     instead of pushed out to the card's right edge. */
  body.page-find-a-broker .fab-card-actions .text-link { display: block; line-height: 1.55; }
  body.page-find-a-broker .fab-card-actions .text-link svg {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    vertical-align: -5px;
  }
  body.page-find-a-broker .fab-len { margin-left: 2px; }
}

@media (max-width: 420px) {
  body.page-find-a-broker .fab-search-photo { height: 140px; }
  body.page-find-a-broker .fab-search-body { padding: 20px 18px 22px; }
  body.page-find-a-broker .fab-search-body .sub-title { font-size: 24px; letter-spacing: -.6px; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-find-a-broker .fab-search-alt a.text-link:hover svg { transform: rotate(90deg); }
}

@media print {
  body.page-find-a-broker .fab-search { box-shadow: none; border: 1px solid #ccc; }
  body.page-find-a-broker .fab-search-photo { display: none; }
  body.page-find-a-broker .fab-search { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   ICHRA RULES (ichra-rules.htm only)
   Page section.
   Every rule is scoped under body.page-ichra-rules and uses the
   .rules- prefix, so nothing here reaches another page.

   PIECES
   - .rules-tag            small "PDF" pill inside a .button
   - .rules-doc            the final-rule card (art panel + body),
                           built like .video-feature
     .rules-doc-art/.rules-sheet   decorative Federal Register page
                           (aria-hidden; the same facts are in the text)
     .rules-meta/.rules-chip       pills under the title
     .rules-regs           the three CFR sections with page links
   - .rules-page-link      "p. 28988" link into the PDF (#page=N)
   - .rules-essentials     the four explainer steps as ice panels
   - .rules-disclaimer     the "general information" note, centred
   - .rules-cards/.rules-card   numbered condition cards, cite at foot
     .rules-cite           paragraph + page line at the foot of a card
   - .rules-classes        the class list (two columns, check marks)
   - .rules-stats          the three minimum class sizes
   - .rules-also/.rules-icon    the three "also in the rule" cards
   ============================================================ */

/* ---------- small shared bits ---------- */
body.page-ichra-rules .rules-tag {
  padding: 1px 8px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5;
}

body.page-ichra-rules .rules-page-link {
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(7, 90, 189, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.page-ichra-rules .rules-page-link:hover { text-decoration-color: currentColor; }
body.page-ichra-rules .rules-page-link:focus-visible { outline-offset: 2px; }

body.page-ichra-rules .rules-side-note {
  margin-top: 14px;
  color: var(--body-text);
  font-size: 14.5px;
  line-height: 1.55;
}


/* ---------- the final-rule card ---------- */
body.page-ichra-rules .rules-doc {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 44px rgba(8, 30, 59, .10), 0 2px 6px rgba(8, 30, 59, .05);
}

/* A plain page of the Federal Register rising out of the panel. */
body.page-ichra-rules .rules-doc-art {
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-width: 0;
  padding: 40px 46px 0;
  background: linear-gradient(160deg, #eaf4fe 0%, #d5e7f9 100%);
  border-right: 1px solid var(--line);
}
body.page-ichra-rules .rules-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 318px;
  padding: 22px 24px 0;
  background: #fff;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 16px 36px rgba(8, 30, 59, .13), 0 0 0 1px rgba(8, 30, 59, .05);
}
body.page-ichra-rules .rules-sheet-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 3px double var(--navy);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 17px;
  letter-spacing: -.2px;
  white-space: nowrap;
}
body.page-ichra-rules .rules-sheet-top span + span {
  color: #52627a;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .2px;
}
body.page-ichra-rules .rules-sheet-sub {
  margin-top: 8px;
  color: #52627a;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
body.page-ichra-rules .rules-sheet-num {
  margin-top: 20px;
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 40px;
  letter-spacing: -1.2px;
  line-height: 1;
}
body.page-ichra-rules .rules-sheet-date {
  margin-top: 8px;
  color: #3b4a61;
  font-size: 12.5px;
}
/* Three columns of grey "text" lines. */
body.page-ichra-rules .rules-sheet-lines {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 20px;
  background:
    linear-gradient(90deg, transparent 31%, #fff 31%, #fff 35%, transparent 35%, transparent 65%, #fff 65%, #fff 69%, transparent 69%),
    repeating-linear-gradient(180deg, #e1eaf4 0 3px, transparent 3px 10px);
}

body.page-ichra-rules .rules-doc-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 34px 42px 36px;
}
body.page-ichra-rules .rules-doc-body .sub-title { font-size: clamp(26px, 1.9vw, 32px); }
body.page-ichra-rules .rules-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body.page-ichra-rules .rules-chip {
  padding: 3px 11px;
  color: #3b4a61;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
body.page-ichra-rules .rules-doc-text {
  max-width: 760px;
  margin-top: 14px;
  color: var(--body-text);
  font-size: 15.5px;
  line-height: 1.55;
}
body.page-ichra-rules .rules-regs-title {
  margin-top: 22px;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 1.5;
  text-transform: uppercase;
}
body.page-ichra-rules .rules-regs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
  margin-top: 10px;
}
body.page-ichra-rules .rules-regs li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 11px 14px 12px;
  background: var(--ice);
  border-radius: 10px;
}
body.page-ichra-rules .rules-reg-agency {
  color: var(--body-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
body.page-ichra-rules .rules-reg-cfr { color: var(--navy); font-size: 15px; font-weight: 600; }
body.page-ichra-rules .rules-regs .rules-page-link { font-size: 13.5px; }
body.page-ichra-rules .rules-doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 24px;
}
body.page-ichra-rules .rules-doc-actions .button { min-height: 50px; }


/* ---------- the essentials ---------- */
body.page-ichra-rules .rules-essentials { gap: 18px; }
body.page-ichra-rules .rules-essentials > li {
  padding: 26px 24px 28px;
  background: var(--ice);
  border-radius: var(--card-radius);
}
body.page-ichra-rules .rules-essentials .sub-step-num { background: #fff; box-shadow: 0 0 0 1px #d4e6f8; }
body.page-ichra-rules .rules-essentials h3 { font-size: 19px; }

body.page-ichra-rules .rules-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 880px;
  margin: 30px auto 0;
}
body.page-ichra-rules .rules-disclaimer svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- condition cards ---------- */
body.page-ichra-rules .rules-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
body.page-ichra-rules .rules-card { display: flex; flex-direction: column; }
body.page-ichra-rules .rules-card .sub-step-num { margin-bottom: 14px; }
body.page-ichra-rules .rules-card > :nth-last-child(2) { margin-bottom: 18px; }
body.page-ichra-rules .rules-cite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--body-text);
  border-top: 1px solid #e3edf7;
  font-size: 13.5px;
  line-height: 1.5;
}
body.page-ichra-rules .rules-cite > span:not(.rules-ref),
body.page-ichra-rules .rules-ref > span { color: #3b4a61; font-weight: 600; }
/* A paragraph and its page stay together when the line wraps. */
body.page-ichra-rules .rules-ref { display: inline-flex; align-items: baseline; gap: 12px; white-space: nowrap; }
body.page-ichra-rules .rules-ref:not(:last-child) { margin-right: 10px; }


/* ---------- classes of employees ---------- */
body.page-ichra-rules .rules-classes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
  margin-top: 16px;
}
body.page-ichra-rules .rules-classes li {
  position: relative;
  min-width: 0;
  padding-left: 26px;
  color: #3b4a61;
  font-size: 15px;
  line-height: 1.45;
}
body.page-ichra-rules .rules-classes li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}
body.page-ichra-rules .rules-classes-card > .rules-small { font-size: 14px; }
body.page-ichra-rules .rules-classes-card > .rules-small,
body.page-ichra-rules .rules-size-card > p:first-of-type { margin-top: 16px; }
body.page-ichra-rules .rules-classes-card .rules-cite,
body.page-ichra-rules .rules-size-card .rules-cite { margin-top: 18px; }
body.page-ichra-rules .rules-size-card { margin-top: 18px; }

body.page-ichra-rules .rules-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
body.page-ichra-rules .rules-stats li {
  min-width: 0;
  padding: 16px 18px 17px;
  background: var(--ice);
  border-radius: 12px;
}
body.page-ichra-rules .rules-stat-num {
  display: block;
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 1;
}
body.page-ichra-rules .rules-stat-text {
  display: block;
  margin-top: 8px;
  color: #3b4a61;
  font-size: 14px;
  line-height: 1.45;
}


/* ---------- also in the final rule ----------
   The long tax-credit card runs down the left; the two short cards
   stack on the right. */
body.page-ichra-rules .rules-also { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
body.page-ichra-rules .rules-also > :first-child { grid-row: span 2; }

/* The affordability test, set out as a stacked sum. */
body.page-ichra-rules .rules-formula {
  margin-top: 14px;
  padding: 16px 18px 18px;
  background: var(--ice);
  border-radius: 12px;
}
body.page-ichra-rules .rules-formula p { margin-top: 0; }
body.page-ichra-rules .sub-card .rules-formula-lead { color: var(--navy); font-weight: 600; }
body.page-ichra-rules .sub-card .rules-formula-term {
  margin-top: 10px;
  padding: 10px 14px;
  color: #3b4a61;
  background: #fff;
  border: 1px solid #dbe8f5;
  border-radius: 9px;
  font-size: 14.5px;
  line-height: 1.5;
}
body.page-ichra-rules .sub-card .rules-formula-op {
  margin-top: 8px;
  padding-left: 14px;
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.4;
  text-transform: uppercase;
}
body.page-ichra-rules .sub-card .rules-formula-op + .rules-formula-term { margin-top: 6px; }

body.page-ichra-rules .rules-nowrap { white-space: nowrap; }

body.page-ichra-rules .rules-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1b7fe3 0%, var(--blue) 100%);
  box-shadow: 0 6px 14px rgba(7, 90, 189, .20);
}
body.page-ichra-rules .rules-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- responsive ---------- */
/* Wide screens: in the two long split sections the heading column
   runs the full height and stays in view while the cards scroll. */
@media (min-width: 1051px) {
  body.page-ichra-rules .rules-sticky > .sub-split-side {
    grid-row: 1 / -1;
    position: sticky;
    top: 24px;
  }
}

@media (max-width: 1360px) {
  body.page-ichra-rules .rules-doc { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  body.page-ichra-rules .rules-doc-art { padding: 38px 40px 0; }
}

@media (max-width: 1250px) {
  body.page-ichra-rules .rules-doc-body { padding: 30px 34px 32px; }
  body.page-ichra-rules .rules-essentials > li { padding: 22px 20px 24px; }
}

@media (max-width: 1050px) {
  body.page-ichra-rules .rules-doc { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  body.page-ichra-rules .rules-doc-art { padding: 34px 30px 0; }
  body.page-ichra-rules .rules-sheet { padding: 18px 18px 0; }
  body.page-ichra-rules .rules-sheet-top { font-size: 15px; }
  body.page-ichra-rules .rules-sheet-num { font-size: 34px; }
  body.page-ichra-rules .rules-also { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 760px) {
  /* The page picture goes on top and is cut to a strip. */
  body.page-ichra-rules .rules-doc { grid-template-columns: minmax(0, 1fr); }
  /* Tall enough that the cut falls in the grey lines, below the date. */
  body.page-ichra-rules .rules-doc-art {
    height: 236px;
    padding: 28px 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body.page-ichra-rules .rules-sheet { max-width: 340px; }
  body.page-ichra-rules .rules-doc-body { padding: 22px 22px 24px; }
  body.page-ichra-rules .rules-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.page-ichra-rules .rules-also { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.page-ichra-rules .rules-also > :first-child { grid-row: auto; }
  body.page-ichra-rules .rules-disclaimer { margin-top: 24px; }
}

@media (max-width: 560px) {
  body.page-ichra-rules .rules-regs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.page-ichra-rules .rules-regs li {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
  }
  body.page-ichra-rules .rules-classes { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  body.page-ichra-rules .rules-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.page-ichra-rules .rules-stats li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
  }
  body.page-ichra-rules .rules-stat-num { font-size: 30px; }
  body.page-ichra-rules .rules-stat-text { margin-top: 0; }
  body.page-ichra-rules .rules-essentials > li { padding: 20px 18px 22px; }
  /* The number or icon sits beside the card heading, as in .sub-steps. */
  body.page-ichra-rules .rules-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
  }
  body.page-ichra-rules .rules-card > * { grid-column: 1 / -1; }
  body.page-ichra-rules .rules-card > .sub-step-num,
  body.page-ichra-rules .rules-card > .rules-icon { grid-column: 1; width: 36px; height: 36px; margin-bottom: 0; }
  body.page-ichra-rules .rules-card > .sub-step-num + h3,
  body.page-ichra-rules .rules-card > .rules-icon + h3 { grid-column: 2; }
  body.page-ichra-rules .rules-card > h3 + p { margin-top: 12px; }
  body.page-ichra-rules .rules-icon svg { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  body.page-ichra-rules .rules-doc-actions .button { width: 100%; white-space: normal; }
}

@media (max-width: 420px) {
  body.page-ichra-rules .rules-doc-art { height: 222px; padding: 22px 18px 0; }
  body.page-ichra-rules .rules-sheet-num { margin-top: 16px; font-size: 31px; }
  body.page-ichra-rules .rules-doc-body { padding: 20px 18px 22px; }
  body.page-ichra-rules .rules-doc-body .sub-title { font-size: 24px; letter-spacing: -.6px; }
  /* Agency above the citation, page link on the right. */
  body.page-ichra-rules .rules-regs li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 14px; }
  body.page-ichra-rules .rules-reg-agency { grid-column: 1; grid-row: 1; }
  body.page-ichra-rules .rules-reg-cfr { grid-column: 1; grid-row: 2; font-size: 14.5px; }
  body.page-ichra-rules .rules-regs .rules-page-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  body.page-ichra-rules .rules-chip { padding: 3px 10px; border-radius: 14px; font-size: 12.5px; }
}

@media print {
  body.page-ichra-rules .rules-doc-art { display: none; }
  body.page-ichra-rules .rules-doc { grid-template-columns: minmax(0, 1fr); box-shadow: none; }
}