/* =============================================================
   VARENT — [hero] block styles. Loads varent-base.css first.
   ============================================================= */

.vp-hero{position:relative;}
.vp-hero-inner{padding:96px 0 84px;}

.vp-eyebrow{font-family:"Space Grotesk"; font-weight:600; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 22px; display:flex; align-items:center; gap:11px;}
.vp-eyebrow::before{content:""; width:26px; height:1px; background:var(--ink-faint); opacity:.6;}

.vp-hero h1{font-family:"Space Grotesk"; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(34px,5.2vw,60px); line-height:1.03; margin:0 0 24px; color:var(--ink);}
.vp-hero h1 .vp-accent{color:var(--mint);}

.vp-lede{font-size:clamp(16px,1.6vw,19px); line-height:1.55; color:var(--ink-soft);
  margin:0 0 38px; max-width:60ch;}

.vp-spectrum{display:flex; align-items:center; gap:16px;}
.vp-spectrum .vp-bar{display:flex; height:7px; width:230px; border-radius:999px;
  overflow:hidden; box-shadow:0 1px 3px rgba(20,32,40,.10);}
.vp-spectrum .vp-bar span{flex:1;}
.vp-spectrum .vp-cap{font-family:"Space Grotesk"; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);}

@media (max-width:640px){
  .vp-hero-inner{padding:30px 0 24px;}
  .vp-eyebrow{margin:0 0 16px;}
  .vp-hero h1{margin:0 0 16px;}
  .vp-lede{margin:0 0 24px;}
}

/* guards against themes that !important heading styles */
.vp-hero h1{text-transform:none !important; color:var(--ink) !important;}
.vp-hero h1 .vp-accent{color:var(--mint) !important;}