/* pf-polish.css  v=6  — PowerFunnels premium polish (sandbox, site-wide) */

:root{
  /* easing */
  --pf-ease: cubic-bezier(.22,1,.36,1);
  --pf-ease-spring: cubic-bezier(.34,1.56,.64,1);
  /* elevation — single cool-navy temperature, 3 levels */
  --pf-shadow-sm: 0 1px 2px rgba(8,17,31,.04), 0 2px 8px rgba(8,17,31,.05);
  --pf-shadow-md: 0 4px 12px rgba(8,17,31,.06), 0 12px 32px rgba(8,17,31,.08);
  --pf-shadow-lg: 0 8px 24px rgba(8,17,31,.08), 0 24px 64px rgba(8,17,31,.12);
  --pf-glow-blue: 0 0 0 1px rgba(37,99,255,.22), 0 14px 44px rgba(37,99,255,.18);
  /* geometry */
  --pf-r: 20px;
  --pf-r-inner: 14px;
  --pf-hairline: rgba(8,17,31,.07);
  --pf-hairline-d: rgba(255,255,255,.09);
  /* brand */
  --pf-navy:#08111F; --pf-blue:#2563FF; --pf-teal:#007C75;
}

/* ============ A. SUBSTANCE: typography ============ */
/* Beats the Bricks core mobile clobber (#brx-content .brxe-text-basic{font-size:14px!important}, spec 1,1,0)
   by duplicating the data attr to reach spec 1,2,0+ with !important. */
#brx-content [data-pf-display][data-pf-display]{
  letter-spacing:-.02em !important; line-height:1.05 !important; font-weight:800 !important;
}
#brx-content h1[data-pf-display][data-pf-display]{ font-size:clamp(40px,5.2vw,68px) !important; }
#brx-content h2[data-pf-display][data-pf-display]{ font-size:clamp(30px,4.2vw,52px) !important; }
#brx-content [data-pf-eyebrow]{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:11px !important; font-weight:600 !important;
  text-transform:uppercase; letter-spacing:.2em !important; line-height:1 !important;
  padding:6px 12px; border-radius:999px;
  color:var(--pf-blue); background:rgba(37,99,255,.07);
  border:1px solid rgba(37,99,255,.16);
}

/* ============ B. REVEAL (scroll-in-only; FOUC-safe) ============ */
/* No pre-hide rule exists. The hidden state applies ONLY after JS adds .pfp-hidden,
   and JS adds it ONLY to elements that were off-screen at init. JS fail => visible. */
[data-pf-reveal].pfp-hidden{ opacity:0; transform:translateY(24px); filter:blur(6px); }
[data-pf-reveal].pfp-in{
  opacity:1; transform:none; filter:none;
  transition:opacity .7s var(--pf-ease), transform .7s var(--pf-ease), filter .7s var(--pf-ease);
}

/* ============ C. CARD ELEVATION (additive ring + soft shadow) ============ */
/* The converted Bricks cards already carry per-element #brxe-id bg/border/padding
   (specificity 1,0,0), which would override an attribute-level (0,1,0) frame and
   could clobber their internal padding. So elevation is purely ADDITIVE here:
   box-shadow + a hairline ring are properties the #id rules never set, and the
   #brx-content prefix (1,1,0) lets the ring win cleanly. No bg/border/padding override. */
#brx-content [data-pfp-bezel]{ box-shadow:var(--pf-shadow-sm), 0 0 0 1px var(--pf-hairline); }
#brx-content [data-pfp-bezel="dark"]{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.28); }
/* lift on a link/text-link wrapper: the <a> is inline by default, so block it
   for transform + ::after shadow to size to the card. */
#brx-content a[data-pfp-lift]{ display:block; }

/* ============ D. HOVER LIFT (transform-only; shadow via pseudo cross-fade) ============ */
[data-pfp-lift] { position:relative; isolation:isolate; transition:transform .4s var(--pf-ease); transform:translateZ(0); }
[data-pfp-lift]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  box-shadow:var(--pf-shadow-lg); opacity:0; transition:opacity .4s var(--pf-ease); pointer-events:none;
}
[data-pfp-lift] > *{ position:relative; z-index:1; }
@media (hover:hover){
  [data-pfp-lift]:hover{ transform:translateY(-4px); will-change:transform; }
  [data-pfp-lift]:hover::after{ opacity:1; }
}

/* ============ E. COUNT-UP (zero CLS) ============ */
#brx-content [data-pf-count][data-pf-count]{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  display:inline-block; min-width:2.2ch; /* reserve so 0->N never reflows */
}

/* ============ F. MAGNETIC CTA (button-in-button) ============ */
[data-pf-cta]{ --pf-mx:0px; --pf-my:0px; }
.pfp-cta-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-left:10px; border-radius:999px;
  background:rgba(255,255,255,.16); transition:transform .35s var(--pf-ease-spring);
}
@media (hover:hover){
  [data-pf-cta].pfp-magnetic{ transform:translate(var(--pf-mx),var(--pf-my)); transition:transform .22s var(--pf-ease); }
  [data-pf-cta].pfp-magnetic:active{ transform:translate(var(--pf-mx),var(--pf-my)) scale(.985); }
  [data-pf-cta]:hover .pfp-cta-ico{ transform:translate(3px,-2px) scale(1.06); }
}

