/* ============================================================
   Claims 2026 — "File a Claim"
   Scoped under .claims-2026 so it composes with site.css tokens
   without touching any of the approved pages.
   ============================================================ */

.claims-2026 .cl-container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.claims-2026 .cl-eyebrow{
  color:var(--accent);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 .6rem;
}
.claims-2026 .cl-center{ text-align:center; }

.claims-2026 .cl-h2{
  font-size:clamp(1.6rem,3.4vw,2.3rem);
  font-weight:700;
  color:var(--dark);
  line-height:1.2;
  margin:0 0 2.6rem;
}
.claims-2026 .cl-h3{
  font-size:clamp(1.3rem,2.4vw,1.6rem);
  font-weight:700;
  color:var(--dark);
  margin:0;
}
.claims-2026 .txt-accent{ color:var(--accent); }

.claims-2026 .cl-section{ padding-block:clamp(3rem,6vw,5rem); }
.claims-2026 .cl-section--alt{ background:var(--bg); }

/* ---------- HERO ----------
   Full-bleed background photo with the copy washed over its left, matching the
   Commercial page hero. The feature strip below overlaps the hero edge. */
.claims-2026 .cl-hero{
  position:relative;
  overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(360px,42vw,520px);
  background:linear-gradient(115deg,#eef6f1 0%,#e7f2ec 55%,#dcece4 100%);
  padding-block:clamp(2.6rem,5vw,4rem) clamp(4.5rem,7vw,6rem);
}
.claims-2026 .cl-hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:right center;
  pointer-events:none;
}
/* left-to-right white wash so the heading always reads over the photo */
.claims-2026 .cl-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(238,246,241,.97) 0%,
    rgba(238,246,241,.86) 32%,
    rgba(238,246,241,.42) 52%,
    rgba(238,246,241,0) 70%);
}
.claims-2026 .cl-hero__inner{ position:relative; z-index:2; width:100%; }
.claims-2026 .cl-hero__copy{ max-width:38rem; }
.claims-2026 .cl-hero__title{
  font-size:clamp(2.4rem,5.4vw,3.6rem);
  font-weight:700; line-height:1.08; color:var(--dark);
  margin:.2rem 0 1rem;
}
.claims-2026 .cl-hero__lead{
  font-size:1.05rem; color:var(--gray); max-width:34em; margin:0 0 1.8rem;
}

.claims-2026 .cl-assist{
  display:inline-flex; align-items:center; gap:1rem;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:1rem 1.4rem; box-shadow:var(--sh);
}
.claims-2026 .cl-assist__ico{
  display:grid; place-items:center; width:52px; height:52px; flex:none;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
}
.claims-2026 .cl-assist__ico .ico{ width:26px; height:26px; }
.claims-2026 .cl-assist__label{ display:block; font-size:.78rem; color:var(--gray); }
.claims-2026 .cl-assist__num{ display:block; font-size:1.5rem; font-weight:700; color:var(--primary); line-height:1.15; }
.claims-2026 .cl-assist__sub{ display:block; font-size:.8rem; color:var(--gray-light); }

/* feature strip — sits in its own wrapper and rides up over the hero edge */
.claims-2026 .cl-featwrap{
  position:relative; z-index:3;
  margin-top:clamp(-4.25rem,-5vw,-2.75rem);
}
.claims-2026 .cl-featurebar{
  position:relative; z-index:2;
  list-style:none; margin:0; padding:1.4rem 1rem;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
}
.claims-2026 .cl-feature{
  display:flex; align-items:center; gap:.85rem; padding:.2rem 1.2rem;
  border-left:1px solid var(--line);
}
.claims-2026 .cl-feature:first-child{ border-left:0; }
.claims-2026 .cl-feature__ico{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
}
.claims-2026 .cl-feature__ico .ico{ width:22px; height:22px; }
.claims-2026 .cl-feature__txt{ display:block; }
.claims-2026 .cl-feature__txt strong{ display:block; font-size:.98rem; color:var(--dark); }
.claims-2026 .cl-feature__txt span{ display:block; font-size:.85rem; color:var(--gray); }

