/* =====================================================
   GA4WP — Elementor Widgets Frontend Stylesheet
   Responsive: Desktop / Tablet (≤1024) / Mobile (≤767)
   Aligned to Elementor's standard breakpoints
   ===================================================== */

:root {
  --ga-surface:#FFFFFF; --ga-surface2:#F8F9FC;
  --ga-border:#E4E8F2;
  --ga-brand:#4353FF; --ga-brand-dark:#3444E8;
  --ga-brand-soft:#ECEEFF;
  --ga-text1:#0F172A; --ga-text2:#475569; --ga-text3:#94A3B8;
  --ga-r-sm:8px; --ga-r-md:12px;
  --ga-sh-mega:0 16px 48px -8px rgba(15,23,42,.14);
  --ga-sh-xs:0 1px 2px rgba(15,23,42,.05);
  --ga-font:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  --ga-nav-h:58px;   /* matches default bar height — updated by JS if changed */
}

/* ── Global safety net: prevent ANY element (now or in future) from ever
   creating a page-level horizontal scrollbar. This does not affect layout —
   it only clips overflow that shouldn't be visible at the viewport edge. ── */
html, body { max-width:100%; overflow-x:hidden; }

/* ── Global safety net #2: CSS Grid items default to min-width:auto, which
   lets a track be forced wider than its allotted space by large intrinsic
   content (e.g. a wide image or long unbroken text) — even after
   grid-template-columns collapses to a single column on mobile, and even
   though overflow:hidden is set on the item itself (overflow:hidden clips
   rendering, not the layout-sizing calculation that runs first). This
   covers every grid layout in the plugin so none of them can silently
   overflow their container on narrow viewports. ── */
.ga4wp-scope .ga4wp-mega-panel-inner > *,
.ga4wp-hero-grid > *,
.ga4wp-dp-kpis > *,
.ga4wp-dp-charts > *,
.ga4wp-stats-grid > *,
.ga4wp-features-grid > *,
.ga4wp-reports-layout > *,
.ga4wp-r-kpis > *,
.ga4wp-track-grid > *,
.ga4wp-woo-grid > *,
.ga4wp-wm-kpis > *,
.ga4wp-wm-thead > *,
.ga4wp-wm-row > *,
.ga4wp-guarantee-inner > *,
.ga4wp-pricing-grid > *,
.ga4wp-ptable-grid > *,
.ga4wp-reviews-grid > *,
.ga4wp-faq-grid > *,
.ga4wp-footer-grid > *,
.ga4wp-tier-grid > *,
.ga4wp-int-grid > *,
.ga4wp-dims-grid > *,
.ga4wp-email-card > *,
.ga4wp-dash-body > *,
.ga4wp-kpi-row > *,
.ga4wp-dd-panel.active > *,
.ga4wp-setup-grid > *,
.ga4wp-setup-step > *,
.ga4wp-mock-body > *,
.ga4wp-dr-grid > *,
.ga4wp-rmc-row > *,
.ga4wp-fv2-grid > *,
.ga4wp-scope .stats-row > *,
.ga4wp-scope .ga4wp-fv3-grid > *
{ min-width:0; }

.ga4wp-scope {
  --bg:#F4F6FA; --surface:#FFFFFF; --surface2:#F8F9FC;
  --border:#E4E8F2; --border2:#D0D6E8;
  --brand:#4353FF; --brand-dark:#3444E8;
  --brand-soft:#ECEEFF; --brand-glow:rgba(67,83,255,.14);
  --teal:#0EA5A0; --teal-soft:#F0FDFA; --teal-bdr:rgba(14,165,160,.18);
  --violet:#7C3AED; --violet-soft:#F5F3FF; --violet-bdr:rgba(124,58,237,.18);
  --amber:#D97706; --amber-soft:#FFFBEB; --amber-bdr:rgba(217,119,6,.18);
  --emerald:#059669; --emerald-soft:#ECFDF5; --emerald-bdr:#A7F3D0;
  --rose:#E11D48; --rose-soft:#FFF1F4; --rose-bdr:#FECDD3;
  --sky:#0284C7; --sky-soft:#F0F9FF;
  --text1:#0F172A; --text2:#475569; --text3:#94A3B8; --text4:#CBD5E1;
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 1px 4px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.04);
  --sh:0 2px 8px rgba(15,23,42,.07),0 4px 20px rgba(15,23,42,.05);
  --sh-md:0 4px 16px rgba(15,23,42,.09),0 8px 32px rgba(15,23,42,.06);
  --sh-brand:0 4px 20px rgba(67,83,255,.22);
  --r-xs:4px;--r-sm:8px;--r:12px;--r-lg:16px;--r-xl:24px;
  font-family:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text1); line-height:1.6; font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.ga4wp-scope *,.ga4wp-scope *::before,.ga4wp-scope *::after{ box-sizing:border-box }
.ga4wp-doc-widget,.ga4wp-doc-widget *,.ga4wp-doc-widget *::before,.ga4wp-doc-widget *::after{ box-sizing:border-box }
.ga4wp-scope a{ text-decoration:none }
.ga4wp-scope img{ display:block; max-width:100% }
.ga4wp-scope .mono{ font-family:'IBM Plex Mono',monospace }

/* ── Defensive reset: many themes / Elementor global Kit settings apply a
   default filled-button style (background, border, box-shadow, text-
   transform, and sometimes a faded/low-opacity "idle" state meant for their
   own button component) to every <button> element on the page. Our widgets
   use real <button> tags for tab switches, toggles, and "load more"
   controls, which otherwise inherit that theme styling. This only resets
   the handful of cosmetic properties responsible for that — never layout
   properties like display/width/padding, so it can't fight our own
   components' layout. It's wrapped in :where() so it contributes zero
   specificity, meaning every one of our own component rules below (which
   use !important on these same properties) always wins on specificity,
   regardless of source order. ── */
:where(.ga4wp-scope) button{
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  outline: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit;
  cursor: pointer;
}
:where(.ga4wp-scope) button .mi,
:where(.ga4wp-scope) button span{
  opacity: 1 !important;
  filter: none !important;
}
.ga4wp-scope .mi{ font-family:'Material Icons Round'; font-weight:normal; font-style:normal; font-size:inherit; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; -webkit-font-smoothing:antialiased }
.ga4wp-scope .ga4wp-wrap{ max-width:1160px; margin:0 auto; padding:0 24px }
.ga4wp-scope .ga4wp-sec{ padding:72px 0 }

/* Eyebrow + headings */
.ga4wp-scope .ga4wp-eyebrow{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; padding:4px 11px; border-radius:var(--r-xs); background:var(--brand-soft); color:var(--brand); border:1px solid rgba(67,83,255,.18); margin-bottom:14px }
.ga4wp-scope .ga4wp-eyebrow .mi{ font-size:14px }
.ga4wp-scope .ga4wp-section-title{ font-size:clamp(24px,3vw,36px); font-weight:800; line-height:1.18; letter-spacing:-.6px; color:var(--text1); margin:0 }
.ga4wp-scope .ga4wp-section-body{ font-size:15.5px; color:var(--text2); line-height:1.72; max-width:520px; margin-top:10px }
.ga4wp-scope .ga4wp-section-hd{ text-align:center; margin-bottom:48px }
.ga4wp-scope .ga4wp-section-hd .ga4wp-section-body{ margin:10px auto 0 }

/* Buttons */
.ga4wp-scope .ga4wp-btn{ display:inline-flex; align-items:center; gap:6px; font-family:'Sora',sans-serif; font-size:13px; font-weight:700; padding:10px 22px; border-radius:var(--r-sm); cursor:pointer; border:none; text-decoration:none; transition:all .15s; white-space:nowrap; line-height:1.4; letter-spacing:.1px }
.ga4wp-scope .ga4wp-btn .mi{ font-size:16px }
.ga4wp-scope .ga4wp-btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--sh-brand) }
.ga4wp-scope .ga4wp-btn-primary:hover{ background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 6px 24px rgba(67,83,255,.3) }
.ga4wp-scope .ga4wp-btn-outline{ background:var(--surface) !important; color:var(--text2); border:1px solid var(--border) !important; box-shadow:var(--sh-xs) !important }
.ga4wp-scope .ga4wp-btn-outline:hover{ background:var(--surface2) !important; border-color:var(--border2); color:var(--text1) }
.ga4wp-scope .ga4wp-btn-white{ background:#fff; color:var(--brand); font-weight:700; box-shadow:0 4px 16px rgba(0,0,0,.15) }
.ga4wp-scope .ga4wp-btn-white:hover{ background:var(--brand-soft) }
.ga4wp-scope .ga4wp-btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22) }
.ga4wp-scope .ga4wp-btn-ghost:hover{ background:rgba(255,255,255,.18) }
.ga4wp-scope .ga4wp-btn-lg{ font-size:14px; padding:12px 26px; border-radius:var(--r) }

/* Badges */
.ga4wp-scope .ga4wp-badge-up{ display:inline-flex; align-items:center; gap:2px; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; background:var(--emerald-soft); color:var(--emerald); border:1px solid var(--emerald-bdr); font-family:'IBM Plex Mono',monospace }
.ga4wp-scope .ga4wp-badge-dn{ display:inline-flex; align-items:center; gap:2px; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; background:var(--rose-soft); color:var(--rose); border:1px solid var(--rose-bdr); font-family:'IBM Plex Mono',monospace }
.ga4wp-scope .ga4wp-badge-pro{ font-size:9px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-xs); background:var(--brand-soft); color:var(--brand); border:1px solid rgba(67,83,255,.2) }
.ga4wp-scope .ga4wp-badge-free{ font-size:9px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-xs); background:var(--emerald-soft); color:var(--emerald); border:1px solid rgba(5,150,105,.2) }

/* ======================= HEADER / NAVBAR + MEGA MENU =======================
   ALL selectors scoped under .ga4wp-scope to beat theme/plugin CSS.
   Variables use --ga-* on :root so panels (which are inside .ga4wp-scope)
   inherit them regardless of stacking context.
   ========================================================================= */

.ga4wp-scope .ga4wp-navbar {
  position:relative; /* default when sticky is off */
  z-index:500;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid var(--ga-border);
  box-shadow:var(--ga-sh-xs);
  font-family:var(--ga-font);
}
/* When fixed, the scope collapses — the JS spacer fills the height,
   but we also set a min-height on the scope itself as a safety net */
.ga4wp-scope:has(.ga4wp-navbar.ga4wp-sticky-desktop),
.ga4wp-scope:has(.ga4wp-navbar.ga4wp-sticky-mobile) {
  min-height:var(--ga-nav-h, 58px);
}

/* ── Sticky: position:fixed so it works in all Elementor layouts ──
   position:sticky fails in Elementor because the widget's parent section
   is only as tall as the header itself — the sticky element never scrolls
   within its containing block. position:fixed always works.
   JS injects a .ga4wp-sticky-spacer div after the widget to fill the gap. */

/* Desktop (≥1025px) */
@media(min-width:1025px){
  .ga4wp-scope .ga4wp-navbar.ga4wp-sticky-desktop {
    position:fixed;
    top:0; left:0; right:0; width:100%;
    z-index:9999;
    transition:box-shadow .2s, background .2s;
  }
  .ga4wp-scope .ga4wp-navbar.ga4wp-sticky-desktop.scrolled {
    box-shadow:0 2px 20px rgba(15,23,42,.12);
    background:rgba(255,255,255,.99);
  }
}

/* Mobile / tablet (≤1024px) */
@media(max-width:1024px){
  .ga4wp-scope .ga4wp-navbar.ga4wp-sticky-mobile {
    position:fixed;
    top:0; left:0; right:0; width:100%;
    z-index:9999;
    transition:box-shadow .2s, background .2s;
  }
  .ga4wp-scope .ga4wp-navbar.ga4wp-sticky-mobile.scrolled {
    box-shadow:0 2px 20px rgba(15,23,42,.12);
    background:rgba(255,255,255,.99);
  }
}

/* Spacer injected by JS — height set dynamically to match navbar height */
.ga4wp-sticky-spacer {
  display:none; /* hidden until JS activates */
  width:100%;
}

/* ── Nav inner layout ── */
.ga4wp-scope .ga4wp-nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--ga-nav-h,58px); position:relative;
  max-width:1160px; margin:0 auto; padding:0 24px; overflow:visible;
}
.ga4wp-scope .ga4wp-nav-brand {
  display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px;
  letter-spacing:-.3px; color:var(--ga-text1); text-decoration:none; flex-shrink:0;
}
.ga4wp-scope .ga4wp-nav-brand-icon {
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,var(--ga-brand) 0%,#0EA5A0 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(67,83,255,.28); overflow:hidden; flex-shrink:0;
  color:#fff; font-weight:800; font-size:13px;
}
.ga4wp-scope .ga4wp-nav-logo-img { height:32px; width:auto; display:block; object-fit:contain; flex-shrink:0 }
.ga4wp-scope .ga4wp-nav-brand-text { display:inline-block; line-height:1; font-family:var(--ga-font) }
.ga4wp-scope .ga4wp-nav-links { display:flex; align-items:center; gap:2px; position:static }
.ga4wp-scope .ga4wp-nav-right { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.ga4wp-scope .ga4wp-nav-pill { display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--ga-text3); font-family:var(--ga-font) }
.ga4wp-scope .ga4wp-nav-stars { color:#F59E0B; letter-spacing:1px; font-size:11px }
.ga4wp-scope .ga4wp-nav-badge {
  display:inline-flex; align-items:center; font-size:10px; font-weight:700;
  background:var(--ga-brand-soft); color:var(--ga-brand);
  border-radius:20px; padding:1px 7px; margin-left:4px; letter-spacing:.2px;
}
.ga4wp-scope .ga4wp-nav-item { position:relative; display:flex; align-items:center }

/* ── Nav link / trigger — identical for <a>, mega <button>, dropdown <button> ── */
.ga4wp-scope .ga4wp-nav-link,
.ga4wp-scope button.ga4wp-nav-link {
  -webkit-appearance:none; appearance:none; box-sizing:border-box;
  display:inline-flex; align-items:center; gap:3px;
  font-family:var(--ga-font) !important; font-size:13px !important;
  font-weight:500 !important; line-height:1.4 !important; letter-spacing:normal !important;
  color:var(--ga-text2) !important; padding:5px 11px; border-radius:var(--ga-r-sm);
  transition:color .15s, background .15s; text-decoration:none !important;
  background:none !important; border:none !important; cursor:pointer;
  white-space:nowrap; -webkit-font-smoothing:antialiased; text-transform:none !important;
  box-shadow:none !important;
}
.ga4wp-scope .ga4wp-nav-link:hover,
.ga4wp-scope button.ga4wp-nav-link:hover,
.ga4wp-scope .ga4wp-nav-item.active > .ga4wp-nav-link {
  color:var(--ga-brand) !important; background:var(--ga-brand-soft) !important;
}

/* ── Chevron — rendered via CSS ::before to avoid FOUT ("expand_more" text flash) ── */
.ga4wp-scope .ga4wp-nav-chevron {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; font-size:0; overflow:hidden; flex-shrink:0;
  transition:transform .2s; opacity:.55; margin-left:1px;
}
.ga4wp-scope .ga4wp-nav-chevron::before {
  content:"expand_more";
  font-family:"Material Icons Round"; font-style:normal; font-weight:normal;
  font-size:18px; line-height:1; letter-spacing:normal; text-transform:none;
  -webkit-font-smoothing:antialiased;
}
.ga4wp-scope .ga4wp-nav-item.active > .ga4wp-nav-link .ga4wp-nav-chevron { transform:rotate(180deg); opacity:1 }

/* ── Dropdown panel ── */
.ga4wp-scope .ga4wp-dropdown-panel {
  position:absolute; top:var(--ga-nav-h,58px); left:0; min-width:220px;
  background:var(--ga-surface); border:1px solid var(--ga-border); border-radius:var(--ga-r-md);
  box-shadow:var(--ga-sh-mega); padding:6px; z-index:501;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility 0s .18s; font-family:var(--ga-font);
}
.ga4wp-scope .ga4wp-dropdown-panel.active {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0); transition:opacity .18s, transform .18s;
}
.ga4wp-scope .ga4wp-dd-item {
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:var(--ga-r-sm);
  color:var(--ga-text2) !important; text-decoration:none !important;
  font-size:13px !important; font-weight:500 !important; font-family:var(--ga-font) !important;
  transition:background .12s, color .12s;
}
.ga4wp-scope .ga4wp-dd-item:hover { background:var(--ga-brand-soft); color:var(--ga-brand) !important }
.ga4wp-scope .ga4wp-dd-icon {
  font-family:"Material Icons Round"; font-style:normal; font-weight:normal;
  font-size:17px; line-height:1; letter-spacing:normal; text-transform:none;
  -webkit-font-smoothing:antialiased; color:var(--ga-brand); opacity:.8; flex-shrink:0;
}

/* ── Mega panel ── */
.ga4wp-scope .ga4wp-mega-panel {
  position:absolute; top:var(--ga-nav-h,58px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:100%; background:var(--ga-surface);
  border-top:1px solid var(--ga-border); border-bottom:1px solid var(--ga-border);
  box-shadow:var(--ga-sh-mega); z-index:499; padding:28px 0 32px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s, transform .18s, visibility 0s .18s; font-family:var(--ga-font);
}
.ga4wp-scope .ga4wp-mega-panel.active {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0); transition:opacity .18s, transform .18s;
}
.ga4wp-scope .ga4wp-mega-panel-inner {
  display:grid; gap:0; max-width:1160px; margin:0 auto; padding:0 24px;
}
.ga4wp-scope .ga4wp-mega-panel.ga4wp-cols-2 .ga4wp-mega-panel-inner { grid-template-columns:repeat(2,1fr) }
.ga4wp-scope .ga4wp-mega-panel.ga4wp-cols-3 .ga4wp-mega-panel-inner { grid-template-columns:repeat(3,1fr) }
.ga4wp-scope .ga4wp-mega-panel.ga4wp-cols-4 .ga4wp-mega-panel-inner { grid-template-columns:repeat(4,1fr) }
.ga4wp-scope .ga4wp-mega-col { padding:0 24px; border-right:1px solid var(--ga-border) }
.ga4wp-scope .ga4wp-mega-col:first-child { padding-left:0 }
.ga4wp-scope .ga4wp-mega-col:last-child { border-right:none; padding-right:0 }
.ga4wp-scope .ga4wp-mega-col-heading {
  font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:var(--ga-text3); margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid var(--ga-border); font-family:var(--ga-font);
}
.ga4wp-scope .ga4wp-mega-item {
  display:flex; align-items:flex-start; gap:11px; padding:8px 9px;
  border-radius:var(--ga-r-sm); text-decoration:none !important; margin-bottom:2px;
  transition:background .12s; color:inherit !important;
}
.ga4wp-scope .ga4wp-mega-item:hover { background:var(--ga-surface2) }
.ga4wp-scope .ga4wp-mega-item-icon {
  flex-shrink:0; width:34px; height:34px; background:var(--ga-brand-soft);
  border-radius:var(--ga-r-sm); display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.ga4wp-scope .ga4wp-mega-item:hover .ga4wp-mega-item-icon { background:#dde1ff }
.ga4wp-scope .ga4wp-mega-item-icon .mi {
  font-family:"Material Icons Round"; font-style:normal; font-weight:normal;
  font-size:18px; line-height:1; letter-spacing:normal; text-transform:none;
  -webkit-font-smoothing:antialiased; color:var(--ga-brand);
}
.ga4wp-scope .ga4wp-mega-item-body { min-width:0 }
.ga4wp-scope .ga4wp-mega-item-label {
  font-size:13px !important; font-weight:600 !important; color:var(--ga-text1) !important;
  line-height:1.3; margin-bottom:2px; font-family:var(--ga-font); -webkit-font-smoothing:antialiased;
}
.ga4wp-scope .ga4wp-mega-item-desc {
  font-size:11.5px !important; color:var(--ga-text3) !important;
  line-height:1.45; font-family:var(--ga-font);
}
.ga4wp-scope .ga4wp-mega-item:hover .ga4wp-mega-item-label { color:var(--ga-brand) !important }
.ga4wp-scope .ga4wp-mega-img-item {
  display:block; text-decoration:none; border-radius:var(--ga-r-md);
  overflow:hidden; margin-bottom:4px; border:1px solid var(--ga-border);
  transition:box-shadow .15s, transform .15s;
}
.ga4wp-scope .ga4wp-mega-img-item:hover { box-shadow:0 4px 20px rgba(15,23,42,.12); transform:translateY(-2px) }
.ga4wp-scope .ga4wp-mega-img-item img { width:100%; display:block }
.ga4wp-scope .ga4wp-mega-img-caption {
  padding:10px 12px 11px; font-size:12.5px; font-weight:600;
  color:var(--ga-text1); font-family:var(--ga-font); background:var(--ga-surface);
}
.ga4wp-scope .ga4wp-mega-img-caption-sub { font-size:11px; color:var(--ga-text3); margin-top:1px; font-family:var(--ga-font) }

/* ── Hamburger — hidden on desktop ── */
.ga4wp-scope .ga4wp-nav-toggle {
  -webkit-appearance:none; appearance:none;
  display:none !important; align-items:center; justify-content:center;
  background:transparent !important; border:none !important; box-shadow:none !important;
  cursor:pointer; padding:6px; flex-shrink:0; color:var(--ga-text1) !important;
  border-radius:var(--ga-r-sm); transition:background-color .15s,color .15s; line-height:0;
}
.ga4wp-scope .ga4wp-nav-toggle:hover { background:var(--ga-brand-soft) !important; color:var(--ga-brand) !important }
.ga4wp-scope .ga4wp-nav-toggle:focus-visible { outline:2px solid var(--ga-brand); outline-offset:2px }
.ga4wp-scope .ga4wp-nav-toggle .mi {
  font-family:"Material Icons Round"; font-style:normal; font-weight:normal;
  font-size:24px; line-height:1; letter-spacing:normal; text-transform:none; -webkit-font-smoothing:antialiased;
}

/* ── Buttons ── */
.ga4wp-scope .ga4wp-btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ga-font); font-size:13px; font-weight:600;
  padding:7px 18px; border-radius:var(--ga-r-sm); cursor:pointer;
  text-decoration:none; transition:background .15s, color .15s, box-shadow .15s;
  white-space:nowrap; border:1px solid transparent; line-height:1.4; box-sizing:border-box;
}
.ga4wp-scope .ga4wp-btn-outline {
  background:#fff !important; border-color:var(--ga-border) !important;
  color:var(--ga-text2) !important;
}
.ga4wp-scope .ga4wp-btn-outline:hover { background:var(--ga-surface2) !important; color:var(--ga-text1) !important }
.ga4wp-scope .ga4wp-btn-primary {
  background:var(--ga-brand) !important; border-color:var(--ga-brand) !important;
  color:#fff !important;
}
.ga4wp-scope .ga4wp-btn-primary:hover { background:var(--ga-brand-dark) !important }

