/* ==========================================================================
   v5 — homepage & pricing polish pass
   1. Hero slide 4 (mobile view): two phone screens instead of one cramped,
      mispositioned phone, so the slide fills the same width as the others.
   2. "See Safety Assist in Action": stage no longer clips mockups at the
      bottom, and gets proper spacing + a soft glow behind each mockup.
   3. Background graphics for sections that previously had none.
   4. Pricing: a lighter, more attractive "Most popular" plan card, and a
      warmer background for the "not sure which tier" band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — slide 4 (mobile mockup)
   The phone was inheriting a leftover rule from an older single-visual hero
   layout (position: absolute; left: -30px; bottom: -50px) that pulled it out
   of the slide's flex-centered layout. On top of that, giving two phones
   with very different list lengths a width-only override let their heights
   run free, so one phone towered over the other and the whole stack blew
   past the hero's height. Fixed-size phone frames (equal width AND height,
   with the screen content clipped like a real device viewport) fix both
   problems at once: same size, no overflow.
   -------------------------------------------------------------------------- */
.hero-visual-slide .mock-phone{
  position: static;
  left: auto;
  bottom: auto;
}
.mock-phone-duo{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
.mock-phone-duo .mock-phone{
  width: 164px;
  height: 400px;
  flex-shrink: 0;
  overflow: hidden;
}
.mock-phone-duo .mock-phone-secondary{ opacity: .8; }
.mock-phone-duo .mock-phone-screen{ height: 100%; overflow: hidden; }
/* scale the phone-top and list rows to suit the frame */
.mock-phone-duo .mock-phone-top{ padding: 16px 14px 18px; }
.mock-phone-duo .mock-phone-top .lbl{ font-size: 0.66rem; }
.mock-phone-duo .mock-phone-top .val{ font-size: 1rem !important; }
.mock-phone-duo .mock-phone-list{ padding: 12px; gap: 8px; }
.mock-phone-duo .program-item{ font-size: 0.74rem; padding: 9px 10px; }
.mock-phone-duo .program-item .chev{ width: 13px; height: 13px; }

.hero-visual{ min-height: 440px; }
@media (max-width: 980px){
  .hero-visual{ min-height: 420px; }
}

@media (max-width: 640px){
  .mock-phone-duo{ max-width: 300px; gap: 10px; }
  .mock-phone-duo .mock-phone{ width: 132px; height: 322px; }
  .hero-visual{ min-height: 360px; }
}
@media (max-width: 400px){
  .mock-phone-duo{ max-width: 240px; }
  .mock-phone-duo .mock-phone{ width: 108px; height: 264px; }
  .mock-phone-duo .program-item span:first-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-visual{ min-height: 320px; }
}

/* --------------------------------------------------------------------------
   2. "See Safety Assist in Action" — stop clipping the mockups
   The stage previously had a fixed height with overflow:hidden and no
   bottom padding, so the tallest mockup (the phone) got cut off flush
   against the card edge. Let the stage size to its content instead, add
   real spacing all round, and drop a soft glow behind each mockup so the
   cards feel considered rather than cramped.
   -------------------------------------------------------------------------- */
.view-card{ overflow: visible; }
.view-card-stage{
  height: auto;
  min-height: 300px;
  padding: var(--space-4) var(--space-3);
  overflow: visible;
  position: relative;
}
.view-card-stage::before{
  content: "";
  position: absolute;
  left: 50%; bottom: 10px;
  width: 220px; height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,100,53,0.16), transparent 72%);
  pointer-events: none;
}
.view-card-stage > *{ position: relative; z-index: 1; }
.view-card-stage .mock-window,
.view-card-stage .mock-figure,
.view-card-stage .mock-phone{ box-shadow: var(--shadow-md); }
@media (max-width: 1000px){
  .view-card-stage{ min-height: 0; }
}

/* --------------------------------------------------------------------------
   3. Background graphics for sections that were previously plain — handled
   with <span class="decor ..."> elements added in the markup, reusing the
   existing .decor / .decor-blob / .decor-dots / .decor-corner system
   defined in global.css. No new rules needed here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. PRICING — lighten the "Most popular" plan card
   var(--color-primary-dark) (#003D21) read as almost black at card size.
   Use a brand-green gradient with a subtle dot texture instead, so it still
   reads as the featured tier without looking heavy.
   -------------------------------------------------------------------------- */
.plan-card-featured{
  background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-color: var(--color-primary);
  position: relative;
  overflow: hidden;
}
.plan-card-featured::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 90% 70% at 100% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.plan-card-featured > *{ position: relative; }
.plan-card-featured .plan-badge{
  background: var(--color-accent);
  color: var(--color-primary-dark);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

/* "Not sure which tier fits" band — swap the flat gray for a branded,
   gently textured wash so it doesn't read as an afterthought. */
.tier-help{
  background: linear-gradient(120deg, rgba(0,100,53,0.09), rgba(255,203,5,0.12));
  border-color: rgba(0,100,53,0.18);
  position: relative;
  overflow: hidden;
}
.tier-help::before{
  content: "";
  position: absolute; right: -60px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,203,5,0.28), transparent 70%);
  pointer-events: none;
}
.tier-help > *{ position: relative; }
.tier-help-icon{
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .tier-help{
  background: linear-gradient(120deg, rgba(12,138,76,0.14), rgba(255,203,5,0.08));
  border-color: rgba(12,138,76,0.22);
}

/* --------------------------------------------------------------------------
   5. PRICING — "Annual licensing terms" band was solid var(--color-ink)
   (#1C221F), which read as flat black against the page. Switch it to a
   brand-green gradient with the same dot texture used elsewhere, so it
   still reads as a distinct, weighty band but feels like part of the site.
   -------------------------------------------------------------------------- */
.terms-band{
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}
.terms-band::before{
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 56px),
    radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px);
  background-size: auto, 24px 24px;
}
.terms-band-icon{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}