/* ---------- PROCESS ---------- */
.claims-2026 .cl-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
}
.claims-2026 .cl-step{ position:relative; text-align:center; padding:0 .4rem; }
.claims-2026 .cl-step::after{
  content:""; position:absolute; top:38px;
  left:calc(50% + 48px); right:calc(-50% + 48px);
  border-top:2px dashed rgba(23,166,115,.45);
}
.claims-2026 .cl-step:last-child::after{ display:none; }
.claims-2026 .cl-step__disc{
  position:relative; z-index:1;
  display:grid; place-items:center; width:76px; height:76px; margin:0 auto 1.1rem;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  border:1px solid rgba(23,166,115,.25);
}
.claims-2026 .cl-step__disc .ico{ width:34px; height:34px; }
.claims-2026 .cl-step__num{
  position:absolute; z-index:2; top:60px; left:50%; transform:translateX(-50%);
  display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:var(--accent); color:#fff;
  font-size:.82rem; font-weight:700; border:3px solid var(--white);
}
.claims-2026 .cl-step__title{ font-size:1.02rem; font-weight:700; color:var(--dark); margin:.4rem 0 .4rem; }
.claims-2026 .cl-step__text{ font-size:.86rem; color:var(--gray); margin:0; line-height:1.5; }

/* ---------- FILE YOUR CLAIM ---------- */
.claims-2026 .cl-file{
  display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(1.2rem,2.5vw,2rem);
  align-items:start;
}
.claims-2026 .cl-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  padding:clamp(1.4rem,2.5vw,2rem);
}
/* form heading with the mockup's short green underline accent */
.claims-2026 .cl-formcard__h{ position:relative; padding-bottom:.85rem; }
.claims-2026 .cl-formcard__h::after{
  content:""; position:absolute; left:0; bottom:0;
  width:2.75rem; height:3px; border-radius:2px; background:var(--accent);
}
.claims-2026 .cl-formcard__sub{ color:var(--gray); margin:.35rem 0 1.6rem; font-size:.95rem; }

.claims-2026 .form-grid{ margin-top:0; }
.claims-2026 .req{ color:#e0483d; }
.claims-2026 .cl-form-note{
  display:flex; align-items:center; gap:.5rem; justify-content:center;
  font-size:.82rem; color:var(--gray-light); margin:.9rem 0 0;
}
.claims-2026 .cl-form-note .ico{ width:15px; height:15px; }

/* dropzone */
.claims-2026 .cl-dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  text-align:center; cursor:pointer;
  padding:1.8rem 1rem; border:2px dashed var(--line); border-radius:var(--r);
  background:var(--bg); color:var(--gray);
  transition:border-color var(--t), background var(--t);
}
.claims-2026 .cl-dropzone:hover,
.claims-2026 .cl-dropzone.is-drag{ border-color:var(--accent); background:var(--accent-soft); }
.claims-2026 .cl-dropzone__ico{ width:34px; height:34px; color:var(--accent); }
.claims-2026 .cl-dropzone__title{ font-weight:600; color:var(--dark); font-size:.92rem; }
.claims-2026 .cl-dropzone__hint{ font-size:.8rem; color:var(--gray-light); }
.claims-2026 .cl-dropzone input[type=file]{ display:none; }
.claims-2026 .cl-dropzone__list{ list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.claims-2026 .cl-dropzone__file{
  font-size:.8rem; background:var(--accent-soft); color:var(--primary);
  padding:.3rem .6rem; border-radius:var(--r-pill);
}

/* sidebar */
.claims-2026 .cl-side{ display:flex; flex-direction:column; gap:1.2rem; }
.claims-2026 .cl-side__h{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; font-weight:700; color:var(--dark); margin:0 0 1rem;
}
.claims-2026 .cl-side__h .ico{ width:22px; height:22px; color:var(--accent); }
.claims-2026 .cl-checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.claims-2026 .cl-checklist li{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--dark); }
.claims-2026 .cl-checklist .ico{
  width:20px; height:20px; flex:none; color:#fff; background:var(--accent);
  border-radius:50%; padding:3px;
}

