/* ==========================================================================
   insurance.css - Evidence for Insurance Carriers (solutions page).
   Everything rides existing components (stub chrome, home.css sfmap beats,
   glass cards, holo-frame, warr-cta twin closer); this file only adds the
   page's local boxes: the hero (product-page hero grammar, values verbatim
   from plat-hero/sn-hero), the ruled lead-in rows, the dark stat wall, the
   payoff lines, the 01-03 policy stages, and the dark-band ink overrides.
   Foil styling lives in holo-fallback.css - never restyled here.
   ========================================================================== */

/* page shell: every section hosts its own stacking context (the home rule) */
.ins>section{position:relative;isolation:isolate;}

/* ---------- 1 · hero - the product-page hero grammar ---------- */
.ins-hero{position:relative;isolation:isolate;overflow:hidden;padding:150px 0 96px;}
.ins-hero__in{position:relative;z-index:1;}
.ins-hero__h{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,6.6vw,100px);line-height:1.04;letter-spacing:-0.035em;margin:0;max-width:22ch;}
.ins-hero__cta{margin-top:44px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;}

/* ---------- shared section rhythm (plat-sec values) ---------- */
.ins-sec{padding:var(--space-2xl) 0;isolation:isolate;}
.ins-sec--dark{padding:var(--space-2xl) 0;}
/* stub type prints ink on light; inside a dark band it flips to the band ink */
.ins-sec--dark .stub-h2,
.ins-sec--dark .stub-p{color:var(--on-dark);}
.ins-sec--dark .stub-p{font-size:19px;}

/* ---------- 2 · the half-blind lead-ins: ruled print rows ---------- */
.ins-blind{max-width:760px;margin-top:var(--space-md);}
.ins-blind p{
  font-size:clamp(18px,1.9vw,22px);line-height:1.5;color:var(--ink);
  margin:0;padding:22px 0;
  border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);
}
.ins-blind p:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent);}
.ins-blind strong{font-weight:700;}

/* the landing lines: plain-ink display sentences (the payoff voice) */
.ins-payoff{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-lead, clamp(24px,3vw,42px));line-height:1.16;letter-spacing:-0.02em;
  color:var(--ink);
  max-width:26ch;margin:var(--space-lg) 0 0;
}
.ins-payoff--wide{max-width:34ch;}

/* ---------- 3 · the Evidence Graph stat wall (dark pinned beats) ---------- */
/* rows center like type set on a plate; numbers carry the display voice,
   labels sit quiet beneath (white on the band, dimmed via currentColor) */
.ins-wall{display:grid;gap:clamp(22px,4vh,48px);}
.ins-wall__row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(20px,3vh,40px) clamp(32px,4.5vw,80px);
}
.ins-stat{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:120px;}
.ins-stat__n{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.8vw,60px);line-height:1;letter-spacing:-0.02em;
}
.ins-stat__l{
  font-size:13px;line-height:1.35;
  color:color-mix(in srgb,currentColor 62%,transparent);
}

/* ---------- 5 · truth at every stage: 01-03 numbered stages ---------- */
.ins-stages{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-md) var(--space-sm);
  margin-top:var(--space-lg);
}
.ins-stage{
  border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);
  padding-top:var(--space-sm);
}
.ins-stage__num{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(48px,5.4vw,80px);line-height:1;color:var(--slate-900);
  margin-bottom:16px;
}
.ins-stage h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-0.01em;color:var(--ink);margin:0 0 10px;}
.ins-stage p{font-size:15.5px;line-height:1.6;color:var(--ink);margin:0;}

/* ---------- 7 · different by design: the glass grid runs 2x2 here ---------- */
.ins-diff .home-who__grid{grid-template-columns:repeat(2,1fr);}

/* ---------- 8 · closer: the warranty CTA panel, verbatim values ---------- */
.ins-cta{padding:var(--space-lg) 0 0;}
.ins-cta__panel{
  max-width:1100px;margin:0 auto;
  background:var(--slate-950);color:var(--on-dark,#fff);
  border-radius:var(--radius-card);
  padding:clamp(48px,7vw,96px) clamp(28px,6vw,88px);
  text-align:center;
  isolation:isolate;
}
.ins-cta__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,4.4vw,56px);line-height:1.1;letter-spacing:-0.03em;
  color:#fff;margin:0 0 20px;
}
.ins-cta__body{
  font-size:18px;line-height:1.55;
  color:#fff;
  max-width:52ch;margin:0 auto 32px;
}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .ins-hero{padding:132px 0 72px;}
  .ins-stages{grid-template-columns:1fr;}
  .ins-diff .home-who__grid{grid-template-columns:1fr;}
  .ins-payoff{margin-top:var(--space-md);}
}
@media(max-width:560px){
  .ins-wall__row{gap:20px 28px;}
  .ins-stat{min-width:96px;}
  .ins-stat__n{font-size:26px;}
}

/* ---------- 3b · the domain slide ----------
   The landing line beside the real add-domain screen: slate-50 ground,
   slide-height presence, the white product card on a hairline edge. */
.ins-domain{background:var(--slate-50);}
.ins-domain__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:clamp(32px,6vw,96px);align-items:center;
  min-height:min(720px,88vh);
}
.ins-domain .ins-payoff{margin:0;}
.ins-domain__shot{
  width:100%;max-width:560px;height:auto;justify-self:end;
  border-radius:16px;border:1px solid var(--hairline,#E2E8F0);
  background:#fff;
}
@media(max-width:880px){
  .ins-domain__grid{grid-template-columns:1fr;gap:var(--space-md);min-height:0;}
  .ins-domain__shot{justify-self:start;max-width:480px;}
}
