/* ===== Hero kicker badge: rounded, gold border, transparent ===== */
.hero-text .hero-buy-line{
  display:inline-block !important;
  margin:0 0 1.05rem 0 !important;
  padding:.42rem .95rem !important;
  border:1.5px solid var(--accent-gold) !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--accent-gold) !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  line-height:1.25 !important;
  max-width:none !important;
  opacity:1 !important;
}
.hero-text .hero-buy-line .badge-sep{
  margin:0 .5rem;
  opacity:.5;
  font-weight:700;
}
@media (max-width:520px){
  .hero-text .hero-buy-line{
    font-size:.68rem !important;
    letter-spacing:.04em !important;
    padding:.38rem .8rem !important;
  }
}

/* ===== Hero kicker: glow + full-width alignment with the 6 tiles below ===== */
.hero-text .hero-buy-line{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  color:var(--accent-gold) !important;
  border-color:var(--accent-gold) !important;
  text-shadow:
    0 0 10px rgba(212,175,55,.55),
    0 0 24px rgba(212,175,55,.30) !important;
  box-shadow:
    0 0 16px rgba(212,175,55,.24),
    inset 0 0 14px rgba(212,175,55,.10) !important;
}
/* Headline and intro copy span the same width as the stat tiles + journey badges. */
.hero-text > h1,
.hero-text > p:not(.hero-buy-line){
  width:100% !important;
  max-width:100% !important;
}

/* ===== Hero stat tiles: stacked 2x2, width aligned to the content above ===== */
.hero-text .hero-stats{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.7rem !important;
  margin-top:1.5rem !important;
  max-width:100%;
  width:100%;
}
.hero-text .stat-card{
  padding:.8rem .6rem !important;
  border-radius:14px !important;
  text-align:center !important;
}
.hero-text .stat-card .num{
  font-size:1.45rem !important;
  line-height:1.15 !important;
}
.hero-text .stat-card .label{
  font-size:.72rem !important;
  line-height:1.2 !important;
  opacity:.85 !important;
  white-space:normal;
}

/* ===== hero-journey =====
   The whole "how it works" path, shown on the green half of the hero under the
   stat tiles. Kept short so it never competes with the quote card. */
.hero-text .hero-journey{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  width:100%;
  max-width:100%;
  margin-top:1.35rem;
}
.hero-text .hero-journey-badge{
  padding:.7rem .7rem !important;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.1);
  text-align:left !important;
}
.hero-text .hero-journey-label{
  margin:0 0 .45rem !important;
  color:var(--accent-gold) !important;
  font-size:1.45rem !important;
  font-weight:800 !important;
  letter-spacing:normal !important;
  line-height:1.15 !important;
  text-transform:none !important;
  opacity:1 !important;
}
.hero-text .hero-journey-steps{
  width:100%;
  max-width:420px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.24rem .3rem;
  margin:0 !important;
  color:rgba(255,255,255,.9) !important;
  font-size:.78rem !important;
  font-weight:600 !important;
  line-height:1.45 !important;
  letter-spacing:.005em;
}
.hero-text .hero-journey-step{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  white-space:nowrap;
}
.hero-text .hero-journey-step i{
  font-size:.5rem;
  color:rgba(255,255,255,.45) !important;
  flex:0 0 auto;
}
.hero-text .hero-journey-final{
  color:#fff !important;
  font-weight:700;
}
.hero-text .hero-journey-outcome{
  display:flex;
  align-items:center;
  gap:.42rem;
  margin:.62rem 0 0 !important;
  color:#fff !important;
  font-size:1.19rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.01em;
}
.hero-text .hero-journey-outcome i{
  color:var(--accent-gold) !important;
  font-size:1rem !important;
}
.hero-text .hero-journey-ast{
  color:var(--accent-gold) !important;
  font-weight:800;
}
.hero-text .hero-journey-note{
  width:100%;
  max-width:420px;
  margin:.42rem 0 0 !important;
  color:rgba(255,255,255,.62) !important;
  font-size:.72rem !important;
  font-weight:400 !important;
  font-style:normal !important;
  line-height:1.5 !important;
  letter-spacing:.005em;
}
.hero-text .hero-journey-note strong{
  color:rgba(255,255,255,.88) !important;
  font-weight:700;
}
@media (max-width:700px){
  .hero-text .hero-journey-steps{
    font-size:.84rem !important;
    gap:.3rem .45rem;
  }
  .hero-text .hero-journey-outcome{
    font-size:1.06rem !important;
  }
  .hero-text .hero-journey-outcome i{
    font-size:.92rem !important;
  }
  .hero-text .hero-journey-note{
    font-size:.69rem !important;
  }
}

/* ===== Stronger kicker glow + justified hero copy, flush with the tiles below ===== */
.hero-text .hero-buy-line{
  border-color:rgba(240,212,116,.95) !important;
  color:#f2d879 !important;
  text-shadow:
    0 0 6px rgba(255,240,190,.85),
    0 0 14px rgba(212,175,55,.65),
    0 0 30px rgba(212,175,55,.35) !important;
  box-shadow:
    0 0 10px rgba(212,175,55,.40),
    0 0 26px rgba(212,175,55,.24),
    inset 0 0 18px rgba(212,175,55,.14) !important;
}
/* Both blocks below (4 stat tiles + 2 journey badges) are flush left and right,
   so the copy above them is justified to the same edges. */
.hero-text > p:not(.hero-buy-line){
  text-align:justify;
  text-justify:inter-word;
}
@media (max-width:992px){
  /* Centred hero on tablets/phones: justification would look broken. */
  .hero-text > p:not(.hero-buy-line){
    text-align:center;
  }
}
/* ===== Kicker: glow removed (plain gold outline, still full width) ===== */
.hero-text .hero-buy-line{
  border-color:var(--accent-gold) !important;
  color:var(--accent-gold) !important;
  text-shadow:none !important;
  box-shadow:none !important;
}
/* ===== Kicker + intro copy trimmed to the headline's own text width =====
   "Protect What Matters Most" renders 384px on desktop (its longest line),
   so the pill and the paragraph end on the same right edge as the headline. */
@media (min-width:993px){
  .hero-text .hero-buy-line{
    width:100% !important;
    max-width:384px !important;
    padding:.42rem .65rem !important;
    letter-spacing:.05em !important;
  }
  .hero-text > p:not(.hero-buy-line){
    width:100% !important;
    max-width:384px !important;
  }
}