/*
Theme Name: RV Dealz
Theme URI: https://rvdealz.com/
Author: Bold Stripes Digital
Author URI: https://boldstripesdigital.com/
Description: Lean custom theme for RV Dealz. Ships near-zero front-end CSS so generated per-page code renders untouched. Provides sitewide hardcoded header/footer and a modular head/body injection system. Built for a WordPress + RankMath stack.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: bsd
*/

/* ============================================================
   ACCESSIBILITY UTILITY
   .screen-reader-text for skip links. The full design system
   (resets, tokens, nav, footer) is in the GLOBAL DESIGN LAYER
   appended below.
   ============================================================ */

/* WP-required accessibility utility (skip links, etc.) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #fff;
  clip: auto !important;
  clip-path: none;
  color: #111;
  display: block;
  font-size: 1rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ============================================================
   GLOBAL DESIGN LAYER (RV Dealz)
   Tokens, resets, typography, layout utilities, nav (smart
   header), footer, buttons, cards, scroll-reveal, focus.
   The hardcoded header.php/footer.php depend on everything
   below. Page-section CSS (.bsd-hero, .bsd-intro, etc.) lives
   with the generated page code, NOT here.
   ============================================================ */

:root{
  /* ---- Official brand palette (RV Dealz Style Guide) ---- */
  --blue:        #12324e;  /* primary brand blue */
  --blue-deep:   #0b1220;  /* deeper blue: deep sections, hovers */
  --blue-light:  #2f9fd0;  /* lighter blue tint */
  --yellow:      #f2b90c;  /* accent yellow (lighter) */
  --yellow-deep: #f2b90c;  /* accent yellow (saturated) */
  --grey:        #4a5568;  /* brand grey: body text */

  /* ---- Mapped role tokens ---- */
  --dark:        #0b1220;  /* deepest surface: footer / deepest sections (blue-black) */
  --dark2:       var(--blue);      /* primary brand fills */
  --dark3:       #16273f;  /* card / surface on dark */
  --accent:      var(--blue);      /* links, highlights */
  --accent-light:#3cb8e8;  /* hovers on dark */
  --accent-dark: var(--blue-deep);
  --accent2:     var(--blue);      /* eyebrows, dividers, cursor */
  --cta:         #17a34a;        /* primary conversion button */
  --cta-hover:   #148c40;
  --cta-text:    #FFFFFF;         /* readable text on CTA button */
  --gold:        var(--yellow-deep);   /* stars / rating */

  --text:        #101a2b;  /* primary text on light */
  --text-mid:    var(--grey);          /* secondary text */
  --text-muted:  #6b7a8d;  /* captions */
  --text-invert: #e6edf7;  /* text on dark */
  --text-invert-mid:#8da0bf;

  --border:      #dce3ef;  /* subtle border on light */
  --border-strong:#b8c4d6;
  --border-dark: #1e3355;  /* border on dark */

  --light:       #f4f7fb;  /* page background (cool near-white) */
  --light2:      #FFFFFF;  /* pure card white */

  --pad-x: clamp(20px,6vw,100px);
  --pad-y: clamp(60px,8vw,112px);
  --nav-h: 74px;
  --maxw: 1200px;
  --radius: 4px;

  --font-display: 'Archivo', system-ui, sans-serif;  /* logo/heading face */
  --font-body:    'Inter', system-ui, sans-serif;     /* body + UI */

  --z-overlay: 1;
  --z-content: 2;
  --z-drawer:  99998;
  --z-nav:     99999;
}
@media (max-width:768px){
  :root{ --pad-x: clamp(16px,5vw,32px); --pad-y: clamp(48px,7vw,72px); }
}

/* ---- resets ---- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden !important; max-width:100vw; }
body{ font-family:var(--font-body); color:var(--text); background:var(--dark); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:var(--accent); text-decoration:none; }

/* Gutenberg block reset for full-bleed landing pages */
.bsd-canvas .site-content,.bsd-canvas article{ margin:0; padding:0; max-width:100%; }
.bsd-canvas article > *:first-child{ margin-top:0; }