/* ── Mobile drawer ── */
.ga4wp-mobile-drawer {
  position:fixed; top:0; left:0; bottom:0; width:min(320px,88vw);
  background:#fff; z-index:600; transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; display:flex; flex-direction:column;
  box-shadow:8px 0 40px rgba(15,23,42,.14); font-family:var(--ga-font);
}
.ga4wp-mobile-drawer[aria-hidden="false"] { transform:translateX(0) }
.ga4wp-mobile-drawer-inner { padding:0 0 32px; flex:1; display:flex; flex-direction:column }
.ga4wp-mobile-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; border-bottom:1px solid var(--ga-border); flex-shrink:0;
}
.ga4wp-mobile-drawer-close {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--ga-r-sm);
  background:transparent; border:none !important; cursor:pointer;
  color:var(--ga-text3); transition:background .12s, color .12s; -webkit-appearance:none;
}
.ga4wp-mobile-drawer-close:hover { background:var(--ga-surface2); color:var(--ga-text1) }
.ga4wp-mobile-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.32);
  z-index:599; opacity:0; visibility:hidden;
  transition:opacity .28s, visibility 0s .28s;
}
.ga4wp-mobile-overlay.active { opacity:1; visibility:visible; transition:opacity .28s }
.ga4wp-mobile-nav { flex:1; padding:6px 0 }
.ga4wp-mobile-item { position:relative }
.ga4wp-mobile-item + .ga4wp-mobile-item::before {
  content:''; display:block; margin:0 16px; height:1px; background:var(--ga-border);
}
.ga4wp-mobile-link,
button.ga4wp-mobile-link {
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:11px 16px;
  font-family:var(--ga-font) !important; font-size:13px !important;
  font-weight:500 !important; line-height:1.4 !important; letter-spacing:normal !important;
  color:var(--ga-text2) !important; text-decoration:none !important;
  background:transparent !important; border:none !important; border-radius:0 !important;
  outline:none; cursor:pointer; text-align:left; -webkit-font-smoothing:antialiased;
  transition:background .12s, color .12s; box-shadow:none !important;
}
.ga4wp-mobile-link:hover, button.ga4wp-mobile-link:hover {
  background:var(--ga-surface2) !important; color:var(--ga-text1) !important;
}
.ga4wp-mobile-item.open > .ga4wp-mobile-link,
.ga4wp-mobile-item.open > button.ga4wp-mobile-link {
  color:var(--ga-brand) !important; background:var(--ga-brand-soft) !important;
}
.ga4wp-mobile-chevron {
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ga-text3); transition:transform .2s; flex-shrink:0; margin-left:8px;
}
.ga4wp-mobile-item.open > .ga4wp-mobile-link .ga4wp-mobile-chevron,
.ga4wp-mobile-item.open > button.ga4wp-mobile-link .ga4wp-mobile-chevron { transform:rotate(180deg); color:var(--ga-brand) }
.ga4wp-mobile-sub {
  display:none; background:var(--ga-surface2);
  border-top:1px solid var(--ga-border); border-bottom:1px solid var(--ga-border);
  padding:4px 0 8px;
}
.ga4wp-mobile-item.open > .ga4wp-mobile-sub { display:block }
.ga4wp-mobile-sub-heading {
  font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ga-text3); padding:10px 20px 4px; font-family:var(--ga-font);
}
.ga4wp-mobile-sub-link {
  display:flex; align-items:center; gap:9px; padding:8px 20px;
  color:var(--ga-text2) !important; text-decoration:none !important;
  font-size:13px !important; font-weight:500 !important; font-family:var(--ga-font) !important;
  transition:background .1s, color .1s;
}
.ga4wp-mobile-sub-link:hover { background:var(--ga-brand-soft); color:var(--ga-brand) !important }
.ga4wp-mobile-sub-icon { color:var(--ga-brand); flex-shrink:0 }
.ga4wp-mobile-cta {
  padding:14px 16px; display:flex; flex-direction:column; gap:8px;
  border-top:1px solid var(--ga-border); margin-top:auto;
}
.ga4wp-mobile-cta .ga4wp-btn { width:100% !important; justify-content:center !important; font-size:13px }

/* ── Responsive ── */
@media(max-width:1024px){
  .ga4wp-scope .ga4wp-nav-links { display:none !important }
  .ga4wp-scope .ga4wp-nav-toggle { display:inline-flex !important }
  .ga4wp-scope .ga4wp-nav-right .ga4wp-nav-pill { display:none }
  .ga4wp-scope .ga4wp-nav-right .ga4wp-btn { display:none }
}

/* ── Elementor editor overrides ── */
@media(min-width:1025px){
  .elementor-editor-active .ga4wp-scope .ga4wp-nav-toggle,
  .elementor-editor-preview .ga4wp-scope .ga4wp-nav-toggle { display:none !important; }
  .elementor-editor-active .ga4wp-scope .ga4wp-nav-links,
  .elementor-editor-preview .ga4wp-scope .ga4wp-nav-links { display:flex !important; }
}
/* In editor: show first panel inline for editing, hide others */
.ga4wp-editor .ga4wp-editor-panel:first-of-type {
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  position:relative !important; top:auto !important; left:auto !important;
  width:100% !important; transform:none !important;
  border:1px dashed var(--ga-border) !important;
  border-radius:var(--ga-r-md) !important; margin-top:4px !important; padding:16px !important;
}
.ga4wp-editor .ga4wp-editor-panel:not(:first-of-type) {
  opacity:0 !important; visibility:hidden !important;
}
.ga4wp-editor .ga4wp-editor-panel.active {
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
}

/* ======================= HERO ======================= */
.ga4wp-hero{ padding:68px 0 56px; background:var(--surface); border-bottom:1px solid var(--border) }
.ga4wp-hero-grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:64px; align-items:center }
.ga4wp-hero-grid > *{ min-width:0 }
.ga4wp-hero-title{ font-size:clamp(30px,4vw,50px); font-weight:800; line-height:1.1; letter-spacing:-1.2px; color:var(--text1); margin:0 0 16px }
.ga4wp-hero-accent{ color:var(--brand); text-decoration:underline; text-decoration-color:var(--brand); text-underline-offset:5px; text-decoration-thickness:3px }
.ga4wp-hero-body{ font-size:16px; color:var(--text2); line-height:1.72; margin-bottom:26px; max-width:460px }
.ga4wp-hero-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.ga4wp-hero-trust{ display:flex; align-items:center; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border); flex-wrap:wrap }
.ga4wp-trust-item{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text3) }
.ga4wp-trust-item .mi{ font-size:14px }
.ga4wp-trust-sep{ width:3px; height:3px; border-radius:50%; background:var(--text4); flex-shrink:0 }

/* Dashboard preview */
.ga4wp-dash{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh-md); overflow:hidden }
.ga4wp-dp-chrome{ background:var(--surface2); border-bottom:1px solid var(--border); padding:9px 14px; display:flex; align-items:center; gap:10px }
.ga4wp-dp-dots{ display:flex; gap:5px }
.ga4wp-dp-dot{ width:10px; height:10px; border-radius:50% }
.ga4wp-dp-url{ flex:1; background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:4px 10px; font-size:10px; color:var(--text3); font-family:'IBM Plex Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ga4wp-dp-body{ display:flex }
.ga4wp-dp-sidebar{ width:52px; background:#1D2327; flex-shrink:0; padding:10px 0; display:flex; flex-direction:column; align-items:center; gap:4px }
.ga4wp-dp-sb-item{ width:36px; height:30px; border-radius:5px; display:flex; align-items:center; justify-content:center; opacity:.3; color:#fff }
.ga4wp-dp-sb-item .mi{ font-size:16px; color:#fff }
.ga4wp-dp-sb-item.act{ background:rgba(67,83,255,.22); opacity:1 }
.ga4wp-dp-sb-ga{ width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,#2563EB,#0EA5A0); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:10px }
.ga4wp-dp-content{ flex:1; padding:10px; overflow:hidden; min-width:0 }
.ga4wp-dp-topnav{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:7px 12px; display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; box-shadow:var(--sh-xs) }
.ga4wp-dp-brand{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--text1) }
.ga4wp-dp-brand-ico{ width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#2563EB,#0EA5A0); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:9px }
.ga4wp-dp-conn{ display:flex; align-items:center; gap:4px; font-size:9.5px; font-weight:500; color:var(--emerald) }
.ga4wp-dp-conn-dot{ width:6px; height:6px; border-radius:50%; background:var(--emerald); animation:ga4wp-dp-pulse 2s infinite }
@keyframes ga4wp-dp-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(5,150,105,.5) } 50%{ box-shadow:0 0 0 4px rgba(5,150,105,0) } }
.ga4wp-dp-tabs{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); display:flex; margin-bottom:7px; box-shadow:var(--sh-xs); overflow:hidden }
.ga4wp-dp-tab{ padding:7px 11px; font-size:9.5px; font-weight:500; color:var(--text3); border-bottom:2px solid transparent; white-space:nowrap }
.ga4wp-dp-tab.act{ color:var(--brand); border-bottom-color:var(--brand); font-weight:600 }
.ga4wp-dp-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:7px }
.ga4wp-dp-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:8px 10px; position:relative; overflow:hidden; box-shadow:var(--sh-xs) }
.ga4wp-dp-kpi::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),#60A5FA) }
.ga4wp-dp-kpi-lbl{ font-size:8px; color:var(--text3); font-weight:500; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px }
.ga4wp-dp-kpi-val{ font-size:16px; font-weight:700; color:var(--text1); line-height:1; font-family:'IBM Plex Mono',monospace; letter-spacing:-.5px }
.ga4wp-dp-kpi-delta{ margin-top:2px; font-size:8px; font-weight:700; font-family:'IBM Plex Mono',monospace }
.ga4wp-dp-kpi-up{ color:var(--emerald) } .ga4wp-dp-kpi-dn{ color:var(--rose) }
.ga4wp-dp-charts{ display:grid; grid-template-columns:1.7fr 1fr; gap:5px }
.ga4wp-dp-chart-box{ background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:8px; box-shadow:var(--sh-xs) }
.ga4wp-dp-chart-title{ font-size:8.5px; font-weight:700; color:var(--text2); margin-bottom:5px }
.ga4wp-dp-donut-row{ display:flex; align-items:center; gap:8px }
.ga4wp-dp-donut{ width:52px; height:52px; flex-shrink:0 }
.ga4wp-dp-legend{ display:flex; flex-direction:column; gap:3px }
.ga4wp-dp-leg{ display:flex; align-items:center; gap:4px; font-size:7.5px; color:var(--text2) }
.ga4wp-dp-leg-dot{ width:6px; height:6px; border-radius:2px; flex-shrink:0 }

/* ======================= STATS BAR ======================= */
.ga4wp-stats-bar{ background:var(--surface); border-bottom:1px solid var(--border) }
.ga4wp-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr) }
.ga4wp-stat-item{ display:flex; align-items:center; gap:13px; padding:20px 28px; border-right:1px solid var(--border) }
.ga4wp-stat-item:last-child{ border-right:none }
.ga4wp-stat-icon{ width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center }
.ga4wp-stat-icon .mi{ font-size:20px }
.ga4wp-stat-val{ font-size:22px; font-weight:800; color:var(--text1); line-height:1; font-family:'IBM Plex Mono',monospace; letter-spacing:-.5px }
.ga4wp-stat-lbl{ font-size:12px; color:var(--text2); margin-top:2px }

/* ======================= FEATURES ======================= */
.ga4wp-features-bg{ background:var(--bg) }
.ga4wp-features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.ga4wp-feat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; transition:box-shadow .2s,border-color .2s,transform .2s }
.ga4wp-feat-card:hover{ box-shadow:var(--sh); border-color:var(--border2); transform:translateY(-2px) }
.ga4wp-feat-card-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px }
.ga4wp-feat-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.ga4wp-feat-icon .mi{ font-size:19px }
.ga4wp-feat-title{ font-size:13.5px; font-weight:700; color:var(--text1); margin-bottom:5px; line-height:1.3 }
.ga4wp-feat-desc{ font-size:12.5px; color:var(--text2); line-height:1.65 }

/* ======================= REPORTS ======================= */
.ga4wp-reports-bg{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.ga4wp-reports-shell{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh) }
.ga4wp-reports-layout{ display:grid; grid-template-columns:220px 1fr; min-height:460px }
.ga4wp-reports-nav{ border-right:1px solid var(--border); background:var(--surface2); padding:18px 0 }
.ga4wp-rn-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--text3); padding:0 14px 8px }
.ga4wp-rn-item{ display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:12.5px; font-weight:500; color:var(--text2) !important; opacity:1 !important; border-left:2.5px solid transparent !important; transition:all .15s; margin:1px 6px; border-radius:0 7px 7px 0; cursor:pointer; background:none !important; border-top:none; border-right:none; border-bottom:none; text-align:left; width:calc(100% - 12px) }
.ga4wp-rn-item .mi{ font-size:15px; color:var(--text3) !important; opacity:1 !important; flex-shrink:0 }
.ga4wp-rn-item:hover{ background:var(--bg) !important; color:var(--text1) !important }
.ga4wp-rn-item.act{ background:var(--brand-soft) !important; color:var(--brand) !important; border-left-color:var(--brand) !important; font-weight:600 }
.ga4wp-rn-item.act .mi{ color:var(--brand) !important }
.ga4wp-rn-item:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px }
.ga4wp-reports-pane{ padding:24px 28px; max-height:640px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent }
.ga4wp-reports-pane::-webkit-scrollbar{ width:8px }
.ga4wp-reports-pane::-webkit-scrollbar-track{ background:transparent }
.ga4wp-reports-pane::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px }
.ga4wp-reports-pane::-webkit-scrollbar-thumb:hover{ background:var(--border2,var(--border)) }
.ga4wp-r-panel{ display:none }
.ga4wp-r-panel.act{ display:block; animation:ga4wp-rpFade .2s ease }
@keyframes ga4wp-rpFade{ from{ opacity:0; transform:translateX(6px) } to{ opacity:1; transform:none } }
.ga4wp-r-ptitle{ font-size:15px; font-weight:700; color:var(--text1); margin-bottom:5px }
.ga4wp-r-pdesc{ font-size:12.5px; color:var(--text3); line-height:1.6; max-width:460px; margin-bottom:16px }
.ga4wp-r-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px }
.ga4wp-r-kpi{ background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:11px 13px }
.ga4wp-r-kpi-lbl{ font-size:9.5px; color:var(--text3); font-weight:500; text-transform:uppercase; letter-spacing:.5px }
.ga4wp-r-kpi-val{ font-size:20px; font-weight:700; color:var(--text1); font-family:'IBM Plex Mono',monospace; letter-spacing:-.5px; margin:3px 0 }
.ga4wp-mini-tbl{ width:100%; border-collapse:collapse; font-size:12px }
.ga4wp-mini-tbl thead th{ text-align:left; padding:7px 10px; font-size:9.5px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--border); background:var(--surface2) }
.ga4wp-mini-tbl tbody td{ padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text1); vertical-align:middle }
.ga4wp-mini-tbl tbody tr:last-child td{ border-bottom:none }
.ga4wp-mini-tbl tbody tr:hover{ background:var(--bg) }
.ga4wp-td-m{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600 }
.ga4wp-td-bw{ display:flex; align-items:center; gap:7px }
.ga4wp-td-bar{ flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden }
.ga4wp-td-fill{ height:100%; border-radius:2px; background:var(--brand) }
.ga4wp-td-pct{ font-size:10.5px; color:var(--text3); white-space:nowrap; font-family:'IBM Plex Mono',monospace }

/* ======================= TRACKING ======================= */
.ga4wp-tracking-bg{ background:var(--bg) }
.ga4wp-track-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.ga4wp-track-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 18px; transition:box-shadow .2s,border-color .2s }
.ga4wp-track-card:hover{ box-shadow:var(--sh-sm); border-color:var(--border2) }
.ga4wp-track-icon{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:12px }
.ga4wp-track-icon .mi{ font-size:18px }
.ga4wp-track-title{ font-size:13px; font-weight:700; color:var(--text1); margin-bottom:6px }
.ga4wp-track-desc{ font-size:12px; color:var(--text2); line-height:1.65 }
.ga4wp-track-pills{ display:flex; flex-wrap:wrap; gap:4px; margin-top:10px }
.ga4wp-track-pill{ font-size:10px; font-weight:500; padding:2px 7px; border-radius:var(--r-xs); background:var(--border); color:var(--text2); font-family:'IBM Plex Mono',monospace }

/* ======================= WOOCOMMERCE SPLIT ======================= */
.ga4wp-woo-bg{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.ga4wp-woo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
.ga4wp-woo-grid > *{ min-width:0 }
.ga4wp-woo-list{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px }
.ga4wp-woo-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text2); line-height:1.55 }
.ga4wp-woo-chk{ width:20px; height:20px; border-radius:6px; flex-shrink:0; margin-top:1px; background:var(--emerald-soft); border:1px solid rgba(5,150,105,.2); display:flex; align-items:center; justify-content:center }
.ga4wp-woo-chk .mi{ font-size:13px; color:var(--emerald) }
.ga4wp-woo-mock{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh-md); overflow:hidden }
.ga4wp-wm-header{ background:var(--surface2); border-bottom:1px solid var(--border); padding:11px 15px; display:flex; align-items:center; justify-content:space-between }
.ga4wp-wm-title{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--text1) }
.ga4wp-wm-title .mi{ font-size:15px; color:var(--brand) }
.ga4wp-wm-date{ font-size:10px; color:var(--text3); font-family:'IBM Plex Mono',monospace }
.ga4wp-wm-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:12px }
.ga4wp-wm-kpi{ background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:11px }
.ga4wp-wm-kpi-lbl{ font-size:9px; color:var(--text3); font-weight:500; text-transform:uppercase; letter-spacing:.4px }
.ga4wp-wm-kpi-val{ font-size:19px; font-weight:700; font-family:'IBM Plex Mono',monospace; letter-spacing:-.5px; margin:3px 0 5px }
.ga4wp-wm-bar{ height:3px; background:var(--border); border-radius:2px; overflow:hidden }
.ga4wp-wm-fill{ height:100%; border-radius:2px }
.ga4wp-wm-table{ padding:0 12px 12px }
.ga4wp-wm-thead{ display:grid; grid-template-columns:2.2fr 1fr 1fr; padding:5px 9px }
.ga4wp-wm-thead span{ font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.4px }
.ga4wp-wm-row{ display:grid; grid-template-columns:2.2fr 1fr 1fr; padding:7px 9px; border-radius:7px; font-size:11px; align-items:center }
.ga4wp-wm-row:hover{ background:var(--surface2) }
.ga4wp-wm-prod{ font-weight:600; color:var(--text1) }
.ga4wp-wm-num{ color:var(--text2); font-family:'IBM Plex Mono',monospace }
.ga4wp-wm-rev{ color:var(--emerald); font-weight:700; font-family:'IBM Plex Mono',monospace }

/* ======================= GUARANTEE ======================= */
.ga4wp-guarantee-bg{ background:var(--surface2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:64px 0 }
.ga4wp-guarantee-inner{ display:grid; grid-template-columns:auto 1fr; gap:52px; align-items:center; max-width:840px; margin:0 auto }
.ga4wp-guarantee-badge{ width:148px; height:148px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--emerald-soft) 0%,#D1FAE5 100%); border:3px solid var(--emerald); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; box-shadow:0 0 0 6px rgba(5,150,105,.08), var(--sh-md) }
.ga4wp-g-days{ font-size:42px; font-weight:800; color:var(--emerald); line-height:1; font-family:'IBM Plex Mono',monospace }
.ga4wp-g-day-lbl{ font-size:11px; font-weight:700; color:var(--emerald); text-transform:uppercase; letter-spacing:.5px; margin-top:1px }
.ga4wp-g-sub{ font-size:9.5px; font-weight:600; color:var(--emerald); opacity:.75; text-transform:uppercase; letter-spacing:.4px; margin-top:3px; line-height:1.3 }
.ga4wp-guarantee-content .ga4wp-eyebrow{ background:var(--emerald-soft); color:var(--emerald); border-color:rgba(5,150,105,.2) }
.ga4wp-g-title{ font-size:clamp(22px,2.6vw,30px); font-weight:800; color:var(--text1); letter-spacing:-.5px; margin:0 0 10px; line-height:1.2 }
.ga4wp-g-body{ font-size:15px; color:var(--text2); line-height:1.72; margin-bottom:20px; max-width:500px }
.ga4wp-g-points{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px }
.ga4wp-g-points li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text2) }
.ga4wp-g-chk{ width:18px; height:18px; border-radius:5px; flex-shrink:0; background:var(--emerald-soft); border:1px solid var(--emerald-bdr); display:flex; align-items:center; justify-content:center }
.ga4wp-g-chk .mi{ font-size:12px; color:var(--emerald) }
.ga4wp-g-fine{ font-size:11.5px; color:var(--text3); display:flex; align-items:center; gap:5px; margin-top:8px }
.ga4wp-g-fine .mi{ font-size:14px; color:var(--text4) }

/* ======================= PRICING ======================= */
.ga4wp-pricing-bg{ background:var(--bg) }
.ga4wp-pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:800px; margin:0 auto }
.ga4wp-pricing-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:30px; position:relative; overflow:hidden }
.ga4wp-pricing-card.featured{ border-color:var(--brand); box-shadow:var(--sh-brand) }
.ga4wp-pricing-card.featured::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--teal)) }
.ga4wp-pricing-popular{ position:absolute; top:-1px; right:24px; font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:var(--brand); color:#fff; padding:4px 12px; border-radius:0 0 8px 8px }
.ga4wp-pricing-plan{ font-size:12px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.7px; margin-bottom:4px }
.ga4wp-pricing-amount{ font-size:42px; font-weight:800; color:var(--text1); line-height:1; font-family:'IBM Plex Mono',monospace; letter-spacing:-1.5px }
.ga4wp-pricing-period{ font-size:13px; color:var(--text3) }
.ga4wp-pricing-desc{ font-size:12.5px; color:var(--text2); line-height:1.65; margin:12px 0 18px; padding-bottom:16px; border-bottom:1px solid var(--border) }
.ga4wp-pricing-list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:8px }
.ga4wp-pricing-list li{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--text2); line-height:1.5 }
.ga4wp-p-chk{ width:16px; height:16px; border-radius:4px; flex-shrink:0; margin-top:1px; background:var(--emerald-soft); display:flex; align-items:center; justify-content:center }
.ga4wp-p-chk .mi{ font-size:11px; color:var(--emerald) }
.ga4wp-p-chk.na{ background:var(--bg) }
.ga4wp-p-chk.na .mi{ color:var(--text4) }

