/* ==========================================================================
   Evidence for MSSPs and MDRs - solutions page. Everything rides existing
   components (stub chrome, home.css sfmap/glass-cards/holo-frame); this file
   only adds the page's few local boxes: the three-line hero, the giant 40%
   stat, the dark triage funnel, the screenshot wells, and the closer panel
   (the warr-cta twin). Foil styling lives in holo-fallback.css - never here.
   ========================================================================== */

/* hero: the product-page hero grammar (plat/sn-hero construction), type
   sized down for three full-sentence lines */
.ms-hero{position:relative;isolation:isolate;overflow:hidden;padding:184px 0 var(--space-xl);}
.ms-hero__in{position:relative;z-index:1;}
.ms-hero__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.8vw,56px);line-height:1.14;letter-spacing:-0.03em;
  margin:0;
}
.ms-hero__cta{margin-top:44px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;}

.ms-sec{padding:var(--space-2xl) 0;isolation:isolate;}
.ms-sec--dark{padding:var(--space-2xl) 0;isolation:isolate;}

/* the 40% stat: giant plain slate-900 numeral with the support line hung
   beneath (the plat-stat recipe, verbatim values) */
.ms-stat{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(88px,13vw,190px);line-height:0.95;letter-spacing:-0.03em;
  color:var(--slate-900);margin:var(--space-md) 0 var(--space-sm);
}
.ms-stat__sub{font-size:var(--fs-body, 18px);line-height:1.55;max-width:52ch;margin:0 0 var(--space-sm);}

/* the triage funnel on the dark band: display-type numbers, the landing "3"
   at hero scale; the two foil arrows are the beat's only holo moment.
   stub-h2/stub-p hardcode var(--ink) - re-inherit the band's white here */
.ms-sec--dark .stub-h2,
.ms-sec--dark .stub-p{margin-left:auto;margin-right:auto;text-align:center;color:inherit;}
.ms-funnel{
  display:flex;align-items:baseline;justify-content:center;
  gap:clamp(14px,3vw,44px);flex-wrap:wrap;
  margin:var(--space-md) 0 var(--space-lg);
}
.ms-funnel__cell{display:flex;flex-direction:column;align-items:center;gap:10px;}
.ms-funnel__num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(38px,6vw,88px);line-height:1;letter-spacing:-0.03em;
}
.ms-funnel__cell--land .ms-funnel__num{font-size:var(--fs-stat,clamp(72px,10vw,140px));}
.ms-funnel__lbl{font-size:var(--fs-small,16px);font-weight:600;}
/* the compound selector outranks .hl.hl--icon's base size in all states */
.hl.ms-funnel__arrow,
.hl.ms-funnel__arrow.hl-gl{
  width:clamp(26px,3vw,40px);height:clamp(26px,3vw,40px);
  flex:none;align-self:center;
}

/* screenshot placeholder wells (the plat-shot recipe, verbatim values) */
.ms-shot{
  aspect-ratio:16/10;width:100%;max-width:1080px;
  background:var(--slate-950);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin-top:var(--space-md);
}
.ms-shot span{font-size:var(--fs-caption, 13px);color:var(--white-45, color-mix(in srgb,#fff 45%,transparent));}

/* the closer: the warranty CTA panel, verbatim values (warr-cta twins) */
.ms-cta{padding:var(--space-lg) 0 0;}
.ms-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;
}
.ms-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;
}
.ms-cta__body{
  font-size:18px;line-height:1.55;
  color:#fff;
  max-width:46ch;margin:0 auto 32px;
}

/* ---------- responsive (grids collapse ~880px like platform.css) ---------- */
@media(max-width:880px){
  .ms-hero{padding:152px 0 var(--space-lg);}
  .ms-sec,.ms-sec--dark{padding:var(--space-xl) 0;}
  .ms-funnel{column-gap:clamp(10px,4vw,24px);}
}
@media(max-width:560px){
  .ms-hero{padding-top:136px;}
  .ms-funnel__num{font-size:clamp(30px,9.4vw,44px);}
  .ms-funnel__cell--land .ms-funnel__num{font-size:clamp(52px,16vw,72px);}
  .hl.ms-funnel__arrow,
  .hl.ms-funnel__arrow.hl-gl{width:22px;height:22px;}
}