/* ==========================================================================
   /web-vitals-monitoring/ — page-specific layout only.
   Shared pieces come from site.css (tokens, buttons, .section, .wrap) and
   inner.css (.grad-head, .body-copy, .two-col, .ipanel, .ihero shell).
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
/* Copy-left / dashboard-right hero (differs from the centered .ihero-title
   template, so the whole inner grid is page-specific). Reuses the shared
   .ihero dark-art background + veil. */
.wvm-hero { padding: 96px 0 104px; }
.wvm-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "title  visual"
    "copy   visual";
  column-gap: 40px;
  align-items: center;
}
.wvm-hero-title { grid-area: title; align-self: end; }
.wvm-hero-copy { grid-area: copy; position: relative; z-index: 2; align-self: start; }
.wvm-hero-visual { grid-area: visual; }
.wvm-hero-title {
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
  color: #fff;
}
.wvm-hero-title em { font-style: normal; color: var(--coral); display: block; }
/* ES hero: "las Core Web Vitals" is wider than the EN "Monitoring" line and
   wrapped the title onto a third line at 62px — one type step down keeps the
   intended two-line layout. Scoped to :lang(es) so EN/IT keep 62px. */
.wvm-hero-title:lang(es) { font-size: clamp(40px, 4.5vw, 56px); }
.wvm-hero-copy p {
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 22px;
  max-width: 480px;
}
/* badges panel */
.wvm-badges {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  background: rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 22px 26px;
  margin: 8px 0 34px;
}
.wvm-badges img { display: block; }
.wvm-badge-gcpp { height: 46px; width: auto; background: #fff; border-radius: 6px; padding: 8px 12px; }
.wvm-badge-tcf { height: 64px; width: auto; }
/* hero buttons */
.wvm-hero-cta { display: flex; gap: 18px; flex-wrap: wrap; }
.wvm-hero-cta .pill-btn { border-radius: 30px; height: 55px; padding: 0 40px; font-size: 14px; }
/* dashboard image: overflows the column to the right, matching live */
.wvm-hero-visual { position: relative; min-width: 0; }
.wvm-hero-visual img {
  display: block;
  width: 130%;
  max-width: none;
  height: auto;
}

/* --------------------------------------------------- §02 real-user data */
.wvm-quote {
  position: relative;
  margin-top: 26px;
}
.wvm-quote-mark {
  position: absolute;
  top: -20px;
  left: -18px;
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(13, 18, 64, .06);
  z-index: 2;
}
.wvm-quote .wvm-quote-mark img { width: 44px; height: auto; }
.wvm-quote-panel {
  background: var(--tint);
  border-radius: 30px;
  padding: 40px 48px 34px;
  margin-left: 60px;
}
.wvm-quote-panel p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 16px;
}
.wvm-quote-panel p:last-of-type { margin-bottom: 22px; }
.wvm-quote-panel img.wvm-google { display: block; margin-left: auto; width: 108px; height: auto; }

/* --------------------------------------- §03/§05 image + white text panel */
/* On tinted sections the shared .ipanel renders white (inner.css rule). */
.wvm-panel-copy { padding: 44px 48px; }
.wvm-panel-copy .grad-head { margin-bottom: 16px; }
/* ES titles ("Entramos en detalle", "Alertas automáticas") are longer than
   the EN ones and wrapped to two lines at 48px; the live original renders
   them on one line at 45px. Scoped to :lang(es) so EN/IT are untouched. */
.wvm-panel-copy .grad-head:lang(es),
.wvm-alerts-copy .grad-head:lang(es) { font-size: clamp(30px, 4.4vw, 45px); }
.wvm-panel-copy .body-copy { max-width: 420px; }
.wvm-panel-copy .pill-btn { margin-top: 12px; border-radius: 30px; height: 52px; padding: 0 34px; font-size: 14px; }

/* --------------------------------------------------- §04 automated alerts */
.wvm-alerts-copy .grad-head { margin-bottom: 16px; }
.wvm-alerts-copy .body-copy { max-width: 420px; }

/* section illustrations never overflow their column */
.wvm-illus { width: 100%; height: auto; display: block; }

