/* GTM-309 /pricing variant B — styles.
   ALL tokens are scoped to #pxb, never :root, so nothing leaks into Webflow's own
   base styles (see reference-webflow-mcp-build-gotchas). */
#pxb {
  --violet-25:#FCFAFF; --violet-50:#F9F5FF; --violet-100:#F4EBFF; --violet-200:#E9D7FE;
  --violet-300:#D6BBFB; --violet-600:#7F56D9; --violet-700:#6941C6; --violet-800:#53389E;
  --gray-25:#FCFCFD; --gray-50:#F9FAFB; --gray-100:#F2F4F7; --gray-200:#EAECF0;
  --gray-300:#D0D5DD; --gray-400:#98A2B3; --gray-500:#667085; --gray-600:#475467;
  --gray-700:#344054; --gray-800:#182230; --gray-900:#101828;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.10),0 1px 2px rgba(16,24,40,.06);
  --shadow-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);
  --shadow-xl:0 20px 24px -4px rgba(16,24,40,.08),0 8px 8px -4px rgba(16,24,40,.03);
  --shadow-2xl:0 24px 48px -12px rgba(16,24,40,.18);
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-display:"Arial Rounded MT Bold","Arial Rounded MT","Helvetica Rounded","Nunito",ui-rounded,system-ui,sans-serif;
  font-family:var(--font-body); color:var(--gray-900); background:#fff;
  -webkit-font-smoothing:antialiased;
}
/* Webflow ships a global a{text-align:center} on some classes — neutralise inside the variant only.
   See reference-webflow-global-anchor-center. */
#pxb a { text-align:left; color:var(--violet-600); text-decoration:none; }
#pxb a:hover { color:var(--violet-800); text-decoration:underline; }
#pxb *, #pxb *::before, #pxb *::after { box-sizing:border-box; }
#pxb select { font-family:var(--font-body); }
#pxb button { font-family:var(--font-body); }

#pxb .pxb-plan-grid { display:grid; gap:20px; align-items:start; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ #pxb .pxb-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { #pxb .pxb-plan-grid { grid-template-columns:minmax(0,1fr); } }

#pxb .pxb-credit-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1100px){ #pxb .pxb-credit-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px) { #pxb .pxb-credit-grid { grid-template-columns:minmax(0,1fr); } }

@media (min-width:1180px){ #pxb .pxb-included-row { flex-wrap:nowrap !important; justify-content:space-between; } }

#pxb .pxb-compare-wrap { overflow:clip; }
#pxb .pxb-compare-wrap thead th:last-child { border-top-right-radius:15px; }
@media (max-width:720px){ #pxb .pxb-compare-wrap { overflow-x:auto; } }

#pxb .pxb-premium-card { grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
#pxb .pxb-premium-feats { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1000px){ #pxb .pxb-premium-card { grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px) { #pxb .pxb-premium-feats { grid-template-columns:minmax(0,1fr); } }

@media (min-width:1100px){ #pxb .pxb-hero-actions { align-items:flex-end !important; } }

/* The design's sticky table header offsets by the prototype's own 64px bar. On the real site the
   Webflow navbar is the sticky element, so the offset is set from JS at runtime (--pxb-navh). */
#pxb .pxb-compare-wrap thead th { top:var(--pxb-navh,0px); }

/* width:max-content is load-bearing. With position:fixed + left:50% and no `right`, the
   shrink-to-fit available width is only HALF the viewport, so the bar wrapped its text
   at 600px (300px available) and even at 768px (384px). max-content sizes it to its
   single-line width first; max-width then caps it to the viewport. */
#pxb .pxb-sticky { position:fixed; left:50%; bottom:20px; z-index:30;
  width:max-content; max-width:calc(100% - 32px);
  transition:transform 280ms cubic-bezier(.2,.6,.2,1),opacity 280ms cubic-bezier(.2,.6,.2,1);
  transform:translate(-50%,calc(100% + 32px)); opacity:0; pointer-events:none; }
#pxb .pxb-sticky.pxb-stuck { transform:translate(-50%,0); opacity:1; pointer-events:auto; }

#pxb .pxb-tip-pop { display:none; }
#pxb .pxb-tip:hover .pxb-tip-pop, #pxb .pxb-tip:focus-within .pxb-tip-pop { display:block; }

@media (prefers-reduced-motion:reduce){ #pxb *, #pxb *::before, #pxb *::after { transition:none !important; } }

/* ---- mobile fixes (GTM-309 QA, Sep 24 2026) ---------------------------------
   Three defects found at 375px. All three are layout-only; no copy changes. */

/* 1. Premium card stats strip. Three columns inside the already-narrow dark card
      crushed the labels to 25px wide / 72px tall ("rows of delivered data" over
      four lines). Stack below 600px. */
#pxb .pxb-premium-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pxb .pxb-premium-stat + .pxb-premium-stat { border-left: 1px solid var(--gray-700); }
@media (max-width: 600px) {
  #pxb .pxb-premium-stats { grid-template-columns: minmax(0, 1fr); }
  #pxb .pxb-premium-stat + .pxb-premium-stat { border-left: 0; border-top: 1px solid var(--gray-700); }
  #pxb .pxb-premium-stat { padding: 16px 28px; }
}

/* 2. Sticky CTA bar. At 375px the avatar (40px) + button (149px) + gaps left ~43px
      for the text, which wrapped over 7 lines and made the bar 158px tall. Drop the
      message on narrow screens and keep the avatar + button. */
#pxb .pxb-sticky-inner { min-width: 0; }
#pxb .pxb-sticky-text { min-width: 0; }
@media (max-width: 560px) {
  #pxb .pxb-sticky-text { display: none; }
  #pxb .pxb-sticky-inner { gap: 12px; }
}

/* 3. Compare table. Below 720px the table (min-width 680px) scrolls horizontally
      inside its wrapper, with ~355px hidden off-screen at 375px and no affordance.
      NOTE: the sticky column headers cannot stick to the viewport at these widths —
      overflow-x:auto forces overflow-y to a scroll container, so `position:sticky`
      on thead resolves against the wrapper, not the page. The sticky FIRST COLUMN
      does work (verified), so row labels stay visible while swiping. */
#pxb .pxb-compare-hint { display: none; }
/* Below 720px the wrapper becomes a horizontal scroll container, so `top: --pxb-navh`
   on the header resolves against the WRAPPER rather than the page: it pushed the header
   down 65px, opening a white gap above it and overlapping the first body row. Drop the
   vertical offset here but keep `position: sticky` so the corner cell still pins
   horizontally with the label column. */
@media (max-width: 720px) {
  #pxb .pxb-compare-wrap thead th { top: auto; }
}

@media (max-width: 720px) {
  #pxb .pxb-compare-hint {
    display: block; margin: 0 0 10px; font-size: 13px; line-height: 18px;
    font-weight: 600; color: var(--violet-700);
  }
}