/* ==========================================================================
   /consent_mode_v2 — page-specific layout (Consent-cluster: "Consent Mode").
   Links after site.css (tokens/buttons) + inner.css (shared inner-page bits)
   + pricing.css (switcher + plan cards). Reuses inner.css components
   (.grad-head, .body-copy, .two-col, .ipanel) and the pricing.css markup
   verbatim; only per-section arrangement + image sizing live here.
   ========================================================================== */

/* Body offset: fixed 82px header + fixed 50px 2nd-level strip (>=1200px).
   Below 1200px the strip is hidden and the header collapses to the mobile bar. */
body { padding-top: 132px; }
@media screen and (max-width: 1199px) { body { padding-top: 60px; } }

/* Submenu active-item fallback (the partial's inline script also bolds it). */
#to-consent-mode-v2 .submenu__link { font-weight: 900; }

/* ==========================================================================
   01 — Hero (dark red-gradient art; brand + centred title, illustration + copy)
   Reuses the cluster .ihero shell (position/veil/colour) with the consent art.
   ========================================================================== */
.cmhero {
  /* background art inherited from .ihero (shared canonical /img/hero-bg.png) */
  padding: 81px 0 /* live lockup y≈215-219 */ 72px;
}
.cmhero-inner { position: relative; z-index: 1; }
.cmhero-brand { text-align: center; margin: 6px 0 14px; }
/* margin:auto, not text-align — site.css makes img display:block */
.cmhero-brand img { height: 48px; width: auto; margin: 0 auto; }
.cmhero-title {
  text-align: center;
  font-size: clamp(36px, 5.6vw, 62px);
  line-height: 1.1; font-weight: 700; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 44px;
}
.cmhero-title em { font-style: normal; color: var(--coral); display: block; }

.cmhero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.cmhero-illus img { width: 100%; height: auto; }

.cmhero-bullets { list-style: none; margin: 0 0 28px; padding: 0; }
.cmhero-bullets li {
  position: relative; padding-left: 22px; margin-bottom: 18px;
  font-size: 18px; line-height: 1.5; color: #fff;
}
.cmhero-bullets li::before { content: "•"; position: absolute; left: 2px; top: -1px; font-size: 20px; }

.cmhero-badges {
  display: inline-flex; align-items: center; gap: 22px;
  background: rgba(255,255,255,.08); border-radius: 16px;
  padding: 16px 26px; margin: 0 0 30px;
}
.cmhero-badges img { display: block; }
.cmhero-badges .b-google { height: 40px; }
.cmhero-badges .b-cmp    { height: 52px; }
.cmhero-badges .b-tcf    { height: 44px; }

.cmhero-cta { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.cmhero-cta .pill-btn { border-radius: 70px; height: 56px; padding: 0 40px; font-size: 14px; }
.cmhero-cta .pill-btn--red { font-weight: 700; }

/* ==========================================================================
   02 — Trusted-by strip
   ========================================================================== */
.trusted { text-align: center; }
.trusted-head { color: var(--coral); font-size: 24px; font-weight: 700; margin: 0 0 26px; }
.trusted-logos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0; margin: 0; padding: 0;
}
.trusted-logos li { list-style: none; padding: 0 18px; display: grid; place-items: center; }
.trusted-logos li + li { border-left: 1px solid #D7DEE8; }
.trusted-logos img { max-height: 40px; width: auto; }

/* ==========================================================================
   03 — How to activate? (numbered step cards)
   Each step = coral-outline number + white rounded card (visual left, copy right).
   ========================================================================== */
.activate-title { margin: 0 0 40px; }
.astep {
  display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center;
  margin-bottom: 30px;
}
.astep:last-child { margin-bottom: 0; }
.astep-num {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--red); color: var(--red);
  display: grid; place-items: center;
  font-size: 26px; font-weight: 600;
}
.astep-card {
  display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center;
  background: #fff; border-radius: 26px; padding: 40px 46px;
}
.astep-card--slim { grid-template-columns: 340px 1fr; }
.astep-visual img { width: 100%; height: auto; display: block; }
.astep-visual--toggle img { width: 240px; max-width: 100%; }
.astep-visual--emoji { text-align: center; }
.astep-visual--emoji img { width: 96px; height: auto; display: inline-block; }