/* ---- typography ---- */
h1,h2,h3,.display{ font-family:var(--font-display); line-height:1.06; margin:0; color:var(--text); font-weight:700; }
h2.display{ font-size:clamp(1.9rem,4vw,3.1rem); letter-spacing:.5px; text-transform:uppercase; }
h2.display .accent{ color:var(--blue); }
h3.display{ font-size:clamp(1.15rem,2vw,1.45rem); letter-spacing:.4px; text-transform:uppercase; }
p{ margin:0 0 1.1em; color:var(--text-mid); }
.lead{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--text); font-weight:500; font-family:var(--font-body); }

/* ---- layout utilities ---- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); }
.py-section{ padding:var(--pad-y) 0; }
.section-light  { background:var(--light); }
.section-white  { background:var(--light2); }
.section-blue   { background:var(--blue);  color:var(--text-invert); }
.section-darker { background:var(--dark3); color:var(--text-invert); }
.section-darkest{ background:var(--dark);  color:var(--text-invert); }
.section-blue h2.display,.section-darker h2.display,.section-darkest h2.display{ color:#fff; }
.section-blue h2.display .accent,.section-darker h2.display .accent,.section-darkest h2.display .accent{ color:var(--yellow); }
.section-blue p,.section-darker p,.section-darkest p{ color:var(--text-invert-mid); }
.section-blue h3,.section-darker h3,.section-darkest h3{ color:#fff; }

/* ---- eyebrow ---- */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.eyebrow::before{ content:''; display:block; width:26px; height:3px; background:var(--yellow-deep); flex-shrink:0; }
.section-blue .eyebrow,.section-darker .eyebrow,.section-darkest .eyebrow{ color:var(--yellow); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:.86rem; letter-spacing:.5px; text-transform:uppercase; padding:15px 26px; border-radius:var(--radius); border:2px solid transparent; text-decoration:none; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.btn-lg{ padding:17px 32px; font-size:.94rem; }
.btn-primary{ background:var(--cta); color:var(--cta-text); text-decoration:none; }
.btn-primary:hover{ background:var(--cta-hover); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn-arrow svg{ width:16px; height:16px; transition:transform .2s ease; }
.btn-arrow:hover svg{ transform:translateX(4px); }

/* ---- cards ---- */
.card{ background:var(--light2); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card:hover{ border-color:var(--blue); transform:translateY(-5px); box-shadow:0 18px 40px -24px rgba(18,50,78,.35); }

/* ---- review stars shell ---- */
.bsd-stars{ display:inline-flex; gap:2px; }
.bsd-stars svg{ width:15px !important; height:15px !important; }
.bsd-svc-ico{ flex-shrink:0; }

/* ---- scroll reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .bsd-nav{ transition:none !important; }
}

/* =========================================================================
   SMART HEADER / NAV  (markup injected by Snippet 1)
   Visible at load; hides on scroll-down; reveals on scroll-up.
   ========================================================================= */
.bsd-nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x); background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--border);
  transform:translateY(0); transition:transform .35s ease, box-shadow .3s ease;
  will-change:transform;
}
.bsd-nav.is-hidden{ transform:translateY(-100%); }     /* slid out (scroll down) */
.bsd-nav.is-scrolled{ box-shadow:0 8px 24px -16px rgba(7,17,53,.4); }
/* Shared control height so logo, CTA, and burger align top & bottom
   and read as the same height in the bar. */
.bsd-nav-logo{ display:inline-flex; align-items:center; height:42px; }
.bsd-nav-logo img{ height:42px; width:auto; display:block; }
.bsd-nav-links{ display:flex; align-items:center; gap:28px; margin:0; padding:0; list-style:none; }
.bsd-nav-links a{ font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text); }
.bsd-nav-links a:hover{ color:var(--blue-light); }
.bsd-nav-end{ display:flex; align-items:center; gap:16px; }
/* Header CTA: compact, contained, matched to the 42px control height. */
.bsd-nav-end .btn-primary{
  height:42px; padding:0 18px; font-size:.78rem; line-height:1; border-radius:var(--radius);
  white-space:nowrap; display:inline-flex; align-items:center; align-self:center;
}
.bsd-nav-phone{ font-family:var(--font-display); font-weight:700; color:var(--text); font-size:.82rem; letter-spacing:.5px; display:inline-flex; align-items:center; gap:8px; }
.bsd-nav-phone svg{ width:16px; height:16px; }
.bsd-nav-phone:hover{ color:var(--blue); }