/* ============================================================== §06 pricing */
.wvm-pricing-head { text-align: center; margin: 0 0 44px; }
.wvm-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.wvm-plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E4E8F0;
  border-radius: 18px;
  overflow: hidden;
}
.wvm-plan--standard { border: 2px solid var(--green); }
.wvm-plan-head {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  padding: 22px 20px;
}
.wvm-plan--standard .wvm-plan-head { background: var(--green); color: #fff; }
.wvm-plan-body { padding: 4px 30px 34px; display: flex; flex-direction: column; flex: 1; }
.wvm-plan-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  margin: 12px 0 22px;
}
.wvm-plan-price span { font-size: 15px; font-weight: 400; color: var(--muted); }
/* green-check quota rows */
.wvm-quota { list-style: none; margin: 0 0 24px; padding: 0; }
.wvm-quota li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--body);
}
.wvm-quota li b { color: var(--navy); font-weight: 700; }
.wvm-quota li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: url("/img/web-vitals-monitoring/check-green.png") no-repeat center / contain;
}
.wvm-quota .wvm-quota-sub { display: block; padding-left: 0; margin-top: 2px; color: var(--body); }
/* filter list */
.wvm-filter-title { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.wvm-filter { list-style: none; margin: 0 0 20px; padding: 0; }
.wvm-filter li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--body);
}
.wvm-filter li::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: -1px;
  color: var(--body);
}
.wvm-filter li.is-bold { font-weight: 700; color: var(--navy); }
.wvm-alerts-note { font-size: 16px; line-height: 1.4; color: var(--body); margin: 0 0 20px; }
.wvm-alerts-note b { color: var(--navy); font-weight: 700; }
/* push the button to the card bottom */
.wvm-plan-cta { margin-top: auto; }
.wvm-plan-cta .pill-btn {
  width: 100%;
  border-radius: 30px;
  height: 52px;
  font-size: 14px;
}

/* Enterprise callout */
.wvm-enterprise {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  background: var(--tint);
  border-radius: 26px;
  padding: 48px 56px;
  margin-top: 28px;
}
.wvm-enterprise h2 { margin-bottom: 14px; }
.wvm-enterprise p { font-size: 18px; line-height: 1.5; color: var(--body); margin: 0; max-width: 560px; }
.wvm-enterprise .pill-btn { border-radius: 30px; height: 52px; padding: 0 40px; font-size: 14px; white-space: nowrap; }

/* ============================================================== responsive */
@media (max-width: 960px) {
  .wvm-hero { padding: 56px 0 64px; }
  .wvm-hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "title" "visual" "copy";
    row-gap: 26px;
  }
  .wvm-hero-title { margin-bottom: 0; }
  .wvm-hero-copy p { max-width: none; }
  .wvm-hero-visual img { width: 100%; }

  .two-col.wvm-two { grid-template-columns: 1fr; gap: 28px; }
  /* keep the reading order: heading/copy first, illustration second */
  .wvm-two .wvm-order-copy { order: 1; }
  .wvm-two .wvm-order-visual { order: 2; }

  /* smaller mark + extra top padding: the 96px circle overlapped the first
     line of the quote on phones */
  .wvm-quote-panel { margin-left: 0; padding: 64px 28px 28px; }
  .wvm-quote-mark { left: 12px; top: -24px; width: 72px; height: 72px; }
  .wvm-quote .wvm-quote-mark img { width: 34px; }

  .wvm-plans { grid-template-columns: 1fr; }
  .wvm-enterprise { grid-template-columns: 1fr; gap: 24px; padding: 36px 30px; }
}

@media (max-width: 640px) {
  .wvm-badges { gap: 18px; padding: 18px 20px; }
  .wvm-panel-copy { padding: 32px 26px; }
  .wvm-hero-cta .pill-btn,
  .wvm-hero-cta { width: 100%; }
  .wvm-hero-cta .pill-btn { justify-content: center; display: flex; align-items: center; }
}

/* submenu active-item fallback: t396_init can clobber the partial's inline
   font-weight, so pin "Web Vitals Monitoring" bold from CSS too. */
#menu-2nd #to-web-vitals-monitoring a { font-weight: 900; }