/* ==================== PRICING TABLE (N-tier, toggle) — minimal ==================== */
.ga4wp-ptable-toggle-outer{ margin-bottom:48px }
.ga4wp-ptable-toggle{
  display:inline-flex; width:max-content; align-items:center; gap:2px;
  padding:4px; background:var(--surface2); border:1px solid var(--border); border-radius:100px;
}
.ga4wp-ptable-toggle-btn{
  display:inline-flex; align-items:center; gap:8px; border:none; background:none !important; cursor:pointer;
  font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:var(--text2);
  padding:9px 20px; border-radius:100px; transition:all .15s;
}
.ga4wp-ptable-toggle-btn.is-active{ background:var(--surface) !important; color:var(--text1); box-shadow:var(--sh-xs) !important }
.ga4wp-ptable-toggle-badge{
  font-size:9.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  color:var(--emerald); background:var(--emerald-soft); padding:2px 8px; border-radius:20px;
}

.ga4wp-ptable-grid{ display:grid; gap:28px; max-width:1080px; margin:0 auto; align-items:stretch }
.ga4wp-ptable-cols-2{ grid-template-columns:repeat(2,1fr); max-width:760px }
.ga4wp-ptable-cols-3{ grid-template-columns:repeat(3,1fr) }
.ga4wp-ptable-cols-4{ grid-template-columns:repeat(4,1fr) }

.ga4wp-ptable-card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:40px 32px;
}
.ga4wp-ptable-card.featured{ border:1.5px solid var(--brand) }

.ga4wp-ptable-badge{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft); padding:4px 12px; border-radius:20px; margin-bottom:16px;
}
.ga4wp-ptable-badge .mi{ font-size:12px }

.ga4wp-ptable-name{
  font-size:13px; font-weight:700; color:var(--text3); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:10px;
}
.ga4wp-ptable-price-row{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-bottom:14px }
.ga4wp-ptable-original{ font-size:15px; color:var(--text4); text-decoration:line-through; font-family:'IBM Plex Mono',monospace }
.ga4wp-ptable-amount{ font-size:38px; font-weight:800; color:var(--text1); line-height:1; font-family:'IBM Plex Mono',monospace; letter-spacing:-1px }
.ga4wp-ptable-period{ font-size:13px; color:var(--text3) }

.ga4wp-ptable-desc{ font-size:13.5px; color:var(--text2); line-height:1.65; margin:0 0 24px; padding-bottom:24px; border-bottom:1px solid var(--border) }

.ga4wp-ptable-btn.ga4wp-btn{ width:100%; justify-content:center; margin-bottom:8px }
.ga4wp-ptable-footnote{ text-align:center; font-size:11.5px; color:var(--text3); margin-bottom:28px }

.ga4wp-ptable-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.ga4wp-ptable-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text2); line-height:1.5 }
.ga4wp-ptable-chk{ font-size:16px; color:var(--brand); flex-shrink:0; margin-top:1px }
.ga4wp-ptable-list li.is-excluded{ color:var(--text4) }
.ga4wp-ptable-list li.is-excluded .ga4wp-ptable-chk{ color:var(--text4) }

.ga4wp-ptable-trust{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px;
  font-size:12.5px; font-weight:500; color:var(--text3);
}
.ga4wp-ptable-trust .mi{ font-size:15px; color:var(--text3) }

@media(max-width:1024px){
  .ga4wp-ptable-cols-3, .ga4wp-ptable-cols-4{ grid-template-columns:repeat(2,1fr); max-width:760px }
}
@media(max-width:767px){
  .ga4wp-ptable-cols-2, .ga4wp-ptable-cols-3, .ga4wp-ptable-cols-4{ grid-template-columns:1fr; max-width:440px }
  .ga4wp-ptable-toggle-outer{ margin-bottom:32px }
  .ga4wp-ptable-card{ padding:32px 26px }
}

/* ======================= REVIEWS ======================= */
.ga4wp-reviews-bg{ background:var(--surface); border-top:1px solid var(--border) }
.ga4wp-review-bar{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 auto 44px; padding:14px 22px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-lg); max-width:520px; box-shadow:var(--sh-xs) }
.ga4wp-r-stars{ font-size:20px; color:#F59E0B; letter-spacing:2px }
.ga4wp-r-sep{ width:1px; height:32px; background:var(--border) }
.ga4wp-r-score{ font-size:26px; font-weight:800; color:var(--text1); font-family:'IBM Plex Mono',monospace }
.ga4wp-r-meta{ font-size:12.5px; color:var(--text2) }
.ga4wp-reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.ga4wp-rv-card{ background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; transition:box-shadow .2s,border-color .2s }
.ga4wp-rv-card:hover{ box-shadow:var(--sh); border-color:var(--border2) }
.ga4wp-rv-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px }
.ga4wp-rv-info{ display:flex; align-items:center; gap:9px }
.ga4wp-rv-av{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff }
.ga4wp-rv-name{ font-size:13px; font-weight:700; color:var(--text1) }
.ga4wp-rv-date{ font-size:10.5px; color:var(--text3); margin-top:1px }
.ga4wp-rv-stars{ color:#F59E0B; font-size:12px; letter-spacing:1px }
.ga4wp-rv-title{ font-size:13.5px; font-weight:700; color:var(--text1); margin-bottom:5px }
.ga4wp-rv-body{ font-size:12.5px; color:var(--text2); line-height:1.65 }
.ga4wp-rv-wp{ display:flex; align-items:center; gap:5px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); font-size:10.5px; color:var(--text3) }
.ga4wp-rv-wp .mi{ font-size:13px; color:var(--brand) }

/* ======================= FAQ ======================= */
.ga4wp-faq-bg{ background:var(--bg) }
.ga4wp-faq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.ga4wp-faq-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; transition:box-shadow .18s,border-color .18s }
.ga4wp-faq-card:hover{ box-shadow:var(--sh-sm); border-color:var(--border2) }
.ga4wp-faq-q{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; font-weight:700; color:var(--text1); margin-bottom:8px }
.ga4wp-faq-num{ font-size:9.5px; font-weight:600; color:var(--brand); background:var(--brand-soft); padding:2px 7px; border-radius:var(--r-xs); flex-shrink:0; margin-top:2px; font-family:'IBM Plex Mono',monospace }
.ga4wp-faq-a{ font-size:12.5px; color:var(--text2); line-height:1.7; padding-left:32px }
.ga4wp-faq-a p{ margin:0 0 8px } .ga4wp-faq-a p:last-child{ margin-bottom:0 }
.ga4wp-faq-a code{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; background:var(--surface2); color:var(--text1); padding:1px 6px; border-radius:4px; border:1px solid var(--border) }
.ga4wp-faq-a a{ color:var(--brand); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px }
.ga4wp-faq-a a:hover{ color:var(--brand-dark) }
.ga4wp-faq-a ul,.ga4wp-faq-a ol{ margin:8px 0 8px 20px } .ga4wp-faq-a li{ margin:3px 0 }