/* services dropdown */
.bsd-nav-drop{ position:relative; }
.bsd-nav-drop > a{ display:inline-flex; align-items:center; gap:6px; }
.bsd-nav-drop > a svg{ width:12px; height:12px; transition:transform .2s ease; }
.bsd-nav-drop:hover > a svg{ transform:rotate(180deg); }
.bsd-nav-dropwrap{ position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:14px; opacity:0; visibility:hidden; transition:opacity .18s ease; }
.bsd-nav-drop:hover .bsd-nav-dropwrap{ opacity:1; visibility:visible; }
.bsd-nav-dropinner{ background:var(--light2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 24px 50px -28px rgba(7,17,53,.45); padding:10px; min-width:250px; }
.bsd-nav-dropinner a{ display:block; padding:9px 14px; border-radius:3px; font-weight:700; font-size:.74rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text); }
.bsd-nav-dropinner a:hover{ background:var(--light); color:var(--blue-light); }

/* ── Morphing hamburger → X (three CSS-drawn bars) ──
   The burger IS the toggle. On .is-open the bars morph into
   an X in place: top bar drops + rotates +45°, middle fades and
   scales to zero, bottom bar rises + rotates −45°. Springy easing
   with a slight per-bar stagger. No separate close button, no SVG. */
.bsd-burger{
  display:none; position:relative;
  width:42px; height:42px; padding:0;
  border:1px solid var(--border-strong);
  background:transparent; border-radius:var(--radius);
  cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.bsd-burger span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--dark); transform-origin:center;
  transition:
    transform .38s cubic-bezier(.68,-0.55,.27,1.55),
    opacity   .2s ease;
}
/* Springy stagger: middle bar collapses first, outer bars follow and
   rotate into the X a beat later for a bouncy, layered feel. */
.bsd-burger span:nth-child(1){ transition-delay:.08s; }
.bsd-burger span:nth-child(2){ transition-delay:0s; }
.bsd-burger span:nth-child(3){ transition-delay:.08s; }

/* JS toggles the .is-open class on the burger. */
.bsd-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.bsd-burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.bsd-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* When the drawer is open, the burger bars would be dark-on-dark, so
   flip them to light to stay visible against the drawer. */
