/* ==========================================================================
   BrightHaven Insurance Group: shared stylesheet
   Brand palette pulled from the live site:
   navy #0D2D4A · dark navy #0A263C · gold #E3A72D · text #44474D · light #F0F0F0
   Font: Montserrat
   ========================================================================== */

/* Metric-matched fallback for Montserrat.
   Montserrat is loaded from Google Fonts with display=swap, so every first-time
   visitor sees the page laid out in the fallback font and then relaid out when
   Montserrat arrives. Montserrat is 8 to 12% wider than Arial depending on
   weight and 22 to 25% wider than the macOS system font, so that relayout moves
   line breaks and pushes content down. It was the entire measured layout shift
   on ironhealth.html (0.383) and business.html (0.265), both well over Google's
   0.1 threshold, and a smaller one on every other page.
   size-adjust makes the fallback occupy the same width as Montserrat, so the
   swap changes letterforms and nothing else. The ratios are measured, not
   guessed: Montserrat width / Arial width for the same string at 100px in
   Chrome, 400 = 1.11845, 600 = 1.07820, 700 = 1.09869, 800 = 1.12115.
   No ascent or descent override is needed because body sets a unitless
   line-height of 1.6, so line box height follows the font size, not the
   fallback's own vertical metrics.
   unicode-range is not optional here and is the reason this file was measured
   three times. Without it the fallback also claims characters Montserrat does
   not contain, and the site uses one of them everywhere: the right arrow in
   "Start my discovery sheet →" is U+2192, which is outside Montserrat's latin
   subset. Those arrows were being drawn in the system font before and in
   size-adjusted Arial after, which moved 60 buttons and links by one to three
   pixels across the site. The range below is Montserrat's own latin coverage,
   so anything it does not cover falls through to the system font exactly as it
   did before. */
/* Montserrat, self-hosted. One variable woff2 (latin subset) serves all five weights.
   Declared as five discrete faces so weight 500 resolves to the 400 face exactly as the
   Google-hosted CSS did; a continuous 100-900 range would silently restyle the five
   font-weight:500 rules on this site. unicode-range matches Google's latin subset, so
   glyphs outside it (arrows, emoji, checkmarks) still fall through to the system font. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* latin-ext, not preloaded: it is fetched only if a page actually uses a character in the
   range. Today that is the single dagger footnote marker on the home page. Without it that
   dagger silently fell back to the system font and rendered 0.94px wider than production. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Montserrat Fallback';src:local('Arial');font-weight:400;size-adjust:111.8%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat Fallback';src:local('Arial');font-weight:500 600;size-adjust:107.8%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat Fallback';src:local('Arial');font-weight:700;size-adjust:109.9%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat Fallback';src:local('Arial');font-weight:800 900;size-adjust:112.1%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0D2D4A;
  --navy-dark:#0A263C;
  --gold:#E3A72D;
  --gold-dark:#c8901d;
  /* 1.11: the brand golds are fills, not inks. #E3A72D measures 2.14:1 on white
     and #c8901d 2.81:1, so anywhere the gold was used as a text colour on a
     light ground, including the active nav state and every default eyebrow, the
     text failed AA and failed the 3:1 large-text floor as well. --gold-ink is
     the same hue carried down to 5.25:1 on white and 4.61:1 on --light, and it
     is used for text only. --gold and --gold-dark are unchanged, so buttons,
     borders, hovers and the gold-on-navy heroes look exactly as they did. */
  --gold-ink:#8f6410;
  --ink:#44474D;
  /* 1.11: was #6b7280, which measures 4.24:1 against --light and so failed AA
     for body text on every grey section. The classes disclosures are set in use
     it, which makes this a disclosure question rather than a design preference. */
  --muted:#5f6b7a;
  --light:#F0F0F0;
  --cream:#FBF8F1;
  --white:#ffffff;
  --line:#e5e7eb;
  --radius:14px;
  --shadow:0 10px 30px rgba(13,45,74,.10);
  --shadow-sm:0 4px 14px rgba(13,45,74,.08);
  --maxw:1180px;
  --font:'Montserrat','Montserrat Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  line-height:1.6;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* An email address is one unbreakable word, so support@brighthaveninsurance.com
   measured 296px inside a 272px column and pushed privacy.html sideways at 320.
   overflow-wrap only breaks a word that has nowhere else to go, so ordinary links
   still wrap at spaces the way they always did. */
a{color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
/* The rule above stops a long URL overflowing its column, but it will break a
   word at any character, and on a narrow phone that left the final letter of the
   support address stranded on a line of its own. This opts the address out of
   arbitrary breaking; the <wbr> after the @ in the markup gives it the one break
   point an email address is actually meant to have. */
.email-nb{overflow-wrap:normal;word-break:normal}
h1,h2,h3,h4{color:var(--navy);line-height:1.2;font-weight:800;text-wrap:balance}
h1:not(:last-child),h2:not(:last-child),h3:not(:last-child),h4:not(:last-child){margin-bottom:0.55em}
h1{font-size:clamp(2rem,4.5vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:1.25rem}
p{margin-bottom:1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;
  font-weight:700;color:var(--gold-ink);margin-bottom:.6rem;display:block;
}
.lead{font-size:1.12rem;color:var(--ink);max-width:60ch}
.muted{color:var(--muted)}

/* Disclosure block. The rule used to live only inside protection-builder.html's
   own <style>, so the same class used anywhere else rendered as a bare div. It is
   the site's standard way of setting a disclosure apart from the copy around it,
   so it belongs here. protection-builder.html keeps its own identical copy, which
   still wins locally, and that page is therefore unchanged. Boxes that are filled
   in by script collapse when empty rather than leaving a stray rule on the page. */
.compliance-box{background:#fdf9f2;border-left:4px solid #b45309;border-radius:0 10px 10px 0;padding:.75rem .9rem;font-size:.84rem;line-height:1.55;color:#333;margin:1rem 0}
.compliance-box:empty{display:none}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font);font-weight:700;font-size:.98rem;
  padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:.2s ease;line-height:1;text-align:center;
}
.btn-gold{background:var(--gold);color:var(--navy-dark)}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-dark);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost-light:hover{background:#fff;color:var(--navy)}
.btn-block{width:100%}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}

/* ---- Header / nav ---- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;color:var(--navy);font-size:1.05rem}
.brand img{height:56px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none}
/* The hero's "Request my free quote" button scrolls to the hero form and focuses
   its first field. Above 760px the hero grid is two columns, so that form is already
   sitting beside the button and the button is a jump to something in view: three
   competing asks in one hero. At 760 and below the grid stacks, the form drops below
   the fold, and the jump earns its place. So it shows only where it does work. */
.hero-jump{display:none}
@media(max-width:760px){.hero-jump{display:inline-flex}}
.nav-links a{font-weight:600;font-size:.95rem;color:var(--navy);padding:.3rem 0;position:relative;white-space:nowrap;overflow-wrap:normal}
.nav-links a:hover{color:var(--gold-ink)}
.nav-cta{display:flex;align-items:center;gap:.9rem}
.nav-phone{font-weight:700;color:var(--navy);white-space:nowrap;font-size:.95rem}
.nav-phone-item{display:none} /* the mobile-menu copy of .nav-phone; see js/main.js */
/* 1.13: the bars plus .4rem of padding measured about 39x42, under the 44x44
   minimum. The box is grown around the same bars rather than the bars being
   redrawn, so the control looks identical and only the tappable area changes. */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;min-width:44px;min-height:44px;align-items:center;justify-content:center;flex-direction:column}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--navy);border-radius:2px;margin:5px 0;transition:.3s}

