/* ==========================================================================
   Insurance Information (resource 76) — design/insurance/, Ryan 2026-09-19.
   New file for this page family. Nothing here is appended to a shared sheet.

   Colours are literal hex on purpose. The design maps navy to a Bootstrap
   heading token, and on this theme --bs-heading-color-hex is #212124 (text),
   so a navy band built from the token renders ink-black. Navy is #1e2d3b.

   Heading colour is restated on every dark section. The ICA theme sets h1/h2
   colour directly and a direct rule beats the design's inherited white — that
   is how the home page shipped headings at 1.14:1.
   ========================================================================== */

.ins {
  --ins-navy:#1e2d3b; --ins-blue:#0072bc; --ins-sky:#80b7e3; --ins-gold:#ffd240;
  --ins-tint:#f2f8fc; --ins-line:#e7e7e7; --ins-ink:#212124; --ins-muted:#495356;
  --ins-onnavy:#f2f8fc; --ins-onnavy-dim:#dce3e8; --ins-ongold:#3d2c00;
  --ins-head:'Catamaran',system-ui,sans-serif;
}

.ins-wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.ins-wrap--narrow { max-width:900px; }
.ins-sec { padding:64px 0; }
.ins-sec--white { background:#fff; border-bottom:1px solid var(--ins-line); }
.ins-sec--tint  { background:var(--ins-tint); border-bottom:1px solid var(--ins-line); }
.ins-sec--navy  { background:var(--ins-navy); }

/* Headings — restated, never inherited. */
.ins .ins-h1 { font-family:var(--ins-head); font-weight:800; font-size:clamp(30px,3.8vw,44px); line-height:1.08; letter-spacing:-.02em; margin:0 0 12px; max-width:24ch; text-wrap:balance; }
.ins .ins-h2 { font-family:var(--ins-head); font-weight:800; font-size:clamp(28px,3.6vw,40px); line-height:1.1; letter-spacing:-.015em; margin:0 0 12px; color:var(--ins-ink); }
.ins .ins-h3 { font-family:var(--ins-head); font-weight:800; font-size:20px; margin:0 0 16px; color:var(--ins-ink); }
.ins-hero .ins-h1, .ins-sec--navy .ins-h2, .ins-card--onnavy .ins-h3, .ins-cta .ins-h2 { color:#fff; }
.ins-kicker { font-family:var(--ins-head); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ins-blue); margin:0 0 10px; }
.ins-kicker--onnavy { color:var(--ins-sky); }
.ins-lede { font-size:18px; line-height:1.55; color:var(--ins-muted); margin:0; }
.ins-head { max-width:60ch; margin-bottom:30px; }
.ins-head--split { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; max-width:none; margin-bottom:24px; }
.ins-head__text { max-width:60ch; min-width:0; }

/* 1. Hero ------------------------------------------------------------------ */
.ins-hero { position:relative; background:var(--ins-navy); color:#fff; overflow:hidden; }
.ins-hero__inner { position:relative; padding-top:40px; padding-bottom:36px; }
.ins-hero__glow { position:absolute; inset:0; background:
  radial-gradient(120% 90% at 88% 12%, rgba(0,114,188,.55) 0%, rgba(0,114,188,0) 58%),
  radial-gradient(90% 80% at 6% 100%, rgba(128,183,227,.20) 0%, rgba(128,183,227,0) 62%); }
.ins-hero__pattern { position:absolute; top:-20%; left:-20%; width:140%; height:140%;
  background:url('/assets/images/icons/ica-mark-white.svg') repeat 0 0/460px 460px;
  opacity:.12; transform:rotate(-12deg); pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 20%, #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 85%);
  mask-image:radial-gradient(120% 100% at 80% 20%, #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 85%); }
.ins-hero__rule { position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg,#0072bc 0%,#0072bc 34%,#ffd240 34%,#ffd240 52%,rgba(255,255,255,.10) 52%); }
.ins-hero__lede { font-size:18px; line-height:1.5; color:var(--ins-onnavy); max-width:64ch; margin:0 0 22px; }
.ins-hero__stats { display:flex; flex-wrap:wrap; gap:20px 34px; margin:0; }
.ins-stat { min-width:0; }
.ins-stat__n { font-family:var(--ins-head); font-weight:800; font-size:30px; line-height:1; color:var(--ins-gold); margin:0 0 5px; }
.ins-stat__l { font-size:15px; line-height:1.35; color:var(--ins-onnavy-dim); max-width:26ch; }

/* 2. Who pays -------------------------------------------------------------- */
.ins-grid { display:grid; gap:16px; }
.ins-grid--3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.ins-grid--4 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.ins-pcard { background:var(--ins-tint); border:1px solid var(--ins-line); border-top:5px solid var(--ins-blue); border-radius:10px; padding:24px; }
.ins-pcard__k { font-family:var(--ins-head); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ins-blue); margin:0 0 8px; }
.ins-pcard__t { font-family:var(--ins-head); font-weight:800; font-size:21px; line-height:1.2; margin:0 0 10px; color:var(--ins-ink); }
.ins-pcard__b { font-size:16px; line-height:1.5; color:var(--ins-muted); margin:0; }
/* #3d2c00 on #ffd240 is 8.9:1. The design's lighter brown failed AA, the same way
   the transportation band did. Do not lighten it. */
.ins-band { margin:20px 0 0; background:var(--ins-gold); border-radius:10px; padding:20px 24px;
  font-size:17px; line-height:1.5; color:var(--ins-ongold); font-weight:600; max-width:none; }

/* 3. Carrier directory ----------------------------------------------------- */
.ins-search { flex:0 1 300px; min-width:240px; display:block; }
.ins-search__label { display:block; font-family:var(--ins-head); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ins-muted); margin-bottom:8px; }
.ins-search input { width:100%; font:inherit; font-size:16px; padding:13px 16px; border:2px solid #dce3e8; border-radius:10px; background:#fff; color:var(--ins-ink); }
.ins-search input:focus { border-color:var(--ins-blue); outline:2px solid transparent; outline-offset:2px; box-shadow:0 0 0 3px rgba(0,114,188,.25); }
.ins-chips { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.ins-chip { font:inherit; font-weight:700; font-size:15px; padding:10px 17px; border-radius:999px; cursor:pointer; transition:all .18s; border:2px solid #dce3e8; background:#fff; color:var(--ins-navy); }
.ins-chip.is-on { border-color:var(--ins-navy); background:var(--ins-navy); color:#fff; }
.ins-groups { display:flex; flex-direction:column; gap:34px; }
.ins-group__h { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; border-bottom:2px solid var(--ins-navy); padding-bottom:10px; margin:0 0 16px; }
.ins-group__title { font-family:var(--ins-head); font-weight:800; font-size:23px; line-height:1.2; color:var(--ins-ink); }
.ins-group__blurb { font-size:16px; font-weight:400; color:var(--ins-muted); }
.ins-group__count { margin-left:auto; font-family:var(--ins-head); font-weight:700; font-size:15px; color:var(--ins-blue); }
.ins-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:10px; }
.ins-tile { background:#fff; border:1px solid var(--ins-line); border-radius:10px; padding:13px 15px; display:flex; gap:12px; align-items:center; min-height:74px; }
.ins-tile--note { border-color:var(--ins-blue); }
.ins-tile__mark { flex:none; width:46px; height:46px; border-radius:8px; background:#fff; border:1px solid var(--ins-line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ins-tile__logo { width:30px; height:30px; object-fit:contain; display:block; }
.ins-tile__mono { font-family:var(--ins-head); font-weight:800; font-size:15px; color:var(--ins-blue); letter-spacing:.02em; }
.ins-tile__text { min-width:0; }
.ins-tile__name { display:block; font-family:var(--ins-head); font-weight:700; font-size:16px; line-height:1.25; color:var(--ins-ink); }
.ins-tile__note { display:block; font-size:13px; line-height:1.35; color:var(--ins-blue); font-weight:700; margin-top:3px; }
.ins-tile__note[hidden] { display:none; }
.ins-empty { background:#fff; border:1px dashed var(--ins-blue); border-radius:10px; padding:26px; font-size:17px; line-height:1.55; color:var(--ins-muted); }
.ins-empty[hidden] { display:none; }
.ins-fine { font-size:15px; line-height:1.5; color:var(--ins-muted); margin:26px 0 0; max-width:80ch; }

/* 4. Federal / OWCP -------------------------------------------------------- */
.ins-split { display:flex; flex-wrap:wrap; gap:34px; align-items:flex-start; }
.ins-split__main { flex:1 1 380px; min-width:0; }
.ins-prose { font-size:18px; line-height:1.55; color:var(--ins-onnavy); max-width:60ch; }
.ins-prose p { margin:0 0 16px; }
.ins-prose p:last-child { margin-bottom:0; }
.ins-prose a { color:#fff; text-decoration:underline; }
.ins-card--onnavy { flex:1 1 320px; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(128,183,227,.35); border-radius:10px; padding:26px; }
.ins-dots { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ins-dot { position:relative; padding-left:20px; font-size:16px; line-height:1.45; color:var(--ins-onnavy); }
.ins-dot::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--ins-gold); }

/* 5. Billing --------------------------------------------------------------- */
.ins-bcard { background:var(--ins-tint); border:1px solid var(--ins-line); border-left:5px solid var(--ins-blue); border-radius:10px; padding:22px; display:flex; flex-direction:column; gap:10px; }
.ins-bcard__t { font-family:var(--ins-head); font-weight:800; font-size:19px; line-height:1.25; margin:0; color:var(--ins-ink); }
.ins-bcard__b { font-size:16px; line-height:1.5; color:var(--ins-muted); margin:0; flex:1 1 auto; }
.ins-bcard__w { font-family:var(--ins-head); font-weight:700; font-size:16px; color:var(--ins-navy); margin:0; }

/* 6. FAQ ------------------------------------------------------------------- */
.ins-faq { display:flex; flex-direction:column; gap:10px; }
.ins-faq__item { background:#fff; border:1px solid var(--ins-line); border-radius:10px; overflow:hidden; }
.ins-faq__q { display:flex; gap:16px; align-items:center; justify-content:space-between; cursor:pointer; list-style:none;
  font-family:var(--ins-head); font-weight:700; font-size:19px; line-height:1.3; color:var(--ins-navy); padding:20px 22px; }
.ins-faq__q::-webkit-details-marker { display:none; }
.ins-faq__q:hover { color:var(--ins-blue); }
.ins-faq__icon { flex:none; width:30px; height:30px; border-radius:50%; background:var(--ins-tint); color:var(--ins-navy);
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; transition:all .18s; }
.ins-faq__item[open] .ins-faq__icon { background:var(--ins-blue); color:#fff; transform:rotate(45deg); }
.ins-faq__a { padding:0 22px 22px; font-size:17px; line-height:1.6; color:var(--ins-muted); max-width:72ch; }

/* 7. CTA ------------------------------------------------------------------- */
.ins-cta { background:var(--ins-blue); color:#fff; }
.ins-cta__inner { padding-top:56px; padding-bottom:56px; display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; }
.ins-cta__text { min-width:0; flex:1 1 420px; }
.ins-cta .ins-h2 { font-size:clamp(25px,3vw,33px); line-height:1.15; margin:0 0 10px; max-width:24ch; }
.ins-cta__lede { font-size:18px; line-height:1.5; margin:0; color:#eaf4fc; max-width:56ch; }
.ins-cta__btns { display:flex; flex-wrap:wrap; gap:12px; }
.ins-btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:17px; border-radius:10px; }
.ins-btn--gold { background:var(--ins-gold); color:var(--ins-ongold); padding:16px 26px; }
.ins-btn--gold:hover { background:#fff; color:var(--ins-ongold); }
.ins-btn--ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7); padding:14px 26px; }
.ins-btn--ghost:hover { background:#fff; color:var(--ins-blue); border-color:#fff; }

/* Enhancement gating ------------------------------------------------------- */
/* Every rule that HIDES a carrier is gated on .ins-js, which insurance.js adds to
   the root. No JS, or a script that throws before it runs, leaves all seventy rows
   and all four groups visible. Same fail-open contract as the site's SAL. */
.ins-js .ins-tile[data-hide] { display:none; }
.ins-js .ins-group[data-hide] { display:none; }

.ins-anim { animation:insIn .7s cubic-bezier(.2,.7,.3,1) both; }
.ins-anim--1 { animation-delay:0s; } .ins-anim--2 { animation-delay:.08s; }
.ins-anim--3 { animation-delay:.16s; } .ins-anim--4 { animation-delay:.24s; }
@keyframes insIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .ins *, .ins *::before, .ins *::after { animation:none !important; transition:none !important; }
}

@media (max-width:640px) {
  .ins-sec { padding:44px 0; }
  .ins-head--split { align-items:stretch; }
  .ins-hero__stats { gap:18px 22px; }
  .ins-tiles { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  .ins-group__count { margin-left:0; }
}