.astep-body h3 { font-size: 24px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.astep-body > p { font-size: 16px; line-height: 1.55; color: var(--body); margin: 0; }
.astep-body > p a, .astep-note a { color: var(--body); text-decoration: underline; }
.astep-lead { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 16px; }

.astep-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; margin: 0 0 18px; }
.astep-checks p {
  display: flex; align-items: flex-start; gap: 12px; margin: 0;
  font-size: 15px; line-height: 1.5; color: var(--body);
}
.astep-checks .check-wide, .astep-check--wide { grid-column: 1 / -1; }
.astep-checks .check { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; }
.astep-checks strong { color: var(--navy); }
.astep-note { font-size: 15px; line-height: 1.55; color: var(--body); margin: 0; }

/* ==========================================================================
   04 / 06 — Text panel + dashboard image rows
   ========================================================================== */
.trouble .two-col, .whatis .two-col { gap: 48px; align-items: center; }
.trouble .ipanel, .whatis .ipanel { padding: 40px 44px; }
.trouble-visual img, .whatis-visual img { width: 100%; height: auto; }

/* ==========================================================================
   07 — Advanced vs Basic Implementation
   ========================================================================== */
.advbasic-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 0 24px; }
.advbasic-card { background: #fff; border-radius: 26px; padding: 40px 44px; }
.advbasic-card h3 { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 14px; }
.advbasic-card p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; }
.advbasic-card p a, .advbasic-note p a { color: var(--body); text-decoration: underline; }
.advbasic-note { background: #fff; border-radius: 26px; padding: 28px 44px; text-align: center; }
.advbasic-note p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; }

/* ==========================================================================
   08-10 — Plans & Pricing (band + switcher + cards; white section)
   ========================================================================== */
.pricing .pricing-title { text-align: center; margin: 0 0 30px; }
.pricing .price-switch-wrap { text-align: center; margin: 0 0 34px; }

/* ==========================================================================
   11 — Learn more band
   ========================================================================== */
.learnmore .two-col { gap: 48px; align-items: center; }
.learnmore-visual img { width: 100%; height: auto; }
.learnmore-head {
  display: inline-block; text-decoration: none;
  font-size: clamp(30px, 4vw, 45px); line-height: 1.15; font-weight: 700;
  margin: 0;
}

/* ==========================================================================
   12 — Ready to work with us? CTA
   ========================================================================== */
/* site.css paints the homepage .cta section tinted; here the section must stay
   white so the tinted .ipanel card reads as a rounded card (matches live). */
.section.cta { background: #fff; }
.cta-panel { text-align: center; padding: 48px 24px 56px; }
.cta-panel img { width: 190px; height: auto; margin: 0 auto 18px; }
.cta-head {
  font-size: clamp(34px, 6vw, 62px); line-height: 1.1; font-weight: 800;
  color: var(--navy); margin: 0 0 28px; letter-spacing: -0.01em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .cmhero-grid { grid-template-columns: 1fr; gap: 26px; }
  .cmhero-illus { order: -1; }
  .advbasic-cards { grid-template-columns: 1fr; }
  /* stack the dashboard image above the copy where the image leads */
  .whatis--v2 .whatis-visual, .learnmore .learnmore-visual { order: -1; }
  .astep-card { grid-template-columns: 1fr; gap: 24px; }
  .astep-visual { max-width: 360px; }
  .astep-visual--toggle, .astep-visual--emoji { max-width: none; }
}

@media screen and (max-width: 860px) {
  .cmhero { padding: 26px 0 44px; }
  .cmhero-title { font-size: clamp(30px, 8vw, 42px); margin: 0 0 26px; }
  .cmhero-bullets li { font-size: 16px; }
  .cmhero-badges { gap: 16px; padding: 12px 18px; flex-wrap: wrap; justify-content: center; }
  .cmhero-badges .b-google { height: 32px; } .cmhero-badges .b-cmp { height: 42px; } .cmhero-badges .b-tcf { height: 36px; }
  .cmhero-cta .pill-btn { flex: 1; min-width: 150px; }
  .astep { grid-template-columns: 1fr; gap: 10px; }
  .astep-num { margin: 0 auto; }
  .astep-card { padding: 30px 26px; }
  .astep-checks { grid-template-columns: 1fr; }
  .advbasic-card { padding: 30px 26px; }
  .trusted-logos li { padding: 12px 20px; }
  .trusted-logos li + li { border-left: 0; }
}