/* ============ G. HERO MESH (transform on a pre-rasterized orb layer; play gated by JS) ============ */
[data-pf-mesh]{ position:relative; overflow:clip; } /* clip not hidden (sticky-safe) */
[data-pf-mesh]::before{
  content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(37,99,255,.28), transparent 70%),
    radial-gradient(34% 34% at 80% 70%, rgba(0,124,117,.22), transparent 70%);
  filter:blur(8px); contain:paint;
}
[data-pf-mesh].pfp-mesh-play::before{ animation:pf-drift 26s var(--pf-ease) infinite alternate; }
@keyframes pf-drift{ from{transform:translate3d(-3%,-2%,0) scale(1.02)} to{transform:translate3d(4%,3%,0) scale(1.08)} }
[data-pf-mesh] > *{ position:relative; z-index:1; }

/* ============ G2. PRICING "popular" plan signal (resting blue glow; intensify on hover) ============ */
/* Additive box-shadow only — no fake scarcity, the "Most popular" badge is real page content. */
#brx-content [data-pf-popular]{ box-shadow:var(--pf-glow-blue); }
@media (hover:hover){
  #brx-content [data-pf-popular]:hover{ box-shadow:0 0 0 1px rgba(37,99,255,.42), 0 22px 60px rgba(37,99,255,.30); }
}

/* ============ G3. BENTO moments (scoped, id-targeted; desktop only, collapse <=768) ============ */
@media (min-width:769px){
  /* Home "We specialize" — HVAC becomes a featured 2-wide flagship tile */
  #brx-content #brxe-44428e{ grid-template-columns:repeat(4,1fr); }
  #brx-content #brxe-8005c7{ grid-column:span 2; }
  /* Results "wins" — first win becomes a full-width feature banner over a 3-up row */
  #brx-content #brxe-04e2b0{ grid-template-columns:repeat(3,1fr); }
  #brx-content #brxe-04e2b0 > #brxe-5667ca{ grid-column:1 / -1; }
}

/* ============ G4. MOBILE/TABLET card-grid centering ============ */
/* Card grids (those wrapping tagged cards) shrink-wrap as flex items on small
   screens and pin LEFT with empty space. Fill width + center the tracks on
   tablet; collapse to 1 column + center tile content on mobile. Checklist cards
   (pricing plans / service feature lists) keep LEFT-aligned text for readability
   via :not(:has(svg[data-lucide^="check"])). */
@media (max-width:1024px){
  #brx-content [class*="brxe-"]:has(> [data-pfp-lift]),
  #brx-content [class*="brxe-"]:has(> [data-pfp-bezel]){
    width:100% !important; justify-content:center !important;
  }
}
@media (max-width:767px){
  #brx-content [class*="brxe-"]:has(> [data-pfp-lift]),
  #brx-content [class*="brxe-"]:has(> [data-pfp-bezel]){ grid-template-columns:1fr !important; }
  /* tile cards (no checklist) → centered vertical stack (icon on top), so
     horizontal icon+text cards don't read as "icon-left, text-centered". */
  #brx-content [data-pfp-lift]:not(:has(svg[data-lucide^="check"])),
  #brx-content [data-pfp-bezel]:not(:has(svg[data-lucide^="check"])){
    display:flex !important; flex-direction:column !important; align-items:center !important;
  }
  #brx-content [data-pfp-lift]:not(:has(svg[data-lucide^="check"])),
  #brx-content [data-pfp-lift]:not(:has(svg[data-lucide^="check"])) *,
  #brx-content [data-pfp-bezel]:not(:has(svg[data-lucide^="check"])),
  #brx-content [data-pfp-bezel]:not(:has(svg[data-lucide^="check"])) *{
    text-align:center !important;
  }
  #brx-content [data-pfp-lift]:not(:has(svg[data-lucide^="check"])) *,
  #brx-content [data-pfp-bezel]:not(:has(svg[data-lucide^="check"])) *{
    align-items:center !important; justify-content:center !important;
  }
  /* Home benchmark (heading column + circle badge) → stacked + centered */
  #brx-content #brxe-48253b{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:24px !important; }
  #brx-content #brxe-48253b, #brx-content #brxe-48253b *{ text-align:center !important; }
}

/* ============ H. focus-visible ============ */
#brx-content a:focus-visible, #brx-content button:focus-visible, #brx-content [tabindex]:focus-visible{
  outline:none; box-shadow:var(--pf-glow-blue); border-radius:8px;
}

/* ============ smooth anchor scroll (RM-gated) ============ */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

/* ============ REDUCED MOTION: kill everything ============ */
@media (prefers-reduced-motion:reduce){
  [data-pf-reveal].pfp-hidden{ opacity:1 !important; transform:none !important; filter:none !important; }
  [data-pf-reveal]{ transition:none !important; }
  [data-pfp-lift]{ transition:none !important; }
  [data-pf-mesh].pfp-mesh-play::before{ animation:none !important; }
  .pfp-cta-ico{ transition:none !important; }
}

/* ============ MOBILE: disable depth-heavy / motion-heavy ============ */
@media (max-width:1024px){
  [data-pf-mesh].pfp-mesh-play::before{ animation:none; } /* orb static on mobile */
}