/* ---- Hero ---- */
.hero{
  position:relative;color:#fff;
  background:linear-gradient(180deg,rgba(10,38,60,.82),rgba(10,38,60,.9));
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-size:cover;background-position:center;opacity:.5;
}
.hero-inner{padding:5.5rem 0 5rem;max-width:820px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:4.8rem 24px}
.hero-grid .hero-inner{padding:0;max-width:none}
.hero-form{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:1.8rem}
.hero-form h2,.hero-form h3{color:var(--navy);font-size:1.25rem;margin-bottom:.25rem}
.hero-form .field{margin-bottom:.75rem}
.hero-form p{color:var(--muted);font-size:.9rem;margin-bottom:1rem;max-width:none}
.hero-form p.consent{font-size:.78rem;margin:.6rem 0 0}
.hero h1{color:#fff;margin-bottom:1rem}
.hero .eyebrow{color:var(--gold)}
.hero p{color:rgba(255,255,255,.92);font-size:1.18rem;margin-bottom:1.8rem;max-width:56ch}
/* NEW, found while verifying 1.11. `.hero p` above and `.hero-form p` at :169
   have identical specificity, and this one is written later, so it won this
   cascade inside the white form card that sits in the home page hero. Measured
   at 1440 and 390: both paragraphs in that card computed
   rgba(255,255,255,.92) on rgb(255,255,255), a contrast ratio of 1.0.
   The two paragraphs are the "Free, no obligation" reassurance line and the
   SMS consent line the form asserts the visitor has read. Restoring the card's
   own colour is the whole fix; the hero's own paragraphs are untouched. */
.hero .hero-form p{color:var(--muted);font-size:.9rem;margin-bottom:1rem;max-width:none}
.hero .hero-form p.consent{font-size:.78rem;margin:.6rem 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem}
.hero-note{margin-top:1.4rem;font-size:.9rem;color:rgba(255,255,255,.75)}

/* ---- Sections ---- */
section{padding:4.5rem 0}
.section-head{max-width:640px;margin:0 auto 2.6rem;text-align:center}
.bg-light{background:var(--light)}
.bg-cream{background:var(--cream)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy p{color:rgba(255,255,255,.88)}

/* ---- Pain points / overpaying ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow)}
.checklist{list-style:none;margin:1.2rem 0}
.checklist li{position:relative;padding:.55rem 0 .55rem 2rem;font-weight:600;color:var(--ink)}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:.55rem;color:#fff;background:var(--gold);
  width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:800;
}

/* ---- Product pillar cards ---- */
.grid{display:grid;gap:1.5rem}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .icon{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:rgba(227,167,45,.15);margin-bottom:1rem;font-size:1.5rem;
}
.card h3{margin-bottom:.6rem}
.card ul{list-style:none;margin:.4rem 0 1.2rem}
.card ul li{padding:.28rem 0 .28rem 1.3rem;position:relative;font-size:.94rem;color:var(--ink)}
.card ul li::before{content:"•";position:absolute;left:.2rem;color:var(--gold-ink);font-weight:800}
.card .card-foot{margin-top:auto}
.badge{
  display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:.28rem .6rem;border-radius:999px;margin-bottom:.9rem;
}
/* Darkened from #1c7a4e, which measured 4.48:1 on this badge's own tint and
   needs 4.5:1: the text is 11.5px uppercase, so it gets no large-text
   allowance. The same green stays as the .does border colour below, because a
   border is not text and carries no contrast requirement. */
.badge-self{background:rgba(34,139,90,.14);color:#176b41}
/* Stacked "what it does / what it does not" blocks, shared by product cards
   site-wide. Green = what you get, amber = the limits. */
.does,.doesnt{display:block;text-align:left;font-size:.9rem;line-height:1.55;color:#0f1215;font-weight:600;border-left:4px solid;border-radius:0 8px 8px 0;padding:.55rem .75rem;margin:.55rem 0 0}
.does{background:#f6fbf7;border-color:#1c7a4e}
.doesnt{background:#fdf9f2;border-color:#b45309}
.does strong{color:#0d4527}
.doesnt strong{color:#59300a}

/* Business coverage cards: the "what it does" and "what it does not" halves collapse,
   so a grid of six coverages reads as a list you can scan instead of a wall. The
   markup ships open and the .js class added in each page head collapses them before
   first paint, so a reader without JavaScript, and a crawler, still get every word.
   The button itself ships hidden and is revealed by script, because a button that
   cannot do anything is worse than no button at all. */
.cov-d{padding:0}
.cov-t{display:none;width:100%;align-items:center;justify-content:space-between;gap:.7rem;
  font:inherit;color:inherit;text-align:left;background:none;border:0;cursor:pointer;
  padding:.55rem .75rem;border-radius:0 8px 8px 0}
.js .cov-t{display:flex}
.cov-t:hover{background:rgba(13,45,74,.05)}
.cov-t:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.cov-chev{flex:0 0 auto;width:.8rem;height:.8rem;opacity:.7;transition:transform .18s ease}
.cov-d.open .cov-chev{transform:rotate(180deg)}
.cov-b{padding:.55rem .75rem}
.js .cov-b{display:none}
.js .cov-d.open .cov-b{display:block;padding:0 .75rem .6rem}
/* On paper there is nothing to click, so every half prints open. */
@media print{.cov-b{display:block !important;padding:.55rem .75rem !important}.cov-t{display:none !important}}
.badge-advisor{background:rgba(13,45,74,.1);color:var(--navy)}
.badge-rec{background:rgba(185,28,28,.12);color:#b91c1c;margin-left:.4rem}

/* ---- Stats / trust ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
.stat{padding:1.5rem}
.stat .num{font-size:2.4rem;font-weight:800;color:var(--gold)}
.stat p{color:rgba(255,255,255,.9);margin:0}

/* ---- Testimonial ---- */
.quote{
  max-width:760px;margin:0 auto;text-align:center;font-size:1.35rem;
  font-style:italic;color:var(--navy);line-height:1.5;
}
.quote cite{display:block;margin-top:1.2rem;font-size:.95rem;font-style:normal;font-weight:700;color:var(--gold-ink)}

/* ---- Quote flow (get-a-quote) ---- */
.steps{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;justify-content:center;margin-bottom:2rem}
.step{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--muted);font-size:1.02rem;background:#fff;border:2px solid var(--line);border-radius:999px;padding:.5rem 1.1rem .5rem .55rem}
.step .dot{width:34px;height:34px;border-radius:50%;background:var(--line);color:var(--muted);display:grid;place-items:center;font-size:1rem;font-weight:800}
.step.active{color:var(--navy);border-color:var(--gold);box-shadow:0 4px 14px rgba(212,160,23,.25)}
.step.active .dot{background:var(--gold);color:var(--navy-dark)}
.step-arrow{font-size:1.3rem;font-weight:800;color:var(--muted)}
.coverage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.coverage-card{
  text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;cursor:pointer;transition:.2s;font-family:var(--font);
}
.coverage-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.coverage-card .ic{font-size:1.9rem;margin-bottom:.7rem}
.coverage-card h3{margin-bottom:.4rem}
.coverage-card p{font-size:.92rem;color:var(--muted);margin-bottom:1rem}
.coverage-card .start{font-weight:700;color:var(--gold-ink)}
.options-panel{display:none}
.options-panel.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.option-row{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);
}
.option-row .opt-text{flex:1;min-width:240px}
.option-row h4{color:var(--navy);margin-bottom:.25rem}
.option-row p{margin:0;font-size:.92rem;color:var(--muted)}
.option-row .opt-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.option-row .opt-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.option-row .opt-tabs a{display:inline-block;font-size:.78rem;font-weight:700;color:var(--navy);background:#f1f5f9;border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem;text-decoration:none;line-height:1.3;transition:background .12s,border-color .12s}
.option-row .opt-tabs a:hover{background:#fff;border-color:var(--gold)}
.back-link{background:none;border:0;color:var(--navy);font-weight:700;cursor:pointer;font-family:var(--font);font-size:.95rem;margin-bottom:1.3rem;display:inline-flex;gap:.4rem;align-items:center}

/* ---- Forms ---- */
.form-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2.2rem;max-width:620px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* The two-column field pair never collapsed, and that was what made contact.html
   scroll sideways at 320 and 360px. A `1fr` grid track has an automatic minimum of
   min-content, so it refuses to shrink below the width two inputs need side by side:
   the .form-card measured 352px inside a 272px column and pushed the whole page out.
   Stacking the pair below 560 also gives the fields a full-width tap target, which is
   what you want on a phone anyway. Above 560 nothing changes. */
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.field{margin-bottom:1rem}
.field.full{grid-column:1/-1}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--navy)}
input,select,textarea{
  width:100%;font-family:var(--font);font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
textarea{min-height:110px;resize:vertical}
.consent{font-size:.78rem;color:var(--muted);margin-top:.6rem}
.form-success{display:none;background:rgba(34,139,90,.1);color:#1c7a4e;border:1px solid #1c7a4e;
  border-radius:10px;padding:1rem;font-weight:600;margin-top:1rem}
/* Error boxes are revealed by inline style at submit time (js/main.js), so they must
   default to hidden here. Without this rule any page that forgets its own scoped
   .form-error{display:none} shows the red "something went wrong" line on load. */
.form-error{display:none;background:rgba(163,45,45,.08);color:#a32d2d;border:1px solid #a32d2d;
  border-radius:10px;padding:1rem;font-weight:600;margin-top:1rem}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:1.2rem 0;font-family:var(--font);
  font-weight:700;font-size:1.05rem;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;gap:1rem}
.faq-q::after{content:"+";color:var(--gold-ink);font-size:1.4rem;transition:.2s}
.faq-q.open::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink)}
.faq-a p{padding-bottom:1.2rem;margin:0}

/* ---- CTA band ---- */
.cta-band{background:linear-gradient(120deg,var(--navy),var(--navy-dark));color:#fff;text-align:center;border-radius:20px;padding:3.2rem 2rem;box-shadow:var(--shadow)}
.cta-band h2{color:#fff;margin-bottom:.7rem}
.cta-band p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 1.6rem}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---- Footer ---- */
.site-footer{background:var(--navy-dark);color:rgba(255,255,255,.8);padding:3.5rem 0 2rem;font-size:.92rem}
/* 1.22: a fifth column, "Plans & tools", was added to the footer. */
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1fr 1.2fr;gap:2rem;margin-bottom:2.4rem}
.site-footer h3,.site-footer h4{color:#fff;font-size:1rem;margin-bottom:1rem}
/* Legal-page section headings: h2 for correct document outline, h3 sizing. */
h2.legal-h{font-size:1.25rem}
.site-footer a{color:rgba(255,255,255,.8)}
.site-footer a:hover{color:var(--gold)}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.5rem}
.footer-brand img{width:210px;max-width:100%;height:auto;margin-bottom:1rem;background:#fff;padding:12px 16px;border-radius:12px}
.socials{display:flex;gap:.8rem;margin-top:1rem}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;font-weight:700}
.socials a:hover{background:var(--gold);color:var(--navy-dark)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:1.5rem;font-size:.82rem;color:rgba(255,255,255,.6);text-align:center;line-height:1.7}

/* ---- Page hero (interior) ---- */
.page-hero{background:linear-gradient(120deg,var(--navy),var(--navy-dark));color:#fff;padding:3.5rem 0}
/* h2 to h4 are named as well as h1. The section already sets color:#fff, but
   the global heading rule sets var(--navy) on the element itself and a rule on
   the element beats a colour inherited from an ancestor. 404.html carried the
   only sub-heading inside a page hero and it rendered navy on the navy
   gradient at 1.02:1, which is invisible rather than merely low contrast.
   Naming the rest of the heading levels now means the next one cannot repeat
   it. */
.page-hero h1,.page-hero h2,.page-hero h3,.page-hero h4{color:#fff}
.page-hero p{color:rgba(255,255,255,.9);max-width:60ch}

/* ---- Responsive ---- */
@media(max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .coverage-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
/* The nav switches to the mobile toggle at its OWN breakpoint, not at the 760px
   layout breakpoint below. An earlier version of this comment estimated the desktop
   row needed "about 780px". Measured, it needs 1040px: brand 89 + links 609 + phone
   and button 264 + gaps + the 24px rail. So the band 821-1039px was rendering a
   desktop nav that did not fit, and because the global a{overflow-wrap:anywhere}
   rule lets an anchor break at any character, the links did not overflow, they
   split mid-word: "Health" became "Healt" over "h". Three changes fix it together:
   .nav-links a is now nowrap, this toggle breakpoint moved 820 -> 840, and the
   band below reclaims the width needed to reach 840. */
@media(max-width:840px){
  .brand img{height:44px}
  .nav-links,.nav-phone{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;position:absolute;top:78px;left:0;right:0;
    background:#fff;padding:1.2rem 24px;gap:1rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    /* .nav-links sets align-items:center for the desktop row. In a column that
       centres on the cross axis, which shrinks every row to the width of its own
       label: "Life" was 31px wide. Stretch makes each row span the menu. */
    align-items:stretch;
  }
  /* In the open menu every link was only as tall as its text (29px) and only as
     wide as its own label, so "Life" was a 28x29 target. That clears WCAG 2.2 AA
     2.5.8 (24x24) but fails AAA 2.5.5 (44x44), and a 28px-wide target on a phone
     is simply hard to hit. The padding has to sit on the <a>, not the <li>: the
     <li> is not what receives the tap. */
  .nav-links.open li{display:block}
  .nav-links.open a{display:block;padding:.55rem 0;font-size:1.05rem}
  .nav-links.open .nav-phone-item{display:block;border-top:1px solid var(--line);margin-top:.2rem;padding-top:0}
  .nav-links.open .nav-phone-item a{font-weight:700;font-size:1.05rem;color:var(--navy);padding-top:1rem}
  .nav-toggle{display:flex}
}
/* Between 841 and 1039px the full row does not fit (it needs 1040). Tightening the
   link gap and dropping the phone number reclaims ~200px, which brings the minimum
   down to 838 and closes the band. The number is not lost: it stays in the footer at
   every width, and below 841 it appears inside the open menu as .nav-phone-item. */
@media(min-width:841px) and (max-width:1039px){
  .nav-links{gap:1.15rem}
  .nav-phone{display:none}
}
@media(max-width:760px){
  .split,.hero-grid{grid-template-columns:1fr;gap:2rem}
  .grid-4,.grid-3,.grid-2,.coverage-grid,.form-grid,.stats{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  section{padding:3rem 0}
  .hero-inner{padding:3.5rem 0}
}

/* ---- Active nav highlight ---- */
.nav-links a.active{color:var(--gold-ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold)}

/* ---- Skip link (injected) + focus visibility (accessibility) ---- */
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.coverage-card:focus-visible,.faq-q:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- Educational comparison table ---- */
.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.info-table th,.info-table td{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
.info-table thead th{background:var(--navy);color:#fff;font-weight:700}
.info-table tbody tr:last-child td{border-bottom:0}
.info-table td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
@media(max-width:640px){.info-table th,.info-table td{font-size:.85rem;padding:.7rem .6rem}.info-table td:first-child{white-space:normal}}
/* A five-column comparison table has a floor below which it cannot shrink: on faq.html
   the cells bottom out at 114px each, so the table needs 336px and pushed the page
   sideways at 320. Narrowing the text further would not fix it and would make the table
   unreadable, so the table scrolls inside its own box instead and the page does not. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0}
.table-scroll .info-table{margin:0}

/* ---- Meet-advisor band ---- */
.advisor-band{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.5rem;align-items:center}
.advisor-band img{border-radius:var(--radius);box-shadow:var(--shadow)}
.advisor-band .sig{font-family:Georgia,serif;font-style:italic;color:var(--gold-ink);font-size:1.3rem;margin-top:.6rem}
@media(max-width:760px){.advisor-band{grid-template-columns:1fr;gap:1.5rem}}

/* ---- Learn topic cards ---- */
.topic-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.topic-links a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;font-weight:600;color:var(--navy);box-shadow:var(--shadow-sm);transition:.2s}
.topic-links a:hover{transform:translateY(-3px);border-color:var(--gold);color:var(--gold-ink)}
@media(max-width:760px){.topic-links{grid-template-columns:1fr}}

/* ---- Value strip (savings / value / personal attention) ---- */
.value-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.value-strip .v{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;text-align:center;box-shadow:var(--shadow-sm)}
.value-strip .v .ic{font-size:1.9rem;display:block;margin-bottom:.4rem}
.value-strip .v strong{display:block;color:var(--navy);margin-bottom:.2rem}
.value-strip .v p{margin:0;font-size:.9rem;color:var(--muted)}
@media(max-width:760px){.value-strip{grid-template-columns:1fr}}

/* ---- Discovery quiz (Business Coverage Snapshot) ---- */
.quiz-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:2rem;max-width:720px;margin:0 auto}
.quiz-progress{height:8px;background:var(--light);border-radius:999px;overflow:hidden;margin-bottom:.6rem}
.quiz-progress>span{display:block;height:100%;background:var(--gold);width:20%;transition:width .35s ease}
.quiz-count{font-size:.82rem;color:var(--muted);font-weight:600;margin-bottom:1.3rem}
.quiz-step{display:none}
.quiz-step.active{display:block;animation:fade .3s ease}
.quiz-step h3{font-size:1.4rem;margin-bottom:.3rem}
.quiz-step .q-sub{color:var(--muted);margin-bottom:1.2rem;font-size:.95rem}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
@media(max-width:560px){.choice-grid{grid-template-columns:1fr}}
.choice{display:flex;gap:.7rem;align-items:flex-start;text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;cursor:pointer;font-family:var(--font);font-size:.95rem;font-weight:600;color:var(--navy);transition:.15s}
.choice:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.choice.selected{border-color:var(--gold);background:rgba(227,167,45,.08)}
.choice .cic{font-size:1.3rem;line-height:1}
.quiz-back{background:none;border:0;color:var(--navy);font-weight:700;cursor:pointer;font-family:var(--font);font-size:.9rem;margin-top:1.1rem;display:inline-flex;gap:.35rem;align-items:center}
.quiz-reassure{background:rgba(29,158,117,.08);border:1px solid #1c7a4e;color:#1c7a4e;border-radius:12px;padding:1rem 1.2rem;font-size:.9rem;margin-top:1rem}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .card:hover,.coverage-card:hover,.btn:hover,.topic-links a:hover,.tool-tile:hover,.tool-tile:focus-visible{transform:none}
}

/* ---- Portrait photos (consistent framing regardless of source size) ---- */
img.portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---- Intro video ---- */
.video-wrap{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--navy-dark)}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:linear-gradient(160deg,var(--navy),var(--navy-dark));color:#fff;text-align:center;padding:2rem}
.video-placeholder .play{width:78px;height:78px;border-radius:50%;background:var(--gold);color:var(--navy-dark);display:grid;place-items:center;font-size:1.9rem;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.video-placeholder p{margin:0;color:rgba(255,255,255,.85);max-width:44ch}
.video-placeholder .tag{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:700}

/* ==========================================================================
   Ask BrightHaven: floating chat widget
   ========================================================================== */
.ask-fab{position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gold);color:var(--navy-dark);border:0;border-radius:999px;padding:.85rem 1.3rem;
  font-family:var(--font);font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 8px 24px rgba(13,45,74,.28);transition:.2s}
.ask-fab:hover{background:var(--gold-dark);transform:translateY(-2px)}
.ask-fab .dot{width:9px;height:9px;border-radius:50%;background:#1c7a4e;box-shadow:0 0 0 3px rgba(28,122,78,.25)}
.ask-panel{position:fixed;right:20px;bottom:20px;z-index:81;width:380px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 40px);
  background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(13,45,74,.35);display:none;flex-direction:column;overflow:hidden}
.ask-panel.open{display:flex;animation:fade .25s ease}
.ask-head{background:var(--navy);color:#fff;padding:1rem 1.1rem;display:flex;align-items:center;gap:.7rem}
.ask-head .avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy-dark);display:grid;place-items:center;font-size:1.2rem;flex:none}
.ask-head h4{color:#fff;font-size:1rem;margin:0;line-height:1.2}
.ask-head p{margin:0;font-size:.76rem;color:rgba(255,255,255,.8)}
.ask-head .ask-close{margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;padding:.2rem .4rem;border-radius:8px}
.ask-head .ask-close:hover{background:rgba(255,255,255,.15)}
.ask-msgs{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--cream)}
.ask-msg{max-width:85%;padding:.7rem .9rem;border-radius:14px;font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.ask-msg.bot{background:#fff;border:1px solid var(--line);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.ask-msg.user{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.ask-msg a{color:var(--gold-ink);font-weight:700;text-decoration:underline}
.ask-msg.user a{color:#fff}
.ask-typing{align-self:flex-start;color:var(--muted);font-size:.85rem;font-style:italic;padding:.2rem .3rem}
.ask-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 1.1rem;background:var(--cream);border-top:1px solid var(--line)}
.ask-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--navy);cursor:pointer;transition:.15s}
.ask-chip:hover{border-color:var(--gold);color:var(--gold-ink)}
.ask-input-row{display:flex;gap:.5rem;padding:.8rem 1rem;border-top:1px solid var(--line);background:#fff}
.ask-input-row input{flex:1;border:1px solid var(--line);border-radius:999px;padding:.7rem 1rem;font-family:var(--font);font-size:.95rem}
.ask-send{background:var(--gold);color:var(--navy-dark);border:0;border-radius:50%;width:44px;height:44px;flex:none;cursor:pointer;font-size:1.1rem;font-weight:800}
.ask-send:hover{background:var(--gold-dark)}
.ask-human{display:flex;gap:.5rem;justify-content:center;padding:.6rem 1rem;background:var(--navy-dark)}
.ask-human a{flex:1;text-align:center;background:rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:.5rem;font-size:.82rem;font-weight:700;text-decoration:none}
.ask-human a:hover{background:var(--gold);color:var(--navy-dark)}
.ask-leadform{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem;margin-top:.3rem}
.ask-leadform input{width:100%;border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;margin-bottom:.5rem;font-family:var(--font);font-size:.9rem}
.ask-leadform button{width:100%}
@media(max-width:480px){
  .ask-panel{right:8px;bottom:8px;height:calc(100vh - 16px);width:calc(100vw - 16px)}
  .ask-fab{right:14px;bottom:14px;padding:.75rem 1.1rem}
}

/* ---- Floating definitions helper (product pages) ---- */
#defs-fab{position:fixed;left:16px;bottom:16px;z-index:70;background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:16px;padding:.5rem .8rem;font:inherit;font-weight:800;font-size:.82rem;line-height:1.25;cursor:pointer;box-shadow:0 8px 24px rgba(13,45,74,.25);max-width:200px;white-space:normal;text-align:center}
#defs-fab:hover{background:var(--navy);color:#fff}
#defs-panel{position:fixed;left:16px;bottom:88px;z-index:71;width:min(360px,calc(100vw - 32px));max-height:min(70vh,560px);overflow-y:auto;background:#fff;border:2px solid var(--navy);border-radius:14px;padding:1rem 1.1rem;box-shadow:0 18px 48px rgba(13,45,74,.35);display:none}
#defs-panel.open{display:block}
#defs-panel .defs-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem}
#defs-panel .defs-head strong{color:var(--navy);font-size:1.02rem}
#defs-panel .defs-close{background:none;border:none;font-size:1rem;cursor:pointer;color:#666}
#defs-panel .defs-sub{font-size:.8rem;color:#666;margin:.1rem 0 .7rem}
#defs-panel .defs-item{border-top:1px solid #eef2f6;padding:.5rem 0}
#defs-panel .defs-item strong{display:block;color:var(--navy);font-size:.88rem}
#defs-panel .defs-item span{font-size:.85rem;color:#333;line-height:1.5}
#defs-fab.raised{bottom:158px}
#defs-panel.raised{bottom:236px}

/* ---- Floating "Overwhelmed?" guidance card (product pages) ---- */
.help-float { position:fixed; left:16px; bottom:16px; z-index:60; background:var(--navy); color:#fff; border-radius:14px; padding:.8rem 1rem .9rem; box-shadow:0 12px 32px rgba(13,45,74,.38); max-width:250px; font-size:.84rem; line-height:1.4; }
.help-float strong { display:block; font-size:.95rem; margin-bottom:.15rem; padding-right:1rem; }
.help-float .hf-actions { display:flex; gap:.4rem; margin-top:.55rem; }
.help-float .hf-actions a { flex:1; text-align:center; background:#fff; color:var(--navy); border-radius:8px; padding:.42rem .3rem; font-weight:800; font-size:.8rem; text-decoration:none; white-space:nowrap; }
.help-float .hf-actions a:hover { background:var(--gold); }
.help-float .hf-close { position:absolute; top:.3rem; right:.45rem; background:none; border:none; color:#fff; opacity:.7; cursor:pointer; font-size:.85rem; }
.help-float .hf-book { display:block; margin-top:.45rem; text-align:center; background:var(--gold); color:var(--navy); border-radius:8px; padding:.45rem .3rem; font-weight:800; font-size:.82rem; text-decoration:none; }
.help-float .hf-book:hover { background:#fff; }
@media (max-width:700px){ .help-float { max-width:210px; font-size:.8rem; } }

/* ---- Shared state tile map ---- */
.state-map { display:grid; grid-template-columns:repeat(11, minmax(15px, 21px)); gap:2px; justify-content:center; }
.state-map button { aspect-ratio:1; border:none; border-radius:4px; font:inherit; font-size:.5rem; font-weight:800; cursor:default; background:#e8ecf1; color:#9aa7b3; display:grid; place-items:center; padding:0; }
.state-map button.av { background:#fdf6e3; border:1px solid var(--gold); color:#7a5800; cursor:pointer; }
.state-map button.av:hover { background:var(--gold); color:var(--navy) }
.state-map button.ask { background:#eef3f8; border:1px solid #c9d7e5; color:#1d4f7c; cursor:pointer; }
.state-map button.ask:hover { background:#1d4f7c; color:#fff; }
.state-map button.sel { background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important; }
.state-map.lg { grid-template-columns:repeat(11, minmax(22px, 34px)); gap:3px; }
.state-map.lg button { font-size:.68rem; border-radius:6px; }

/* ---- My Plan: cross-finder shortlist dock & drawer ---- */
.bh-add{border:2px solid var(--gold);background:#fff;color:#7a5800;font-weight:800;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.bh-add:hover{background:#fdf6e3;transform:translateY(-1px)}
.bh-add.on{background:var(--gold);color:var(--navy-dark);border-color:var(--gold)}
.bhp-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:76;display:none;align-items:center;gap:.55rem;background:var(--navy);color:#fff;border:2px solid var(--gold);border-radius:999px;padding:.5rem 1.05rem;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 12px 32px rgba(13,45,74,.42);transition:box-shadow .18s}
.bhp-dock.show{display:inline-flex;animation:bhpUp .3s ease}
.bhp-dock:hover{box-shadow:0 16px 40px rgba(13,45,74,.55)}
.bhp-dock .bhp-n{background:var(--gold);color:var(--navy-dark);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;padding:0 .3rem}
.bhp-dock .bhp-est{font-weight:600;font-size:.78rem;opacity:.85}
.bhp-dock.pulse{animation:bhpPulse .55s ease}
@keyframes bhpUp{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes bhpPulse{0%{box-shadow:0 0 0 0 rgba(227,167,45,.75)}100%{box-shadow:0 0 0 20px rgba(227,167,45,0)}}
.bhp-sheet{position:fixed;left:50%;bottom:66px;z-index:77;width:min(600px,calc(100vw - 20px));max-height:min(76vh,660px);background:#fff;border-radius:18px;box-shadow:0 24px 64px rgba(13,45,74,.5);display:none;flex-direction:column;overflow:hidden;opacity:0;transform:translateX(-50%) translateY(14px);transition:opacity .22s ease,transform .22s ease}
.bhp-sheet.open{display:flex}
.bhp-sheet.in{opacity:1;transform:translateX(-50%) translateY(0)}
.bhp-head{background:linear-gradient(135deg,var(--navy) 0%,#123a5e 100%);color:#fff;padding:1.05rem 1.2rem .95rem;position:relative;flex:0 0 auto}
.bhp-head h4{color:#fff;margin:0 0 .15rem;font-size:1.1rem}
.bhp-head p{margin:0;font-size:.82rem;opacity:.85}
.bhp-close{position:absolute;top:.6rem;right:.7rem;background:none;border:none;color:#fff;opacity:.75;font-size:1.05rem;cursor:pointer;padding:.2rem}
.bhp-close:hover{opacity:1}
.bhp-chips{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.65rem}
.bhp-chip{font-size:.72rem;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:.22rem .6rem;background:rgba(255,255,255,.12);color:#c8d4e0;border:1px solid rgba(255,255,255,.2)}
.bhp-chip.on{background:var(--gold);color:var(--navy-dark);border-color:var(--gold)}
.bhp-meter{height:5px;border-radius:99px;background:rgba(255,255,255,.15);margin-top:.6rem;overflow:hidden}
.bhp-meter i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .4s ease}
.bhp-body{overflow-y:auto;padding:.9rem 1.2rem;flex:1 1 auto}
.bhp-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;align-items:center;padding:.55rem .1rem;border-bottom:1px solid #eef2f6}
.bhp-item:last-child{border-bottom:none}
.bhp-cat{font-size:.66rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;background:#eef3f8;color:#1d4f7c;border-radius:6px;padding:.2rem .45rem;white-space:nowrap}
.bhp-item .t{font-weight:700;color:var(--navy);font-size:.9rem;line-height:1.3}
.bhp-item .t a{font-size:.76rem;font-weight:700;color:#1d4f7c;text-decoration:underline;margin-left:.35rem;white-space:nowrap}
.bhp-price{font-weight:800;color:#7a5800;font-size:.84rem;white-space:nowrap;text-align:right}
.bhp-x{background:none;border:none;color:#b3541e;font-size:.95rem;cursor:pointer;opacity:.65;padding:.2rem}
.bhp-x:hover{opacity:1}
.bhp-nudge{background:#fdf6e3;border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:.6rem .8rem;font-size:.84rem;margin:.8rem 0 .2rem;line-height:1.5}
.bhp-nudge a{font-weight:800;text-decoration:underline}
.bhp-empty{text-align:center;color:#666;font-size:.9rem;padding:1.2rem .5rem;line-height:1.6}
.bhp-foot{border-top:2px solid #eef2f6;padding:.85rem 1.2rem 1rem;flex:0 0 auto;background:#fbfcfe}
.bhp-total{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;color:#555;margin-bottom:.6rem}
.bhp-total strong{color:var(--navy);font-size:1.05rem}
.bhp-cta-row{display:flex;gap:.5rem;flex-wrap:wrap}
.bhp-cta-row .btn{flex:1 1 auto}
.bhp-form{display:none;margin-top:.8rem}
.bhp-form.open{display:block}
.bhp-form .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:.5rem;margin:.5rem 0 .7rem}
.bhp-form label{display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);margin-bottom:.2rem}
.bhp-form input{width:100%;padding:.5rem .6rem;border:1.5px solid #c9d7e5;border-radius:8px;font:inherit;font-size:.9rem}
@media (max-width:700px){
  /* Phones: all four bottom corners belong to the help/definitions/chat
     widgets, so the dock hovers on its own row just above them. */
  .bhp-dock{bottom:76px;font-size:.84rem;padding:.45rem .85rem}
  .bhp-dock .bhp-est{display:none}
  .bhp-sheet{bottom:126px;max-height:min(72vh,560px)}
  .bhp-price{white-space:normal;max-width:6.5rem}
}

/* ===== My Plan print one-pager: exists only on paper ===== */
.bhp-print-page{display:none}
@media print{
  body > *:not(.bhp-print-page){display:none !important}
  .bhp-print-page{display:block;font-family:'Montserrat',Arial,sans-serif;color:#1a2733;padding:0;max-width:100%}
  .bhp-print-page .pp-head{display:flex;align-items:center;gap:18px;border-bottom:3px solid #D4A017;padding-bottom:14px;margin-bottom:18px}
  .bhp-print-page .pp-head img{height:64px}
  .bhp-print-page h1{margin:0;font-size:22pt;color:#0D2D4A}
  .bhp-print-page .pp-head p{margin:2px 0 0;color:#555;font-size:10pt}
  .bhp-print-page .pp-table{width:100%;border-collapse:collapse;font-size:11pt}
  .bhp-print-page .pp-table th{text-align:left;background:#0D2D4A;color:#fff;padding:7px 10px;font-size:9.5pt;text-transform:uppercase;letter-spacing:.05em}
  .bhp-print-page .pp-table td{padding:8px 10px;border-bottom:1px solid #d8e1ea;vertical-align:top}
  .bhp-print-page .pp-table td:first-child{font-weight:800;color:#1d4f7c;white-space:nowrap}
  .bhp-print-page .pp-table td:last-child{font-weight:700;white-space:nowrap}
  .bhp-print-page .pp-link{font-size:8.5pt;color:#666;font-weight:400}
  .bhp-print-page .pp-total{margin:12px 0 18px;font-size:12pt;font-weight:800;color:#0D2D4A}
  .bhp-print-page .pp-contact{border:2px solid #D4A017;border-radius:10px;padding:10px 14px;font-size:10.5pt}
  .bhp-print-page .pp-contact p{margin:4px 0 0}
  .bhp-print-page .pp-fine{margin-top:14px;font-size:8pt;color:#666;line-height:1.5}
}

/* ---- Hero jump tabs (site-wide; every page hero gets a tab to its quote/discovery form + key sections) ---- */
.biz-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.biz-tabs a{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:.4rem .9rem;font-size:.82rem;font-weight:700;text-decoration:none;transition:.15s}
.biz-tabs a:hover,.biz-tabs a:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-1px)}
.biz-tabs a.biz-tab-hot{border-color:var(--gold);color:var(--gold)}
.biz-tabs a.biz-tab-hot:hover{color:var(--navy)}

/* ---- Section-end CTA row (one primary path out of every section) ---- */
.sec-cta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:center;margin-top:1.6rem;text-align:center}
.sec-cta .alt{font-size:.88rem;color:var(--muted)}
.sec-cta .alt a{font-weight:700;text-decoration:underline;color:var(--navy)}
.bg-navy .sec-cta .alt,.bg-navy .sec-cta .alt a{color:rgba(255,255,255,.85)}
.sec-cta.left{justify-content:flex-start;text-align:left}

/* ---- Home: "Explore the tools" strip ---- */
/* ---- Home: "Explore the tools" tiles (audience-grouped, whole tile is the link) ---- */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 1.4rem;margin-top:1.8rem;align-items:start}
.tools-group{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.tools-group-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--navy);display:flex;align-items:center;gap:.45rem;margin:0 0 .15rem .15rem;padding-bottom:.55rem;border-bottom:2px solid rgba(227,167,45,.45)}
.tools-group-title span{font-size:1.05rem}
.tool-tile{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.15rem 1rem;box-shadow:var(--shadow-sm);color:var(--navy);min-height:64px;position:relative;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;-webkit-tap-highlight-color:rgba(227,167,45,.25)}
.tool-tile:hover,.tool-tile:focus-visible{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.tool-tile:active{transform:translateY(-1px)}
.tool-ic{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(227,167,45,.16);display:grid;place-items:center;font-size:1.35rem;line-height:1}
.tool-body{display:flex;flex-direction:column;min-width:0;flex:1}
.tool-body strong{font-size:1rem;font-weight:800;line-height:1.3;color:var(--navy)}
.tool-body small{display:block;font-size:.84rem;font-weight:500;color:var(--muted);line-height:1.45;margin-top:.3rem}
.tool-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.tool-cta{font-size:.86rem;font-weight:800;color:var(--gold-ink);display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.tool-cta .arr{display:inline-block;transition:transform .18s ease}
.tool-tile:hover .tool-cta .arr,.tool-tile:focus-visible .tool-cta .arr{transform:translateX(4px)}
.tool-time{font-size:.72rem;font-weight:700;color:var(--muted);background:var(--light);border-radius:999px;padding:.18rem .6rem;white-space:nowrap}
.tools-alt{text-align:center;font-size:.9rem;color:var(--muted);margin:1.6rem auto 0;max-width:62ch}
.tools-alt a{font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-color:rgba(227,167,45,.7);text-underline-offset:3px}
.tools-alt a:hover{color:var(--gold-ink)}
@media(max-width:960px){.tools-grid{grid-template-columns:repeat(2,1fr)}.tools-group:last-child{grid-column:1/-1}.tools-group:last-child .tool-tile{max-width:none}}
@media(max-width:640px){.tools-grid{grid-template-columns:1fr;gap:1.4rem}.tool-tile{padding:1rem}.tool-ic{width:40px;height:40px;font-size:1.2rem}}

/* ==========================================================================
   Home page v2 (Aug 2026): hero trust strip, proof band, pillars with tools,
   state select, promise row, compact sticky header, delayed Ask fab
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero .trust-strip{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:1.5rem 0 0;padding:0}
.hero .trust-strip li{font-size:.84rem;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.4rem .8rem;display:inline-flex;align-items:center;gap:.4rem;line-height:1.2}
.hero-form .field-row{display:grid;grid-template-columns:1.4fr 1fr;gap:.6rem}
.hero-form label .opt{font-weight:400;color:var(--muted);font-size:.8rem}
.proof{padding-top:3.6rem}
.proof .proof-band{margin-bottom:2rem}
.proof .proof-band h2{margin-bottom:.8rem}
.proof .advisor-logo{display:block;height:156px;width:auto;background:#fff;padding:.75rem 1.2rem;border-radius:var(--radius);box-shadow:var(--shadow);margin:0 6% 1.4rem auto}
.proof .proof-band p{margin-bottom:.9rem}
.proof .proof-band{grid-template-columns:300px 1fr;gap:2.4rem}
.proof .portrait{max-width:300px;width:100%;justify-self:center;aspect-ratio:3/7;object-position:center top;background:#EBCE8C}
.fact-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:0 0 1.6rem;padding:0}
.fact-chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;font-size:.86rem;color:var(--ink);box-shadow:var(--shadow-sm)}
.fact-chips li strong{color:var(--navy)}
.quotes-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1.1rem;max-width:1040px;margin:0 auto;align-items:start}
.quotes-row:has(> .quote-card:only-child){max-width:760px}
.quote-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:0;box-shadow:var(--shadow-sm);font-style:italic;color:var(--navy);line-height:1.55;font-size:1.05rem}
.quote-card p{margin:0}
.quote-card cite{display:block;margin-top:.9rem;font-size:.9rem;font-style:normal;font-weight:700;color:var(--gold-ink)}
.pillar-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}
.pillar-grid .card{padding-bottom:1.4rem}
.card-tools{margin:0 0 1.1rem;border-top:1px dashed var(--line);padding-top:.9rem}
.card-tools>summary{list-style:none;cursor:pointer;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-ink);margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem}
.card-tools>summary::-webkit-details-marker{display:none}
.card-tools>summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform .2s;display:none}
.card-tools[open]>summary::after{transform:rotate(-135deg)}
.card-tools-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:.6rem}
.card-tools .tool-tile{padding:.8rem .85rem .7rem;min-height:0}
.card-tools .tool-tile strong{font-size:.92rem}
.card-tools .tool-tile small{font-size:.8rem}
.card-tools .tool-ic{width:36px;height:36px;font-size:1.05rem}
.card-foot .card-link{display:block;text-align:center;font-size:.85rem;font-weight:700;margin-top:.7rem;color:var(--navy);text-decoration:underline;text-decoration-color:rgba(227,167,45,.7);text-underline-offset:3px}
.card-foot .card-link:hover{color:var(--gold-ink)}
.state-select-wrap{display:none;max-width:420px;margin:0 auto 1rem}
.state-select{width:100%;min-height:48px;border:2px solid var(--gold);border-radius:12px;padding:.7rem .9rem;font-family:var(--font);font-size:1rem;font-weight:700;color:var(--navy);background:#fff}
.promise-row{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:2rem 0 0;padding:1.3rem 1.4rem;background:var(--navy);color:rgba(255,255,255,.9);border-radius:var(--radius)}
.promise-row li{font-size:.92rem;line-height:1.5}
.promise-row li strong{color:#fff;display:block;margin-bottom:.15rem}
.site-header .nav,.brand img{transition:height .2s ease}
.site-header.compact .nav{height:60px}
.site-header.compact .brand img{height:42px}
.ask-fab{transition:opacity .25s ease,transform .25s ease,background .2s}
.ask-fab.is-hidden{opacity:0;pointer-events:none;transform:translateY(16px)}
/* 1.8: the three floating widgets are hidden over the hero and over the footer.
   `visibility:hidden` as well as `pointer-events:none`, because the finding was
   measured with elementsFromPoint and opacity alone still answers that call. */
.bh-float{transition:opacity .25s ease,transform .25s ease}
.bh-float-off{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){.bh-float{transition:none}}
@media(min-width:761px){
  .home-hero .js-focus-form{display:none}
}
@media(max-width:760px){
  .home-hero .hero-grid{padding:2.2rem 24px 2.6rem}
  .home-hero h1{font-size:2rem}
  .hero .trust-strip li{font-size:.78rem;padding:.35rem .7rem}
  .hero-form .field-row{grid-template-columns:1fr}
  .proof .proof-band{margin-bottom:1.6rem}
  .proof .proof-band{grid-template-columns:1fr}
  .proof .portrait{max-width:240px}
  .proof .advisor-logo{height:120px;margin-right:4%;margin-bottom:1.1rem}
  .fact-chips li{font-size:.8rem;padding:.42rem .8rem}
  .pillar-grid{grid-template-columns:1fr}
  .card-tools-list{grid-template-columns:1fr}
  .card-tools>summary::after{display:inline-block}
  .card-tools:not([open])>summary{margin-bottom:0}
  .promise-row{grid-template-columns:1fr;gap:.9rem}
  .site-header.compact .brand img{height:38px}
  .nav-links.open{top:100%}
}
@media(max-width:560px){
  .state-select-wrap{display:block}
  #home-state-map,.map-legend{display:none}
}

/* ---- "More on the shelf" card: every category page (unlisted carriers / pending approvals) ---- */
.shelf-more{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;background:var(--cream);border:2px dashed var(--gold);border-radius:20px;padding:1.6rem 1.8rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.shelf-more::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(227,167,45,.18),rgba(227,167,45,0) 70%);pointer-events:none}
.shelf-more .stack{position:relative;width:150px;height:118px;flex:none}
.shelf-more .stack i{position:absolute;left:0;top:0;width:98px;height:64px;border-radius:10px;background:#fff;border:1.5px solid rgba(13,45,74,.28);box-shadow:var(--shadow-sm);display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 .3rem .65rem;font-style:normal;font-weight:800;color:var(--navy);font-size:1.35rem;letter-spacing:.02em}
.shelf-more .stack i:nth-child(1){transform:rotate(-12deg) translate(0,38px);opacity:.8}
.shelf-more .stack i:nth-child(2){transform:rotate(-5deg) translate(18px,19px);opacity:.95}
.shelf-more .stack i:nth-child(3){transform:translate(38px,0);background:var(--navy);color:var(--gold);border-color:var(--navy);font-size:1.05rem;align-items:center;justify-content:center;padding:0}
.shelf-more .stack .tag{position:absolute;left:0;bottom:0;background:var(--gold);color:var(--navy);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .6rem;border-radius:999px;box-shadow:var(--shadow-sm)}
.shelf-more .eyebrow{margin-bottom:.25rem}
.shelf-more h3{margin:0 0 .45rem;font-size:1.28rem;color:var(--navy)}
.shelf-more p{color:var(--ink);margin:0 0 .95rem;max-width:64ch;line-height:1.55}
.shelf-more .acts{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.shelf-more .acts .alt{font-size:.9rem;color:var(--muted)}
.shelf-more-wrap{padding:.4rem 0 2.6rem}
.shelf-more-wrap.tight{padding-top:0}
@media (max-width:640px){
  .shelf-more{grid-template-columns:1fr;text-align:center;padding:1.4rem 1.2rem}
  .shelf-more .stack{margin:0 auto}
  .shelf-more p{margin-left:auto;margin-right:auto}
  .shelf-more .acts{justify-content:center}
}

/* Contact page: form + reach-us side by side on desktop, stacked on phones */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:1.6rem}}

#defs-fab .lbl-s{display:none}
/* Phones: tall photos stay photos, not billboards */
@media(max-width:760px){
  .split img{width:100%;max-height:300px;object-fit:cover;object-position:center 30%}
  /* The source photo is 912x1650 (0.553). A container wider than that crops the
     bottom off and leaves the shoulders full width, which is what the old 4/5
     did. Desktop uses 3/7, which is narrower than the source, so it keeps the
     full height and trims the sides instead. Matching 3/7 here gives the phone
     the same framing as desktop. Only index.html is affected: business.html's
     advisor-band has no portrait and about.html's portrait is not in a band. */
  .advisor-band img.portrait{max-width:230px;margin:0 auto;aspect-ratio:3/7;object-position:center top}
  /* The portrait used to have the logo printed into it, so this was hidden to
     avoid showing it twice. The current portrait does not, so the phone column
     needs it back, smaller and centred to suit the narrower space. */
  .proof .advisor-logo{height:92px;margin:0 auto 1.1rem}
  /* Floating helpers: one small pill per corner so nothing overlaps or covers content */
  .help-float{display:none}
  #defs-fab{max-width:none;padding:.5rem .75rem;font-size:.8rem;border-radius:999px}
  #defs-fab .lbl{display:none}
  #defs-fab .lbl-s{display:inline}
  #defs-panel{bottom:66px !important}
}
/* Get a quote: intake first, explorer on request */
.quote-intake{padding:2.6rem 0 2rem}
.quote-intake .form-card{max-width:720px}
.quote-intake .form-card h2{margin:0 0 .3rem;font-size:1.35rem}
.quote-intake .form-card>p.muted{margin:0 0 1.2rem}
.quote-talk{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:center;margin:1.4rem auto 0;max-width:720px;font-size:.92rem;color:#444}
.quote-talk a.btn{padding:.55rem .95rem}
.explore-cta{max-width:720px;margin:0 auto;text-align:center;background:#fff;border:2px dashed rgba(13,45,74,.3);border-radius:18px;padding:1.4rem 1.2rem}
.explore-cta h3{margin:0 0 .3rem;font-size:1.15rem}
.explore-cta p{margin:0 0 .9rem;color:#555;font-size:.95rem}
.explore-cta.open{display:none}
#coverage-step[hidden]{display:none}

/* ==========================================================================
   Licensing gate (js/main.js)
   ==========================================================================
   Shown under a state picker when the chosen state is outside the licence for
   that page's line of authority. Amber rather than red: this is not an error
   the visitor made, and the plans below stay readable. */
.lic-gate { max-width:46rem; margin:1.1rem auto 0; padding:1.05rem 1.15rem; text-align:left;
  background:#fff9ec; border:2px solid #e0b249; border-left-width:6px; border-radius:12px;
  box-shadow:0 6px 18px rgba(13,45,74,.08); }
.lic-gate h3 { margin:0 0 .45rem; font-size:1.02rem; color:#1d4f7c; }
.lic-gate p { margin:0 0 .6rem; font-size:.86rem; line-height:1.55; color:#3a3a3a; }
.lic-gate p:last-of-type { margin-bottom:.85rem; }
.lic-gate-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-start; }
.lic-gate-form input[type="text"], .lic-gate-form input[type="email"] {
  flex:1 1 11rem; min-width:0; padding:.55rem .7rem; font:inherit; font-size:.86rem;
  border:1px solid #cbb98c; border-radius:8px; background:#fff; }
.lic-gate-form input:focus-visible { outline:2px solid #1d4f7c; outline-offset:1px; }
.lic-gate-form button { flex:0 0 auto; }
.lic-gate .lic-trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lic-gate .form-success, .lic-gate .form-error { display:none; flex:1 1 100%; margin-top:.6rem;
  padding:.75rem .85rem; border-radius:9px; font-size:.84rem; line-height:1.5; }
.lic-gate .form-success { background:#e8f6ec; border:1px solid #b7e0c3; color:#1f4d30; }
.lic-gate .form-error { background:#fdecec; border:1px solid #f0b7b7; color:#7a2020; }
/* A CTA the gate has neutralised still reads as a button, so the notice
   explains why rather than the page silently swallowing a tap. */
.lic-blocked { opacity:.55; }

/* ==========================================================================
   Case study (index.html #case-study)
   ==========================================================================
   A before/after pair. The "before" column is the client's old program and is
   deliberately the plainer of the two: the point is the gaps, not a red panel
   shouting at the reader. */
/* The min() in the track floor is load-bearing. A bare minmax(19rem,1fr) sets
   a 304px floor the track will not go below, and a 320px viewport minus the
   container's own padding only offers 272px, so the home page overflowed by
   8px at 320. min(19rem,100%) keeps the two-up layout everywhere it fits and
   lets the single column shrink to the container on the narrowest phones. */
.cs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr)); gap:1.1rem; margin:1.6rem 0 1.3rem; }
.cs-col { background:#fff; border-radius:14px; padding:1.2rem 1.3rem; box-shadow:0 8px 24px rgba(13,45,74,.08); }
.cs-col h3 { margin:0 0 .7rem; font-size:1rem; letter-spacing:.01em; }
.cs-col ul { list-style:none; margin:0; padding:0; }
.cs-col li { position:relative; padding:.5rem 0 .5rem 1.6rem; font-size:.9rem; line-height:1.55;
  border-top:1px solid #eef1f4; }
.cs-col li:first-child { border-top:0; }
.cs-before { border-top:4px solid #c9ced6; }
.cs-before h3 { color:#5b6470; }
.cs-before li::before { content:"×"; position:absolute; left:.15rem; top:.4rem; font-size:1.1rem;
  line-height:1.4; color:#9aa3ae; font-weight:700; }
.cs-after { border-top:4px solid var(--gold); }
.cs-after h3 { color:var(--navy); }
.cs-after li::before { content:"✓"; position:absolute; left:.15rem; top:.55rem; font-size:.85rem;
  line-height:1.4; color:#2f8a4f; font-weight:700; }
.cs-total { font-size:1.14rem; line-height:1.6; color:var(--navy); background:#fff8e8;
  border-left:5px solid var(--gold); border-radius:0 10px 10px 0; padding:.9rem 1.1rem; margin:0 0 1.1rem; }
.cs-note { font-size:.92rem; line-height:1.6; background:#fff; border:1px solid #e3e7ec;
  border-radius:10px; padding:.9rem 1.1rem; margin:0 0 1.1rem; }
.cs-cta { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin:1.3rem 0 1.1rem; }
/* The generalising copy under the rebuild used to be one 95-word paragraph that
   carried three separate jobs at once, so it read as noise and nobody finished it.
   Split into a label, four scannable signs, the claim, and one line of next step.
   The signs use a gold dot rather than the x and tick of .cs-before/.cs-after
   directly above, so they read as "this is about you", not more of that client's file. */
.cs-signs-lead { margin:1.5rem 0 .2rem; font-weight:700; color:var(--navy); font-size:1.05rem; }
.cs-signs { list-style:none; display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 2rem; margin:0 0 1.2rem; padding:0; max-width:62rem; }
@media(max-width:640px){ .cs-signs { grid-template-columns:1fr; } }
.cs-signs li { position:relative; padding:.42rem 0 .42rem 1.15rem; font-size:.95rem; line-height:1.5;
  font-weight:600; color:var(--ink); }
.cs-signs li::before { content:""; position:absolute; left:0; top:.95rem; width:.42rem; height:.42rem;
  border-radius:50%; background:var(--gold); }
.cs-next { font-size:1.02rem; line-height:1.6; margin:0 0 .2rem; }
.cs-disclosure { max-width:68ch; font-size:.82rem; line-height:1.55; color:#666; margin:1rem 0 0; }

/* Full coverage schedule under the rebuild on commercial.html. The gold rule on the
   left ties it to .cs-total above it, and it is a list rather than prose because a
   business reader scans limits, they do not read them. */
.cs-detail-head { margin:1.7rem 0 .6rem; font-size:1.05rem; }
.cs-detail { list-style:none; margin:0 0 1.3rem; padding:0; max-width:62rem; display:grid; gap:.7rem; }
.cs-detail li { background:#fff; border-left:4px solid var(--gold); border-radius:0 10px 10px 0;
  padding:.75rem 1rem; font-size:.92rem; line-height:1.6; }
.cs-detail strong { color:var(--navy); }

/* Three short cross-line examples on the home page, in place of the single long
   business rebuild that now lives on commercial.html. Fixed three columns rather than
   auto-fit: with auto-fit the third card drops alone onto a second row at tablet
   widths and reads as an afterthought. */
.cs-minis { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin:1.7rem 0 1.4rem; align-items:start; }
@media(max-width:900px){ .cs-minis { grid-template-columns:1fr; } }
.cs-mini { background:#fff; border-radius:14px; border-top:4px solid var(--gold);
  padding:1.15rem 1.25rem; box-shadow:0 8px 24px rgba(13,45,74,.08);
  display:flex; flex-direction:column; }
.cs-mini .cs-line { font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:#5b6470; margin:0 0 .45rem; }
.cs-mini h3 { font-size:1.05rem; margin:0 0 .55rem; }
.cs-mini p { font-size:.91rem; line-height:1.6; margin:0 0 .75rem; color:var(--ink); }
.cs-mini .cs-figure { margin:auto 0 0; font-weight:700; color:var(--navy); background:#fff8e8;
  border-left:4px solid var(--gold); border-radius:0 8px 8px 0; padding:.55rem .75rem;
  font-size:.92rem; line-height:1.5; }

/* Each example starts collapsed to a teaser and opens on click. Three full stories
   side by side is a wall of text on a page people skim, and the figure at the foot of
   each card was the part nobody reached.

   Same disclosure widget as the rider cards on home-auto.html, not a CSS trick: the
   control is a real button inside the heading, aria-expanded tracks the state and
   aria-controls points at the body, so Enter and Space work and a screen reader is
   told what the control does. The padding moves off the card and onto the button so
   the whole visible teaser is the click target, which is what a skimmer expects.

   align-items:start on the grid matters here. Without it, opening one card stretches
   the other two to match and leaves them half empty. */
.cs-mini { padding:0; overflow:hidden; scroll-margin-top:100px; }
.cs-mini h3.cs-h { margin:0; font-size:inherit; }
.cs-toggle { display:block; width:100%; text-align:left; font:inherit; color:inherit;
  background:none; border:0; cursor:pointer; padding:1.15rem 1.25rem; }
.cs-toggle:hover { background:#f4f8fc; }
.cs-toggle:focus-visible { outline:3px solid var(--gold); outline-offset:-3px; }
.cs-toggle .cs-line { display:block; }
.cs-title { display:block; font-size:1.05rem; font-weight:800; color:var(--navy);
  line-height:1.35; margin:0 0 .45rem; }
/* The button sits inside an h3, so without this the teaser inherits the heading's
   weight and the whole card reads as one long headline. */
.cs-teaser { display:block; font-size:.91rem; line-height:1.6; color:var(--ink); font-weight:400; }
.cs-more { display:flex; align-items:center; gap:.4rem; margin-top:.75rem;
  font-size:.84rem; font-weight:800; color:var(--navy); }
.cs-chev { flex:0 0 auto; width:.8rem; height:.8rem; color:#5b7fa3; transition:transform .18s ease; }
/* Open, the teaser sat directly above a story that repeated it almost word for word,
   and the affordance still invited a click on something already on screen. */
.cs-mini.open .cs-teaser { display:none; }
.cs-more-open { display:none; }
.cs-mini.open .cs-more-shut { display:none; }
.cs-mini.open .cs-more-open { display:inline; }
.cs-mini.open .cs-chev { transform:rotate(180deg); }
.cs-body { display:none; padding:0 1.25rem 1.15rem; }
.cs-mini.open .cs-body { display:flex; flex-direction:column; flex:1; }
/* On paper there is nothing to click, so print every example open. */
@media print { .cs-body { display:block !important; } .cs-chev, .cs-more { display:none; } }