.bsd-burger.is-open span{ background:#e6edf7; }

/* mobile drawer */
.bsd-drawer{ position:fixed; inset:0; z-index:var(--z-drawer); background:var(--dark); color:#fff; transform:translateX(100%); transition:transform .3s ease; padding:calc(var(--nav-h) + 20px) var(--pad-x) 40px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.bsd-drawer.is-open{ transform:none; }
.bsd-drawer a{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:.5px; text-transform:uppercase; color:#fff; padding:14px 18px; border-bottom:1px solid var(--border-dark); }
.bsd-drawer .bsd-drawer-cta{ margin-top:24px; border:none; font-size:.94rem; }
.bsd-drawer-phone{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-family:var(--font-display); font-weight:700; margin-top:18px; border:none !important; }
.bsd-drawer-phone svg{ width:18px; height:18px; }

@media (max-width:980px){
  .bsd-nav-links,.bsd-nav-drop{ display:none; }
  .bsd-nav-phone-label{ display:none; }
.bsd-nav-cta{ display:none !important; }
  .bsd-burger{ display:inline-flex; }
}

/* =========================================================================
   FOOTER  (markup injected by Snippet 2)
   ========================================================================= */
.bsd-footer{ background:var(--dark); color:var(--text-invert); padding:var(--pad-y) var(--pad-x) 0; }
.bsd-footer-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:56px; }
.bsd-footer h4{ font-family:var(--font-display); font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--yellow); margin:0 0 18px; font-weight:700; }
.bsd-footer-logo{ height:46px; width:auto; margin-bottom:18px; }
.bsd-footer p,.bsd-footer address{ color:var(--text-invert-mid); font-style:normal; font-size:.92rem; line-height:1.7; }
.bsd-footer ul{ list-style:none; margin:0; padding:0; }
.bsd-footer ul li{ margin-bottom:11px; color:var(--text-invert-mid); font-size:.92rem; }
.bsd-footer a{ color:var(--text-invert-mid); font-size:.92rem; }
.bsd-footer a:hover{ color:#fff; }
.bsd-footer-nap a{ color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); letter-spacing:.5px; font-size:.92rem; }
.bsd-footer-nap svg{ width:15px; height:15px; flex-shrink:0; }
.bsd-footer-cta{ margin-top:16px; color:var(--cta-text) !important; }
.bsd-footer-bottom{ max-width:var(--maxw); margin:0 auto; margin-top:48px; padding:24px 0; border-top:1px solid var(--border-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.84rem; color:var(--text-muted); }
.bsd-footer-bottom a{ color:var(--text-muted); }
@media (max-width:860px){ .bsd-footer-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:540px){
  .bsd-footer-grid{ grid-template-columns:1fr; }
  /* CTA spans the column on mobile; column padding/margins unchanged. */
  .bsd-footer-cta{ display:flex; width:100%; justify-content:center; }
}

/* ---- focus visibility ---- */
:focus-visible{ outline:3px solid var(--yellow-deep); outline-offset:3px; border-radius:2px; }

/* ============================================================
   DRAWER STACKING FIX
   The close button sat at z-index 99999, TIED with the fixed
   nav, which occupies the same top-right corner. Equal z-index
   let the nav intercept taps on the close button. Fix: raise
   the close button above the nav, and hide the nav while the
   drawer is open so nothing overlaps the X.
   ============================================================ */
.bsd-drawer-close{
  position:absolute; top:18px; right:var(--pad-x);
  width:46px; height:46px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid var(--border-dark);
  border-radius:var(--radius); cursor:pointer;
  z-index:100001 !important; /* above nav (99999) and drawer */
  transition:background .18s ease, border-color .18s ease;
}
.bsd-drawer-close:hover{ background:rgba(255,255,255,.16); border-color:var(--yellow-deep); }
.bsd-drawer-close svg{ width:26px; height:26px; display:block; }

/* While the drawer is open, KEEP the nav visible and lift it above
   the drawer so the burger morphs to an X in place and stays tappable
   as the close control. The drawer reserves top space via its
   padding-top, so links never hide beneath the nav. */
body.bsd-drawer-open .bsd-nav{
  transform:none !important;        /* cancel smart-header hide */
  z-index:calc(var(--z-drawer) + 2) !important;  /* above the drawer */
  background:transparent !important; /* let the dark drawer show through */
  border-bottom-color:transparent !important;
  box-shadow:none !important;
}
/* Keep the morphing burger above the drawer and interactive. */
body.bsd-drawer-open .bsd-burger{ z-index:calc(var(--z-drawer) + 3) !important; }

/* ============================================================
   CLOSE-BUTTON SVG POINTER FIX
   LiteSpeed's HTML/lazyload processing can detach the inline
   <svg> inside the close button, so taps land on an orphaned
   <svg>/<line> that closest() can't trace back to the button.
   Making the icon non-interactive forces every tap in that
   area to resolve to the <button> itself. Same applied to the
   burger icon for consistency.
   ============================================================ */
.bsd-drawer-close svg, .bsd-drawer-close svg *{ pointer-events:none; }
/* Taps on the burger bars resolve to the button itself, never to a
   child span — keeps the toggle reliable regardless of LiteSpeed. */
.bsd-burger span{ pointer-events:none; }
.bsd-nav-phone svg, .bsd-drawer-phone svg{ pointer-events:none; }

/* ============================================================
   RV DEALZ — HOMEPAGE SECTION CSS (below the fold)
   Trust strip + hero above-fold CSS stay inline with the page.
   Every value references the theme's existing tokens.
   ============================================================ */

/* ---- section intro + page lead paragraph ---- */
.section-head{ max-width:760px; margin:0 0 clamp(34px,4vw,54px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.lead-p{ font-size:1.1rem; color:var(--text-mid); margin-top:14px; }
.section-blue .lead-p,.section-darker .lead-p,.section-darkest .lead-p{ color:var(--text-invert-mid); }

/* ---- inline SVG icons (three-layer rule) ---- */
.icon{ width:24px; height:24px; flex-shrink:0; }
.icon *{ stroke:var(--blue-light); }

/* ---- arrow button affordance ---- */
.btn-block{ width:100%; }
.btn-arrow .arw{ transition:transform .2s ease; display:inline-block; }
.btn-arrow:hover .arw{ transform:translateX(4px); }

/* ---- how it works (numbered steps) ---- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
.step{ position:relative; padding-top:8px; }
.step-num{ font-family:var(--font-display); font-weight:900; font-size:2.6rem; color:var(--blue-light); line-height:1; margin-bottom:14px; display:block; }
.step-num::after{ content:""; display:block; width:40px; height:3px; background:var(--gold); margin-top:10px; }
.step h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,2vw,1.7rem); margin:0 0 8px; text-transform:none; letter-spacing:0; }
.step p{ color:var(--text-mid); margin:0; }

/* ---- RV type cards ---- */
.type-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.type-card{ background:var(--dark3); border:1px solid var(--border-dark); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--text-invert); display:flex; flex-direction:column; transition:border-color .2s, transform .2s; }
.type-card:hover{ border-color:var(--blue-light); transform:translateY(-5px); }
.type-card .img-wrap{ aspect-ratio:8/5; background:linear-gradient(135deg,var(--dark2),var(--dark)); position:relative; }
.type-card .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.type-card .tag{ position:absolute; top:12px; left:0; background:var(--gold); color:var(--dark); font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.06em; padding:5px 12px 5px 14px; clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%); }
.type-card .body{ padding:18px 20px 22px; }
.type-card h3{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; margin:0 0 4px; color:#fff; text-transform:none; letter-spacing:0; }
.type-card p{ font-size:.9rem; color:var(--text-invert-mid); margin:0 0 12px; }
.type-card .go{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--blue-light); }

/* ---- versus / anti-chain ---- */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); margin-top:10px; }
.vs-card{ border-radius:var(--radius); padding:clamp(24px,3vw,36px); }
.vs-card h3{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; margin:0 0 18px; display:flex; align-items:center; gap:10px; text-transform:none; letter-spacing:0; }
.vs-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.vs-card li{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; }
.vs-chain{ background:var(--dark); border:1px solid var(--border-dark); color:var(--text-invert-mid); }
.vs-chain h3{ color:#fff; }
.vs-local{ background:linear-gradient(160deg,#14603a,#0e4d2f); border:1px solid rgba(23,163,74,.4); color:#d8f0e2; }
.vs-local h3{ color:#fff; }
.mark{ flex-shrink:0; margin-top:2px; }

/* ---- brand chips ---- */
.brand-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px; }
.brand-chip{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--text); background:#fff; border:1px solid var(--border); padding:10px 20px; border-radius:40px; }

/* ---- blog teaser ---- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.post-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--text); display:flex; flex-direction:column; transition:border-color .2s, transform .2s, box-shadow .2s; }
.post-card:hover{ border-color:var(--blue-light); transform:translateY(-4px); box-shadow:0 16px 36px rgba(16,26,43,.10); }
.post-card .img-wrap{ aspect-ratio:16/9; background:var(--light2); }
.post-card .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.post-card .body{ padding:20px 22px 24px; }
.post-card .cat{ font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-light); }
.post-card h3{ font-family:var(--font-display); font-weight:800; font-size:1.18rem; margin:8px 0 0; line-height:1.25; text-transform:none; letter-spacing:0; }

/* ---- final CTA ---- */
.cta-final{ text-align:center; }
.cta-final .lead-p{ max-width:620px; margin-left:auto; margin-right:auto; margin-bottom:30px; }
.cta-form-wrap{ max-width:640px; margin:0 auto; text-align:left; }

/* ---- lead form card (price-tag signature) ---- */
.lead-card{ background:#fff; border-radius:var(--radius); box-shadow:0 24px 60px rgba(0,0,0,.35); padding:clamp(22px,2.4vw,30px); position:relative; }
.lead-card::before{ content:"GET MY LOWEST PRICE"; position:absolute; top:-14px; left:24px; background:var(--cta); color:var(--cta-text); font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.1em; padding:6px 14px 6px 22px; border-radius:2px; }
.lead-card::after{ content:""; position:absolute; top:-6px; left:12px; width:8px; height:8px; border-radius:50%; background:#fff; }
.lead-card::after {
    display: none;
}

/* ---- sticky mobile CTA ---- */
.sticky-cta{ position:fixed; bottom:0; left:0; right:0; z-index:90; display:none; align-items:center; gap:12px; padding:12px var(--pad-x); background:var(--dark2); border-top:1px solid var(--border-dark); box-shadow:0 -4px 20px rgba(0,0,0,.3); transform:translateY(110%); transition:transform .3s ease; }
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .price-line{ flex:1; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.92rem; line-height:1.2; }
.sticky-cta .price-line span{ display:block; font-family:var(--font-body); font-weight:400; font-size:.74rem; color:var(--text-invert-mid); }

/* ---- anchor offset ---- */
[id]{ scroll-margin-top:calc(var(--nav-h) + 16px); }

/* ---- responsive ---- */
@media (max-width:1024px){
  .type-grid,.post-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .trust-strip .container{ grid-template-columns:1fr 1fr; gap:20px; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .versus{ grid-template-columns:1fr; }
  .sticky-cta{ display:flex; }
  body{ padding-bottom:68px; }
}
@media (max-width:560px){
  .type-grid,.post-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   FORMIDABLE FORMS OVERRIDES WITHIN .lead-card
   ============================================================ */
.lead-card .frm_form_field{ margin-bottom:12px; }
.lead-card .frm_primary_label{ display:block; font-size:.78rem; font-weight:600; color:var(--text-mid); margin-bottom:5px; font-family:var(--font-body); }
.lead-card .frm_required{ color:var(--cta); }
.lead-card input[type="text"],
.lead-card input[type="email"],
.lead-card input[type="tel"],
.lead-card select,
.lead-card textarea{ width:100%; font-family:var(--font-body); font-size:.98rem; color:var(--text); padding:12px 13px; border:1px solid var(--border) !important; border-radius:3px; background:var(--light); box-shadow:none; -webkit-appearance:none; appearance:none; }
.lead-card input:focus,
.lead-card select:focus,
.lead-card textarea:focus{ outline:2px solid var(--blue-light); outline-offset:1px; border-color:var(--blue-light) !important; }
.lead-card textarea{ resize:vertical; min-height:100px; }
.lead-card .frm_half{ display:inline-block; width:calc(50% - 6px); vertical-align:top; }
.lead-card .frm_first.frm_half{ margin-right:12px; }
.lead-card .frm_description{ font-size:.72rem; color:var(--text-muted); margin-top:4px; }
.lead-card select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.lead-card .frm_submit{ margin-top:16px; }
.lead-card .frm_button_submit{ display:flex; align-items:center; justify-content:center; width:100%; gap:10px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:.94rem; letter-spacing:.5px; text-transform:uppercase; padding:17px 32px; border-radius:var(--radius); border:2px solid transparent; background:var(--cta); color:var(--cta-text); text-decoration:none; transition:transform .18s ease, background .18s ease; }
.lead-card .frm_button_submit:hover{ background:var(--cta-hover); transform:translateY(-2px); }
.lead-card .frm_error_style{ color:#dc2626; font-size:.82rem; margin-top:4px; }
.lead-card .frm_message{ font-size:.92rem; padding:12px; border-radius:3px; background:rgba(23,163,74,.12); color:var(--cta-hover); margin-bottom:16px; }
.lead-card .frm_verify{ display:none; }
.lead-card fieldset{ border:0; margin:0; padding:0; }
.lead-card legend.frm_screen_reader{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; }
@media (max-width:560px){
  .lead-card .frm_half{ width:100%; display:block; }
  .lead-card .frm_first.frm_half{ margin-right:0; }
}