.claims-2026 .cl-assistcard{ background:var(--accent-soft); border-color:transparent; }
.claims-2026 .cl-assistcard__ico{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:#fff; color:var(--accent); margin-bottom:.8rem;
}
.claims-2026 .cl-assistcard__ico .ico{ width:24px; height:24px; }
.claims-2026 .cl-assistcard h3{ font-size:1.05rem; color:var(--primary); margin:0 0 .3rem; }
.claims-2026 .cl-assistcard p{ font-size:.9rem; color:var(--gray); margin:0 0 .6rem; }
.claims-2026 .cl-assistcard__num{ display:block; font-size:1.55rem; font-weight:800; letter-spacing:.01em; color:var(--dark); margin-bottom:1rem; }
/* Call Now uses the bright brand green (not the dark primary), matching the mockup */
.claims-2026 .cl-assistcard .btn--primary{ background:var(--accent); border-color:var(--accent); }
.claims-2026 .cl-assistcard .btn--primary:hover{ background:#128a5f; border-color:#128a5f; }

.claims-2026 .cl-trackcard{ background:#eef3fb; border-color:transparent; }
.claims-2026 .cl-trackcard__ico{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:#fff; color:#2f6bd6; margin-bottom:.8rem;
}
.claims-2026 .cl-trackcard__ico .ico{ width:24px; height:24px; }
.claims-2026 .cl-trackcard h3{ font-size:1.05rem; color:#1f2d3d; margin:0 0 .3rem; }
.claims-2026 .cl-trackcard p{ font-size:.9rem; color:var(--gray); margin:0 0 .9rem; }
/* .btn--ghost is built for dark heroes (white text); on this light-blue card it
   vanishes. Restyle it as a readable outlined button in the card's blue accent. */
.claims-2026 .cl-trackcard .btn--ghost{
  background:#fff; color:#2f6bd6; border:1.5px solid #cdddf5; font-weight:600;
}
.claims-2026 .cl-trackcard .btn--ghost:hover{
  background:#2f6bd6; color:#fff; border-color:#2f6bd6;
}
.claims-2026 .cl-trackcard .btn--ghost .ico{ color:currentColor; }

/* ---------- WHY CHOOSE ---------- */
.claims-2026 .cl-why__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.claims-2026 .cl-whyitem{ text-align:center; padding:0 .6rem; }
.claims-2026 .cl-whyitem__ico{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 1rem;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
}
.claims-2026 .cl-whyitem__ico .ico{ width:30px; height:30px; }
.claims-2026 .cl-whyitem h3{ font-size:1.02rem; font-weight:700; color:var(--accent); margin:0 0 .4rem; }
.claims-2026 .cl-whyitem p{ font-size:.88rem; color:var(--gray); margin:0; line-height:1.5; }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .claims-2026 .cl-hero{ min-height:0; }
  /* stronger, fuller wash so the copy reads when the photo sits behind it */
  .claims-2026 .cl-hero::after{
    background:linear-gradient(120deg,
      rgba(238,246,241,.97) 0%,
      rgba(238,246,241,.9) 46%,
      rgba(238,246,241,.62) 100%);
  }
  .claims-2026 .cl-file{ grid-template-columns:1fr; }
  .claims-2026 .cl-featurebar{ grid-template-columns:repeat(2,1fr); gap:.4rem 0; }
  .claims-2026 .cl-feature:nth-child(3){ border-left:0; }
  .claims-2026 .cl-steps{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .claims-2026 .cl-step::after{ display:none; }
  .claims-2026 .cl-why__grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
}
@media (max-width:560px){
  .claims-2026 .cl-featwrap{ margin-top:clamp(-2.5rem,-6vw,-1.5rem); }
  .claims-2026 .cl-featurebar{ grid-template-columns:1fr; }
  .claims-2026 .cl-feature{ border-left:0; border-top:1px solid var(--line); padding-block:.7rem; }
  .claims-2026 .cl-feature:first-child{ border-top:0; }
  .claims-2026 .cl-steps{ grid-template-columns:1fr; }
  .claims-2026 .cl-why__grid{ grid-template-columns:1fr; }
  .claims-2026 .cl-assist{ width:100%; }
}

/* The columned footer (footer-claims.php) styles now live in
   assets/footer-columns.css, shared with the Insurance Calculator page. */