/* ======================= CTA ======================= */
.ga4wp-cta-section{ background:var(--text1); padding:68px 0; position:relative; overflow:hidden }
.ga4wp-cta-section::before{ content:''; position:absolute; top:0; right:0; bottom:0; left:50%; background:linear-gradient(135deg,transparent,rgba(37,99,235,.1)); pointer-events:none }
.ga4wp-cta-inner{ text-align:center; position:relative; z-index:1 }
.ga4wp-cta-title{ font-size:clamp(24px,3.5vw,40px); font-weight:800; color:#fff; line-height:1.15; letter-spacing:-.8px; margin:0 0 12px }
.ga4wp-cta-body{ font-size:16px; color:rgba(255,255,255,.62); margin-bottom:28px }
.ga4wp-cta-actions{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap }
.ga4wp-cta-trust{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:24px; flex-wrap:wrap }
.ga4wp-cta-trust-item{ display:flex; align-items:center; gap:5px; font-size:12px; color:rgba(255,255,255,.52) }
.ga4wp-cta-trust-item .mi{ font-size:14px; color:rgba(255,255,255,.35) }

/* ======================= FOOTER ======================= */
.ga4wp-footer{ background:#0F172A; padding:48px 0 28px }
.ga4wp-footer-grid{ display:grid; gap:36px; margin-bottom:36px }
.ga4wp-footer-brand{ display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:16px; margin-bottom:8px }
.ga4wp-footer-logo-img{ height:32px; width:auto; display:block; object-fit:contain; flex-shrink:0 }
.ga4wp-footer-brand-text{ display:inline-block; line-height:1 }
.ga4wp-footer-brand-desc{ font-size:12.5px; color:#475569; line-height:1.65; max-width:200px; margin-top:8px }
.ga4wp-footer-col-title{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#64748B; margin-bottom:12px }
.ga4wp-footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.ga4wp-footer-links a{ font-size:12.5px; color:#475569; transition:color .15s }
.ga4wp-footer-links a:hover{ color:#fff }
.ga4wp-footer-bottom{ border-top:1px solid #1E293B; padding-top:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px }
.ga4wp-footer-copy{ font-size:11.5px; color:#334155 }
.ga4wp-footer-copy a{ color:#475569 }
.ga4wp-footer-rating{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:#334155 }
.ga4wp-footer-stars{ color:#F59E0B; font-size:11px; letter-spacing:1px }

/* ======================= SCROLL REVEAL ======================= */
.ga4wp-reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1) }
.ga4wp-reveal.vis{ opacity:1; transform:none }
.ga4wp-scope .d1{ transition-delay:.08s } .ga4wp-scope .d2{ transition-delay:.16s } .ga4wp-scope .d3{ transition-delay:.24s }

/* In Elementor editor / preview, force every reveal element to its final
   state — IntersectionObserver may not fire inside the iframe, and we want
   WYSIWYG accuracy on the canvas. */
.ga4wp-editor .ga4wp-reveal,
body.elementor-editor-active .ga4wp-reveal,
body.elementor-editor-preview .ga4wp-reveal{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* =====================================================
   RESPONSIVE — Elementor breakpoints
   Tablet ≤1024px / Mobile ≤767px
   ===================================================== */
@media(max-width:1024px){
  .ga4wp-scope .ga4wp-sec{ padding:60px 0 }
  .ga4wp-dash{ display:none }
  .ga4wp-hero-grid{ gap:36px }
  .ga4wp-woo-grid{ grid-template-columns:1fr; gap:40px }
  .ga4wp-features-grid{ grid-template-columns:repeat(2,1fr) }
  .ga4wp-track-grid{ grid-template-columns:repeat(2,1fr) }
  .ga4wp-reports-layout{ grid-template-columns:1fr }
  .ga4wp-reports-nav{ display:flex; flex-wrap:wrap; gap:4px; padding:12px; border-right:none; border-bottom:1px solid var(--border) }
  .ga4wp-rn-label{ display:none }
  .ga4wp-rn-item{ margin:0; border-radius:7px; border-left:none; padding:7px 12px; width:auto; font-size:12px }
  .ga4wp-rn-item.act{ border-left:none }
  .ga4wp-footer-grid{ grid-template-columns:1fr 1fr !important; gap:28px }
  .ga4wp-scope .ga4wp-nav-links{ display:none !important }
  .ga4wp-scope .ga4wp-nav-toggle{ display:inline-flex !important }
  /* panels hidden via opacity/visibility — no display:none needed */
}
@media(max-width:767px){
  .ga4wp-scope .ga4wp-sec{ padding:48px 0 }
  .ga4wp-scope .ga4wp-section-hd{ margin-bottom:36px }
  .ga4wp-guarantee-bg{ padding:48px 0 }
  .ga4wp-stats-grid{ grid-template-columns:repeat(2,1fr) }
  .ga4wp-stat-item:nth-child(2){ border-right:none }
  .ga4wp-stat-item:nth-child(3),.ga4wp-stat-item:nth-child(4){ border-top:1px solid var(--border) }
  .ga4wp-stat-item:nth-child(4){ border-right:none }
  .ga4wp-features-grid{ grid-template-columns:1fr }
  .ga4wp-track-grid{ grid-template-columns:1fr }
  .ga4wp-pricing-grid{ grid-template-columns:1fr; max-width:440px }
  .ga4wp-reviews-grid{ grid-template-columns:1fr }
  .ga4wp-faq-grid{ grid-template-columns:1fr }
  .ga4wp-guarantee-inner{ grid-template-columns:1fr; text-align:center; gap:28px }
  .ga4wp-guarantee-badge{ margin:0 auto }
  .ga4wp-g-body{ margin:0 auto }
  .ga4wp-g-points li{ justify-content:center; text-align:left }
  .ga4wp-hero{ padding:48px 0 40px }
  .ga4wp-hero-actions{ flex-direction:column; align-items:stretch }
  .ga4wp-hero-actions .ga4wp-btn{ justify-content:center }
  .ga4wp-scope .ga4wp-wrap{ padding:0 16px }
  .ga4wp-footer-grid{ grid-template-columns:1fr !important }
  .ga4wp-scope .ga4wp-nav-right .ga4wp-nav-pill{ display:none }
  .ga4wp-scope .ga4wp-nav-right .ga4wp-btn{ display:none }
  .ga4wp-r-kpis{ grid-template-columns:repeat(2,1fr) }
  .ga4wp-cta-trust{ gap:12px }
}

/* =====================================================
   NEW WIDGETS — ga4wp-combined v1.1.0
   Plans, Integrations, Dimensions, Email Reports,
   Compare Table, Dashboard Preview
   ===================================================== */

/* ── Shared section-header reuse ── */
.ga4wp-plans-wrap .ga4wp-section-header,
.ga4wp-integrations-wrap .ga4wp-section-header,
.ga4wp-dimensions-wrap .ga4wp-section-header,
.ga4wp-email-reports-wrap .ga4wp-section-header,
.ga4wp-compare-section .ga4wp-section-header,
.ga4wp-dashboard-preview-wrap .ga4wp-section-header { text-align:center; margin-bottom:48px }

/* ── Plans Widget ── */
.ga4wp-plans { padding:0 }
.ga4wp-tier-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.ga4wp-tier-card { background:var(--surface,#fff); border:1.5px solid var(--border,#E4E8F2); border-radius:16px; padding:28px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:0 }
.ga4wp-tier-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--border,#E4E8F2) }
.ga4wp-tier-card--pro { border-color:var(--brand,#2563EB); box-shadow:0 0 0 4px rgba(37,99,235,.07) }
.ga4wp-tier-card--pro::before { background:var(--brand,#2563EB) }
.ga4wp-tier-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:99px; margin-bottom:16px; width:fit-content }
.ga4wp-plans-free-badge { background:#F0FDF4; color:#15803D; border:1px solid #BBF7D0 }
.ga4wp-plans-pro-badge { background:var(--brand-soft,#EFF6FF); color:var(--brand,#2563EB); border:1px solid #BFDBFE }
.ga4wp-tier-title { font-size:18px; font-weight:700; letter-spacing:-.02em; margin-bottom:4px }
.ga4wp-tier-desc { font-size:13px; color:var(--text2,#475569); margin-bottom:20px; line-height:1.6 }
.ga4wp-feature-list { display:flex; flex-direction:column; gap:10px; flex:1 }
.ga4wp-feature-item { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text1,#0F172A) }
.ga4wp-check-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px }
.ga4wp-check-icon--free { background:#ECFDF5 }
.ga4wp-check-icon--free .mi { font-size:12px; color:var(--emerald,#059669) }
.ga4wp-check-icon--pro { background:var(--brand-soft,#EFF6FF) }
.ga4wp-check-icon--pro .mi { font-size:12px; color:var(--brand,#2563EB) }
.ga4wp-feature-label { font-weight:500; line-height:1.5; display:block }
.ga4wp-feature-sublabel { display:block; font-size:12px; color:var(--text3,#94A3B8); font-weight:400; margin-top:1px }
.ga4wp-tier-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; margin-top:20px; padding:10px 20px; border-radius:10px; font-size:13.5px; font-weight:600; text-decoration:none; transition:.15s }
.ga4wp-tier-btn--free { background:var(--surface2,#F8F9FC); color:var(--text1,#0F172A); border:1.5px solid var(--border2,#D0D6E8) }
.ga4wp-tier-btn--free:hover { border-color:var(--brand,#2563EB); color:var(--brand,#2563EB) }
.ga4wp-tier-btn--pro { background:var(--brand,#2563EB); color:#fff; border:none; box-shadow:0 4px 16px rgba(37,99,235,.25) }
.ga4wp-tier-btn--pro:hover { background:#1d4ed8; box-shadow:0 6px 24px rgba(37,99,235,.35) }

/* ── Integrations Widget ── */
.ga4wp-integrations { padding:0 }
.ga4wp-integrations-inner { background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:16px; padding:32px 40px; box-shadow:0 1px 4px rgba(15,23,42,.06) }
.ga4wp-int-note { font-size:14px; color:var(--text2,#475569); margin-bottom:24px }
.ga4wp-int-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px }
.ga4wp-int-card { display:flex; align-items:center; gap:12px; background:var(--surface2,#F8F9FC); border:1px solid var(--border,#E4E8F2); border-radius:12px; padding:14px 16px; transition:.15s }
.ga4wp-int-card:hover { border-color:var(--border2,#D0D6E8); background:#fff }
.ga4wp-int-info { min-width:0 }
.ga4wp-int-name { font-size:13px; font-weight:600; color:var(--text1,#0F172A); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ga4wp-int-type { font-size:11px; color:var(--text3,#94A3B8) }

/* ── Dimensions Widget ── */
.ga4wp-dimensions { padding:0 }
.ga4wp-dims-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px }
.ga4wp-dim-card { background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:12px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start; transition:.15s }
.ga4wp-dim-card:hover { box-shadow:0 2px 8px rgba(15,23,42,.07); border-color:var(--border2,#D0D6E8) }
.ga4wp-dim-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.ga4wp-dim-icon .mi { font-size:16px }
.ga4wp-dim-info { min-width:0 }
.ga4wp-dim-title { font-size:13px; font-weight:700; margin-bottom:2px }
.ga4wp-dim-desc { font-size:12px; color:var(--text2,#475569); line-height:1.5; margin:0 }

/* ── Email Reports Widget ── */
.ga4wp-email-reports { padding:0 }
.ga4wp-email-card { background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:16px; padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; box-shadow:0 1px 4px rgba(15,23,42,.06) }
.ga4wp-email-preview { background:var(--surface2,#F8F9FC); border:1px solid var(--border,#E4E8F2); border-radius:12px; overflow:hidden }
.ga4wp-email-head { background:var(--brand,#2563EB); padding:14px 20px; display:flex; align-items:center; gap:8px }
.ga4wp-email-head span:last-child { font-size:13px; font-weight:700; color:#fff }
.ga4wp-email-row { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; border-bottom:1px solid var(--border,#E4E8F2); font-size:12.5px }
.ga4wp-email-row:last-child { border-bottom:none }
.ga4wp-email-lbl { color:var(--text2,#475569); font-weight:500 }
.ga4wp-email-val { font-weight:700; color:var(--text1,#0F172A) }
.ga4wp-email-chg { font-size:11px; font-weight:600; margin-left:6px }
.ga4wp-email-content { }
.ga4wp-email-content-title { font-size:20px; font-weight:700; margin:0 0 12px; letter-spacing:-.02em }
.ga4wp-email-content-desc { font-size:14px; color:var(--text2,#475569); line-height:1.7; margin:0 0 16px }
.ga4wp-email-features { display:flex; flex-direction:column; gap:8px }
.ga4wp-ef-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text1,#0F172A) }
.ga4wp-ef-item .mi { font-size:16px; color:var(--brand,#2563EB) }

/* ── Compare Table Widget ── */
.ga4wp-compare-outer { padding:0 }
.ga4wp-compare-wrap { background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:16px; overflow:hidden; box-shadow:0 1px 4px rgba(15,23,42,.06) }
.ga4wp-compare-table { width:100%; border-collapse:collapse; font-size:13.5px }
.ga4wp-compare-table th { background:var(--surface2,#F8F9FC); padding:14px 20px; text-align:left; font-weight:700; color:var(--text1,#0F172A); border-bottom:1.5px solid var(--border,#E4E8F2); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em }
.ga4wp-compare-table th:not(:first-child) { text-align:center; min-width:120px }
.ga4wp-compare-table td { padding:12px 20px; border-bottom:1px solid var(--border,#E4E8F2); color:var(--text1,#0F172A); vertical-align:middle }
.ga4wp-compare-table td:not(:first-child) { text-align:center }
.ga4wp-compare-table tr:last-child td { border-bottom:none }
.ga4wp-compare-table tbody tr:hover td { background:var(--brand-soft,#EFF6FF) }
.ga4wp-compare-section-row td { background:var(--surface2,#F8F9FC); font-size:11.5px; font-weight:700; color:var(--text3,#94A3B8); text-transform:uppercase; letter-spacing:.07em; padding:8px 20px }
.ga4wp-chk { display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center }
.ga4wp-chk-yes { background:#D1FAE5 }
.ga4wp-chk-yes .mi { font-size:13px; color:#047857 }
.ga4wp-chk-no { background:#E2E8F0 }
.ga4wp-chk-no .mi { font-size:13px; color:#475569 }
.ga4wp-chk-pro { background:#E0E3FF }
.ga4wp-chk-pro .mi { font-size:13px; color:#332FBF }

/* ── Dashboard Preview Widget ── */
.ga4wp-dash-section { padding:0 }
.ga4wp-dash-preview { background:var(--surface,#fff); border:1.5px solid var(--border,#E4E8F2); border-radius:16px; overflow:hidden; box-shadow:0 4px 16px rgba(15,23,42,.09) }
.ga4wp-dash-topbar { background:#fff; border-bottom:1px solid var(--border,#E4E8F2); padding:0 20px; height:48px; display:flex; align-items:center; gap:6px }
.ga4wp-dash-dot { width:10px; height:10px; border-radius:50%; display:inline-block }
.ga4wp-dash-title { font-size:12.5px; font-weight:600; color:var(--text2,#475569); margin-left:8px }
.ga4wp-rtab-list { display:flex; border-bottom:1px solid var(--border,#E4E8F2); overflow-x:auto; background:var(--surface2,#F8F9FC); scrollbar-width:none }
.ga4wp-rtab-list::-webkit-scrollbar { display:none }
.ga4wp-rtab { display:flex; align-items:center; gap:6px; padding:12px 16px; font-size:12.5px; font-weight:600; color:var(--text2,#475569); border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; transition:.15s }
.ga4wp-rtab:hover { color:var(--brand,#2563EB) }
.ga4wp-rtab.active { color:var(--brand,#2563EB); border-bottom-color:var(--brand,#2563EB); background:#fff }
.ga4wp-rtab .mi { font-size:15px }
.ga4wp-dash-body { display:grid; grid-template-columns:200px 1fr; min-height:300px }
.ga4wp-dash-sidebar { background:var(--surface2,#F8F9FC); border-right:1px solid var(--border,#E4E8F2); padding:16px 0 }
.ga4wp-dash-nav-item { display:flex; align-items:center; gap:8px; padding:9px 16px; font-size:12.5px; font-weight:500; color:var(--text2,#475569); cursor:pointer; transition:.1s }
.ga4wp-dash-nav-item:hover,.ga4wp-dash-nav-item.active { background:var(--brand-soft,#EFF6FF); color:var(--brand,#2563EB) }
.ga4wp-dash-nav-item .mi { font-size:16px }
.ga4wp-dash-main { padding:20px }
.ga4wp-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px }
.ga4wp-kpi { background:var(--surface2,#F8F9FC); border:1px solid var(--border,#E4E8F2); border-radius:8px; padding:12px }
.ga4wp-kpi-label { font-size:10.5px; font-weight:600; color:var(--text3,#94A3B8); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px }
.ga4wp-kpi-val { font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--text1,#0F172A) }
.ga4wp-kpi-change { font-size:11px; font-weight:600; margin-top:2px }
.ga4wp-chart-area { background:var(--surface2,#F8F9FC); border:1px solid var(--border,#E4E8F2); border-radius:8px; padding:14px 14px 0; height:120px; display:flex; align-items:flex-end; gap:3px; margin-bottom:14px }
.ga4wp-dash-bar { background:var(--brand,#2563EB); border-radius:3px 3px 0 0; flex:1; min-width:0; opacity:.7; transition:.3s }
.ga4wp-dash-bar:last-child { opacity:1 }
.ga4wp-dash-tab-desc { font-size:12.5px; color:var(--text2,#475569); line-height:1.6 }

/* ── Shared up/down colors ── */
.ga4wp-up { color:var(--emerald,#059669) }
.ga4wp-dn { color:var(--rose,#E11D48) }

/* Icon color shorthand for new widgets */
.ga4wp-dim-icon.ga4wp-ic-violet,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-violet { background:#F5F3FF }
.ga4wp-dim-icon.ga4wp-ic-violet .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-violet .mi { color:#7C3AED }
.ga4wp-dim-icon.ga4wp-ic-teal,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-teal { background:#F0FDFA }
.ga4wp-dim-icon.ga4wp-ic-teal .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-teal .mi { color:#0EA5A0 }
.ga4wp-dim-icon.ga4wp-ic-sky,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-sky { background:#F0F9FF }
.ga4wp-dim-icon.ga4wp-ic-sky .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-sky .mi { color:#0284C7 }
.ga4wp-dim-icon.ga4wp-ic-amber,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-amber { background:#FFFBEB }
.ga4wp-dim-icon.ga4wp-ic-amber .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-amber .mi { color:#D97706 }
.ga4wp-dim-icon.ga4wp-ic-emerald,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-emerald { background:#F0FDF4 }
.ga4wp-dim-icon.ga4wp-ic-emerald .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-emerald .mi { color:#059669 }
.ga4wp-dim-icon.ga4wp-ic-brand,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-brand { background:#EFF6FF }
.ga4wp-dim-icon.ga4wp-ic-brand .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-brand .mi { color:#2563EB }
.ga4wp-dim-icon.ga4wp-ic-rose,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-rose { background:#FFF1F4 }
.ga4wp-dim-icon.ga4wp-ic-rose .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-rose .mi { color:#E11D48 }
.ga4wp-dim-icon.ga4wp-ic-slate,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-slate { background:#F8FAFC }
.ga4wp-dim-icon.ga4wp-ic-slate .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-slate .mi { color:#475569 }
.ga4wp-dim-icon.ga4wp-ic-orange,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-orange { background:#FFF7ED }
.ga4wp-dim-icon.ga4wp-ic-orange .mi,.ga4wp-int-card .ga4wp-feat-icon.ga4wp-ic-orange .mi { color:#EA580C }

/* ── Responsive for new widgets ── */
@media(max-width:1024px){
  .ga4wp-tier-grid { grid-template-columns:1fr }
  .ga4wp-dash-body { grid-template-columns:1fr }
  .ga4wp-dash-sidebar { display:none }
  .ga4wp-email-card { grid-template-columns:1fr }
  .ga4wp-kpi-row { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:767px){
  .ga4wp-integrations-inner { padding:20px }
  .ga4wp-int-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) }
  .ga4wp-dims-grid { grid-template-columns:1fr }
  .ga4wp-compare-table th,
  .ga4wp-compare-table td { padding:10px 14px; font-size:12.5px }
  .ga4wp-rtab { padding:10px 12px; font-size:11.5px }
  .ga4wp-kpi-row { grid-template-columns:1fr 1fr }
}

/* =====================================================================
   CUSTOM DIMENSIONS PAGE WIDGETS  (ga4wp-combined v1.2.0)
   Widgets: ga4wp_dim_reference_table · ga4wp_dim_deep_dive
            ga4wp_dim_setup · ga4wp_dim_reports
   All CSS tokens match the hand-coded custom-dimensions.html exactly.
   ===================================================================== */

/* ── Shared inline code pill ── */
.ga4wp-scope .ga4wp-inline-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--brand, #2563EB);
  background: var(--brand-soft, #EFF6FF);
  border: 1px solid #BFDBFE;
  padding: 1px 6px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   1. DIMENSION REFERENCE TABLE
   ══════════════════════════════════════════════════════════════ */
.ga4wp-dim-ref-section { padding: 0; }
.ga4wp-drt-wrap {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E4E8F2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-sm, 0 1px 4px rgba(15,23,42,.06));
}
.ga4wp-drt-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ga4wp-drt {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}
.ga4wp-drt thead th {
  background: var(--surface2, #F8F9FC);
  padding: 12px 20px;
  text-align: left;
  font-weight: 700;
  color: var(--text3, #94A3B8);
  border-bottom: 1.5px solid var(--border, #E4E8F2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ga4wp-drt tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #E4E8F2);
  vertical-align: top;
}
.ga4wp-drt tbody tr:last-child td { border-bottom: none; }
.ga4wp-drt-dim-row:hover td { background: var(--brand-soft, #EFF6FF); }
.ga4wp-drt-group-row td {
  background: var(--surface2, #F8F9FC);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3, #94A3B8);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 7px 20px;
}
/* Key pill */
.ga4wp-drt-key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--brand, #2563EB);
  background: var(--brand-soft, #EFF6FF);
  border: 1px solid #BFDBFE;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  display: inline-block;
}
/* Scope badges */
.ga4wp-drt-scope {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}
.ga4wp-drt-scope-event { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.ga4wp-drt-scope-user  { background: var(--brand-soft,#EFF6FF); color: var(--brand,#2563EB); border: 1px solid #BFDBFE; }
.ga4wp-drt-name  { font-weight: 600; color: var(--text1, #0F172A); margin-bottom: 2px; }
.ga4wp-drt-desc  { font-size: 12px; color: var(--text2, #475569); line-height: 1.55; margin-top: 3px; }
.ga4wp-drt-when  {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--text3, #94A3B8);
  margin-top: 5px;
}
.ga4wp-drt-when .mi { font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   2. DIMENSION DEEP DIVE
   ══════════════════════════════════════════════════════════════ */
.ga4wp-dim-deep-dive { padding: 0; }
.ga4wp-dd-wrap {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E4E8F2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-sm, 0 1px 4px rgba(15,23,42,.06));
}
/* Tab strip */
.ga4wp-dd-tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #E4E8F2);
  background: var(--surface2, #F8F9FC);
  overflow-x: auto;
  scrollbar-width: none;
}
.ga4wp-dd-tabs::-webkit-scrollbar { display: none; }
.ga4wp-dd-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  border: none;
  background: none !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  transition: .15s;
}
.ga4wp-dd-tab:hover { color: var(--brand, #2563EB); }
.ga4wp-dd-tab.active {
  color: var(--brand, #2563EB);
  border-bottom-color: var(--brand, #2563EB) !important;
  background: #fff !important;
}
.ga4wp-dd-tab .mi { font-size: 15px; }
/* Panel */
.ga4wp-dd-panel { display: none; padding: 28px 32px; }
.ga4wp-dd-panel.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
/* Left */
.ga4wp-dd-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -.02em;
  color: var(--text1, #0F172A);
}
.ga4wp-dd-desc {
  font-size: 14px;
  color: var(--text2, #475569);
  line-height: 1.7;
  margin-bottom: 16px;
}
.ga4wp-dd-kv { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ga4wp-dd-kv-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.ga4wp-dd-kv-key {
  font-weight: 700;
  color: var(--text1, #0F172A);
  min-width: 130px;
  flex-shrink: 0;
  font-size: 12px;
}
.ga4wp-dd-kv-val { color: var(--text2, #475569); line-height: 1.5; }
.ga4wp-dd-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--brand, #2563EB);
  font-weight: 600;
  background: var(--brand-soft, #EFF6FF);
  border: 1px solid #BFDBFE;
  padding: 4px 10px;
  border-radius: 6px;
}
.ga4wp-dd-note .mi { font-size: 13px; }
/* Right sample */
.ga4wp-dd-sample {
  background: var(--surface2, #F8F9FC);
  border: 1px solid var(--border, #E4E8F2);
  border-radius: 8px;
  overflow: hidden;
}
.ga4wp-dd-sample-head {
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #E4E8F2);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3, #94A3B8);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ga4wp-dd-sample-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border, #E4E8F2);
  font-size: 12.5px;
  gap: 8px;
}
.ga4wp-dd-sample-row:last-child { border-bottom: none; }
.ga4wp-dd-sample-row:hover { background: #fff; }
.ga4wp-dd-dim-val {
  font-weight: 600;
  color: var(--text1, #0F172A);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  flex: 1;
}
.ga4wp-dd-metric { font-size: 12px; color: var(--text2, #475569); flex-shrink: 0; }
.ga4wp-dd-bar-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ga4wp-dd-bar-track {
  width: 60px; height: 5px;
  background: var(--border, #E4E8F2);
  border-radius: 99px; overflow: hidden;
}
.ga4wp-dd-bar-fill { height: 100%; border-radius: 99px; }

/* ══════════════════════════════════════════════════════════════
   3. DIMENSION SETUP
   ══════════════════════════════════════════════════════════════ */
.ga4wp-dim-setup { padding: 0; }
.ga4wp-setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Steps */
.ga4wp-setup-steps { display: flex; flex-direction: column; }
.ga4wp-setup-step { display: grid; grid-template-columns: 48px 1fr; gap: 0; }
.ga4wp-setup-step-num { display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.ga4wp-setup-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand, #2563EB); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--brand-soft, #EFF6FF);
  z-index: 1;
}
.ga4wp-setup-connector { width: 2px; flex: 1; background: var(--border, #E4E8F2); margin: 6px 0; }
.ga4wp-setup-step-body { padding: 0 0 36px 16px; }
.ga4wp-setup-step.last .ga4wp-setup-step-body { padding-bottom: 0; }
.ga4wp-setup-step-title {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text1, #0F172A);
  margin-bottom: 6px; margin-top: 6px;
}
.ga4wp-setup-step-desc {
  font-size: 13.5px; color: var(--text2, #475569);
  line-height: 1.65; margin-bottom: 10px;
}
/* Code block */
.ga4wp-setup-code {
  background: var(--surface2, #F8F9FC);
  border: 1px solid var(--border, #E4E8F2);
  border-radius: 8px;
  padding: 14px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.9;
  overflow-x: auto;
  white-space: pre;
  margin-bottom: 10px;
}
.ga4wp-code-comment   { color: var(--text3, #94A3B8); }
.ga4wp-code-key       { color: var(--brand, #2563EB); }
.ga4wp-code-val       { color: var(--emerald, #059669); }
.ga4wp-code-highlight { color: var(--violet, #7C3AED); font-weight: 600; }
/* Step note */
.ga4wp-setup-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--brand, #2563EB);
  font-weight: 600;
  background: var(--brand-soft, #EFF6FF);
  border: 1px solid #BFDBFE;
  padding: 4px 10px;
  border-radius: 6px;
}
.ga4wp-setup-note .mi { font-size: 13px; }
/* Settings mock */
.ga4wp-setup-mock { }
.ga4wp-mock-chrome {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #E4E8F2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-md, 0 4px 16px rgba(15,23,42,.09));
}
.ga4wp-mock-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border, #E4E8F2);
  padding: 0 20px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ga4wp-mock-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ga4wp-mock-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2, #475569);
  margin-left: 8px;
  font-family: 'IBM Plex Mono', monospace;
}
.ga4wp-mock-body {
  display: grid;
  grid-template-columns: 188px 1fr;
  min-height: 330px;
}
.ga4wp-mock-sidebar { background: var(--surface2, #F8F9FC); border-right: 1px solid var(--border, #E4E8F2); padding: 10px 0; }
.ga4wp-mock-nav {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  font-size: 12px; font-weight: 500; color: var(--text2, #475569);
  cursor: pointer;
}
.ga4wp-mock-nav.active {
  background: var(--brand-soft, #EFF6FF);
  color: var(--brand, #2563EB);
  font-weight: 600;
}
.ga4wp-mock-main { padding: 18px 20px; }
.ga4wp-mock-section-title { font-size: 13px; font-weight: 700; color: var(--text1, #0F172A); margin-bottom: 3px; }
.ga4wp-mock-section-desc  { font-size: 12px; color: var(--text2, #475569); margin-bottom: 14px; }
/* Toggle row */
.ga4wp-mock-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface2, #F8F9FC);
  border: 1px solid var(--border, #E4E8F2);
  border-radius: 8px;
  margin-bottom: 7px;
  gap: 8px;
}
.ga4wp-mock-toggle-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ga4wp-mock-icon {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ga4wp-mock-icon .mi { font-size: 14px; }
.ga4wp-mock-toggle-label {
  font-size: 12px; font-weight: 600; color: var(--text1, #0F172A);
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
}
.ga4wp-mock-key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; color: var(--brand, #2563EB);
  background: var(--brand-soft, #EFF6FF);
  border: 1px solid #BFDBFE;
  padding: 1px 4px; border-radius: 3px;
}
.ga4wp-mock-toggle-sub { font-size: 10.5px; color: var(--text3, #94A3B8); margin-top: 1px; }
.ga4wp-mock-switch {
  width: 34px; height: 18px; border-radius: 99px;
  position: relative; flex-shrink: 0; transition: .2s;
}
.ga4wp-mock-switch.on  { background: var(--brand, #2563EB); }
.ga4wp-mock-switch.off { background: var(--border2, #D0D6E8); }
.ga4wp-mock-switch-knob {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; top: 3px; transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ga4wp-mock-switch.on  .ga4wp-mock-switch-knob { left: 19px; }
.ga4wp-mock-switch.off .ga4wp-mock-switch-knob { left: 3px; }

/* ══════════════════════════════════════════════════════════════
   4. DIMENSION REPORTS PREVIEW
   ══════════════════════════════════════════════════════════════ */
.ga4wp-dim-reports { padding: 0; }
.ga4wp-dr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
/* Feature list */
.ga4wp-dr-features { display: flex; flex-direction: column; gap: 14px; }
.ga4wp-rf-item { display: flex; align-items: flex-start; gap: 10px; }
.ga4wp-rf-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.ga4wp-rf-icon.blue  { background: var(--brand-soft, #EFF6FF); }
.ga4wp-rf-icon.blue .mi  { font-size: 12px; color: var(--brand, #2563EB); }
.ga4wp-rf-icon.green { background: #ECFDF5; }
.ga4wp-rf-icon.green .mi { font-size: 12px; color: var(--emerald, #059669); }
.ga4wp-rf-title { font-size: 13.5px; font-weight: 600; display: block; line-height: 1.4; color: var(--text1, #0F172A); }
.ga4wp-rf-desc  { font-size: 12px; color: var(--text3, #94A3B8); display: block; margin-top: 1px; }
/* Report card */
.ga4wp-rmc-card {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #E4E8F2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-md, 0 4px 16px rgba(15,23,42,.09));
}
.ga4wp-rmc-head { background: var(--brand, #2563EB); padding: 12px 16px; }
.ga4wp-rmc-head-title {
  font-size: 13px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
}
.ga4wp-rmc-head-title .mi { font-size: 16px; color: #fff; }
.ga4wp-rmc-head-sub { font-size: 11px; color: rgba(255,255,255,.75); }
.ga4wp-rmc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #E4E8F2);
  font-size: 12.5px;
}
.ga4wp-rmc-row:last-child { border-bottom: none; }
.ga4wp-rmc-row:hover { background: var(--brand-soft, #EFF6FF); }
.ga4wp-rmc-row-head {
  background: var(--surface2, #F8F9FC);
  font-size: 10.5px; font-weight: 700;
  color: var(--text3, #94A3B8);
  text-transform: uppercase; letter-spacing: .06em;
}
.ga4wp-rmc-dim { font-weight: 600; color: var(--text1, #0F172A); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.ga4wp-rmc-val { font-size: 12px; color: var(--text2, #475569); }
.ga4wp-rmc-chg { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.ga4wp-up,.ga4wp-rmc-chg.ga4wp-up { color: var(--emerald, #059669); background: #ECFDF5; }
.ga4wp-dn,.ga4wp-rmc-chg.ga4wp-dn { color: var(--rose, #E11D48); background: #FFF1F4; }
/* Category bar rows */
.ga4wp-rmc-bars {
  border-top: 1px solid var(--border, #E4E8F2);
  padding: 12px 16px;
  background: var(--surface2, #F8F9FC);
}
.ga4wp-rmc-bars-head {
  font-size: 11px; font-weight: 700; color: var(--text3, #94A3B8);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
}
.ga4wp-rmc-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; }
.ga4wp-rmc-bar-label { min-width: 80px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text2, #475569); }
.ga4wp-rmc-bar-track { flex: 1; height: 5px; background: var(--border, #E4E8F2); border-radius: 99px; overflow: hidden; }
.ga4wp-rmc-bar-fill  { height: 100%; border-radius: 99px; }
.ga4wp-rmc-bar-val   { font-size: 11px; font-weight: 700; color: var(--text1, #0F172A); min-width: 32px; text-align: right; }

/* ── Responsive for all 4 new widgets ── */
@media (max-width: 1024px) {
  .ga4wp-dd-panel.active { grid-template-columns: 1fr; }
  .ga4wp-setup-grid     { grid-template-columns: 1fr; }
  .ga4wp-dr-grid        { grid-template-columns: 1fr; }
  .ga4wp-mock-body      { grid-template-columns: 1fr; }
  .ga4wp-mock-sidebar   { display: none; }
}
@media (max-width: 767px) {
  .ga4wp-drt thead th:nth-child(3),
  .ga4wp-drt tbody td:nth-child(3) { display: none; }
  .ga4wp-dd-panel { padding: 20px; }
}

/* =================================================================
   UPDATED WIDGETS — ga4wp-combined v1.3.0
   Hero (centered mode), CTA Banner, Compare Table v2, Features v2
   ================================================================= */

/* ── Shared section-header used by updated widgets ── */
.ga4wp-scope .ga4wp-section-header { text-align:center; margin-bottom:56px }
.ga4wp-scope .ga4wp-section-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand,#2563EB); margin-bottom:12px;
}
.ga4wp-scope .ga4wp-section-eyebrow .mi { font-size:15px }
.ga4wp-scope .ga4wp-section-title {
  font-size:clamp(26px,3.5vw,38px); font-weight:700;
  letter-spacing:-.03em; color:var(--text1,#0F172A); margin-bottom:12px;
}
.ga4wp-scope .ga4wp-section-sub {
  font-size:16px; color:var(--text2,#475569);
  max-width:560px; margin:0 auto;
}

/* ──────────────────────────────────────────────────────
   HERO — CENTERED MODE
   Matches: .hero / .hero-inner / .hero-badge / h1 / .hero-sub
            .hero-pills / .pill / .hero-actions / .btn-lg-*
   ────────────────────────────────────────────────────── */
.ga4wph-centered {
  background: linear-gradient(180deg, #fff 0%, var(--bg,#F4F6FA) 100%);
  border-bottom: 1px solid var(--border,#E4E8F2);
  padding: 72px 24px 64px;
  text-align: center;
}
.ga4wph-inner { max-width: 800px; margin: 0 auto }

/* Badge pill */
.ga4wph-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft,#EFF6FF);
  border: 1px solid #BFDBFE;
  color: var(--brand,#2563EB);
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 99px;
  margin-bottom: 20px;
}
.ga4wph-badge .mi { font-size: 14px }

/* H1 */
.ga4wph-h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
  color: var(--text1,#0F172A); margin-bottom: 16px;
}
.ga4wph-h1 span { color: var(--brand,#2563EB) }

/* Subtitle */
.ga4wph-sub {
  font-size: 17px; color: var(--text2,#475569);
  max-width: 580px; margin: 0 auto 32px; line-height: 1.7;
}

/* Pills row */
.ga4wph-pills {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 36px;
}
.ga4wph-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text2,#475569);
  background: #fff; border: 1px solid var(--border,#E4E8F2);
  padding: 5px 12px; border-radius: 99px;
}
.ga4wph-pill .mi { font-size: 14px; color: var(--emerald,#059669) }

/* Action buttons */
.ga4wph-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.ga4wph-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 600;
  padding: 12px 24px; border-radius: 10px;
  cursor: pointer; text-decoration: none; transition: .2s;
}
.ga4wph-btn .mi { font-size: 16px }
.ga4wph-btn-primary {
  background: var(--brand,#2563EB); color: #fff; border: none;
  box-shadow: 0 4px 16px rgba(67,83,255,.3);
}
.ga4wph-btn-primary:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 24px rgba(37,99,235,.4);
  transform: translateY(-1px);
}
.ga4wph-btn-ghost {
  background: #fff; color: var(--text1,#0F172A);
  border: 1.5px solid var(--border2,#D0D6E8);
}
.ga4wph-btn-ghost:hover { border-color: var(--brand,#2563EB); color: var(--brand,#2563EB) }

@media (max-width:640px) {
  .ga4wph-centered { padding: 48px 16px 40px }
  .ga4wph-actions { flex-direction: column; align-items: stretch }
  .ga4wph-btn { justify-content: center }
}

/* ──────────────────────────────────────────────────────
   CTA BANNER — new design
   Matches: .cta-banner / h2 / p / .cta-actions /
            .btn-white / .btn-outline-white / .cta-trust
   ────────────────────────────────────────────────────── */
.ga4wp-ctab-outer {
  max-width: 1120px; margin: 0 auto; padding: 0 24px 80px;
}
.ga4wp-cta-banner {
  background: var(--brand,#2563EB);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
  color: #fff;
}

.ga4wp-ctab-title {
  font-size: 32px; font-weight: 700; letter-spacing: -.03em;
  margin-bottom: 12px; line-height: 1.2;
}
.ga4wp-ctab-title em { font-style: italic }

.ga4wp-ctab-body {
  font-size: 16px; opacity: .85; margin-bottom: 28px; line-height: 1.6;
}

.ga4wp-ctab-actions {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 0;
}
.ga4wp-ctab-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700;
  padding: 12px 24px; border-radius: 10px;
  cursor: pointer; text-decoration: none; transition: .2s;
}
.ga4wp-ctab-btn .mi { font-size: 16px }
.ga4wp-ctab-btn-white {
  background: #fff; color: var(--brand,#2563EB); border: none;
}
.ga4wp-ctab-btn-white:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  transform: translateY(-1px);
}
.ga4wp-ctab-btn-outline {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1.5px solid rgba(255,255,255,.35); font-weight: 600;
}
.ga4wp-ctab-btn-outline:hover { background: rgba(255,255,255,.2) }

.ga4wp-ctab-trust {
  display: flex; justify-content: center; gap: 20px;
  flex-wrap: wrap; margin-top: 20px;
  font-size: 12.5px; opacity: .75;
}
.ga4wp-ctab-trust-item {
  display: flex; align-items: center; gap: 4px;
}
.ga4wp-ctab-trust-item .mi { font-size: 14px }

@media (max-width:640px) {
  .ga4wp-cta-banner { padding: 32px 20px; border-radius: 12px }
  .ga4wp-ctab-title { font-size: 24px }
  .ga4wp-ctab-actions { flex-direction: column; align-items: center }
  .ga4wp-ctab-trust { gap: 12px }
  .ga4wp-ctab-outer { padding: 0 12px 48px }
}

/* ──────────────────────────────────────────────────────
   COMPARE TABLE — v2
   Matches: .compare-wrap / table.compare / thead th /
            tbody td / .compare-sec-row / .chk-* / code
   ────────────────────────────────────────────────────── */
.ga4wp-cmp-outer { padding: 0 }
.ga4wp-cmp-wrap {
  background: var(--surface,#fff);
  border: 1px solid var(--border,#E4E8F2);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(15,23,42,.06);
}
.ga4wp-cmp-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.ga4wp-cmp-table thead th {
  background: var(--surface2,#F8F9FC);
  padding: 14px 20px;
  text-align: left; font-weight: 700; color: var(--text1,#0F172A);
  border-bottom: 1.5px solid var(--border,#E4E8F2);
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
}
.ga4wp-cmp-table thead th:not(:first-child) { text-align: center; min-width: 110px }
.ga4wp-cmp-pro-col { color: var(--brand,#2563EB) }
.ga4wp-cmp-table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border,#E4E8F2);
  color: var(--text1,#0F172A);
  vertical-align: middle; font-size: 13px;
}
.ga4wp-cmp-table td:not(:first-child) { text-align: center }
.ga4wp-cmp-table tbody tr:last-child td { border-bottom: none }
.ga4wp-cmp-feat-row:hover td { background: var(--brand-soft,#EFF6FF) }
.ga4wp-cmp-sec-row td {
  background: var(--surface2,#F8F9FC);
  font-size: 11px; font-weight: 700; color: var(--text3,#94A3B8);
  text-transform: uppercase; letter-spacing: .07em;
  padding: 8px 20px;
}
/* Inline code pill in table */
.ga4wp-cmp-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; color: var(--brand,#2563EB);
  background: var(--brand-soft,#EFF6FF);
  padding: 1px 5px; border-radius: 4px;
  margin-left: 5px; white-space: nowrap;
}
/* Check icons */
.ga4wp-chk {
  display: inline-flex; width: 22px; height: 22px;
  border-radius: 50%; align-items: center; justify-content: center;
}
.ga4wp-chk-yes { background: #D1FAE5 }
.ga4wp-chk-yes .mi { font-size: 13px; color: #047857 }
.ga4wp-chk-no  { background: #E2E8F0 }
.ga4wp-chk-no  .mi { font-size: 13px; color: #475569 }
.ga4wp-chk-pro { background: #E0E3FF }
.ga4wp-chk-pro .mi { font-size: 13px; color: #332FBF }

@media (max-width:640px) {
  .ga4wp-cmp-table td,.ga4wp-cmp-table th { padding: 10px 14px; font-size: 12px }
}

/* ──────────────────────────────────────────────────────
   FEATURES GRID — v2
   Supports icon-top and icon-side card styles.
   ────────────────────────────────────────────────────── */
.ga4wp-fv2-section { padding: 0 }
.ga4wp-fv2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap: 16px;
}

/* Shared card base */
.ga4wp-fv2-card {
  background: var(--surface,#fff);
  border: 1px solid var(--border,#E4E8F2);
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
  position: relative;
}
.ga4wp-fv2-card:hover {
  box-shadow: 0 2px 8px rgba(15,23,42,.07), 0 4px 20px rgba(15,23,42,.05);
  border-color: var(--border2,#D0D6E8);
  transform: translateY(-2px);
}

/* icon-top layout */
.ga4wp-fv2-card--icon-top .ga4wp-fv2-card-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 12px;
}
.ga4wp-fv2-card--icon-top .ga4wp-fv2-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ga4wp-fv2-card--icon-top .ga4wp-fv2-icon .mi { font-size: 22px }
.ga4wp-fv2-card--icon-top .ga4wp-fv2-title {
  font-size: 14.5px; font-weight: 700; color: var(--text1,#0F172A);
  margin-bottom: 5px; line-height: 1.3;
}
.ga4wp-fv2-card--icon-top .ga4wp-fv2-desc {
  font-size: 13px; color: var(--text2,#475569); line-height: 1.65;
}

/* icon-side layout */
.ga4wp-fv2-card--icon-side {
  display: flex; gap: 16px; align-items: flex-start;
}
.ga4wp-fv2-card--icon-side .ga4wp-fv2-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ga4wp-fv2-card--icon-side .ga4wp-fv2-icon .mi { font-size: 22px }
.ga4wp-fv2-card--icon-side .ga4wp-fv2-content { min-width: 0 }
.ga4wp-fv2-card--icon-side .ga4wp-fv2-title {
  font-size: 14.5px; font-weight: 700; color: var(--text1,#0F172A);
  margin-bottom: 5px; line-height: 1.3;
}
.ga4wp-fv2-card--icon-side .ga4wp-fv2-desc {
  font-size: 13px; color: var(--text2,#475569); line-height: 1.65;
}

/* Icon color utilities (brand-soft bg + color text) */
.ga4wp-ic-brand  { background: #EFF6FF } .ga4wp-ic-brand  .mi { color: #2563EB }
.ga4wp-ic-teal   { background: #F0FDFA } .ga4wp-ic-teal   .mi { color: #0EA5A0 }
.ga4wp-ic-violet { background: #F5F3FF } .ga4wp-ic-violet .mi { color: #7C3AED }
.ga4wp-ic-amber  { background: #FFFBEB } .ga4wp-ic-amber  .mi { color: #D97706 }
.ga4wp-ic-rose   { background: #FFF1F4 } .ga4wp-ic-rose   .mi { color: #E11D48 }
.ga4wp-ic-emerald{ background: #F0FDF4 } .ga4wp-ic-emerald .mi{ color: #059669 }
.ga4wp-ic-sky    { background: #F0F9FF } .ga4wp-ic-sky    .mi { color: #0284C7 }
.ga4wp-ic-orange { background: #FFF7ED } .ga4wp-ic-orange .mi { color: #EA580C }
.ga4wp-ic-slate  { background: #F8FAFC } .ga4wp-ic-slate  .mi { color: #475569 }

/* Badges */
.ga4wp-fv2-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
}
.ga4wp-fv2-badge-pro  { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE }
.ga4wp-fv2-badge-free { background: #F0FDF4; color: #059669; border: 1px solid #BBF7D0 }

@media (max-width:640px) {
  .ga4wp-fv2-grid { grid-template-columns: 1fr }
}

/* =================================================================
   GA4WP COMBINED v1.4.0 — Design-matching additions
   All classes below reproduce the exact visual rules from the
   ga4wp-custom-dimensions HTML page, scoped to .ga4wp-scope.
   ================================================================= */

/* ── Shared section header pattern (used by Hero, Features, FAQ, Compare, CTA) ── */
.ga4wp-scope .ga4wp-section-header-box { text-align:center; margin-bottom:56px }
.ga4wp-scope .ga4wp-section-eyebrow-row {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand,#2563EB); margin-bottom:12px;
}
.ga4wp-scope .ga4wp-section-eyebrow-row .mi { font-size:15px }
.ga4wp-scope .ga4wp-fv3-title-section {
  font-size:clamp(26px,3.5vw,38px); font-weight:700;
  letter-spacing:-.03em; color:var(--text1,#0F172A); margin-bottom:12px;
}
.ga4wp-scope .ga4wp-fv3-body-section {
  font-size:16px; color:var(--text2,#475569);
  max-width:560px; margin:0 auto;
}

/* ══════════════════════════════════════════════════════
   HERO — CENTERED MODE
   .ga4wp-hero-centered  .hero-inner  h1  h1 span
   .hero-badge  .hero-sub  .hero-pills  .pill
   .hero-actions  .btn-lg  .btn-lg-primary  .btn-lg-ghost
   ══════════════════════════════════════════════════════ */
.ga4wp-scope .ga4wp-hero-centered {
  background: linear-gradient(180deg,#fff 0%,var(--bg,#F4F6FA) 100%);
  border-bottom: 1px solid var(--border,#E4E8F2);
  padding: 72px 24px 64px;
  text-align: center;
}
.ga4wp-scope .hero-inner { max-width:800px; margin:0 auto }
.ga4wp-scope .hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brand-soft,#EFF6FF);
  border:1px solid #BFDBFE; color:var(--brand,#2563EB);
  font-size:12px; font-weight:600; padding:5px 12px;
  border-radius:99px; margin-bottom:20px;
}
.ga4wp-scope .hero-badge .mi { font-size:14px }
.ga4wp-scope .ga4wp-hero-centered h1 {
  font-size:clamp(32px,5vw,52px); font-weight:700;
  line-height:1.15; letter-spacing:-.03em;
  color:var(--text1,#0F172A); margin-bottom:16px;
}
.ga4wp-scope .ga4wp-hero-centered h1 span { color:var(--brand,#2563EB) }
.ga4wp-scope .hero-sub {
  font-size:17px; color:var(--text2,#475569);
  max-width:580px; margin:0 auto 32px; line-height:1.7;
}
.ga4wp-scope .hero-pills {
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; margin-bottom:36px;
}
.ga4wp-scope .pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:var(--text2,#475569);
  background:#fff; border:1px solid var(--border,#E4E8F2);
  padding:5px 12px; border-radius:99px;
}
.ga4wp-scope .pill .mi { font-size:14px; color:var(--emerald,#059669) }
.ga4wp-scope .hero-actions {
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
}
.ga4wp-scope .btn-lg {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Sora',sans-serif; font-size:14.5px; font-weight:600;
  padding:12px 24px; border-radius:10px; cursor:pointer; text-decoration:none;
  transition:.2s; border:none;
}
.ga4wp-scope .btn-lg .mi { font-size:16px }
.ga4wp-scope .btn-lg-primary {
  background:var(--brand,#2563EB); color:#fff;
  box-shadow:0 4px 16px rgba(67,83,255,.3);
}
.ga4wp-scope .btn-lg-primary:hover { background:#1d4ed8; box-shadow:0 6px 24px rgba(37,99,235,.4); transform:translateY(-1px) }
.ga4wp-scope .btn-lg-ghost {
  background:#fff; color:var(--text1,#0F172A);
  border:1.5px solid var(--border2,#D0D6E8);
}
.ga4wp-scope .btn-lg-ghost:hover { border-color:var(--brand,#2563EB); color:var(--brand,#2563EB) }

@media (max-width:640px) {
  .ga4wp-scope .ga4wp-hero-centered { padding:48px 16px 40px }
  .ga4wp-scope .hero-actions { flex-direction:column; align-items:stretch }
  .ga4wp-scope .btn-lg { justify-content:center }
}

/* ══════════════════════════════════════════════════════
   STATS — stat-cards mode
   .ga4wp-stats-section  .stats-row  .stat-card  .stat-num  .stat-label
   ══════════════════════════════════════════════════════ */
.ga4wp-scope .ga4wp-stats-section { padding:0 }
.ga4wp-scope .stats-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.ga4wp-scope .stat-card {
  background:var(--surface,#fff);
  border:1px solid var(--border,#E4E8F2);
  border-radius:16px; padding:24px; text-align:center;
}
.ga4wp-scope .stat-num {
  font-size:32px; font-weight:700; letter-spacing:-.03em;
  color:var(--brand,#2563EB); margin-bottom:4px;
}
.ga4wp-scope .stat-label { font-size:13px; color:var(--text2,#475569) }
@media (max-width:768px) { .ga4wp-scope .stats-row { grid-template-columns:repeat(2,1fr) } }

/* ══════════════════════════════════════════════════════
   FEATURES — v3 cards
   .ga4wp-fv3-section  .ga4wp-fv3-grid  .ga4wp-fv3-card
   icon-top + icon-side layouts  .ga4wp-fv3-icon  ic-*
   ══════════════════════════════════════════════════════ */
.ga4wp-scope .ga4wp-fv3-section { padding:0 }
.ga4wp-scope .ga4wp-fv3-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}
.ga4wp-scope .ga4wp-fv3-card {
  background:var(--surface,#fff);
  border:1px solid var(--border,#E4E8F2);
  border-radius:16px; padding:24px;
  transition:box-shadow .2s, border-color .2s, transform .2s;
}
.ga4wp-scope .ga4wp-fv3-card:hover {
  box-shadow:0 2px 8px rgba(15,23,42,.07),0 4px 20px rgba(15,23,42,.05);
  border-color:var(--border2,#D0D6E8); transform:translateY(-2px);
}
/* icon-top */
.ga4wp-scope .ga4wp-fv3-card--icon-top .ga4wp-fv3-card-top {
  display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px;
}
.ga4wp-scope .ga4wp-fv3-card--icon-top .ga4wp-fv3-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ga4wp-scope .ga4wp-fv3-card--icon-top .ga4wp-fv3-icon .mi { font-size:22px }
/* icon-side */
.ga4wp-scope .ga4wp-fv3-card--icon-side {
  display:flex; gap:16px; align-items:flex-start;
}
.ga4wp-scope .ga4wp-fv3-card--icon-side .ga4wp-fv3-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ga4wp-scope .ga4wp-fv3-card--icon-side .ga4wp-fv3-icon .mi { font-size:22px }
.ga4wp-scope .ga4wp-fv3-card--icon-side .ga4wp-fv3-content { min-width:0 }
/* shared text */
.ga4wp-scope .ga4wp-fv3-title {
  font-size:14.5px; font-weight:700; color:var(--text1,#0F172A); margin-bottom:5px; line-height:1.3;
}
.ga4wp-scope .ga4wp-fv3-desc {
  font-size:13px; color:var(--text2,#475569); line-height:1.65;
}
/* icon colour helpers (covers all nine swatches) */
.ga4wp-scope .ga4wp-ic-brand   { background:#EFF6FF } .ga4wp-scope .ga4wp-ic-brand   .mi { color:#2563EB }
.ga4wp-scope .ga4wp-ic-teal    { background:#F0FDFA } .ga4wp-scope .ga4wp-ic-teal    .mi { color:#0EA5A0 }
.ga4wp-scope .ga4wp-ic-violet  { background:#F5F3FF } .ga4wp-scope .ga4wp-ic-violet  .mi { color:#7C3AED }
.ga4wp-scope .ga4wp-ic-amber   { background:#FFFBEB } .ga4wp-scope .ga4wp-ic-amber   .mi { color:#D97706 }
.ga4wp-scope .ga4wp-ic-rose    { background:#FFF1F4 } .ga4wp-scope .ga4wp-ic-rose    .mi { color:#E11D48 }
.ga4wp-scope .ga4wp-ic-emerald { background:#F0FDF4 } .ga4wp-scope .ga4wp-ic-emerald .mi { color:#059669 }
.ga4wp-scope .ga4wp-ic-sky     { background:#F0F9FF } .ga4wp-scope .ga4wp-ic-sky     .mi { color:#0284C7 }
.ga4wp-scope .ga4wp-ic-orange  { background:#FFF7ED } .ga4wp-scope .ga4wp-ic-orange  .mi { color:#EA580C }
.ga4wp-scope .ga4wp-ic-slate   { background:#F8FAFC } .ga4wp-scope .ga4wp-ic-slate   .mi { color:#475569 }
@media (max-width:640px) { .ga4wp-scope .ga4wp-fv3-grid { grid-template-columns:1fr !important } }

/* ══════════════════════════════════════════════════════
   COMPARE TABLE — v3
   .compare-wrap  table.compare  .compare-sec-row
   .chk  .chk-yes  .chk-no  .chk-pro
   td code (inline key pill)
   ══════════════════════════════════════════════════════ */
.ga4wp-scope .ga4wp-cmp-outer { padding:0 }
.ga4wp-scope .compare-wrap {
  background:var(--surface,#fff);
  border:1px solid var(--border,#E4E8F2);
  border-radius:16px; overflow:hidden;
  box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.ga4wp-scope table.compare { width:100%; border-collapse:collapse; font-size:13.5px }
.ga4wp-scope table.compare thead th {
  background:var(--surface2,#F8F9FC); padding:14px 20px;
  text-align:left; font-weight:700; color:var(--text1,#0F172A);
  border-bottom:1.5px solid var(--border,#E4E8F2);
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
}
.ga4wp-scope table.compare thead th:not(:first-child) { text-align:center; min-width:110px }
.ga4wp-scope .ga4wp-cmp-pro-th { color:var(--brand,#2563EB) }
.ga4wp-scope table.compare td {
  padding:12px 20px; border-bottom:1px solid var(--border,#E4E8F2);
  color:var(--text1,#0F172A); vertical-align:middle; font-size:13px;
}
.ga4wp-scope table.compare td:not(:first-child) { text-align:center }
.ga4wp-scope table.compare tbody tr:last-child td { border-bottom:none }
.ga4wp-scope table.compare tbody tr:hover td { background:var(--brand-soft,#EFF6FF) }
.ga4wp-scope .compare-sec-row td {
  background:var(--surface2,#F8F9FC);
  font-size:11px; font-weight:700; color:var(--text3,#94A3B8);
  text-transform:uppercase; letter-spacing:.07em; padding:8px 20px;
}
.ga4wp-scope table.compare td code {
  font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--brand,#2563EB); background:var(--brand-soft,#EFF6FF);
  padding:1px 5px; border-radius:4px; margin-left:5px; white-space:nowrap;
}
.ga4wp-scope .chk {
  display:inline-flex; width:22px; height:22px; border-radius:50%;
  align-items:center; justify-content:center;
}
.ga4wp-scope .chk-yes { background:#D1FAE5 } .ga4wp-scope .chk-yes .mi { font-size:13px; color:#047857 }
.ga4wp-scope .chk-no  { background:#E2E8F0 } .ga4wp-scope .chk-no  .mi { font-size:13px; color:#475569 }
.ga4wp-scope .chk-pro { background:#E0E3FF } .ga4wp-scope .chk-pro .mi { font-size:13px; color:#332FBF }
@media (max-width:640px) { .ga4wp-scope table.compare td,.ga4wp-scope table.compare th { padding:10px 14px; font-size:12px } }

/* ══════════════════════════════════════════════════════
   FAQ — v3
   .faq-list  .faq-item  .faq-q  .faq-a  .faq-a-inner
   Open state: .faq-item.open
   ══════════════════════════════════════════════════════ */
.ga4wp-scope .ga4wp-faq-section { padding:0 }
.ga4wp-scope .ga4wp-faq-max { max-width:720px; margin:0 auto }
.ga4wp-scope .faq-list { display:flex; flex-direction:column; gap:8px }
.ga4wp-scope .faq-item {
  background:var(--surface,#fff);
  border:1px solid var(--border,#E4E8F2);
  border-radius:12px; overflow:hidden; transition:.15s;
}
.ga4wp-scope .faq-item.open { border-color:var(--border2,#D0D6E8); box-shadow:0 1px 4px rgba(15,23,42,.06) }
.ga4wp-scope .faq-q {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--text1,#0F172A);
  gap:12px; user-select:none;
}
.ga4wp-scope .faq-q .mi { font-size:18px; color:var(--text3,#94A3B8); transition:.2s; flex-shrink:0 }
.ga4wp-scope .faq-item.open .faq-q .mi { transform:rotate(45deg); color:var(--brand,#2563EB) }
.ga4wp-scope .faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease }
.ga4wp-scope .faq-item.open .faq-a { max-height:600px }
.ga4wp-scope .faq-a-inner {
  padding:0 20px 16px; font-size:13.5px;
  color:var(--text2,#475569); line-height:1.7;
}
.ga4wp-scope .faq-a-inner code {
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--brand,#2563EB); background:var(--brand-soft,#EFF6FF);
  padding:1px 5px; border-radius:4px;
}

/* ══════════════════════════════════════════════════════
   CTA BANNER — v3
   .ga4wp-cta-outer  .cta-banner  h2  p  .cta-actions
   .btn-white  .btn-outline-white  .cta-trust  span
   ══════════════════════════════════════════════════════ */
.ga4wp-scope .ga4wp-cta-outer {
  max-width:1120px; margin:0 auto; padding:0 24px 80px;
}
.ga4wp-scope .cta-banner {
  background:var(--brand,#2563EB);
  border-radius:16px; padding:48px;
  text-align:center; color:#fff;
}
.ga4wp-scope .cta-banner h2 {
  font-size:32px; font-weight:700; letter-spacing:-.03em; margin-bottom:12px; line-height:1.2;
}
.ga4wp-scope .cta-banner h2 em { font-style:italic }
.ga4wp-scope .cta-banner p {
  font-size:16px; opacity:.85; margin-bottom:28px; line-height:1.6;
}
.ga4wp-scope .cta-actions {
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}
.ga4wp-scope .btn-white {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Sora',sans-serif; font-size:14px; font-weight:700;
  padding:12px 24px; border-radius:10px; border:none;
  background:#fff; color:var(--brand,#2563EB); cursor:pointer; transition:.2s;
}
.ga4wp-scope .btn-white .mi { font-size:16px }
.ga4wp-scope .btn-white:hover { box-shadow:0 4px 20px rgba(0,0,0,.15); transform:translateY(-1px) }
.ga4wp-scope .btn-outline-white {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Sora',sans-serif; font-size:14px; font-weight:600;
  padding:12px 24px; border-radius:10px;
  background:rgba(255,255,255,.12); color:#fff;
  border:1.5px solid rgba(255,255,255,.35); cursor:pointer; transition:.2s;
}
.ga4wp-scope .btn-outline-white .mi { font-size:16px }
.ga4wp-scope .btn-outline-white:hover { background:rgba(255,255,255,.2) }
.ga4wp-scope .cta-trust {
  display:flex; justify-content:center; gap:20px;
  flex-wrap:wrap; margin-top:20px; font-size:12.5px; opacity:.75;
}
.ga4wp-scope .cta-trust span { display:flex; align-items:center; gap:4px }
.ga4wp-scope .cta-trust .mi { font-size:14px }

@media (max-width:640px) {
  .ga4wp-scope .cta-banner { padding:32px 20px; border-radius:12px }
  .ga4wp-scope .cta-banner h2 { font-size:24px }
  .ga4wp-scope .cta-actions { flex-direction:column; align-items:center }
  .ga4wp-scope .cta-trust { gap:12px }
  .ga4wp-scope .ga4wp-cta-outer { padding:0 12px 48px }
}

/* ── Elementor Editor overrides ── */
@media(min-width:1025px){
  .elementor-editor-active .ga4wp-scope .ga4wp-nav-toggle,
  .elementor-editor-preview .ga4wp-scope .ga4wp-nav-toggle { display:none !important; }
  .elementor-editor-active .ga4wp-scope .ga4wp-nav-links,
  .elementor-editor-preview .ga4wp-scope .ga4wp-nav-links  { display:flex !important; }
}
/* Editor: show ONLY THE FIRST panel inline so user can edit content.
   Others stay hidden to avoid content spilling down the page.
   User can click nav triggers to preview others. */
.ga4wp-editor .ga4wp-editor-panel:first-of-type {
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
  position:relative !important;
  top:auto !important; left:auto !important;
  width:100% !important;
  transform:none !important;
  border:1px dashed var(--ga-border) !important;
  border-radius:var(--ga-r-md) !important;
  margin-top:4px !important;
  padding:16px !important;
}
.ga4wp-editor .ga4wp-dropdown-panel.ga4wp-editor-panel:first-of-type {
  transform:none !important; left:auto !important;
}
/* All other editor panels stay hidden unless clicked */
.ga4wp-editor .ga4wp-editor-panel:not(:first-of-type) {
  opacity:0 !important; visibility:hidden !important;
}
.ga4wp-editor .ga4wp-editor-panel.active {
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
}



/* =====================================================
   v1.12 — Custom image uploads + dynamic lists
   (Hero split image / Reports tab images / WooCommerce
   split image / Guarantee image mode)
   ===================================================== */

/* Hero split-mode image */
.ga4wp-scope .ga4wp-hero-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); max-width:100% }
.ga4wp-scope .ga4wp-hero-media img{ width:100%; height:auto; display:block; max-width:100% }
.ga4wp-scope .ga4wp-hero-img-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:60px 24px; min-height:280px; color:var(--text3); background:var(--surface2); text-align:center; font-size:13px }
.ga4wp-scope .ga4wp-hero-img-placeholder .mi{ font-size:34px; color:var(--text4) }

/* Reports — per-tab panel image */
.ga4wp-scope .ga4wp-r-image-wrap{ margin-top:14px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:var(--surface2) }
.ga4wp-scope .ga4wp-r-image-wrap img{ width:100%; height:auto; display:block }
.ga4wp-scope .ga4wp-r-img-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:52px 20px; color:var(--text3); font-size:12.5px; text-align:center }
.ga4wp-scope .ga4wp-r-img-placeholder .mi{ font-size:30px; color:var(--text4) }

/* WooCommerce split image */
.ga4wp-scope .ga4wp-woo-media{ border-radius:var(--r-lg); overflow:hidden; background:var(--surface); max-width:100% }
.ga4wp-scope .ga4wp-woo-media img{ width:100%; height:auto; display:block; max-width:100% }
.ga4wp-scope .ga4wp-woo-img-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:60px 24px; min-height:280px; color:var(--text3); background:var(--surface2); text-align:center; font-size:13px }
.ga4wp-scope .ga4wp-woo-img-placeholder .mi{ font-size:34px; color:var(--text4) }

/* Guarantee — custom image mode */
.ga4wp-scope .ga4wp-guarantee-media{ width:280px; max-width:100%; flex-shrink:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); border:1px solid var(--border) }
.ga4wp-scope .ga4wp-guarantee-media img{ width:100%; height:auto; display:block }
.ga4wp-scope .ga4wp-g-img-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; aspect-ratio:1/1; padding:24px 16px; color:var(--emerald); background:var(--emerald-soft); text-align:center; font-size:11.5px }
.ga4wp-scope .ga4wp-g-img-placeholder .mi{ font-size:28px }

@media(max-width:1024px){
  .ga4wp-scope .ga4wp-hero-media{ max-width:560px; margin:0 auto }
}
@media(max-width:767px){
  .ga4wp-scope .ga4wp-guarantee-media{ margin:0 auto }
}

/* =====================================================
   v1.13 — Dynamic pricing tabs / linkable features /
   dynamic comparison columns / responsive scroll
   ===================================================== */

/* Pricing table — allow the tab row to wrap when there are many periods */
.ga4wp-scope .ga4wp-ptable-toggle{ flex-wrap:wrap; justify-content:center; row-gap:4px }
.ga4wp-scope .ga4wp-ptable-list a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px }
.ga4wp-scope .ga4wp-ptable-list a:hover{ color:var(--brand-dark) }

@media(max-width:480px){
  .ga4wp-scope .ga4wp-ptable-toggle{ width:100%; justify-content:center }
  .ga4wp-scope .ga4wp-ptable-toggle-btn{ padding:8px 14px; font-size:12px }
}

/* Comparison table — dynamic highlighted column + responsive scroll */
.ga4wp-scope .ga4wp-cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.ga4wp-scope table.compare{ min-width:520px }
.ga4wp-scope th.ga4wp-cmp-col-hl{ color:var(--brand) }
.ga4wp-scope td.ga4wp-cmp-col-hl{ background:var(--brand-soft) }
.ga4wp-scope .ga4wp-cmp-col-sub{ font-size:10.5px; font-weight:500; color:var(--text3); text-transform:none; letter-spacing:0; margin-top:2px }
.ga4wp-scope .chk{ display:inline-flex; align-items:center; justify-content:center }
.ga4wp-scope .chk-text{ font-size:11.5px; font-weight:600; color:var(--text2); background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:2px 10px; white-space:nowrap }

@media(max-width:767px){
  .ga4wp-scope table.compare{ min-width:440px }
  .ga4wp-scope table.compare th, .ga4wp-scope table.compare td{ padding:10px 12px; font-size:12.5px }
}

/* =====================================================
   v1.16 — Reviews widget: Load More reveal + live-data note
   ===================================================== */
.ga4wp-scope .ga4wp-rv-hidden{ display:none !important }
.ga4wp-scope .ga4wp-rv-loadmore{ cursor:pointer; border:1px solid var(--border) !important; background:transparent !important }
.ga4wp-scope .ga4wp-rv-wp a{ color:inherit; text-decoration:underline; text-underline-offset:2px }

/* =====================================================
   v1.17.2 — Hero split layout: stay 2-column through
   tablet/editor-canvas widths, tighten gap before that,
   only truly stack on small phones.
   ===================================================== */
@media(max-width:900px){
  .ga4wp-hero-grid{ gap:32px }
}
@media(max-width:560px){
  .ga4wp-hero-grid{ grid-template-columns:1fr; gap:32px }
}

/* =====================================================
   MY ACCOUNT — BuddyPanel-style WooCommerce account widget
   ===================================================== */
.ga4wp-scope.ga4wp-myaccount-wrap{ --ga4wp-accent:#4353FF }
.ga4wp-scope .ga4wp-account-layout{
  display:grid; grid-template-columns:var(--ga4wp-panel-w,264px) 1fr; gap:28px; align-items:start;
}
.ga4wp-scope .ga4wp-account-layout > *{ min-width:0 }

/* Mobile trigger bar (hidden on desktop) */
.ga4wp-scope .ga4wp-panel-bar{ display:none }

/* BuddyPanel */
.ga4wp-scope .ga4wp-buddy-panel{
  background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:var(--r-lg,16px);
  box-shadow:var(--sh-sm); position:sticky; top:20px; overflow:hidden;
}
.ga4wp-scope .ga4wp-bp-profile{ display:flex; align-items:center; gap:12px; padding:20px; border-bottom:1px solid var(--border,#E4E8F2) }
.ga4wp-scope .ga4wp-bp-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg,var(--ga4wp-accent,#4353FF),#7C86FF); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:16px;
}
.ga4wp-scope .ga4wp-bp-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50% }
.ga4wp-scope .ga4wp-bp-profile-info{ min-width:0 }
.ga4wp-scope .ga4wp-bp-profile-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--text1,#0F172A); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ga4wp-scope .ga4wp-bp-profile-sub{ font-size:12px; color:var(--text3,#94A3B8); display:flex; align-items:center; gap:4px; margin-top:2px }
.ga4wp-scope .ga4wp-bp-profile-sub .mi{ font-size:12px; color:var(--emerald,#059669) }

.ga4wp-scope .ga4wp-bp-nav{ list-style:none; margin:0; padding:10px }
.ga4wp-scope .ga4wp-bp-item{ margin-bottom:2px }
.ga4wp-scope .ga4wp-bp-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:var(--text2,#475569); position:relative; transition:.15s;
  text-decoration:none !important;
}
.ga4wp-scope .ga4wp-bp-link:hover,
.ga4wp-scope .ga4wp-bp-link:focus,
.ga4wp-scope .ga4wp-bp-link:visited{ text-decoration:none !important; }
.ga4wp-scope .ga4wp-bp-link .mi{ font-size:19px; color:var(--text3,#94A3B8); transition:.15s }
.ga4wp-scope .ga4wp-bp-link:hover{ background:var(--surface2,#F8F9FC); color:var(--text1,#0F172A) }
.ga4wp-scope .ga4wp-bp-link:hover .mi{ color:var(--text2,#475569) }
.ga4wp-scope .ga4wp-bp-item.active .ga4wp-bp-link{ background:var(--brand-soft,#ECEEFF); color:var(--ga4wp-accent,#4353FF) }
.ga4wp-scope .ga4wp-bp-item.active .ga4wp-bp-link .mi{ color:var(--ga4wp-accent,#4353FF) }
.ga4wp-scope .ga4wp-bp-item.active .ga4wp-bp-link::before{
  content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
  background:var(--ga4wp-accent,#4353FF); border-radius:0 3px 3px 0;
}
.ga4wp-scope .ga4wp-bp-badge{
  margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:20px;
  background:var(--emerald-soft,#ECFDF5); color:var(--emerald,#059669); font-family:'IBM Plex Mono',monospace;
}
.ga4wp-scope .ga4wp-bp-divider{ height:1px; background:var(--border,#E4E8F2); margin:6px 20px }
.ga4wp-scope .ga4wp-bp-logout{ padding:10px 10px 16px }
.ga4wp-scope .ga4wp-bp-logout .ga4wp-bp-link{ color:var(--rose,#E11D48) }
.ga4wp-scope .ga4wp-bp-logout .ga4wp-bp-link .mi{ color:var(--rose,#E11D48) }
.ga4wp-scope .ga4wp-bp-logout .ga4wp-bp-link:hover{ background:var(--rose-soft,#FFF1F4) }

.ga4wp-scope .ga4wp-panel-overlay{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:59 }
.ga4wp-scope .ga4wp-panel-overlay.open{ display:block }

/* Content column */
.ga4wp-scope .ga4wp-content-col{ min-width:0 }
.ga4wp-scope .ga4wp-welcome-card{
  background:linear-gradient(135deg,var(--ga4wp-accent,#4353FF) 0%,var(--brand-dark,#3444E8) 100%);
  border-radius:var(--r-lg,16px); padding:22px 26px; color:#fff; margin-bottom:22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  box-shadow:var(--sh-md);
}
.ga4wp-scope .ga4wp-welcome-card h2{ color:#fff; font-size:19px; font-weight:700; margin:0; font-family:'Sora',sans-serif }
.ga4wp-scope .ga4wp-welcome-card p{ margin:5px 0 0; color:rgba(255,255,255,.82); font-size:13.5px }
.ga4wp-scope .ga4wp-wc-icon{
  width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ga4wp-scope .ga4wp-wc-icon .mi{ font-size:24px; color:#fff }

.ga4wp-scope .ga4wp-section-label{ font-size:11.5px; font-weight:700; color:var(--text3,#94A3B8); text-transform:uppercase; letter-spacing:.07em; margin:26px 0 12px }
.ga4wp-scope .ga4wp-section-label:first-of-type{ margin-top:0 }

.ga4wp-scope .ga4wp-action-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
.ga4wp-scope .ga4wp-action-grid > *{ min-width:0 }
.ga4wp-scope .ga4wp-action-card{
  display:flex; align-items:center; gap:14px; background:var(--surface,#fff);
  border:1px solid var(--border,#E4E8F2); border-radius:var(--r-md,12px); padding:18px;
  box-shadow:var(--sh-xs); transition:.15s;
}
.ga4wp-scope .ga4wp-action-card:hover{ border-color:var(--ga4wp-accent,#4353FF); box-shadow:var(--sh-sm); transform:translateY(-1px) }
.ga4wp-scope .ga4wp-action-icon{
  width:42px; height:42px; border-radius:10px; flex-shrink:0; background:var(--brand-soft,#ECEEFF);
  display:flex; align-items:center; justify-content:center;
}
.ga4wp-scope .ga4wp-action-icon .mi{ color:var(--ga4wp-accent,#4353FF); font-size:21px }
.ga4wp-scope .ga4wp-action-body{ min-width:0; flex:1 }
.ga4wp-scope .ga4wp-action-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--text1,#0F172A) }
.ga4wp-scope .ga4wp-action-desc{ font-size:12.5px; color:var(--text3,#94A3B8); margin-top:2px; overflow-wrap:break-word }
.ga4wp-scope .ga4wp-action-chevron{ color:var(--text3,#94A3B8); font-size:20px; flex-shrink:0 }
.ga4wp-scope .ga4wp-action-card:hover .ga4wp-action-chevron{ color:var(--ga4wp-accent,#4353FF) }

.ga4wp-scope .ga4wp-info-card{
  background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:var(--r-lg,16px);
  padding:22px 24px; box-shadow:var(--sh-xs);
}
.ga4wp-scope .ga4wp-info-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border,#E4E8F2); gap:12px; flex-wrap:wrap }
.ga4wp-scope .ga4wp-info-row:last-child{ border-bottom:none; padding-bottom:0 }
.ga4wp-scope .ga4wp-info-row:first-child{ padding-top:0 }
.ga4wp-scope .ga4wp-info-label{ font-size:13px; color:var(--text2,#475569) }
.ga4wp-scope .ga4wp-info-value{ font-size:13px; font-weight:600; color:var(--text1,#0F172A); font-family:'IBM Plex Mono',monospace; overflow-wrap:anywhere; text-align:right }
.ga4wp-scope .ga4wp-info-edit{ font-size:12px; font-weight:700; color:var(--ga4wp-accent,#4353FF) }

/* Login/register form (logged-out state) */
.ga4wp-scope .ga4wp-myaccount-guest{ max-width:440px; margin:0 auto; background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:var(--r-lg,16px); padding:32px 30px; box-shadow:var(--sh-md) }
.ga4wp-scope .ga4wp-myaccount-guest h2{ font-family:'Sora',sans-serif; font-size:22px; font-weight:800; color:var(--text1,#0F172A); margin:0 0 22px; letter-spacing:-.3px }
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-form-row{ margin-bottom:16px }
.ga4wp-scope .ga4wp-myaccount-guest label{ display:block; font-size:12.5px; font-weight:600; color:var(--text2,#475569); margin-bottom:6px }
.ga4wp-scope .ga4wp-myaccount-guest label .required{ color:var(--rose,#E11D48); text-decoration:none }
.ga4wp-scope .ga4wp-myaccount-guest input[type="text"],
.ga4wp-scope .ga4wp-myaccount-guest input[type="password"],
.ga4wp-scope .ga4wp-myaccount-guest input[type="email"]{
  width:100%; padding:11px 13px; border:1.5px solid var(--border,#E4E8F2); border-radius:9px;
  font-size:13.5px; font-family:'Inter',sans-serif; color:var(--text1,#0F172A); background:var(--surface,#fff);
  transition:border-color .15s, box-shadow .15s;
}
.ga4wp-scope .ga4wp-myaccount-guest input[type="text"]:focus,
.ga4wp-scope .ga4wp-myaccount-guest input[type="password"]:focus,
.ga4wp-scope .ga4wp-myaccount-guest input[type="email"]:focus{
  outline:none; border-color:var(--ga4wp-accent,#4353FF); box-shadow:0 0 0 3px rgba(67,83,255,.12);
}

/* Remember me + Lost password row */
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-form-login__rememberme{
  display:inline-flex !important; align-items:center; gap:8px; font-size:13px; font-weight:500;
  color:var(--text2,#475569); margin:2px 0 0; cursor:pointer;
}
.ga4wp-scope .ga4wp-myaccount-guest input[type="checkbox"]{
  width:17px; height:17px; margin:0; accent-color:var(--ga4wp-accent,#4353FF); cursor:pointer; flex-shrink:0;
}
.ga4wp-scope .ga4wp-myaccount-guest .lost_password{ margin:16px 0 0; font-size:13px }
.ga4wp-scope .ga4wp-myaccount-guest .lost_password a{ color:var(--ga4wp-accent,#4353FF); font-weight:600 }
.ga4wp-scope .ga4wp-myaccount-guest .lost_password a:hover{ text-decoration:underline }

/* Submit button — this was previously unstyled entirely, which is why it looked invisible */
.ga4wp-scope .ga4wp-myaccount-guest button[type="submit"],
.ga4wp-scope .ga4wp-myaccount-guest input[type="submit"],
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-Button{
  display:block; width:100%; margin-top:20px; padding:12px 20px; border-radius:10px;
  background:var(--ga4wp-accent,#4353FF) !important; color:#fff !important; font-family:'Inter',sans-serif;
  font-weight:700; font-size:14px; cursor:pointer; transition:background .15s, transform .1s;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
}
.ga4wp-scope .ga4wp-myaccount-guest button[type="submit"]:hover,
.ga4wp-scope .ga4wp-myaccount-guest input[type="submit"]:hover,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-Button:hover{ background:var(--brand-dark,#3444E8) !important }
.ga4wp-scope .ga4wp-myaccount-guest button[type="submit"]:active,
.ga4wp-scope .ga4wp-myaccount-guest input[type="submit"]:active{ transform:translateY(1px) }

/* Optional two-column layout when registration is also enabled */
.ga4wp-scope .ga4wp-myaccount-guest .u-columns{ display:grid; grid-template-columns:1fr; gap:28px }
.ga4wp-scope .ga4wp-myaccount-guest .u-column1,
.ga4wp-scope .ga4wp-myaccount-guest .u-column2{ float:none; width:auto }
.ga4wp-scope .ga4wp-myaccount-guest .u-column2{ padding-top:24px; border-top:1px solid var(--border,#E4E8F2) }
@media(min-width:640px){
  .ga4wp-scope .ga4wp-myaccount-guest.has-register{ max-width:640px }
  .ga4wp-scope .ga4wp-myaccount-guest.has-register .u-columns{ grid-template-columns:1fr 1fr; gap:32px }
  .ga4wp-scope .ga4wp-myaccount-guest.has-register .u-column2{ padding-top:0; border-top:none; border-left:1px solid var(--border,#E4E8F2); padding-left:32px }
}

/* Lost-password / reset-password form reuses all of the above, plus: */
.ga4wp-scope .ga4wp-myaccount-guest p{ font-size:13.5px; color:var(--text2,#475569); line-height:1.65; margin:0 0 18px }


/* ── Baseline restyle for native WooCommerce output (orders, addresses, edit-account) ── */
.ga4wp-scope .ga4wp-wc-native{
  background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:var(--r-lg,16px);
  padding:26px 28px; box-shadow:var(--sh-xs); font-family:'Inter',sans-serif; color:var(--text2,#475569); min-width:0; overflow-x:auto;
}
.ga4wp-scope .ga4wp-wc-native h2,
.ga4wp-scope .ga4wp-wc-native h3{ font-family:'Sora',sans-serif; color:var(--text1,#0F172A); margin-top:0 }
.ga4wp-scope .ga4wp-wc-native table{ width:100%; border-collapse:collapse; font-size:13px }
.ga4wp-scope .ga4wp-wc-native th{ text-align:left; padding:10px 12px; background:var(--surface2,#F8F9FC); color:var(--text3,#94A3B8); font-size:11px; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border,#E4E8F2) }
.ga4wp-scope .ga4wp-wc-native td{ padding:12px; border-bottom:1px solid var(--border,#E4E8F2); vertical-align:middle }
.ga4wp-scope .ga4wp-wc-native input[type="text"],
.ga4wp-scope .ga4wp-wc-native input[type="password"],
.ga4wp-scope .ga4wp-wc-native input[type="email"],
.ga4wp-scope .ga4wp-wc-native input[type="tel"],
.ga4wp-scope .ga4wp-wc-native select,
.ga4wp-scope .ga4wp-wc-native textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border,#E4E8F2); border-radius:8px;
  font-size:13.5px; font-family:'Inter',sans-serif; background:var(--surface,#fff); color:var(--text1,#0F172A);
}
.ga4wp-scope .ga4wp-wc-native .form-row{ margin-bottom:16px }
.ga4wp-scope .ga4wp-wc-native label{ display:block; font-size:12.5px; font-weight:600; color:var(--text2,#475569); margin-bottom:5px }
.ga4wp-scope .ga4wp-wc-native .button,
.ga4wp-scope .ga4wp-wc-native button[type="submit"],
.ga4wp-scope .ga4wp-wc-native input[type="submit"]{
  background:var(--ga4wp-accent,#4353FF) !important; color:#fff !important; border-radius:9px;
  padding:11px 22px; font-weight:700; font-size:13.5px; font-family:'Inter',sans-serif; cursor:pointer; transition:.15s;
}
.ga4wp-scope .ga4wp-wc-native .button:hover,
.ga4wp-scope .ga4wp-wc-native button[type="submit"]:hover{ background:var(--brand-dark,#3444E8) !important }
.ga4wp-scope .ga4wp-wc-native .woocommerce-Message,
.ga4wp-scope .ga4wp-wc-native .woocommerce-message,
.ga4wp-scope .ga4wp-wc-native .woocommerce-error,
.ga4wp-scope .ga4wp-wc-native .woocommerce-info,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-Message,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-message,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-error,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-info{
  list-style:none; margin:0 0 20px; padding:14px 16px; border-radius:10px; font-size:13.5px;
  background:var(--brand-soft,#ECEEFF); color:var(--text1,#0F172A); border:1px solid var(--border,#E4E8F2);
}
/* Success (password reset sent, address saved, etc.) reads distinctly from errors */
.ga4wp-scope .ga4wp-wc-native .woocommerce-Message,
.ga4wp-scope .ga4wp-wc-native .woocommerce-message,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-Message,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-message{
  background:var(--emerald-soft,#ECFDF5); color:#065F46; border-color:var(--emerald-bdr,#A7F3D0);
}
.ga4wp-scope .ga4wp-wc-native .woocommerce-error,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-error{
  background:var(--rose-soft,#FFF1F4); color:#9F1239; border-color:var(--rose-bdr,#FECDD3);
}
.ga4wp-scope .ga4wp-wc-native .woocommerce-Message li,
.ga4wp-scope .ga4wp-wc-native .woocommerce-message li,
.ga4wp-scope .ga4wp-wc-native .woocommerce-error li,
.ga4wp-scope .ga4wp-wc-native .woocommerce-info li,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-Message li,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-message li,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-error li,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-info li{ margin:0; padding:0; list-style:none }
.ga4wp-scope .ga4wp-wc-native .woocommerce-Message::before,
.ga4wp-scope .ga4wp-wc-native .woocommerce-message::before,
.ga4wp-scope .ga4wp-wc-native .woocommerce-error::before,
.ga4wp-scope .ga4wp-wc-native .woocommerce-info::before,
.ga4wp-scope .ga4wp-wc-native .woocommerce-Message li::before,
.ga4wp-scope .ga4wp-wc-native .woocommerce-message li::before,
.ga4wp-scope .ga4wp-wc-native .woocommerce-error li::before,
.ga4wp-scope .ga4wp-wc-native .woocommerce-info li::before,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-Message::before,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-message::before,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-error::before,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-info::before,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-Message li::before,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-message li::before,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-error li::before,
.ga4wp-scope .ga4wp-myaccount-guest .woocommerce-info li::before{
  content:none !important; display:none !important;
}


.ga4wp-scope .ga4wp-wc-native .woocommerce-address-fields__field-wrapper{ display:block }

@media(max-width:900px){
  .ga4wp-scope .ga4wp-account-layout{ grid-template-columns:1fr }
  .ga4wp-scope .ga4wp-panel-bar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--surface,#fff); border:1px solid var(--border,#E4E8F2); border-radius:var(--r-md,12px);
    padding:12px 16px; margin-bottom:18px; box-shadow:var(--sh-xs);
  }
  .ga4wp-scope .ga4wp-panel-bar-title{ display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px }
  .ga4wp-scope .ga4wp-panel-bar-title .mi{ color:var(--ga4wp-accent,#4353FF) }
  .ga4wp-scope .ga4wp-panel-toggle-btn{
    display:flex; align-items:center; gap:6px; background:var(--surface2,#F8F9FC); border:1px solid var(--border,#E4E8F2);
    border-radius:8px; padding:7px 12px; font-size:12.5px; font-weight:700; color:var(--text2,#475569); cursor:pointer;
  }
  .ga4wp-scope .ga4wp-panel-toggle-btn .mi{ font-size:17px }
  .ga4wp-scope .ga4wp-buddy-panel{
    position:fixed; top:0; left:0; bottom:0; width:min(300px,86vw); z-index:60;
    border-radius:0; transform:translateX(-100%); transition:transform .28s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
  }
  .ga4wp-scope .ga4wp-buddy-panel.open{ transform:translateX(0) }
}
@media(max-width:640px){
  .ga4wp-scope .ga4wp-welcome-card{ padding:20px }
  .ga4wp-scope .ga4wp-wc-native{ padding:20px }
}

/* =====================================================
   SUPPORT BRIDGE — Awesome Support ticket-page tweaks
   Everything else (card look, sidebar, panel toggle, fonts,
   colors) comes from the classes already styled above via
   .ga4wp-scope / .ga4wp-myaccount-guest / .ga4wp-buddy-panel.
   This section only adds the handful of things specific to
   ticket content (tables, forms) that those don't cover.
   ===================================================== */
.ga4wp-scope .trueana-sb-card{ max-width:100% }
.ga4wp-scope .trueana-sb-card table{ width:100%; border-collapse:collapse; font-size:13.5px }
.ga4wp-scope .trueana-sb-card th{
  text-align:left; padding:10px 12px; background:var(--surface2,#F8F9FC); color:var(--text3,#94A3B8);
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border,#E4E8F2);
}
.ga4wp-scope .trueana-sb-card td{ padding:12px; border-bottom:1px solid var(--border,#E4E8F2); vertical-align:middle }
.ga4wp-scope .trueana-sb-card input[type="text"],
.ga4wp-scope .trueana-sb-card input[type="email"],
.ga4wp-scope .trueana-sb-card input[type="password"],
.ga4wp-scope .trueana-sb-card select,
.ga4wp-scope .trueana-sb-card textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border,#E4E8F2); border-radius:8px;
  font-size:13.5px; font-family:'Inter',sans-serif; background:var(--surface,#fff); color:var(--text1,#0F172A);
  margin-bottom:14px;
}
.ga4wp-scope .trueana-sb-card label{ display:block; font-size:12.5px; font-weight:600; color:var(--text2,#475569); margin-bottom:6px }
.ga4wp-scope .trueana-sb-card button[type="submit"],
.ga4wp-scope .trueana-sb-card input[type="submit"]{
  background:var(--ga4wp-accent,#4353FF) !important; color:#fff !important; border:none; border-radius:10px;
  padding:11px 22px; font-weight:700; font-size:13.5px; font-family:'Inter',sans-serif; cursor:pointer;
}
.ga4wp-scope .trueana-sb-card button[type="submit"]:hover,
.ga4wp-scope .trueana-sb-card input[type="submit"]:hover{ background:var(--brand-dark,#3444E8) !important }
@media(max-width:640px){ .ga4wp-scope .trueana-sb-card{ padding:20px } }

/* =====================================================
   TIER COMPARE widget
   ===================================================== */
.ga4wp-scope .ga4wp-tier-card{ border-radius:var(--r-xl); padding:32px; position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-xs) }
.ga4wp-scope .ga4wp-tier-card.featured{ background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%); color:#fff; box-shadow:var(--sh-md); border:none }
.ga4wp-scope .ga4wp-tier-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:20px; margin-bottom:16px; background:var(--surface2); color:var(--text3) }
.ga4wp-scope .ga4wp-tier-card.featured .ga4wp-tier-badge{ background:rgba(255,255,255,.18); color:#fff }
.ga4wp-scope .ga4wp-tier-rate{ font-family:'Sora',sans-serif; font-size:46px; font-weight:800; line-height:1; color:var(--text1) }
.ga4wp-scope .ga4wp-tier-card.featured .ga4wp-tier-rate{ color:#fff }
.ga4wp-scope .ga4wp-tier-rate span{ font-size:18px; font-weight:600; opacity:.7 }
.ga4wp-scope .ga4wp-tier-desc{ font-size:13.5px; margin:14px 0 20px; color:var(--text2) }
.ga4wp-scope .ga4wp-tier-card.featured .ga4wp-tier-desc{ color:rgba(255,255,255,.85) }
.ga4wp-scope .ga4wp-tier-list{ list-style:none; margin:0; padding:0; font-size:13.5px }
.ga4wp-scope .ga4wp-tier-list li{ display:flex; align-items:center; gap:8px; margin-bottom:10px }
.ga4wp-scope .ga4wp-tier-list .mi{ font-size:17px; color:var(--emerald) }
.ga4wp-scope .ga4wp-tier-card.featured .ga4wp-tier-list .mi{ color:#fff }
@media(max-width:860px){ .ga4wp-tier-wrap{ grid-template-columns:1fr !important } }

/* =====================================================
   COUPON TICKET widget
   ===================================================== */
.ga4wp-scope .ga4wp-ticket{ background:var(--surface); border-radius:var(--r-lg); position:relative; box-shadow:var(--sh-sm); border:1.5px dashed var(--border) }
.ga4wp-scope .ga4wp-ticket-top{ padding:24px 22px 20px }
.ga4wp-scope .ga4wp-ticket-tag{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; margin-bottom:14px }
.ga4wp-scope .ga4wp-ticket-tag--brand{ background:var(--brand-soft); color:var(--brand) }
.ga4wp-scope .ga4wp-ticket-tag--emerald{ background:var(--emerald-soft); color:var(--emerald) }
.ga4wp-scope .ga4wp-ticket-tag--amber{ background:var(--amber-soft); color:var(--amber) }
.ga4wp-scope .ga4wp-ticket-tag--violet{ background:var(--violet-soft); color:var(--violet) }
.ga4wp-scope .ga4wp-ticket-top h3{ font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:var(--text1); margin-bottom:8px }
.ga4wp-scope .ga4wp-ticket-top p{ font-size:13px; color:var(--text3); margin:0 }
.ga4wp-scope .ga4wp-ticket-perf{ position:relative; height:0; border-top:1.5px dashed var(--border); margin:0 22px }
.ga4wp-scope .ga4wp-ticket-perf::before,.ga4wp-scope .ga4wp-ticket-perf::after{ content:''; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background:var(--bg,#F4F6FA) }
.ga4wp-scope .ga4wp-ticket-perf::before{ left:-33px }
.ga4wp-scope .ga4wp-ticket-perf::after{ right:-33px }
.ga4wp-scope .ga4wp-ticket-bottom{ padding:20px 22px 24px; display:flex; align-items:center; justify-content:space-between; gap:10px }
.ga4wp-scope .ga4wp-ticket-code{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:17px; color:var(--text1); letter-spacing:.5px }
.ga4wp-scope .ga4wp-ticket-off{ font-family:'Sora',sans-serif; font-weight:800; font-size:14px; color:var(--brand) }
.ga4wp-scope .ga4wp-ticket-terms{ font-size:11.5px; color:var(--text3); padding:0 22px 20px }
.ga4wp-scope .ga4wp-ticket-copy{ background:var(--surface2) !important; border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:11px; font-weight:700; color:var(--text2) !important; cursor:pointer; display:flex; align-items:center; gap:4px; font-family:'Inter',sans-serif }
.ga4wp-scope .ga4wp-ticket-copy .mi{ font-size:14px }
.ga4wp-scope .ga4wp-ticket-copy:hover{ border-color:var(--brand) !important; color:var(--brand) !important }
.ga4wp-scope .ga4wp-ticket-copy.copied{ background:var(--emerald-soft) !important; color:var(--emerald) !important; border-color:var(--emerald-bdr) !important }
@media(max-width:860px){ .ga4wp-ticket-grid{ grid-template-columns:1fr 1fr !important } }
@media(max-width:560px){ .ga4wp-ticket-grid{ grid-template-columns:1fr !important } }

/* =====================================================
   TIMELINE widget — horizontal stepper + vertical timeline
   ===================================================== */
.ga4wp-scope .ga4wp-stepper-h{ display:grid; grid-template-columns:repeat(4,1fr); position:relative; margin-top:16px }
.ga4wp-scope .ga4wp-stepper-h::before{ content:''; position:absolute; top:26px; left:12.5%; right:12.5%; height:2px; background:var(--border); z-index:0 }
.ga4wp-scope .ga4wp-sth-step{ position:relative; z-index:1; text-align:center; padding:0 12px }
.ga4wp-scope .ga4wp-sth-num{ width:52px; height:52px; border-radius:50%; background:var(--surface); border:2px solid var(--brand); color:var(--brand); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-family:'Sora',sans-serif; font-weight:800; font-size:18px }
.ga4wp-scope .ga4wp-sth-step h3{ font-size:15px; margin-bottom:6px; color:var(--text1) }
.ga4wp-scope .ga4wp-sth-step p{ font-size:13px; color:var(--text3); margin:0 }
@media(max-width:860px){ .ga4wp-stepper-h{ grid-template-columns:1fr 1fr; gap:32px 0 } .ga4wp-stepper-h::before{ display:none } }
@media(max-width:560px){ .ga4wp-stepper-h{ grid-template-columns:1fr } }

.ga4wp-scope .ga4wp-timeline-v{ max-width:640px; margin:0 auto; position:relative }
.ga4wp-scope .ga4wp-timeline-v::before{ content:''; position:absolute; left:23px; top:8px; bottom:8px; width:2px; background:var(--border) }
.ga4wp-scope .ga4wp-tlv-step{ position:relative; padding-left:64px; padding-bottom:36px }
.ga4wp-scope .ga4wp-tlv-step:last-child{ padding-bottom:0 }
.ga4wp-scope .ga4wp-tlv-num{ position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%; background:var(--surface); border:2px solid var(--brand); color:var(--brand); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800 }
.ga4wp-scope .ga4wp-tlv-step--done .ga4wp-tlv-num{ background:var(--emerald); border-color:var(--emerald); color:#fff }
.ga4wp-scope .ga4wp-tlv-step--optional .ga4wp-tlv-num{ border-color:var(--amber); color:var(--amber) }
.ga4wp-scope .ga4wp-tlv-content{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh-xs) }
.ga4wp-scope .ga4wp-tlv-content h3{ font-size:15px; margin-bottom:6px; display:flex; align-items:center; gap:8px; color:var(--text1) }
.ga4wp-scope .ga4wp-tlv-badge{ font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px; background:var(--amber-soft); color:var(--amber) }
.ga4wp-scope .ga4wp-tlv-content p{ font-size:13px; color:var(--text3); margin:0 }

/* =====================================================
   CATEGORIZED FAQ widget
   ===================================================== */
.ga4wp-scope .ga4wp-faqcat-layout{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start }
.ga4wp-scope .ga4wp-faqcat-nav{ position:sticky; top:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:10px; box-shadow:var(--sh-xs) }
.ga4wp-scope .ga4wp-faqcat-navlink{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--text2) }
.ga4wp-scope .ga4wp-faqcat-navlink:hover,.ga4wp-scope .ga4wp-faqcat-navlink.active{ background:var(--brand-soft); color:var(--brand) }
.ga4wp-scope .ga4wp-faqcat-navlink .mi{ font-size:18px }
.ga4wp-scope .ga4wp-faqcat-section{ margin-bottom:56px; scroll-margin-top:24px }
.ga4wp-scope .ga4wp-faqcat-section:last-child{ margin-bottom:0 }
.ga4wp-scope .ga4wp-faqcat-title{ display:flex; align-items:center; gap:10px; margin-bottom:20px }
.ga4wp-scope .ga4wp-faqcat-title .mi{ color:var(--brand); font-size:22px }
.ga4wp-scope .ga4wp-faqcat-title h2{ font-family:'Sora',sans-serif; font-size:20px; color:var(--text1) }
.ga4wp-scope .ga4wp-faqcat-item{ border:1px solid var(--border); border-radius:var(--r); margin-bottom:10px; background:var(--surface) }
.ga4wp-scope .ga4wp-faqcat-q{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; cursor:pointer; font-family:'Sora',sans-serif; font-weight:600; font-size:14px; color:var(--text1) }
.ga4wp-scope .ga4wp-faqcat-q .mi{ color:var(--text3); transition:transform .2s; flex-shrink:0 }
.ga4wp-scope .ga4wp-faqcat-item.open .ga4wp-faqcat-q .mi{ transform:rotate(180deg); color:var(--brand) }
.ga4wp-scope .ga4wp-faqcat-a{ max-height:0; overflow:hidden; transition:max-height .25s ease }
.ga4wp-scope .ga4wp-faqcat-item.open .ga4wp-faqcat-a{ max-height:320px }
.ga4wp-scope .ga4wp-faqcat-a p{ font-size:13px; color:var(--text2); padding:0 18px 16px; margin:0 }
@media(max-width:820px){
  .ga4wp-faqcat-layout{ grid-template-columns:1fr !important }
  .ga4wp-faqcat-nav{ position:static !important; display:flex; overflow-x:auto; gap:4px }
  .ga4wp-faqcat-navlink{ white-space:nowrap }
}

/* =====================================================
   RULES LIST widget (allow / disallow, optionally a direct comparison)
   ===================================================== */
.ga4wp-scope .ga4wp-rules-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.ga4wp-scope .ga4wp-rules-wrap--vs{ grid-template-columns:1fr auto 1fr; align-items:center }
.ga4wp-scope .ga4wp-rules-card{ position:relative; border-radius:var(--r-lg); padding:28px; border:1px solid var(--border) }
.ga4wp-scope .ga4wp-rules-card--allow{ background:var(--emerald-soft); border-color:var(--emerald-bdr) }
.ga4wp-scope .ga4wp-rules-card--disallow{ background:var(--rose-soft); border-color:var(--rose-bdr) }
.ga4wp-scope .ga4wp-rules-title{ display:flex; align-items:center; gap:8px; font-family:'Sora',sans-serif; font-weight:700; font-size:15px; margin-bottom:16px }
.ga4wp-scope .ga4wp-rules-card--allow .ga4wp-rules-title{ color:#065F46 }
.ga4wp-scope .ga4wp-rules-card--disallow .ga4wp-rules-title{ color:#9F1239 }
.ga4wp-scope .ga4wp-rules-card--allow .ga4wp-rules-title .mi{ color:var(--emerald) }
.ga4wp-scope .ga4wp-rules-card--disallow .ga4wp-rules-title .mi{ color:var(--rose) }
.ga4wp-scope .ga4wp-rules-card ul{ list-style:none; margin:0; padding:0 }
.ga4wp-scope .ga4wp-rules-card li{ display:flex; gap:10px; font-size:13.5px; margin-bottom:12px; color:var(--text1) }
.ga4wp-scope .ga4wp-rules-card li .mi{ font-size:16px; flex-shrink:0; margin-top:1px }
.ga4wp-scope .ga4wp-rules-card--allow li .mi{ color:var(--emerald) }
.ga4wp-scope .ga4wp-rules-card--disallow li .mi{ color:var(--rose) }

/* Winner treatment — a visibly stronger card (border + glow) plus a
   ribbon badge, for when this widget compares your own product against
   a competitor rather than listing plain rules. */
.ga4wp-scope .ga4wp-rules-card--winner{ border:2px solid var(--brand); box-shadow:0 8px 28px rgba(67,83,255,.16); transform:translateY(-4px) }
.ga4wp-scope .ga4wp-rules-ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:5px; background:var(--brand); color:#fff; font-family:'Sora',sans-serif; font-size:11px; font-weight:700; padding:5px 14px; border-radius:20px; box-shadow:0 4px 12px rgba(67,83,255,.35); white-space:nowrap }
.ga4wp-scope .ga4wp-rules-ribbon .mi{ font-size:13px }

/* VS divider chip between the two columns */
.ga4wp-scope .ga4wp-rules-vs{ width:44px; height:44px; border-radius:50%; background:var(--surface); border:2px solid var(--border); box-shadow:var(--sh-sm); display:flex; align-items:center; justify-content:center }
.ga4wp-scope .ga4wp-rules-vs span{ font-family:'Sora',sans-serif; font-weight:800; font-size:12px; color:var(--text3); letter-spacing:.02em }

@media(max-width:700px){
  .ga4wp-scope .ga4wp-rules-wrap{ grid-template-columns:1fr !important }
  .ga4wp-scope .ga4wp-rules-wrap--vs .ga4wp-rules-vs{ margin:4px auto }
  .ga4wp-scope .ga4wp-rules-card--winner{ transform:none }
}

/* =====================================================
   RECEIPT CARD widget
   ===================================================== */
.ga4wp-scope .ga4wp-receipt{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); max-width:460px; margin:0 auto; overflow:hidden }
.ga4wp-scope .ga4wp-receipt-head{ background:var(--surface2); padding:18px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px dashed var(--border) }
.ga4wp-scope .ga4wp-receipt-head span:first-child{ font-family:'Sora',sans-serif; font-weight:700; font-size:13px; color:var(--text1) }
.ga4wp-scope .ga4wp-receipt-status{ display:inline-flex; align-items:center; gap:4px; background:var(--emerald-soft); color:var(--emerald); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px }
.ga4wp-scope .ga4wp-receipt-status .mi{ font-size:13px }
.ga4wp-scope .ga4wp-receipt-body{ padding:22px 24px }
.ga4wp-scope .ga4wp-receipt-row{ display:flex; justify-content:space-between; font-size:13px; padding:9px 0; border-bottom:1px dotted var(--border) }
.ga4wp-scope .ga4wp-receipt-row:last-child{ border-bottom:none }
.ga4wp-scope .ga4wp-receipt-row .label{ color:var(--text3) }
.ga4wp-scope .ga4wp-receipt-row .value{ color:var(--text1); font-weight:600; font-family:'IBM Plex Mono',monospace; font-size:12.5px }
.ga4wp-scope .ga4wp-receipt-total{ display:flex; justify-content:space-between; padding:16px 24px; background:var(--surface2); font-family:'Sora',sans-serif; font-weight:700; font-size:15px; color:var(--text1) }

/* =====================================================
   SECTION HEADER widget — sensible defaults, all overridable
   via Elementor style controls per-instance.
   ===================================================== */
.ga4wp-scope .ga4wp-sh-wrap{ text-align:center; margin-bottom:8px }
.ga4wp-scope .ga4wp-sh-pill{ display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:6px 14px; border-radius:20px; margin-bottom:16px }
.ga4wp-scope .ga4wp-sh-pill .mi{ font-size:16px }
.ga4wp-scope .ga4wp-sh-heading{ font-family:'Sora',sans-serif; font-weight:800; font-size:32px; color:var(--text1); margin:0 0 12px }
.ga4wp-scope .ga4wp-sh-sub{ font-family:'Inter',sans-serif; font-size:15px; color:var(--text3); max-width:560px; margin:0 auto; line-height:1.6 }

/* =====================================================
   PROMO POPUP widget — compact modal-context layout
   ===================================================== */
.ga4wp-scope .ga4wp-promo-popup{ text-align:center; padding:8px 4px; max-width:440px; margin:0 auto; font-family:'Inter',sans-serif }
.ga4wp-scope .ga4wp-promo-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:5px 13px; border-radius:20px; margin-bottom:14px }
.ga4wp-scope .ga4wp-promo-badge .mi{ font-size:15px }
.ga4wp-scope .ga4wp-promo-headline{ font-family:'Sora',sans-serif; font-weight:800; font-size:24px; line-height:1.25; color:var(--text1); margin:0 0 10px }
.ga4wp-scope .ga4wp-promo-headline span{ color:var(--brand) }
.ga4wp-scope .ga4wp-promo-subline{ font-size:13.5px; color:var(--text2); margin:0 0 18px; line-height:1.55 }

.ga4wp-scope .ga4wp-promo-scarcity{ margin-bottom:18px }
.ga4wp-scope .ga4wp-promo-scarcity-track{ height:8px; background:var(--surface2); border-radius:6px; overflow:hidden; border:1px solid var(--border) }
.ga4wp-scope .ga4wp-promo-scarcity-fill{ height:100%; background:linear-gradient(90deg,var(--brand) 0%,var(--brand-dark) 100%); border-radius:6px; transition:width .4s ease }
.ga4wp-scope .ga4wp-promo-scarcity-label{ display:flex; align-items:center; justify-content:center; gap:5px; font-size:12px; font-weight:700; color:var(--amber); margin-top:8px }
.ga4wp-scope .ga4wp-promo-scarcity-label .mi{ font-size:15px }

.ga4wp-scope .ga4wp-promo-coupon{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface2); border:1.5px dashed var(--brand); border-radius:10px; padding:12px 16px; margin-bottom:6px }
.ga4wp-scope .ga4wp-promo-code{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:18px; letter-spacing:1px; color:var(--brand) }
.ga4wp-scope .ga4wp-promo-copy{ background:var(--surface) !important; border:1px solid var(--border); border-radius:8px; padding:6px 11px; font-size:11.5px; font-weight:700; color:var(--text2) !important; cursor:pointer; display:flex; align-items:center; gap:4px; font-family:'Inter',sans-serif }
.ga4wp-scope .ga4wp-promo-copy .mi{ font-size:14px }
.ga4wp-scope .ga4wp-promo-copy:hover{ border-color:var(--brand) !important; color:var(--brand) !important }
.ga4wp-scope .ga4wp-promo-copy.copied{ background:var(--emerald-soft) !important; color:var(--emerald) !important; border-color:var(--emerald-bdr) !important }
.ga4wp-scope .ga4wp-promo-coupon-note{ font-size:11.5px; color:var(--text3); margin-bottom:18px }

.ga4wp-scope .ga4wp-promo-highlights{ list-style:none; margin:0 0 20px; padding:0; text-align:left }
.ga4wp-scope .ga4wp-promo-highlights li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text1); font-weight:500; padding:7px 0; border-bottom:1px solid var(--surface2) }
.ga4wp-scope .ga4wp-promo-highlights li:last-child{ border-bottom:none }
.ga4wp-scope .ga4wp-promo-highlights .mi{ font-size:18px; color:var(--brand); flex-shrink:0 }

.ga4wp-scope .ga4wp-promo-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--brand) !important; color:#fff !important; font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; padding:14px 24px; border-radius:10px; text-decoration:none !important; box-shadow:0 4px 14px rgba(67,83,255,.3); transition:.15s }
.ga4wp-scope .ga4wp-promo-btn:hover{ background:var(--brand-dark) !important; transform:translateY(-1px) }
.ga4wp-scope .ga4wp-promo-btn .mi{ font-size:18px }
.ga4wp-scope .ga4wp-promo-fineprint{ font-size:11px; color:var(--text3); margin-top:12px }

/* =====================================================
   HOME BANNER widget v3 — two-column hero with image + KPI overlays
   CHANGE (v3): background now lives on .ga4wp-hb-section (full width,
   no max-width) instead of .ga4wp-hb-grid (which has max-width:1180px;
   margin:0 auto) — v2's bug was the background being scoped to the
   centered content box, producing a hard edge past the content area
   instead of spanning the full section width.
   ===================================================== */
.ga4wp-scope .ga4wp-hb-section{ position:relative; width:100%; }
.ga4wp-scope .ga4wp-hb-bg--multicolor{
  background: radial-gradient(circle at 85% 15%, rgba(67,83,255,.08) 0%, transparent 45%),
              radial-gradient(circle at 10% 90%, rgba(124,58,237,.06) 0%, transparent 40%),
              #FFFFFF;
}
.ga4wp-scope .ga4wp-hb-bg--brand_tint{ background: var(--brand-soft, #ECEEFF); }
.ga4wp-scope .ga4wp-hb-bg--none{ background: transparent; }
/* .ga4wp-hb-bg--custom intentionally has no rule here — Elementor's own
   Background group control generates and targets .ga4wp-hb-section
   directly when "Custom" is selected, so this class is just a marker. */

.ga4wp-scope .ga4wp-hb-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; padding:64px 24px; max-width:1180px; margin:0 auto; }
.ga4wp-scope .ga4wp-hb-text{ }
.ga4wp-scope .ga4wp-hb-badge{ display:inline-flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:7px 15px; border-radius:22px; margin-bottom:22px }
.ga4wp-scope .ga4wp-hb-badge .mi{ font-size:16px }
.ga4wp-scope h1.ga4wp-hb-headline{ font-family:'Sora',sans-serif; font-weight:800; font-size:46px; line-height:1.14; color:var(--text1); margin:0 0 18px; letter-spacing:-.01em }
.ga4wp-scope h1.ga4wp-hb-headline span{ color:var(--brand) }
.ga4wp-scope .ga4wp-hb-subtitle{ font-family:'Inter',sans-serif; font-size:16.5px; color:var(--text2); margin:0 0 32px; max-width:520px }
.ga4wp-scope .ga4wp-hb-subtitle strong{ color:var(--text1); font-weight:700 }

.ga4wp-scope .ga4wp-hb-cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:36px }
.ga4wp-scope .ga4wp-hb-btn{ display:inline-flex; align-items:center; gap:9px; background:var(--brand) !important; color:#fff !important; font-family:'Inter',sans-serif; font-weight:700; font-size:15.5px; padding:15px 30px; border-radius:11px; text-decoration:none !important; box-shadow:0 8px 20px rgba(67,83,255,.28); transition:.15s }
.ga4wp-scope .ga4wp-hb-btn:hover{ transform:translateY(-1px) }
.ga4wp-scope .ga4wp-hb-btn .mi{ font-size:19px }
.ga4wp-scope .ga4wp-hb-link2{ font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; color:var(--text2) !important; text-decoration:underline !important; text-underline-offset:3px }
.ga4wp-scope .ga4wp-hb-link2:hover{ color:var(--brand) !important }

.ga4wp-scope .ga4wp-hb-trust{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--border) }
.ga4wp-scope .ga4wp-hb-trust-item{ display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--text3) }
.ga4wp-scope .ga4wp-hb-trust-item .mi{ font-size:16px; color:var(--amber) }

.ga4wp-scope .ga4wp-hb-visual{ position:relative }
.ga4wp-scope .ga4wp-hb-image-frame{ position:relative; border-radius:16px; box-shadow:var(--sh-lg,0 24px 60px rgba(15,23,42,.14)); overflow:visible; background:var(--surface) }
.ga4wp-scope .ga4wp-hb-image{ display:block; width:100%; height:auto; border-radius:16px }
.ga4wp-scope .ga4wp-hb-image-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; aspect-ratio:16/10; background:var(--surface2); border:2px dashed var(--border); border-radius:16px; color:var(--text3); font-family:'Inter',sans-serif; font-size:13px; text-align:center; padding:24px }
.ga4wp-scope .ga4wp-hb-image-placeholder .mi{ font-size:40px }

/* KPI chip overlays — base style (colors below are overridable via Style tab) */
.ga4wp-scope .ga4wp-hb-chip{ position:absolute; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-md,0 8px 24px rgba(15,23,42,.08)); padding:11px 15px; font-family:'Sora',sans-serif; white-space:nowrap; }
.ga4wp-scope .ga4wp-hb-chip .mi{ font-size:20px; flex-shrink:0 }
.ga4wp-scope .ga4wp-hb-chip-value{ font-weight:700; font-size:14px; color:var(--text1); line-height:1.2 }
.ga4wp-scope .ga4wp-hb-chip-label{ font-size:10.5px; color:var(--text3); font-weight:600 }

/* Per-chip icon color — matches the site-wide multi-color rotation used
   in Stats and Icon Tiles, independent of the Style tab's shared
   background/border/text color controls above. */
.ga4wp-scope .ga4wp-hb-chip--brand .mi{ color:var(--brand) }
.ga4wp-scope .ga4wp-hb-chip--emerald .mi{ color:var(--emerald) }
.ga4wp-scope .ga4wp-hb-chip--violet .mi{ color:var(--violet) }
.ga4wp-scope .ga4wp-hb-chip--amber .mi{ color:var(--amber) }

/* Keyframes — referenced via inline style (animation-name) computed per
   chip in PHP, since combining an entrance animation with the optional
   continuous float requires one single animation shorthand rather than
   two separate CSS classes (which would override each other's
   animation-name instead of combining). */
@keyframes ga4wpFadeInUp{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:translateY(0) } }
@keyframes ga4wpFadeInDown{ from{ opacity:0; transform:translateY(-18px) } to{ opacity:1; transform:translateY(0) } }
@keyframes ga4wpSlideInLeft{ from{ opacity:0; transform:translateX(-26px) } to{ opacity:1; transform:translateX(0) } }
@keyframes ga4wpSlideInRight{ from{ opacity:0; transform:translateX(26px) } to{ opacity:1; transform:translateX(0) } }
@keyframes ga4wpPopIn{ from{ opacity:0; transform:scale(.75) } to{ opacity:1; transform:scale(1) } }
@keyframes ga4wpFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

@media(max-width:960px){
  .ga4wp-scope .ga4wp-hb-grid{ grid-template-columns:1fr; gap:48px; text-align:center }
  .ga4wp-scope .ga4wp-hb-subtitle{ margin-left:auto; margin-right:auto }
  .ga4wp-scope .ga4wp-hb-cta{ justify-content:center }
  .ga4wp-scope .ga4wp-hb-trust{ justify-content:center }
  .ga4wp-scope .ga4wp-hb-image-frame{ max-width:460px; margin:0 auto }
}
@media(max-width:560px){
  .ga4wp-scope h1.ga4wp-hb-headline{ font-size:32px }
  .ga4wp-scope .ga4wp-hb-chip{ padding:8px 11px }
  .ga4wp-scope .ga4wp-hb-chip .mi{ font-size:16px }
  .ga4wp-scope .ga4wp-hb-chip-value{ font-size:12px }
  .ga4wp-scope .ga4wp-hb-chip-label{ font-size:9px }
}
@media(prefers-reduced-motion: reduce){
  .ga4wp-scope .ga4wp-hb-chip{ opacity:1; animation:none !important }
}
/* =====================================================
   COLORED ICON TILES widget — standalone, reusable

   CHANGE: default grid appearance (6 columns, 12px gap) now lives here,
   in the stylesheet, rather than as an inline style attribute on the
   element. An inline style always beats an external stylesheet rule in
   CSS specificity regardless of !important on the stylesheet side —
   which meant the widget's own Columns/Gap controls could never actually
   override it. Elementor's per-instance generated CSS (scoped to a
   unique wrapper class) is more specific than this plain class selector,
   so it now correctly overrides this default when a user picks a
   different column count or gap.
   ===================================================== */
.ga4wp-scope .ga4wp-it-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.ga4wp-scope .ga4wp-it-tile{ display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none !important; padding:16px 8px; border-radius:12px; transition:.15s }
a.ga4wp-scope.ga4wp-it-tile:hover, .ga4wp-scope a.ga4wp-it-tile:hover{ background:var(--surface2) }
.ga4wp-scope .ga4wp-it-circle{ width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center }
.ga4wp-scope .ga4wp-it-circle .mi{ font-size:26px }
.ga4wp-scope .ga4wp-it-c--brand{ background:var(--brand-soft) }
.ga4wp-scope .ga4wp-it-c--brand .mi{ color:var(--brand) }
.ga4wp-scope .ga4wp-it-c--emerald{ background:var(--emerald-soft) }
.ga4wp-scope .ga4wp-it-c--emerald .mi{ color:var(--emerald) }
.ga4wp-scope .ga4wp-it-c--violet{ background:var(--violet-soft) }
.ga4wp-scope .ga4wp-it-c--violet .mi{ color:var(--violet) }
.ga4wp-scope .ga4wp-it-c--amber{ background:var(--amber-soft) }
.ga4wp-scope .ga4wp-it-c--amber .mi{ color:var(--amber) }
.ga4wp-scope .ga4wp-it-label{ font-family:'Sora',sans-serif; font-size:13px; font-weight:700; color:var(--text1); text-align:center; line-height:1.3 }

/* Tablet/mobile column counts are handled by the widget's own responsive
   Columns control (tablet_default/mobile_default) — no hardcoded !important
   media query here, since that would silently override whatever count
   someone actually chooses per device in the widget settings. */

/* =====================================================
   POPUP CTA widget — compact button + fine print for modal contexts
   ===================================================== */
.ga4wp-scope .ga4wp-pcta{ text-align:center }
.ga4wp-scope .ga4wp-pcta-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--brand) !important; color:#fff !important; font-family:'Inter',sans-serif; font-weight:700; font-size:15px; padding:15px 24px; border-radius:11px; text-decoration:none !important; box-shadow:0 6px 18px rgba(67,83,255,.3); transition:.15s }
.ga4wp-scope .ga4wp-pcta-btn:hover{ background:var(--brand-dark) !important; transform:translateY(-1px) }
.ga4wp-scope .ga4wp-pcta-btn .mi{ font-size:19px }
.ga4wp-scope .ga4wp-pcta-fineprint{ font-size:11.5px; color:var(--text3); margin-top:12px }
.ga4wp-scope .ga4wp-pcta-trust{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:14px }
.ga4wp-scope .ga4wp-pcta-trust-item{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--text3) }
.ga4wp-scope .ga4wp-pcta-trust-item .mi{ font-size:14px; color:var(--amber) }

/* =====================================================
   LETTER MASTHEAD widget
   ===================================================== */
.ga4wp-scope .ga4wp-lm-wrap{ text-align:center; padding:16px 0 }
.ga4wp-scope .ga4wp-lm-avatar{ width:88px; height:88px; border-radius:50%; background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:var(--sh-md) }
.ga4wp-scope .ga4wp-lm-avatar .mi{ font-size:38px; color:#fff }
.ga4wp-scope .ga4wp-lm-avatar--photo{ background:none; box-shadow:var(--sh-md); overflow:hidden }
.ga4wp-scope .ga4wp-lm-avatar--photo img{ width:100%; height:100%; object-fit:cover; border-radius:50% }
.ga4wp-scope .ga4wp-lm-badge{ display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:6px 14px; border-radius:20px; margin-bottom:16px }
.ga4wp-scope .ga4wp-lm-badge .mi{ font-size:16px }
.ga4wp-scope h1.ga4wp-lm-headline{ font-family:'Sora',sans-serif; font-weight:800; font-size:34px; line-height:1.25; color:var(--text1); max-width:560px; margin:0 auto 14px }
.ga4wp-scope h1.ga4wp-lm-headline span{ color:var(--brand) }
.ga4wp-scope .ga4wp-lm-subtitle{ font-family:'Inter',sans-serif; font-size:15.5px; color:var(--text3); max-width:480px; margin:0 auto }

/* =====================================================
   FOUNDER LETTER BODY widget
   ===================================================== */
.ga4wp-scope .ga4wp-fl-wrap{ max-width:700px; margin:0 auto }
.ga4wp-scope .ga4wp-fl-body{ font-family:'Inter',sans-serif; font-size:16px; color:var(--text2); line-height:1.75 }
.ga4wp-scope .ga4wp-fl-body p{ margin:0 0 20px }
.ga4wp-scope .ga4wp-fl-body strong{ color:var(--text1) }
.ga4wp-scope .ga4wp-fl-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px }
.ga4wp-scope .ga4wp-fl-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); color:var(--text2); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; padding:7px 14px; border-radius:20px }
.ga4wp-scope .ga4wp-fl-pill .mi{ font-size:15px; color:var(--brand) }
.ga4wp-scope .ga4wp-fl-signature{ margin-top:36px; display:flex; align-items:center; gap:16px }
.ga4wp-scope .ga4wp-fl-signature--center{ justify-content:center; flex-direction:column; gap:4px }
.ga4wp-scope .ga4wp-fl-signature-name{ font-family:'Caveat',cursive; font-size:34px; font-weight:700; color:var(--brand); line-height:1 }
.ga4wp-scope .ga4wp-fl-signature-role{ font-family:'Inter',sans-serif; font-size:13px; color:var(--text3) }

/* =====================================================
   PRICING FLEXIBILITY FORM widget
   ===================================================== */
.ga4wp-scope .ga4wp-pflex{ background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%); border-radius:var(--r-xl,20px); padding:40px 36px; color:#fff }
.ga4wp-scope .ga4wp-pflex-title{ font-family:'Sora',sans-serif; color:#fff; font-size:24px; margin:0 0 12px }
.ga4wp-scope .ga4wp-pflex-body{ font-family:'Inter',sans-serif; color:rgba(255,255,255,.88); font-size:15px; margin:0 0 8px }
.ga4wp-scope .ga4wp-pflex-form{ background:#fff; border-radius:var(--r-lg,16px); padding:28px 26px; margin-top:24px; color:var(--text2) }
.ga4wp-scope .ga4wp-pflex-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px }
.ga4wp-scope .ga4wp-pflex-group{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
.ga4wp-scope .ga4wp-pflex-group--full{ grid-column:1 / -1 }
.ga4wp-scope .ga4wp-pflex-group label{ font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; color:var(--text1) }
.ga4wp-scope .ga4wp-pflex-group input, .ga4wp-scope .ga4wp-pflex-group select{ font-family:'Inter',sans-serif; font-size:14px; padding:11px 14px; border:1px solid var(--border); border-radius:9px; color:var(--text1); background:var(--surface2) }
.ga4wp-scope .ga4wp-pflex-group input:focus, .ga4wp-scope .ga4wp-pflex-group select:focus{ outline:none; border-color:var(--brand); background:#fff }
.ga4wp-scope .ga4wp-pflex-submit{ width:100%; background:var(--brand) !important; color:#fff !important; font-family:'Inter',sans-serif; font-weight:700; font-size:15px; padding:14px; border:none; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:.15s }
.ga4wp-scope .ga4wp-pflex-submit:hover{ background:var(--brand-dark) !important }
.ga4wp-scope .ga4wp-pflex-submit:disabled{ opacity:.6; cursor:default }
.ga4wp-scope .ga4wp-pflex-submit .mi{ font-size:19px }
.ga4wp-scope .ga4wp-pflex-status{ display:none; text-align:center; padding:12px; border-radius:9px; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; margin-top:14px }
.ga4wp-scope .ga4wp-pflex-status.show{ display:block }
.ga4wp-scope .ga4wp-pflex-status.success{ background:var(--emerald-soft); color:var(--emerald); border:1px solid var(--emerald-bdr) }
.ga4wp-scope .ga4wp-pflex-status.error{ background:var(--rose-soft); color:var(--rose); border:1px solid var(--rose-bdr) }
.ga4wp-scope .ga4wp-pflex-note{ font-family:'Inter',sans-serif; font-size:13px; color:rgba(255,255,255,.7); margin-top:16px; display:flex; gap:8px; align-items:flex-start }
.ga4wp-scope .ga4wp-pflex-note .mi{ font-size:17px; flex-shrink:0; margin-top:1px }
@media(max-width:640px){ .ga4wp-scope .ga4wp-pflex-row{ grid-template-columns:1fr } }

/* =====================================================
   INFO ACTION BOX widget (v2) — sits above a pricing table
   CHANGE: max-width removed from this base rule (now a responsive Style
   control instead of hardcoded); background presets and whole-box-
   clickable treatment added.
   ===================================================== */
.ga4wp-scope .ga4wp-iab{ position:relative; text-align:center; border:1px solid var(--border); border-radius:var(--r-lg,16px); padding:32px 28px; max-width:640px; margin:0 auto 40px; text-decoration:none !important; display:block }
.ga4wp-scope .ga4wp-iab-bg--brand_tint{ background:var(--brand-soft) }
.ga4wp-scope .ga4wp-iab-bg--solid{ background:var(--surface) }
/* .ga4wp-iab-bg--custom intentionally has no rule — Elementor's own
   Background group control targets .ga4wp-iab directly when selected. */
.ga4wp-scope a.ga4wp-iab--clickable{ cursor:pointer; transition:.15s }
.ga4wp-scope a.ga4wp-iab--clickable:hover{ box-shadow:var(--sh-md,0 8px 24px rgba(15,23,42,.08)); transform:translateY(-2px) }
.ga4wp-scope .ga4wp-iab-icons{ display:flex; justify-content:center; gap:10px; margin-bottom:16px }
.ga4wp-scope .ga4wp-iab-icon{ width:40px; height:40px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-xs) }
.ga4wp-scope .ga4wp-iab-icon .mi{ font-size:20px; color:var(--brand) }
.ga4wp-scope .ga4wp-iab-message{ font-family:'Sora',sans-serif; font-weight:700; font-size:18px; color:var(--text1); margin:0 0 8px }
.ga4wp-scope .ga4wp-iab-subtext{ font-family:'Inter',sans-serif; font-size:13.5px; color:var(--text2); margin:0 0 20px }
.ga4wp-scope .ga4wp-iab-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--brand) !important; color:#fff !important; font-family:'Inter',sans-serif; font-weight:700; font-size:14px; padding:12px 24px; border-radius:10px; text-decoration:none !important; transition:.15s }
.ga4wp-scope .ga4wp-iab-btn--inline{ display:inline-flex; width:auto }
.ga4wp-scope .ga4wp-iab-btn:hover{ background:var(--brand-dark) !important; transform:translateY(-1px) }
.ga4wp-scope .ga4wp-iab-btn--chip{ display:inline-flex; pointer-events:none }