/* >>> HBZ DESIGN LAYER START <<< */




/* ========================================================
   tokens + component classes
   ======================================================== */
/* ============================================================
   Hybrid Battery Hero — design layer for WordPress.
   Light theme ONLY. The [data-theme="dark"] block from the source
   project is deliberately omitted (user decision: no dark mode).

   :root tokens and the component classes below are copied VERBATIM
   from the source project's css/style.css so the rebuilt header and
   footer render pixel-identically. Tailwind utilities used by the
   markup are shipped separately in hbz-tw.css (generated by
   tailwindcss 3.4.16 with prefix "hbz-").

   Source of truth: batterydeep/css/style.css  (--c-green is 20 126 61,
   NOT the #189147 that DESIGN.md documented).
   ============================================================ */

:root {
  --c-bone: 244 246 242;
  --c-card: 255 255 255;
  --c-ink: 12 18 14;
  --c-strip: 12 18 14;
  --c-pine: 10 46 26;
  --c-green: 20 126 61;
  --c-green-bright: 35 182 88;
  --c-mint: 234 246 238;
  --c-line: 226 232 224;
  --c-muted: 92 105 98;
  --c-star: 233 179 8;
}

/* Page canvas, matching the source body. */
body {
  background-color: rgb(var(--c-bone));
}

/* Inline SVG icons: width/height come from the icon's own font-size
   (1em), exactly like <iconify-icon> in the source. */
.hbz-icon {
  display: block;
  flex: none;
}

/* ---- Focus ---- */
:focus-visible {
  outline: 2px solid rgb(var(--c-green));
  outline-offset: 2px;
  border-radius: 2px;
}

/* The sticky carrier (.elementor-location-header) and the scrolled-state shadow
   both live in region-css.css, beside the region rules they belong to, so the
   header's geometry has a single source of truth. */

/* ---- Status dot (utility strip) ---- */
.dot-live {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgb(var(--c-green-bright));
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .dot-live::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    border: 1px solid rgb(var(--c-green-bright) / 0.7);
    animation: dot-ping 2.2s ease-out infinite;
  }
  @keyframes dot-ping {
    0% { transform: scale(0.6); opacity: 0.9; }
    70%, 100% { transform: scale(1.4); opacity: 0; }
  }
}

/* ---- Buttons, labels, chips, nav ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.85rem 1.35rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: rgb(var(--c-green)); color: #fff; }
.btn-primary:hover { background: rgb(var(--c-pine)); }
.btn-ghost { border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }
.btn-ghost:hover { border-color: rgb(var(--c-green)); color: rgb(var(--c-green)); }
.btn-sm { padding: 0.55rem 0.95rem; font-size: 0.8rem; }

.navlink {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(var(--c-muted));
  transition: color 0.2s ease;
}
.navlink:hover { color: rgb(var(--c-ink)); }
.navlink[aria-current="page"] { color: rgb(var(--c-green)); }

/* ---- Footer social buttons ---- */
.soc {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 0.18);
  color: rgb(255 255 255 / 0.72);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.soc:hover {
  color: #fff;
  border-color: rgb(var(--c-green-bright) / 0.8);
  background: rgb(255 255 255 / 0.07);
  transform: translateY(-1px);
}

/* ---- Mobile drawer ---- */
.drawer-panel {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-open .drawer-panel { transform: none; }
.drawer-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-backdrop { transition: none; }
  .dot-live::after { animation: none; display: none; }
}


/* ========================================================
   hero component classes (verbatim from the source style.css)
   ======================================================== */
/* ==== Sliced verbatim from batterydeep/css/style.css (line numbers in
   make-hero.mjs assert each slice, so a shifted source fails the build). ==== */

/* ---- Hero backdrop: subtle dot grid ---- */
.hero-dotgrid {
  background-image: radial-gradient(rgb(var(--c-line)) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}
.hero-glow {
  background:
    radial-gradient(760px 420px at 82% -10%, rgb(var(--c-green) / 0.14) 0%, transparent 62%),
    radial-gradient(600px 380px at -10% 100%, rgb(var(--c-mint)) 0%, transparent 60%);
}

/* ---- Scroll reveal (gated) ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--rv-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---- Hero load-in ---- */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(16px);
    animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--rise-delay, 0ms);
  }
  @keyframes rise-in {
    to { opacity: 1; transform: none; }
  }
}

/* ---- States map (hero coverage graphic) ---- */
.usmap svg {
  display: block;
  width: 100%;
  height: auto;
}
.usmap .state {
  fill: rgb(var(--c-line));
}
.usmap .borders {
  stroke: rgb(var(--c-bone));
  stroke-width: 1;
}
.usmap .separator1 {
  stroke: rgb(var(--c-bone));
  stroke-width: 1;
}
.usmap .served {
  fill: rgb(var(--c-green));
  transition: fill 0.25s ease;
}
.usmap .served:hover {
  fill: rgb(var(--c-green-bright));
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgb(var(--c-line));
  border-radius: 9999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ---- Reduced motion: kill every decorative animation ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee-track {
    animation: none;
  }
  .acc-body, .acc-chevron {
    transition: none;
  }
  .lift, .lift:hover {
    transition: none;
    transform: none;
  }
  .dot-live::after {
    animation: none;
    display: none;
  }
  .rise {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* ========================================================
   calculator component classes + scoped reset (from the source style.css)
   ======================================================== */
/* ============================================================
   HBZ calculator — component rules sliced verbatim out of the
   source stylesheet (batterydeep/css/style.css) by make-calc.mjs.
   Selectors: calc-band, .field, .lbl, .btn-cta, .btn-lg, price-flash
   ============================================================ */
/* ---- Calculator band (depth on pine) ---- */
.calc-band {
  background-image:
    radial-gradient(880px 480px at 90% -6%, rgb(var(--c-green) / 0.22), transparent 62%),
    radial-gradient(680px 420px at -8% 108%, rgb(var(--c-green) / 0.16), transparent 64%);
}
.btn-lg {
  padding: 1rem 1.6rem;
  font-size: 0.95rem;
}
.btn-cta {
  background: linear-gradient(135deg, rgb(var(--c-green)) 0%, rgb(var(--c-green-bright)) 100%);
  color: #fff;
  box-shadow: 0 18px 36px -16px rgb(var(--c-green) / 0.75);
}
.btn-cta:hover {
  box-shadow: 0 20px 42px -16px rgb(var(--c-green) / 0.85);
  filter: brightness(1.05);
}
/* ---- Form fields ---- */
.field {
  width: 100%;
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card));
  color: rgb(var(--c-ink));
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field:hover {
  border-color: rgb(var(--c-muted) / 0.5);
}
.field:focus {
  outline: none;
  border-color: rgb(var(--c-green));
  box-shadow: 0 0 0 3px rgb(var(--c-green) / 0.18);
}
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.4rem;
}
.field:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
  margin-bottom: 0.4rem;
}

/* ---- host-theme reset, scoped to the calculator ---- */
/* The calculator is the first region that is NOT inside an #hbz-* id, so it
   needs the same two resets the header, footer and hero get. Specificity is the
   whole point:
     - the theme's element-level rules sit at (0,0,1)
     - doubling the target list inside :is() reaches (0,0,2), which is above the
       theme but below any class -- so .field, .btn, .lbl and the !important
       utilities all still win, and only the theme is overridden.
   That reproduces exactly what Tailwind's preflight would have given this
   markup, without touching the component classes. */
:where([data-hbz-calc]) :is(p, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, figure, hr, pre, table):is(p, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, figure, hr, pre, table) {
  margin: 0;
  padding: 0;
}
:where([data-hbz-calc]) :where(*, ::before, ::after) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--c-line));
}
:where([data-hbz-calc]) :is(button, select, input, textarea):is(button, select, input, textarea) {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: none;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--c-line));
  text-transform: none;
  letter-spacing: inherit;
}
/* The Elementor kit's global form styling loads Figtree and 16px onto form
   labels and out-ranks the .lbl component class. The label measured
   "Figtree 16px / weight 500 / letter-spacing 0.8px" instead of the source's
   ".lbl: 0.72rem / 700 / 0.05em / uppercase / muted", which added a line of
   height to every field and made the card 416px against the reference 400px.
   Re-assert the component class inside the calculator region with !important
   so the kit cannot win. */
[data-hbz-calc] .lbl {
  display: block;
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgb(var(--c-muted)) !important;
  margin-bottom: 0.4rem;
}
/* region root: the source takes these from its body rule */
[data-hbz-calc] {
  color: rgb(var(--c-ink));
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* the theme colours anchors at (0,1,1); the source relies on preflight's
   a { color: inherit } instead, so anchors take their region's colour */
[data-hbz-calc] a {
  color: inherit;
  text-decoration: inherit;
}
/* The card's two-column split.
   The source uses md:grid-cols-[minmax(0,1fr)_minmax(0,1.12fr)]. Tailwind v3
   emits that arbitrary value with the comma HEX-escaped as \2c , and the class
   attribute keeps a literal comma -- the pair does NOT match in the browser, so
   the utility silently contributes nothing and the two columns stack (the card
   then measured 815px instead of 416px and blew the band out to 1325px).
   Writing the rule as real CSS removes the escaping edge case entirely. */
[data-hbz-calc] > .hbz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  [data-hbz-calc] > .hbz-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  }
}
[data-hbz-calc] .btn-cta {
  color: #fff !important;
  background-color: rgb(var(--c-green)) !important;
}
[data-hbz-calc] .btn-cta:hover {
  background-color: rgb(var(--c-pine)) !important;
}
/* calc.js hides the live/empty states with this class. display cannot come from
   a plain class: the display utilities carry !important, so this must too, and
   the attribute-scoped selector is what then makes it win. */
[data-hbz-calc] .hbz-is-off {
  display: none !important;
}
/* ---- the calculator band itself ----
   The band is an Elementor container, and a container cannot carry a class in
   Elementor 4.x (_css_classes is registered for widgets only), so its styling
   is keyed on the id. .calc-band in the source paints two radial green glows
   over the pine background; that is reproduced verbatim here. */
#hbz-calcband {
  background-color: rgb(var(--c-pine));
  /* !important is REQUIRED. Elementor ships a lazy-load guard in the page head:
       .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
       .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
         background-image: none !important;
       }
     This band is the 4th .e-con.e-parent on page 37, so the guard stripped its
     gradients until Elementor's JS added e-lazyloaded. That is why the glow
     painted on the hero (nth-of-type 1) but never here, and why the computed
     style could still echo the declared value. An id + !important (1,0,0,imp)
     out-ranks the guard (0,2,0,imp). */
  background-image:
    radial-gradient(880px 480px at 90% -6%, rgb(var(--c-green) / 0.22), transparent 62%),
    radial-gradient(680px 420px at -8% 108%, rgb(var(--c-green) / 0.16), transparent 64%) !important;
  color: #fff;
  /* The source band has no font of its own: it inherits the body's Archivo and
     line-height. Without this the container picks up the host theme's Rubik
     (the h2 escapes via hbz-font-display, but the eyebrow, the sub and the two
     disclaimers do not). The id outranks the generated Elementor rules. */
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  /* Elementor's kit sets space_between_widgets: 20px, which puts a 20px gap
     between each of this container's three children. The source spaces them
     with the calculator wrapper's mt-10 and the disclaimers' mt-6 instead. */
  gap: 0;
  padding: 4rem 0;
  scroll-margin-top: 6rem;
}

/* Tailwind's preflight zeroes element margins. The band's own copy of the reset
   only covers [data-hbz-calc] (the card), so the heading block and the two
   disclaimers sit outside it and pick up the host theme's paragraph bottom
   margin plus its heading margins -- which is what made
   the band 63px taller than the source. The :is() list is written twice so the
   rule lands at (0,0,2): above the theme's element rules at (0,0,1), below any
   class, so the !important mt-* utilities still win. */
:where(#hbz-calcband) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure, blockquote):is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure, blockquote) {
  margin: 0;
}
@media (min-width: 768px) {
  #hbz-calcband { padding: 6rem 0; }
}
/* The band head is a flex column; the kit's space_between_widgets:20px would
   otherwise add a gap between the eyebrow, h2, sub and pill. The source spaces
   them with mt-3 / mt-4 / mt-6 utilities instead (carried as _margin). */
#hbz-calcband .elementor-element-9a1f0c7 { gap: 0; }
/* The sub is max-w-[52ch] in the source (measured 476.7px wide, wrapping to
   TWO 24px lines). Without the cap it sits on one line and the band loses a
   line of height. Keyed by element id: the widget carries no class. */
#hbz-calcband .elementor-element-9a1f0ca { max-width: 52ch; margin-left: auto; margin-right: auto; }
/* The "No deposit required." gradient pill (source index.html lines 225-230).
   Tailwind classes cannot be used here: this markup is generated into the page
   by PHP, not scanned from a markup spec, so the pill is styled by hand. */
#hbz-calcband .hbz-calc-pill-wrap { margin-top: 1.5rem; }
#hbz-calcband .hbz-calc-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  border-radius: 9999px;
  background-image: linear-gradient(to right, rgb(var(--c-green)), rgb(var(--c-green-bright))) !important;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 14px 34px -14px rgb(var(--c-green) / 0.9);
}
#hbz-calcband .hbz-calc-pill strong { font-weight: 700; }
/* the source centres the calculator in a 1060px column with mt-10.
   gap must be 0: the Elementor kit sets space_between_widgets to 20px and the
   container would otherwise carry that gap. */
#hbz-calcmid {
  max-width: 1060px;
  margin: 2.5rem auto 0;
  gap: 0;
}


/* ========================================================
   remaining section component classes + region defaults (from the source style.css)
   ======================================================== */
/* ---- Marquee (coverage band) ---- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee-x 36s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* ---- Brand marquee (homepage) ---- */
.brand-marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
/* ---- Image slider (reconditioning teaser) ---- */
.slider-img {
  transition: opacity 0.5s ease;
}
/* ---- Accordion (grid-rows technique) ---- */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.acc-body > div {
  overflow: hidden;
}
.acc-open > .acc-body {
  grid-template-rows: 1fr;
}
.acc-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.acc-open .acc-chevron {
  transform: rotate(180deg);
}
/* ---- FAQ plus icon ---- */
.acc-chevron-90 { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.acc-open .acc-chevron-90 { transform: rotate(45deg); }
/* ============================================================
   SECTION REGION DEFAULTS  (generated by make-sections.mjs)

   The four new regions are ordinary sections, so they need what the hero and
   the calculator already have: the host theme sets element margins and a
   Rubik font on everything, and Elementor's kit adds a 20px gap between a
   container's children. The source has none of that.

   Specificity ladder used throughout this project:
     (0,0,1) the host theme's element rules and Elementor's kit rules
     (0,0,2) these resets  (the target list written twice inside :is())
     (0,1,0) any hbz- utility or component class  -> still wins
   so nothing here disturbs a utility, and the !important utilities are
   untouched. The gap: 0 declaration is deliberately last in each block: it is
   a normal declaration on a class-free id, so it only has to beat the kit rule.
   ============================================================ */

#hbz-brands,
#how,
#reconditioned,
#hbz-faq,
#hbz-cta {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  color: rgb(var(--c-ink));
  gap: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The host theme colours anchors at (0,1,1); the source relies on Tailwind
   preflight's a { color: inherit } instead, so anchors take their region's
   colour and only the component classes override them. */
#hbz-brands a,
#how a,
#reconditioned a,
#hbz-faq a,
#hbz-cta a {
  color: inherit;
  text-decoration: inherit;
}

/* Tailwind preflight's element reset, at (0,0,2). */
:where(#hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta)
  :is(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre):is(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
  margin: 0;
}
:where(#hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(ol, ul):is(ol, ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(#hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(h1, h2, h3, h4, h5, h6):is(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}
:where(#hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(svg, img, video):is(svg, img, video) {
  display: block;
  vertical-align: middle;
}
:where(#hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(button):is(button) {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: none;
  text-transform: none;
  cursor: pointer;
}
:where(#hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :where(*, ::before, ::after) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--c-line));
}

/* The brand strip's own band colour (index.html line 177:
   bg-card pt-6 pb-7 border-b border-line). */
#hbz-brands {
  background-color: rgb(var(--c-card));
  border-bottom: 1px solid rgb(var(--c-line));
  padding: 1.5rem 0 1.75rem;
}

/* The how-it-works band (index.html line 192: bg-mint py-16 md:py-24).
   This rule was MISSING after the native rebuild: the section used to be an
   html widget whose markup carried the hbz-bg-mint utility, and converting it
   to a native-widget container dropped that class silently. Sampled
   consequence before this fix: rows inside the section read bone
   (244,246,242) at every column instead of mint (234,246,238), and the mint
   run detector found no #how run in the candidate at all. */
#how {
  background-color: rgb(var(--c-mint));
  padding: 4rem 0;
}
@media (min-width: 768px) {
  #how {
    padding: 6rem 0;
  }
}

/* --- #reconditioned layout -----------------------------------------------
   The source is a 12-column grid (index.html line 243:
   grid items-center gap-10 lg:grid-cols-12 lg:gap-14) inside a
   mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 wrapper.
   The section shell and the grid live on Elementor containers
   (#reconditioned = the section, #hbz-recondgrid = the grid) because the
   left column is a separate Elementor element (the hbz-slider widget).
   Elementor renders a container as flex-column by default, so the grid
   must be forced here; the container's own flex-direction is overridden. */
#reconditioned {
  padding: 4rem 0;
}
/* --- recond icon-list spacing ----------------------------------------------
   The source <ul> is mt-8 space-y-5: a 32px top margin and a 20px MARGIN
   between the three <li> items, each li = 68px (a 44px icon tile and a text
   column of 24px title + 4px + 20px body). Elementor's icon-list
   space_between:20px is implemented as 10px PADDING on every item instead of
   a margin, so each li measured 82px (+14) and the list 256px against the
   source's 244px. space_between is therefore set to 0 in make-page.mjs and
   the real 20px margin is re-created here, matching space-y-5 exactly. */
#reconditioned .elementor-icon-list-item:not(:first-child) {
  margin-top: 20px;
}
#reconditioned .elementor-icon-list-item {
  align-items: flex-start;
}
/* The source item text is <p class="font-semibold"> (16px, line box 24px) then
   <p class="mt-1 text-sm text-muted"> (14px, line box 20px) = 24 + 4 + 40 = 68.
   The <br> form packs both runs into the same 16px line box chain, so the item
   measured 72px against the source's 68px. Only the LINE HEIGHTS may be set:
   making either run display:block re-nested the span inside the b and pushed
   the column to 563px, so both stay inline. */
#reconditioned .elementor-icon-list-item .elementor-icon-list-text {
  line-height: 24px !important;
}
#reconditioned .elementor-icon-list-item .elementor-icon-list-text > span {
  line-height: 20px !important;
}
/* --- native max-w-7xl rows -------------------------------------------------
   The source wraps each section's content in a mx-auto max-w-7xl px-4 sm:px-6
   lg:px-8 = 1280px box with 2rem side padding at lg -> INNER content 1216px.
   Elementor's content_width: boxed + boxed_width emits NOTHING for a GRID
   container (verified in the generated post-37 CSS: no --content-width, no
   max-width), so the wrapper must be reproduced here by id.
   Measured consequence before this rule: the how row spanned the full 1425px
   viewport and the step card was 837.344px wide against the reference's 794.672. */
.elementor-element-9a1f101,
.elementor-element-9a1f300,
.elementor-element-9a1f400 {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .elementor-element-9a1f101,
  .elementor-element-9a1f300,
  .elementor-element-9a1f400 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .elementor-element-9a1f101,
  .elementor-element-9a1f300,
  .elementor-element-9a1f400 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#hbz-recondgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 2.5rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}
#hbz-recondslider,
#hbz-recondgrid > .elementor-element-9a1f200 {
  grid-column: span 12;
  min-width: 0;
}
@media (min-width: 640px) {
  #hbz-recondgrid {
    padding: 0 1.5rem;
  }
}
@media (min-width: 768px) {
  #reconditioned {
    padding: 6rem 0;
  }
}
@media (min-width: 1024px) {
  #hbz-recondgrid {
    padding: 0 2rem;
    gap: 3.5rem;
  }
  #hbz-recondslider {
    grid-column: span 5;
  }
  #hbz-recondgrid > .elementor-element-9a1f200 {
    grid-column: span 7;
  }
}

/* The FAQ band: bg-mint/60 + border-t border-line + py-16 md:py-24 (index.html line 283).
   MEASURED: without these paddings the section was 414.5px against the reference 592px. */
#hbz-faq {
  background-color: rgb(var(--c-mint) / 0.6);
  border-top: 1px solid rgb(var(--c-line));
  padding: 4rem 0;
}
@media (min-width: 768px) {
  #hbz-faq {
    padding: 6rem 0;
  }
}

/* The FAQ accordion, measured against the source (batterydeep index.html line 288).
   The source is a divide-y / rounded-2xl / border / border-line / bg-card LIST:
   ONE 1px ring + 16px radius on the list, and 1px separators BETWEEN items only.
   Elementor's accordion instead puts a 1px border on EVERY item (4 sides each, so
   2px of extra height per item = +14px total) and rounds nothing, and it also renders
   the FIRST item EXPANDED (119.5px) where the source starts with all items CLOSED
   (open = ref(-1) in hbz-faq), which cost a further 68px.
   So: the per-item border is zeroed on the widget and the source's ring, radius and
   dividers are re-created here. */
#hbz-faq .elementor-accordion {
  border: 1px solid rgb(var(--c-line));
  border-radius: 1rem;
  overflow: hidden;
  background-color: rgb(var(--c-card));
}
#hbz-faq .elementor-accordion-item + .elementor-accordion-item {
  border-top: 1px solid rgb(var(--c-line));
}
/* The source's collapsed body is height 0 (the .acc-body grid-template-rows:0fr trick,
   see batterydeep css/style.css). Elementor's accordion chunk opens the FIRST item on
   init and marks its title .elementor-active; the served HTML always carries
   aria-expanded="false" and there is NO accordion control for the initial open state.
   hbz.js deactivates that auto-opened item on load so the FAQ starts with every item
   CLOSED, exactly like the source (open = ref(-1)). This rule is the CSS backstop so
   the panel is never in flow even for the instant before the script runs. */
#hbz-faq .elementor-tab-title:not(.elementor-active) + .elementor-tab-content {
  display: none;
}
#hbz-faq .elementor-accordion-item > .elementor-tab-title.elementor-active
  + .elementor-tab-content {
  display: block;
}
#hbz-faq .elementor-tab-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  text-align: left;
}
/* The source puts the FAQ question LEFT and the "+" icon RIGHT (index.html line 288:
   <span class="font-semibold">{{q}}</span> then the icon). Elementor emits the icon
   BEFORE the title in the DOM, so with justify-content: space-between the question
   was pushed right with the icon stranded on the left (user: "need left alignment").
   Force the order: title first, icon last. */
#hbz-faq .elementor-tab-title .elementor-accordion-title {
  font-weight: 600;
  order: 1;
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
}
#hbz-faq .elementor-tab-title .elementor-accordion-icon {
  order: 3;
  margin-left: auto;
  flex: 0 0 auto;
}

/* The final CTA strip: bg-strip + py-16 md:py-20 (index.html line 301).
   MEASURED: without these paddings the section was 283.3px against the reference 288px. */
#hbz-cta {
  background-color: rgb(var(--c-strip));
  color: #fff;
  padding: 4rem 0;
}
@media (min-width: 768px) {
  #hbz-cta {
    padding: 5rem 0;
  }
}
#hbz-cta .btn-primary {
  color: #fff !important;
  background: rgb(var(--c-green)) !important;
}
#hbz-cta .btn-primary:hover {
  background: rgb(var(--c-pine)) !important;
}

/* The homepage CTA buttons are NATIVE Elementor Button widgets, so the theme's
   (0,1,1) anchor colour beats the widget's own text colour and the "Find your
   vehicle" outline button rendered near-invisible (dark ink on the dark strip —
   user: "fix button font color"). Re-assert both by element id:
   9a1f404 = green "Call …", 9a1f405 = outline "Find your vehicle". */
#hbz-cta .elementor-button,
#hbz-cta .elementor-button .elementor-button-text,
#hbz-cta .elementor-button .elementor-button-icon {
  color: #fff !important;
  /* MEASURED: the Elementor Button widget carries its own font-family
     (the kit's Rubik) which beats the region's inherited Archivo. The
     source's .btn is Archivo, so re-assert it here. */
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif !important;
}
#hbz-cta > .elementor-element-9a1f400 .elementor-element-9a1f404 .elementor-button {
  background: rgb(var(--c-green)) !important;
  border: 0 !important;
}
#hbz-cta > .elementor-element-9a1f400 .elementor-element-9a1f404 .elementor-button:hover {
  background: rgb(var(--c-pine)) !important;
}
#hbz-cta > .elementor-element-9a1f400 .elementor-element-9a1f405 .elementor-button {
  background: transparent !important;
  border: 1px solid rgb(255 255 255 / 0.25) !important;
}
#hbz-cta > .elementor-element-9a1f400 .elementor-element-9a1f405 .elementor-button:hover {
  background: rgb(255 255 255 / 0.1) !important;
  border-color: rgb(255 255 255 / 0.7) !important;
}

/* #how / #recond / #faq buttons inherit the theme's (0,1,1) anchor colour,
   so the ghost variant is re-asserted here. !important because a plain
   (1,1,0) would also out-rank the hover: utilities, which are !important. */
#how .btn-ghost,
#reconditioned .btn-ghost,
#hbz-faq .btn-ghost {
  color: rgb(var(--c-ink)) !important;
  background: rgb(var(--c-card)) !important;
  border: 1px solid rgb(var(--c-line)) !important;
}
#how .btn-ghost:hover,
#reconditioned .btn-ghost:hover,
#hbz-faq .btn-ghost:hover {
  color: rgb(var(--c-green)) !important;
  border-color: rgb(var(--c-green)) !important;
}

/* Inline icons are sized in em (the source's <iconify-icon> renders at 1em);
   the brand strip and the recond tiles set the font-size they want. */
#hbz-brands .hbz-brand-ico {
  width: 1.9rem;
  height: 1.9rem;
}

/* The slider's buttons, the accordion's buttons and the dots need the theme's
   button paint removed, as in the header: without this the host theme fills
   every <button> with its secondary blue at (0,1,1), which outranks the
   (0,0,2) preflight reset and painted 350px of solid blue across the FAQ. */
#reconditioned button,
#hbz-faq button,
.hbz-slider button {
  background-color: transparent;
  background-image: none;
  color: inherit;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--c-line));
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.hbz-slider {
  display: block;
}

/* Scroll-reveal parity. The source's v-reveal directive adds .reveal and an
   IntersectionObserver adds .is-in; the extracted .reveal rules are in
   sections-css.css. Under reduced motion (and in static capture mode) the
   source skips the animation entirely, which the extracted media block
   already handles — it sets .reveal to its finished state. */


/* ========================================================
   about / common-issues / find-battery page region defaults + widget CSS
   ======================================================== */
/* ==== pages-css.css ==== */
/* Region scoping for the three new pages. preflight-scoped.css and
   region-css.css only name the homepage ids, so without these blocks the new
   pages inherit the theme's Rubik font, the Elementor kit text colour
   rgb(106,112,110) and the theme's element margins - exactly the leak that had
   to be fixed on #how. Every top-level container of each page carries its own
   id (Elementor allows only one _element_id per element), so the lists below
   name them all. */

#hbz-pg-about, #hbz-pg-about-process, #hbz-pg-about-cta,
#hbz-pg-issues, #hbz-pg-issues-codes, #hbz-pg-issues-diag, #hbz-pg-issues-cta,
#hbz-fb-herogrid, #hbz-pg-find-makes, #hbz-pg-find-notes, #hbz-pg-find-cta {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  color: rgb(var(--c-ink));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#hbz-pg-about a, #hbz-pg-about-process a, #hbz-pg-about-cta a,
#hbz-pg-issues a, #hbz-pg-issues-codes a, #hbz-pg-issues-diag a, #hbz-pg-issues-cta a,
#hbz-fb-herogrid a, #hbz-pg-find-makes a, #hbz-pg-find-notes a, #hbz-pg-find-cta a {
  color: inherit;
  text-decoration: inherit;
}

/* ---- page wrappers. Hello Elementor renders a div.page-header (the WP page
   title, 56px) plus a 16px margin on div.page-content above the Elementor tree,
   so .elementor-162 measured y=185 while the source's hero starts at y=105 --
   an +80px page-height error. Measured: the find-battery page was 3057 against
   the reference's 2972 before this rule. The wrapper also inherits Rubik +
   rgb(106,112,110) from the kit. */
body.page-id-160 .page-header, body.page-id-161 .page-header, body.page-id-162 .page-header {
  display: none;
}
body.page-id-160 .page-content, body.page-id-161 .page-content, body.page-id-162 .page-content {
  margin-top: 0;
  padding-top: 0;
}
body.page-id-160 .elementor-160, body.page-id-161 .elementor-161, body.page-id-162 .elementor-162 {
  padding: 0;
  margin: 0;
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  color: rgb(var(--c-ink));
}
body.page-id-160 .elementor-160 > .elementor-element,
body.page-id-161 .elementor-161 > .elementor-element,
body.page-id-162 .elementor-162 > .elementor-element {
  margin-top: 0;
  margin-bottom: 0;
}
/* The Elementor kit gives every heading its own colour from the kit's heading
   globals (measured rgb(8,7,8) - a near-black), which beats the wrapper's
   inherited ink. Force the source's ink on all headings and body copy. */
body.page-id-160 .elementor-160 h1, body.page-id-160 .elementor-160 h2,
body.page-id-160 .elementor-160 h3, body.page-id-160 .elementor-160 h4,
body.page-id-161 .elementor-161 h1, body.page-id-161 .elementor-161 h2,
body.page-id-161 .elementor-161 h3, body.page-id-161 .elementor-161 h4,
body.page-id-162 .elementor-162 h1, body.page-id-162 .elementor-162 h2,
body.page-id-162 .elementor-162 h3, body.page-id-162 .elementor-162 h4 {
  color: rgb(var(--c-ink));
}

:where(#hbz-pg-about, #hbz-pg-about-process, #hbz-pg-about-cta, #hbz-pg-issues, #hbz-pg-issues-codes, #hbz-pg-issues-diag, #hbz-pg-issues-cta, #hbz-fb-herogrid, #hbz-pg-find-makes, #hbz-pg-find-notes, #hbz-pg-find-cta) :where(*, ::before, ::after) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--c-line));
}

:where(#hbz-pg-about, #hbz-pg-about-process, #hbz-pg-about-cta, #hbz-pg-issues, #hbz-pg-issues-codes, #hbz-pg-issues-diag, #hbz-pg-issues-cta, #hbz-fb-herogrid, #hbz-pg-find-makes, #hbz-pg-find-notes, #hbz-pg-find-cta) :is(p, h1, h2, h3, h4, h5, h6, hr, figure, pre):is(p, h1, h2, h3, h4, h5, h6, hr, figure, pre) {
  margin: 0;
}

:where(#hbz-pg-about, #hbz-pg-about-process, #hbz-pg-about-cta, #hbz-pg-issues, #hbz-pg-issues-codes, #hbz-pg-issues-diag, #hbz-pg-issues-cta, #hbz-fb-herogrid, #hbz-pg-find-makes, #hbz-pg-find-notes, #hbz-pg-find-cta) :is(ul, ol):is(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(#hbz-pg-about, #hbz-pg-about-process, #hbz-pg-about-cta, #hbz-pg-issues, #hbz-pg-issues-codes, #hbz-pg-issues-diag, #hbz-pg-issues-cta, #hbz-fb-herogrid, #hbz-pg-find-makes, #hbz-pg-find-notes, #hbz-pg-find-cta) :is(h1, h2, h3, h4, h5, h6):is(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}

:where(#hbz-pg-about, #hbz-pg-about-process, #hbz-pg-about-cta, #hbz-pg-issues, #hbz-pg-issues-codes, #hbz-pg-issues-diag, #hbz-pg-issues-cta, #hbz-fb-herogrid, #hbz-pg-find-makes, #hbz-pg-find-notes, #hbz-pg-find-cta) :is(a):is(a) {
  color: inherit;
  text-decoration: inherit;
}

:where(#hbz-pg-about, #hbz-pg-about-process, #hbz-pg-about-cta, #hbz-pg-issues, #hbz-pg-issues-codes, #hbz-pg-issues-diag, #hbz-pg-issues-cta, #hbz-fb-herogrid, #hbz-pg-find-makes, #hbz-pg-find-notes, #hbz-pg-find-cta) :is(button):is(button) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

:where(#hbz-pg-about, #hbz-pg-about-process, #hbz-pg-about-cta, #hbz-pg-issues, #hbz-pg-issues-codes, #hbz-pg-issues-diag, #hbz-pg-issues-cta, #hbz-fb-herogrid, #hbz-pg-find-makes, #hbz-pg-find-notes, #hbz-pg-find-cta) :is(svg, img, video):is(svg, img, video) {
  display: block;
  vertical-align: middle;
}

/* The theme paints bare buttons with its secondary blue and colours anchors at
   (0,1,1); re-assert here, at (1,0,1). */
#hbz-pg-about button, #hbz-pg-about-process button, #hbz-pg-about-cta button,
#hbz-pg-issues button, #hbz-pg-issues-codes button, #hbz-pg-issues-diag button, #hbz-pg-issues-cta button,
#hbz-fb-herogrid button, #hbz-pg-find-makes button, #hbz-pg-find-notes button, #hbz-pg-find-cta button {
  background-color: transparent;
  background-image: none;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* ---- the find-battery hero shell -------------------------------------------------
   The source hero is section.hero-dotgrid > hero-glow + a mx-auto max-w-7xl
   px/py wrapper > a 12-col grid. Elementor renders a container as a flex
   column, so the shell and the 12-col grid are reproduced here on the
   container that owns the hero (#hbz-fb-herogrid), and its two children get
   their spans here too. */
#hbz-fb-herogrid {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--c-line));
  display: block;
  padding: 3.5rem 1rem 4rem;
  background-image: radial-gradient(900px 520px at 12% -10%, rgb(var(--c-green) / 0.10), transparent 60%);
}
#hbz-fb-herogrid {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
/* This Elementor renders a container's children DIRECTLY -- there is NO
   .e-con-inner wrapper element (verified: '#hbz-pg-find-makes > .e-con-inner'
   returns "No element matches"). The grid therefore has to live on the
   container itself and the children are addressed as direct children. */
#hbz-fb-herogrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: 3.5rem;
  row-gap: 2.5rem;
}
#hbz-fb-herogrid > .elementor-element-b0f1c2 {
  grid-column: span 5;
  /* The source's left column is div.lg:col-span-5.lg:sticky.lg:top-24 and sits
     32px below the grid's top edge (measured: grid y=169, source column y=201,
     source h1 y=217). Reproduce that 32px with padding-top only. Do NOT add
     position: sticky here: in a full-page screenshot sticky resolves at scroll
     zero and pushes the column a further 96px down, which was measured as a
     +96px error in the element row runs. */
  padding-top: 2rem;
}
#hbz-fb-herogrid > #calculator {
  grid-column: span 7;
  min-width: 0;
  scroll-margin-top: 7rem;
}
@media (min-width: 640px) {
  #hbz-fb-herogrid { padding: 3.5rem 1.5rem 4rem; }
}
@media (min-width: 768px) {
  #hbz-fb-herogrid { padding: 4rem 1.5rem 5rem; }
}
@media (min-width: 1024px) {
  #hbz-fb-herogrid { padding: 4rem 2rem 5rem; }
}
@media (max-width: 1023px) {
  #hbz-fb-herogrid > .elementor-element-b0f1c2,
  #hbz-fb-herogrid > #calculator {
    grid-column: span 12;
  }
}

/* ---- band backgrounds (Tailwind classes vanish once a section's markup moves
   from an html widget to native widgets, so they are re-created by id).

   IMPORTANT: NO vertical padding here. Each section's own markup still ships
   inside its html widget carrying its original py-16 / md:py-24 utility (the
   utilities are !important because tailwind.config sets important: true), and
   an id-keyed padding on the OUTER Elementor container would DOUBLE the band's
   height. Measured: #hbz-pg-about-process was 1123.23px against the source's
   951.5px with both applied. Only background / border are re-created here.

   Also: every page container must have its kit space_between_widgets 20px flex
   gap zeroed. The Elementor container cannot be reached by a plain gap:0 rule
   (the .e-con rule consumes --gap), so the gap is zeroed via the native
   flex_gap control on each container in the tree above. ---- */
#hbz-pg-about-process { background-color: rgb(var(--c-card) / 0.6); }
/* The code guide band. The source wraps BOTH the heading block and the
   hbz-issues widget in one mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 box, so the
   cards measure 1216 wide. Without this the container spanned the full 1425px.
   The html widget already carries its own mx-auto max-w-7xl px-4 sm:px-6
   lg:px-8 wrapper, so NO padding is added here (it would double); only the
   widget's sibling container gets the matching side inset. The card height is
   already exact (72 vs the source's 71.5). */
#hbz-pg-issues-codes {
  width: 100%;
}
#hbz-pg-issues-codes > .elementor-element-b0i2c1 {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  width: 100%;
}
@media (min-width: 640px) { #hbz-pg-issues-codes > .elementor-element-b0i2c1 { padding: 0 1.5rem; } }
@media (min-width: 1024px) { #hbz-pg-issues-codes > .elementor-element-b0i2c1 { padding: 0 2rem; } }
#hbz-pg-issues-diag { background-color: rgb(var(--c-mint) / 0.6); border-top: 1px solid rgb(var(--c-line)); border-bottom: 1px solid rgb(var(--c-line)); }
#hbz-pg-find-makes { background-color: rgb(var(--c-mint) / 0.5); }

/* The browse-by-make row. The hbz-makes widget is a SIBLING of the html widget
   that holds the left column, so the source's 12-col grid (col-span-4 copy +
   col-span-8 list) must be rebuilt on the Elementor container itself.
   Measured before this rule: the makes widget spanned the full 1425px so the
   band was 1730px against the source's 1364px. */
#hbz-pg-find-makes {
  padding: 4rem 1rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: 2.5rem;
  row-gap: 2.5rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
#hbz-pg-find-makes > .elementor-element-b0f2f1 {
  grid-column: span 4;
  min-width: 0;
}
#hbz-pg-find-makes > .elementor-element-b0f2c1 {
  grid-column: span 8;
  min-width: 0;
}
@media (min-width: 640px) {
  #hbz-pg-find-makes { padding: 4rem 1.5rem; }
}
@media (min-width: 768px) {
  #hbz-pg-find-makes { padding: 6rem 1.5rem; }
}
@media (min-width: 1024px) {
  #hbz-pg-find-makes { padding: 6rem 2rem; column-gap: 3.5rem; }
}
@media (max-width: 1023px) {
  #hbz-pg-find-makes > .elementor-element-b0f2f1,
  #hbz-pg-find-makes > .elementor-element-b0f2c1 {
    grid-column: span 12;
  }
}
#hbz-pg-find-notes { background-color: rgb(var(--c-card) / 0.6); border-top: 1px solid rgb(var(--c-line)); }

/* ---- ghost button + accent re-assertions (the theme's anchor colour
   otherwise wins) ---- */
#hbz-pg-about .btn-primary, #hbz-pg-about-process .btn-primary, #hbz-pg-about-cta .btn-primary,
#hbz-pg-issues .btn-primary, #hbz-pg-issues-codes .btn-primary, #hbz-pg-issues-diag .btn-primary, #hbz-pg-issues-cta .btn-primary,
#hbz-fb-herogrid .btn-primary, #hbz-pg-find-makes .btn-primary, #hbz-pg-find-notes .btn-primary, #hbz-pg-find-cta .btn-primary {
  background-color: rgb(var(--c-green)) !important;
  color: #fff !important;
}
#hbz-pg-about .btn-primary:hover, #hbz-pg-about-process .btn-primary:hover, #hbz-pg-about-cta .btn-primary:hover,
#hbz-pg-issues .btn-primary:hover, #hbz-pg-issues-codes .btn-primary:hover, #hbz-pg-issues-diag .btn-primary:hover, #hbz-pg-issues-cta .btn-primary:hover,
#hbz-fb-herogrid .btn-primary:hover, #hbz-pg-find-makes .btn-primary:hover, #hbz-pg-find-notes .btn-primary:hover, #hbz-pg-find-cta .btn-primary:hover {
  background-color: rgb(var(--c-pine)) !important;
}
#hbz-pg-about .btn-ghost, #hbz-pg-about-process .btn-ghost, #hbz-pg-about-cta .btn-ghost,
#hbz-pg-issues .btn-ghost, #hbz-pg-issues-codes .btn-ghost, #hbz-pg-issues-diag .btn-ghost, #hbz-pg-issues-cta .btn-ghost,
#hbz-fb-herogrid .btn-ghost, #hbz-pg-find-makes .btn-ghost, #hbz-pg-find-notes .btn-ghost, #hbz-pg-find-cta .btn-ghost {
  color: rgb(var(--c-ink)) !important;
}
#hbz-pg-about .btn-ghost:hover, #hbz-pg-about-process .btn-ghost:hover, #hbz-pg-about-cta .btn-ghost:hover,
#hbz-pg-issues .btn-ghost:hover, #hbz-pg-issues-codes .btn-ghost:hover, #hbz-pg-issues-diag .btn-ghost:hover, #hbz-pg-issues-cta .btn-ghost:hover,
#hbz-fb-herogrid .btn-ghost:hover, #hbz-pg-find-makes .btn-ghost:hover, #hbz-pg-find-notes .btn-ghost:hover, #hbz-pg-find-cta .btn-ghost:hover {
  border-color: rgb(var(--c-green)) !important;
  color: rgb(var(--c-green)) !important;
}

/* ---- the issues widget typography (icon-list style rows + list items) ---- */
[data-hbz-issues] .hbz-issue-symptoms li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4286;
}
[data-hbz-issues] .hbz-issue-symptoms li::before {
  content: "";
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-top: 0.125rem;
  background-color: rgb(245 158 11);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- the search input reuses the calculator's .field component ---- */
[data-hbz-issues] .hbz-issue-input {
  padding-left: 2.75rem;
  width: 100%;
}

/* ---- the two widgets are block elements (the theme would otherwise make the
   custom element inline) ---- */
hbz-issues, hbz-makes { display: block; }

/* ---- open-state card ring + chevron rotation (the source rotates the
   chevron and tints the card border when a card is open) ---- */
[data-hbz-issues] .hbz-issue-card.acc-open { border-color: rgb(var(--c-green) / 0.4); }
[data-hbz-issues] .hbz-issue-card.acc-open .hbz-issue-chev { transform: rotate(180deg); }
[data-hbz-makes] .hbz-make-card.acc-open { border-color: rgb(var(--c-green) / 0.4); }
[data-hbz-makes] .hbz-make-card.acc-open .hbz-make-chev { transform: rotate(180deg); }


/* ========================================================
   NATIVE rebuild of the three pages (replaces the html-widget page CSS)
   ======================================================== */
/* ============================================================
   NATIVE REBUILD of the about / common-issues / find-battery pages.

   These pages are now built from NATIVE Elementor widgets. The CSS here is
   only what a native widget cannot express: the section band colours and
   paddings that used to live on the source's own section utilities, the
   12-col grids, and the small icon tile.
   ============================================================ */

/* ---- shared: kill the theme's page chrome on these three pages ---- */
body.page-id-160 .page-header,
body.page-id-161 .page-header,
body.page-id-162 .page-header { display: none; }
body.page-id-160 .page-content,
body.page-id-161 .page-content,
body.page-id-162 .page-content { margin-top: 0; padding-top: 0; }
body.page-id-160 .elementor-160,
body.page-id-161 .elementor-161,
body.page-id-162 .elementor-162 {
  padding: 0;
  margin: 0;
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  color: rgb(var(--c-ink));
}
body.page-id-160 .elementor-160 > .elementor-element,
body.page-id-161 .elementor-161 > .elementor-element,
body.page-id-162 .elementor-162 > .elementor-element { margin-top: 0; margin-bottom: 0; }

/* the Elementor kit gives every heading its own colour; the source uses ink */
.elementor-160 h1, .elementor-160 h2, .elementor-160 h3, .elementor-160 h4,
.elementor-161 h1, .elementor-161 h2, .elementor-161 h3, .elementor-161 h4,
.elementor-162 h1, .elementor-162 h2, .elementor-162 h3, .elementor-162 h4 { color: rgb(var(--c-ink)); }

/* the source's icon tile */
.hbz-ico-tile {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 0.75rem;
  background-color: rgb(var(--c-mint));
  color: rgb(var(--c-green));
  flex: 0 0 auto;
}
.hbz-ico-tile svg { width: 1.25rem; height: 1.25rem; }

/* ================= about (#hbz-ab-*) ================= */

/* hero band: the source section is .hero-dotgrid + a 2-col grid */
#hbz-ab-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--c-line));
  background-image: radial-gradient(rgb(var(--c-line)) 1px, rgba(0,0,0,0) 1px);
  background-size: 22px 22px;
  padding: 0;
}
/* The source's section.hero-dotgrid carries padding: 0 and its INNER
   div.gap-12 carries padding: 64px 32px 80px (measured live: section 583.5 =
   0 + inner 582.5). My inner grid was 412.375 with padding: 0, so the
   vertical padding must live HERE, not on the band. */
#hbz-ab-hero > .elementor-element-b0a1c1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 3rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 4rem 1rem 5rem;
}
@media (min-width: 640px) { #hbz-ab-hero > .elementor-element-b0a1c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #hbz-ab-hero > .elementor-element-b0a1c1 { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 1023px) {
  #hbz-ab-hero > .elementor-element-b0a1c1 { grid-template-columns: minmax(0, 1fr); }
}
/* the hero image frame */
#hbz-ab-hero .elementor-widget-image img {
  border-radius: 24px;
  border: 1px solid rgb(var(--c-line));
  box-shadow: 0 24px 48px -28px rgb(var(--c-pine) / 0.45);
  width: 100%;
  height: auto;
  display: block;
}
/* the floating badge */
.hbz-ab-badge {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card) / 0.95);
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  backdrop-filter: blur(8px);
}
.hbz-ab-badge svg { width: 1.25rem; height: 1.25rem; color: rgb(var(--c-green)); flex: 0 0 auto; }
.hbz-ab-badge p { font-size: 0.75rem; font-weight: 600; line-height: 1.25; margin: 0; }
.hbz-ab-badge span { font-weight: 400; color: rgb(var(--c-muted)); }

/* process band: bg-card/60 over bone */
#hbz-ab-process { background-color: rgb(var(--c-card) / 0.6); padding: 4rem 0; }
@media (min-width: 768px) { #hbz-ab-process { padding: 6rem 0; } }
/* the section is a 12-col split: heading copy on the left (span 4), the three
   step cards on the right (span 8). The user asked for the HOMEPAGE how-it-works
   copy AND design here ("3 step process is wrong please use it from homepage
   same copy how it works"), so the card styling below mirrors the homepage
   #how cards: number | title+body | image. */
#hbz-ab-process > .elementor-element-b0a2c1 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3rem;
  align-items: start;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-ab-process > .elementor-element-b0a2c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #hbz-ab-process > .elementor-element-b0a2c1 { padding-left: 2rem; padding-right: 2rem; gap: 3.5rem; } }
#hbz-ab-process > .elementor-element-b0a2c1 > .elementor-element-b0a2l { grid-column: span 4; min-width: 0; }
#hbz-ab-process > .elementor-element-b0a2c1 > .elementor-element-b0a2r1 { grid-column: span 8; min-width: 0; }
@media (max-width: 1023px) {
  #hbz-ab-process > .elementor-element-b0a2c1 > .elementor-element-b0a2l,
  #hbz-ab-process > .elementor-element-b0a2c1 > .elementor-element-b0a2r1 { grid-column: span 12; }
}
.hbz-ab-hcard {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card));
  padding: 1.75rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.2s ease;
}
.hbz-ab-hcard:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.hbz-ab-hnum {
  flex: 0 0 auto;
  width: 4rem;
  margin: 0;
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.25rem;
  color: rgb(var(--c-green) / 0.8);
}
.hbz-ab-hbody { flex: 1 1 auto; min-width: 0; }
.hbz-ab-htitle {
  margin: 0;
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 2rem;
  letter-spacing: 0.025em;
  color: rgb(var(--c-ink));
}
.hbz-ab-hcopy {
  margin: 0.625rem 0 0 0;
  font-size: 0.95rem;
  line-height: 1.625;
  color: rgb(var(--c-muted));
  max-width: 58ch;
}
.hbz-ab-himg { flex: 0 0 auto; width: 15rem; }
.hbz-ab-himg img {
  display: block;
  width: 100%;
  height: 157.5px;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--c-line));
}
@media (max-width: 1023px) {
  .hbz-ab-hcard { flex-wrap: wrap; }
  .hbz-ab-himg { width: 100%; }
}
@media (max-width: 767px) {
  .hbz-ab-hcard { flex-direction: column; }
  .hbz-ab-hnum { width: auto; }
}

/* cta band: bg-strip */
#hbz-ab-cta { background-color: rgb(var(--c-strip)); color: #fff; padding: 4rem 0; }
@media (min-width: 768px) { #hbz-ab-cta { padding: 5rem 0; } }
#hbz-ab-cta > .elementor-element-b0a3c1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 2rem;
  max-width: 80rem; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-ab-cta > .elementor-element-b0a3c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #hbz-ab-cta > .elementor-element-b0a3c1 { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 767px) {
  #hbz-ab-cta > .elementor-element-b0a3c1 { grid-template-columns: minmax(0, 1fr); }
}
#hbz-ab-cta > .elementor-element-b0a3c1 > .elementor-element-b0a3h1 { grid-column: 1 / -1; }
#hbz-ab-cta h2, #hbz-ab-cta h1, #hbz-ab-cta h3 { color: #fff !important; }
#hbz-ab-cta .elementor-button { border-radius: 9999px; }
.hbz-ab-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; align-items: center; }
@media (max-width: 767px) { .hbz-ab-cta-row { justify-content: flex-start; } }

/* ============ common-issues (#hbz-ci-*) ============ */

#hbz-ci-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--c-line));
  background-image: radial-gradient(rgb(var(--c-line)) 1px, rgba(0,0,0,0) 1px);
  background-size: 22px 22px;
  padding: 3.5rem 1rem 4rem;
}
#hbz-ci-hero > .elementor-element-b0i1c1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 3rem;
  max-width: 80rem; margin-left: auto; margin-right: auto;
}
@media (min-width: 640px) { #hbz-ci-hero { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { #hbz-ci-hero { padding-top: 4rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) { #hbz-ci-hero { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 1023px) {
  #hbz-ci-hero > .elementor-element-b0i1c1 { grid-template-columns: minmax(0, 1fr); }
}
#hbz-ci-hero .elementor-widget-image img {
  border-radius: 24px; border: 1px solid rgb(var(--c-line));
  box-shadow: 0 24px 48px -28px rgb(var(--c-pine) / 0.45);
  width: 100%; height: auto; display: block;
}
.hbz-ci-note {
  display: flex; align-items: flex-start; gap: 0.625rem;
  font-size: 0.75rem; line-height: 1.625; color: rgb(var(--c-muted));
  margin: 0;
}
.hbz-ci-note svg { width: 1rem; height: 1rem; color: rgb(var(--c-green)); flex: 0 0 auto; margin-top: 0.125rem; }

/* the code-guide band: plain bone, py-16 md:py-24 */
#hbz-ci-codes { padding: 4rem 0; }
@media (min-width: 768px) { #hbz-ci-codes { padding: 6rem 0; } }
#hbz-ci-codes > .elementor-element-b0i2c1 {
  max-width: 80rem; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-ci-codes > .elementor-element-b0i2c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #hbz-ci-codes > .elementor-element-b0i2c1 { padding-left: 2rem; padding-right: 2rem; } }

/* the NATIVE accordion must look like the source's divide-y card stack.
   The source: one rounded-2xl ring, 1px separators BETWEEN rows, 16px/24px
   title padding, a green plus that rotates 45deg when open. */
#hbz-ci-codes .elementor-accordion { border: 0; }
#hbz-ci-codes .elementor-accordion-item {
  border: 1px solid rgb(var(--c-line));
  border-radius: 1rem;
  overflow: hidden;
  background-color: rgb(var(--c-card));
  margin-bottom: 0.75rem;
  transition: border-color 0.2s ease;
}
#hbz-ci-codes .elementor-accordion-item.elementor-active { border-color: rgb(var(--c-green) / 0.4); }
#hbz-ci-codes .elementor-tab-title {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1rem 1.25rem;
  background-color: rgb(var(--c-card)) !important;
  color: rgb(var(--c-ink));
  font-weight: 400;
  line-height: 24px;
}
#hbz-ci-codes .elementor-tab-title:hover { background-color: rgb(var(--c-mint) / 0.4) !important; }
#hbz-ci-codes .elementor-tab-title .elementor-accordion-icon {
  color: rgb(var(--c-green));
  order: 3;
  margin-left: auto;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
#hbz-ci-codes .elementor-tab-title.elementor-active .elementor-accordion-icon { transform: rotate(45deg); }
#hbz-ci-codes .elementor-tab-content { border: 0; padding: 0 1.25rem 1.5rem; }
/* The panel body is deliberately PLAIN semantic markup (paragraphs, one bullet
   list, one link, <strong> labels) so every error-code row can be edited straight
   from the Elementor accordion repeater — the earlier class-heavy wrapper soup was
   "html mess cant edit" (user). These generic rules style that plain markup. */
#hbz-ci-codes .elementor-tab-content p { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.625; color: rgb(var(--c-muted)); }
#hbz-ci-codes .elementor-tab-content p:first-child { margin-top: 0; }
#hbz-ci-codes .elementor-tab-content p:last-child { margin-bottom: 0; }
#hbz-ci-codes .elementor-tab-content strong { color: rgb(var(--c-ink)); font-weight: 600; }
#hbz-ci-codes .elementor-tab-content ul { margin: 0 0 0.75rem; padding-left: 1.25rem; list-style: disc; }
#hbz-ci-codes .elementor-tab-content li { font-size: 0.875rem; line-height: 1.625; color: rgb(var(--c-muted)); }
#hbz-ci-codes .elementor-tab-content a { color: rgb(var(--c-green)) !important; font-weight: 600; text-decoration: underline; }
/* The source starts EVERY error-code item CLOSED. Elementor's accordion emits no
   elementor-active class on load and has no initial-state control, so the open
   state is purely a CSS matter: a panel is visible unless something hides it.
   #hbz-faq already carried this pair; #hbz-ci-codes and #hbz-fb-makes did NOT,
   so all 9 code panels rendered in flow and item 1 measured 421px (the tallest
   panel) against the source's 71.5px collapsed row. */
#hbz-ci-codes .elementor-tab-title:not(.elementor-active) + .elementor-tab-content,
#hbz-fb-makes .elementor-tab-title:not(.elementor-active) + .elementor-tab-content {
  display: none;
}
#hbz-ci-codes .elementor-accordion-item > .elementor-tab-title.elementor-active + .elementor-tab-content,
#hbz-fb-makes .elementor-accordion-item > .elementor-tab-title.elementor-active + .elementor-tab-content {
  display: block;
}
/* the code chip + name + system inside the title (HTML in a repeater row).
   The SOURCE has these as DIRECT children of a flex button, so the row height
   is the tallest child = the code pill at 37.5px (8px pad + 19.5px line + 8px
   + 2px border), making the collapsed title 69.5px (16/16 padding). Wrapping
   them in a flex span added 4.5px per row (measured 74 vs the source's 69.5)
   and 9 rows x 4.5 = +40.5 on the band. Pin every line box so nothing can
   drift: the pill is the only child allowed to define the height. */
.hbz-ci-tt { display: flex; align-items: center; gap: 1.25rem; width: 100%; min-width: 0; line-height: 24px; }
.hbz-ci-code {
  flex: 0 0 auto;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--c-green) / 0.2);
  background-color: rgb(var(--c-mint) / 0.7);
  padding: 0.5rem 0.75rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 700; line-height: 19.5px; letter-spacing: 0.025em;
  color: rgb(var(--c-green));
}
.hbz-ci-name { font-size: 15px; font-weight: 600; line-height: 24px; color: rgb(var(--c-ink)); min-width: 0; flex: 1 1 auto; }
.hbz-ci-sys {
  margin-left: auto; flex: 0 0 auto;
  border-radius: 9999px;
  border: 1px solid rgb(var(--c-green) / 0.2);
  background-color: rgb(var(--c-mint) / 0.7);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem; font-weight: 600; line-height: 18px; color: rgb(var(--c-green));
}
@media (max-width: 767px) { .hbz-ci-sys { display: none; } }
/* the panel internals */
.hbz-ci-applies { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--c-muted)); margin: 0; }
.hbz-ci-sum { font-size: 0.875rem; line-height: 1.625; color: rgb(12 18 14 / 0.85); margin: 1rem 0 0; }
.hbz-ci-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .hbz-ci-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hbz-ci-h { font-weight: 600; font-size: 0.875rem; color: rgb(var(--c-ink)); margin: 0; }
.hbz-ci-sym { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.hbz-ci-sym li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: rgb(var(--c-muted)); margin-bottom: 0.5rem; }
.hbz-ci-sym li::before {
  content: ""; flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.125rem;
  background-color: rgb(245 158 11);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hbz-ci-check { border-radius: 1rem; background-color: rgb(var(--c-mint) / 0.6); padding: 1rem; }
.hbz-ci-check p { font-size: 0.875rem; line-height: 1.625; color: rgb(var(--c-ink)); margin: 0.5rem 0 0; }
.hbz-ci-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.hbz-ci-cta span { font-size: 0.75rem; color: rgb(var(--c-muted)); }

/* diagnose band: border-y bg-mint/60, py-16 md:py-20 */
#hbz-ci-diag {
  background-color: rgb(var(--c-mint) / 0.6);
  border-top: 1px solid rgb(var(--c-line));
  border-bottom: 1px solid rgb(var(--c-line));
  padding: 4rem 0;
}
@media (min-width: 768px) { #hbz-ci-diag { padding: 5rem 0; } }
#hbz-ci-diag > .elementor-element-b0i3c1 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 80rem; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-ci-diag > .elementor-element-b0i3c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) {
  #hbz-ci-diag > .elementor-element-b0i3c1 { padding-left: 2rem; padding-right: 2rem; gap: 3.5rem; }
  #hbz-ci-diag > .elementor-element-b0i3c1 > .elementor-element-b0i3l { grid-column: span 5; }
  #hbz-ci-diag > .elementor-element-b0i3c1 > .elementor-element-b0i3r { grid-column: span 7; }
}
@media (max-width: 1023px) {
  #hbz-ci-diag > .elementor-element-b0i3c1 > .elementor-element-b0i3l,
  #hbz-ci-diag > .elementor-element-b0i3c1 > .elementor-element-b0i3r { grid-column: span 12; }
}
#hbz-ci-diag .elementor-element-b0i3cols {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 640px) { #hbz-ci-diag .elementor-element-b0i3cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.hbz-ci-step { border-top: 2px solid rgb(var(--c-green)); padding-top: 1.25rem; }
.hbz-ci-step .hbz-ico-tile { background-color: rgb(var(--c-card)); }

/* cta band */
#hbz-ci-cta { background-color: rgb(var(--c-strip)); color: #fff; padding: 4rem 0; }
@media (min-width: 768px) { #hbz-ci-cta { padding: 5rem 0; } }
#hbz-ci-cta > .elementor-element-b0i4c1 {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: center; gap: 2rem;
  max-width: 80rem; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-ci-cta > .elementor-element-b0i4c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #hbz-ci-cta > .elementor-element-b0i4c1 { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 767px) { #hbz-ci-cta > .elementor-element-b0i4c1 { grid-template-columns: minmax(0, 1fr); } }
#hbz-ci-cta > .elementor-element-b0i4c1 > .elementor-element-b0i4h { grid-column: 1 / -1; }
#hbz-ci-cta h1, #hbz-ci-cta h2, #hbz-ci-cta h3 { color: #fff !important; }
#hbz-ci-cta .elementor-button { border-radius: 9999px; }

/* ============ find-battery (#hbz-fb-*) ============ */

#hbz-fb-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--c-line));
  background-image: radial-gradient(rgb(var(--c-line)) 1px, rgba(0,0,0,0) 1px);
  background-size: 22px 22px;
  padding: 3.5rem 1rem 4rem;
}
#hbz-fb-hero > .elementor-element-b0f1c1 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: 2.5rem;
  row-gap: 2.5rem;
  /* The source puts max-w-7xl + px-4/sm:px-6/lg:px-8 on the WRAPPER, so its
     inner 12-col grid is 1280 - 64 = 1216 (tracks of 50px at the 56px gap).
     MY grid was 1280 wide because the horizontal padding sat on the SECTION
     instead, which made the calculator column 723.3 instead of 686 and the
     left column 500.7 instead of 474. Padding belongs HERE. */
  max-width: 80rem; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-fb-hero > .elementor-element-b0f1c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { #hbz-fb-hero { padding-top: 4rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) {
  #hbz-fb-hero > .elementor-element-b0f1c1 { padding-left: 2rem; padding-right: 2rem; }
  #hbz-fb-hero > .elementor-element-b0f1c1 { column-gap: 3.5rem; }
}
#hbz-fb-hero > .elementor-element-b0f1c1 > .elementor-element-b0f1l { grid-column: span 5; padding-top: 2rem; }
#hbz-fb-hero > .elementor-element-b0f1c1 > #calculator { grid-column: span 7; min-width: 0; scroll-margin-top: 7rem; }
@media (max-width: 1023px) {
  #hbz-fb-hero > .elementor-element-b0f1c1 > .elementor-element-b0f1l,
  #hbz-fb-hero > .elementor-element-b0f1c1 > #calculator { grid-column: span 12; }
}
#hbz-fb-hero h1 a, #hbz-fb-hero p a {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  color: rgb(var(--c-ink));
  text-decoration: underline;
  text-decoration-color: rgb(var(--c-green));
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.hbz-fb-list { list-style: none; margin: 0; padding: 0; }
.hbz-fb-list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.875rem; color: rgb(var(--c-ink)); margin-bottom: 0.875rem;
}
.hbz-fb-list svg { width: 1.125rem; height: 1.125rem; color: rgb(var(--c-green)); flex: 0 0 auto; margin-top: 0.125rem; }

/* browse by make: bg-mint/50, py-16 md:py-24 */
#hbz-fb-makes { background-color: rgb(var(--c-mint) / 0.5); padding: 4rem 0; }
@media (min-width: 768px) { #hbz-fb-makes { padding: 6rem 0; } }
#hbz-fb-makes > .elementor-element-b0f2c1 {
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr));
  align-items: start; column-gap: 2.5rem; row-gap: 2.5rem;
  max-width: 80rem; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-fb-makes > .elementor-element-b0f2c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) {
  #hbz-fb-makes > .elementor-element-b0f2c1 { padding-left: 2rem; padding-right: 2rem; column-gap: 3.5rem; }
  #hbz-fb-makes > .elementor-element-b0f2c1 > .elementor-element-b0f2l { grid-column: span 4; }
  #hbz-fb-makes > .elementor-element-b0f2c1 > .elementor-element-b0f2r { grid-column: span 8; }
}
@media (max-width: 1023px) {
  #hbz-fb-makes > .elementor-element-b0f2c1 > .elementor-element-b0f2l,
  #hbz-fb-makes > .elementor-element-b0f2c1 > .elementor-element-b0f2r { grid-column: span 12; }
}
.hbz-fb-talk {
  margin-top: 1.5rem; border-radius: 1rem;
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-mint) / 0.6);
  padding: 1.25rem;
}
.hbz-fb-talk p { font-size: 0.875rem; color: rgb(var(--c-ink)); margin: 0; }
.hbz-fb-talk .hbz-fb-talk-h { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.hbz-fb-talk svg { width: 1rem; height: 1rem; color: rgb(var(--c-green)); flex: 0 0 auto; }
/* the makes accordion (native widget) */
#hbz-fb-makes .elementor-accordion { border: 0; }
#hbz-fb-makes .elementor-accordion-item {
  border: 1px solid rgb(var(--c-line));
  border-radius: 1rem;
  overflow: hidden;
  background-color: rgb(var(--c-card));
  margin-bottom: 0.75rem;
  transition: border-color 0.2s ease;
}
#hbz-fb-makes .elementor-accordion-item.elementor-active { border-color: rgb(var(--c-green) / 0.4); }
#hbz-fb-makes .elementor-tab-title {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem;
  background-color: rgb(var(--c-card)) !important;
}
#hbz-fb-makes .elementor-tab-title .elementor-accordion-icon {
  color: rgb(var(--c-muted)); order: 3; margin-left: auto;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
#hbz-fb-makes .elementor-tab-content { border: 0; padding: 0; }
/* The source's collapsed make title is 60px tall = 32px padding (16/16) + a
   28px content box, so the accordion is 16 x 60 + 15 x 12 = 1140 against the
   source's 1172. My token row had no explicit line-height, so the 1.25rem
   Barlow name resolved to ~22px and every item was 54 (16 x 54 + 180 = 1044).
   Pinning the row to 28px matches the source's content box. */
.hbz-fb-mk { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 1.75rem; }
.hbz-fb-mk-n { font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; line-height: 1.75rem; color: rgb(var(--c-ink)); }
.hbz-fb-mk-c { border-radius: 9999px; background-color: rgb(var(--c-mint)); padding: 0.125rem 0.625rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; line-height: 1.5; color: rgb(var(--c-green)); }
/* the model rows inside each make panel */
.hbz-fb-rows { border-top: 1px solid rgb(var(--c-line)); }
.hbz-fb-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.875rem 1.25rem;
  border-bottom: 1px solid rgb(var(--c-line));
}
.hbz-fb-row:last-child { border-bottom: 0; }
.hbz-fb-row .hbz-fb-m { font-weight: 600; color: rgb(var(--c-ink)); margin: 0; }
.hbz-fb-row .hbz-fb-y { font-size: 0.875rem; color: rgb(var(--c-muted)); margin: 0; }
.hbz-fb-price { text-align: right; }
.hbz-fb-price .hbz-fb-p1 { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875rem; font-weight: 600; color: rgb(var(--c-ink)); margin: 0; }
.hbz-fb-price .hbz-fb-p1 span { font-family: Archivo, sans-serif; font-size: 11px; font-weight: 500; color: rgb(var(--c-muted)); }
.hbz-fb-price .hbz-fb-p2 { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; color: rgb(var(--c-muted)); margin: 0; }
.hbz-fb-q {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 9999px; border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card));
  padding: 0.35rem 0.75rem; font-size: 0.8125rem; font-weight: 600;
  color: rgb(var(--c-ink)); cursor: pointer;
}
.hbz-fb-q:hover { border-color: rgb(var(--c-green)); color: rgb(var(--c-green)); }
.hbz-fb-q svg { width: 0.875rem; height: 0.875rem; }

/* pricing notes: bg-card/60 border-t, py-14 */
#hbz-fb-notes {
  background-color: rgb(var(--c-card) / 0.6);
  border-top: 1px solid rgb(var(--c-line));
  padding: 3.5rem 0;
}
#hbz-fb-notes > .elementor-element-b0f3c1 {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  max-width: 80rem; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-fb-notes > .elementor-element-b0f3c1 { grid-template-columns: repeat(3, minmax(0,1fr)); padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #hbz-fb-notes > .elementor-element-b0f3c1 { padding-left: 2rem; padding-right: 2rem; } }
.hbz-fb-note { display: flex; align-items: flex-start; gap: 1rem; }
.hbz-fb-note .hbz-fb-nt { font-weight: 600; color: rgb(var(--c-ink)); margin: 0; }
.hbz-fb-note .hbz-fb-nb { font-size: 0.875rem; line-height: 1.625; color: rgb(var(--c-muted)); margin: 0.25rem 0 0; }

/* image cta */
#hbz-fb-cta { position: relative; overflow: hidden; border-top: 1px solid rgb(var(--c-line)); }
/* The background image + tint live in a NATIVE html widget whose Elementor wrapper
   is position: relative with height 0, so inset: 0 resolved against a 0-height
   box and the whole overlay vanished — the band rendered on the page's own light
   background with white text on it (user: "fix color in font and bg"). Make the
   wrapper itself fill the band and put the content above it. */
#hbz-fb-cta > .elementor-element-b0f4bg { position: absolute; inset: 0; z-index: 0; }
#hbz-fb-cta .hbz-fb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#hbz-fb-cta .hbz-fb-tint { position: absolute; inset: 0; background-color: rgb(0 0 0 / 0.75); }
#hbz-fb-cta > .elementor-element-b0f4c1 { position: relative; z-index: 1; }
#hbz-fb-cta > .elementor-element-b0f4c1 {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: center; gap: 2rem;
  max-width: 80rem; margin-left: auto; margin-right: auto;
  padding: 4rem 1rem;
}
@media (min-width: 640px) { #hbz-fb-cta > .elementor-element-b0f4c1 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { #hbz-fb-cta > .elementor-element-b0f4c1 { padding-top: 5rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) { #hbz-fb-cta > .elementor-element-b0f4c1 { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 767px) { #hbz-fb-cta > .elementor-element-b0f4c1 { grid-template-columns: minmax(0, 1fr); } }
#hbz-fb-cta > .elementor-element-b0f4c1 > .elementor-element-b0f4h { grid-column: 1 / -1; }
#hbz-fb-cta h1, #hbz-fb-cta h2, #hbz-fb-cta h3 { color: #fff !important; }
#hbz-fb-cta p { color: rgb(255 255 255 / 0.75) !important; }
#hbz-fb-cta .elementor-button { border-radius: 9999px; }

/* ---- first-accordion-item closed (the native widget opens item 1) ---- */
#hbz-ci-codes .elementor-accordion-item:first-child .elementor-tab-title.elementor-active {
  background-color: rgb(var(--c-card)) !important;
}


/* ========================================================
   generated utilities (@tailwind utilities, prefix hbz-, important)
   ======================================================== */
.hbz-pointer-events-none {
  pointer-events: none !important
}

.hbz-fixed {
  position: fixed !important
}

.hbz-absolute {
  position: absolute !important
}

.hbz-relative {
  position: relative !important
}

.hbz-sticky {
  position: sticky !important
}

.hbz-inset-0 {
  inset: 0px !important
}

.-hbz-left-2 {
  left: -0.5rem !important
}

.-hbz-right-2 {
  right: -0.5rem !important
}

.hbz--left-2 {
  left: -0.5rem !important
}

.hbz-bottom-3 {
  bottom: 0.75rem !important
}

.hbz-bottom-6 {
  bottom: 1.5rem !important
}

.hbz-left-1\/2 {
  left: 50% !important
}

.hbz-left-3 {
  left: 0.75rem !important
}

.hbz-left-4 {
  left: 1rem !important
}

.hbz-right-0 {
  right: 0px !important
}

.hbz-right-3 {
  right: 0.75rem !important
}

.hbz-top-0 {
  top: 0px !important
}

.hbz-top-1\/2 {
  top: 50% !important
}

.hbz-top-4 {
  top: 1rem !important
}

.hbz-top-6 {
  top: 1.5rem !important
}

.hbz-z-50 {
  z-index: 50 !important
}

.hbz-z-\[60\] {
  z-index: 60 !important
}

.hbz-mx-6 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important
}

.hbz-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important
}

.hbz-mt-0\.5 {
  margin-top: 0.125rem !important
}

.hbz-mt-1 {
  margin-top: 0.25rem !important
}

.hbz-mt-1\.5 {
  margin-top: 0.375rem !important
}

.hbz-mt-10 {
  margin-top: 2.5rem !important
}

.hbz-mt-12 {
  margin-top: 3rem !important
}

.hbz-mt-2 {
  margin-top: 0.5rem !important
}

.hbz-mt-2\.5 {
  margin-top: 0.625rem !important
}

.hbz-mt-3 {
  margin-top: 0.75rem !important
}

.hbz-mt-4 {
  margin-top: 1rem !important
}

.hbz-mt-5 {
  margin-top: 1.25rem !important
}

.hbz-mt-6 {
  margin-top: 1.5rem !important
}

.hbz-mt-7 {
  margin-top: 1.75rem !important
}

.hbz-mt-8 {
  margin-top: 2rem !important
}

.hbz-mt-auto {
  margin-top: auto !important
}

.hbz-block {
  display: block !important
}

.hbz-flex {
  display: flex !important
}

.hbz-inline-flex {
  display: inline-flex !important
}

.hbz-grid {
  display: grid !important
}

.hbz-hidden {
  display: none !important
}

.hbz-aspect-\[4\/3\] {
  aspect-ratio: 4/3 !important
}

.hbz-h-10 {
  height: 2.5rem !important
}

.hbz-h-11 {
  height: 2.75rem !important
}

.hbz-h-14 {
  height: 3.5rem !important
}

.hbz-h-40 {
  height: 10rem !important
}

.hbz-h-9 {
  height: 2.25rem !important
}

.hbz-h-\[1em\] {
  height: 1em !important
}

.hbz-h-\[72px\] {
  height: 72px !important
}

.hbz-h-full {
  height: 100% !important
}

.hbz-min-h-\[104px\] {
  min-height: 104px !important
}

.hbz-w-10 {
  width: 2.5rem !important
}

.hbz-w-11 {
  width: 2.75rem !important
}

.hbz-w-14 {
  width: 3.5rem !important
}

.hbz-w-9 {
  width: 2.25rem !important
}

.hbz-w-\[1em\] {
  width: 1em !important
}

.hbz-w-\[86\%\] {
  width: 86% !important
}

.hbz-w-full {
  width: 100% !important
}

.hbz-min-w-0 {
  min-width: 0px !important
}

.hbz-max-w-2xl {
  max-width: 42rem !important
}

.hbz-max-w-7xl {
  max-width: 80rem !important
}

.hbz-max-w-\[350px\] {
  max-width: 350px !important
}

.hbz-max-w-\[46ch\] {
  max-width: 46ch !important
}

.hbz-max-w-\[50ch\] {
  max-width: 50ch !important
}

.hbz-max-w-\[52ch\] {
  max-width: 52ch !important
}

.hbz-max-w-\[56ch\] {
  max-width: 56ch !important
}

.hbz-max-w-\[58ch\] {
  max-width: 58ch !important
}

.hbz-max-w-\[62ch\] {
  max-width: 62ch !important
}

.hbz-max-w-\[70ch\] {
  max-width: 70ch !important
}

.hbz-max-w-\[720px\] {
  max-width: 720px !important
}

.hbz-max-w-md {
  max-width: 28rem !important
}

.hbz-max-w-sm {
  max-width: 24rem !important
}

.hbz-flex-1 {
  flex: 1 1 0% !important
}

.hbz-shrink-0 {
  flex-shrink: 0 !important
}

.-hbz-translate-x-1\/2 {
  --tw-translate-x: -50% !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}

.-hbz-translate-y-1\/2 {
  --tw-translate-y: -50% !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}

.hbz-cursor-not-allowed {
  cursor: not-allowed !important
}

.hbz-scroll-mt-24 {
  scroll-margin-top: 6rem !important
}

.hbz-scroll-mt-28 {
  scroll-margin-top: 7rem !important
}

.hbz-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important
}

.hbz-flex-col {
  flex-direction: column !important
}

.hbz-flex-wrap {
  flex-wrap: wrap !important
}

.hbz-place-items-center {
  place-items: center !important
}

.hbz-items-start {
  align-items: flex-start !important
}

.hbz-items-center {
  align-items: center !important
}

.hbz-items-baseline {
  align-items: baseline !important
}

.hbz-justify-center {
  justify-content: center !important
}

.hbz-justify-between {
  justify-content: space-between !important
}

.hbz-gap-1 {
  gap: 0.25rem !important
}

.hbz-gap-1\.5 {
  gap: 0.375rem !important
}

.hbz-gap-10 {
  gap: 2.5rem !important
}

.hbz-gap-12 {
  gap: 3rem !important
}

.hbz-gap-2 {
  gap: 0.5rem !important
}

.hbz-gap-2\.5 {
  gap: 0.625rem !important
}

.hbz-gap-3 {
  gap: 0.75rem !important
}

.hbz-gap-3\.5 {
  gap: 0.875rem !important
}

.hbz-gap-4 {
  gap: 1rem !important
}

.hbz-gap-5 {
  gap: 1.25rem !important
}

.hbz-gap-6 {
  gap: 1.5rem !important
}

.hbz-gap-8 {
  gap: 2rem !important
}

.hbz-gap-x-2\.5 {
  -moz-column-gap: 0.625rem !important;
       column-gap: 0.625rem !important
}

.hbz-gap-x-3 {
  -moz-column-gap: 0.75rem !important;
       column-gap: 0.75rem !important
}

.hbz-gap-x-4 {
  -moz-column-gap: 1rem !important;
       column-gap: 1rem !important
}

.hbz-gap-y-1 {
  row-gap: 0.25rem !important
}

.hbz-gap-y-2\.5 {
  row-gap: 0.625rem !important
}

.hbz-space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) !important
}

.hbz-space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)) !important
}

.hbz-space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)) !important
}

.hbz-space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse)) !important
}

.hbz-space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(1rem * var(--tw-space-y-reverse)) !important
}

.hbz-space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)) !important
}

.hbz-divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0 !important;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important
}

.hbz-divide-line > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1 !important;
  border-color: rgb(var(--c-line) / var(--tw-divide-opacity, 1)) !important
}

.hbz-overflow-hidden {
  overflow: hidden !important
}

.hbz-rounded-2xl {
  border-radius: 1rem !important
}

.hbz-rounded-3xl {
  border-radius: 1.5rem !important
}

.hbz-rounded-\[26px\] {
  border-radius: 26px !important
}

.hbz-rounded-full {
  border-radius: 9999px !important
}

.hbz-rounded-xl {
  border-radius: 0.75rem !important
}

.hbz-border {
  border-width: 1px !important
}

.hbz-border-y {
  border-top-width: 1px !important;
  border-bottom-width: 1px !important
}

.hbz-border-b {
  border-bottom-width: 1px !important
}

.hbz-border-t {
  border-top-width: 1px !important
}

.hbz-border-t-2 {
  border-top-width: 2px !important
}

.hbz-border-dashed {
  border-style: dashed !important
}

.hbz-border-green {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--c-green) / var(--tw-border-opacity, 1)) !important
}

.hbz-border-green\/20 {
  border-color: rgb(var(--c-green) / 0.2) !important
}

.hbz-border-green\/30 {
  border-color: rgb(var(--c-green) / 0.3) !important
}

.hbz-border-green\/40 {
  border-color: rgb(var(--c-green) / 0.4) !important
}

.hbz-border-line {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--c-line) / var(--tw-border-opacity, 1)) !important
}

.hbz-border-white\/10 {
  border-color: rgb(255 255 255 / 0.1) !important
}

.hbz-border-white\/25 {
  border-color: rgb(255 255 255 / 0.25) !important
}

.hbz-border-white\/30 {
  border-color: rgb(255 255 255 / 0.3) !important
}

.hbz-bg-black\/75 {
  background-color: rgb(0 0 0 / 0.75) !important
}

.hbz-bg-bone {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-bone) / var(--tw-bg-opacity, 1)) !important
}

.hbz-bg-card {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-card) / var(--tw-bg-opacity, 1)) !important
}

.hbz-bg-card\/60 {
  background-color: rgb(var(--c-card) / 0.6) !important
}

.hbz-bg-card\/90 {
  background-color: rgb(var(--c-card) / 0.9) !important
}

.hbz-bg-card\/95 {
  background-color: rgb(var(--c-card) / 0.95) !important
}

.hbz-bg-green {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-green) / var(--tw-bg-opacity, 1)) !important
}

.hbz-bg-ink\/25 {
  background-color: rgb(var(--c-ink) / 0.25) !important
}

.hbz-bg-mint {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-mint) / var(--tw-bg-opacity, 1)) !important
}

.hbz-bg-mint\/50 {
  background-color: rgb(var(--c-mint) / 0.5) !important
}

.hbz-bg-mint\/60 {
  background-color: rgb(var(--c-mint) / 0.6) !important
}

.hbz-bg-mint\/70 {
  background-color: rgb(var(--c-mint) / 0.7) !important
}

.hbz-bg-pine {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-pine) / var(--tw-bg-opacity, 1)) !important
}

.hbz-bg-pine\/60 {
  background-color: rgb(var(--c-pine) / 0.6) !important
}

.hbz-bg-strip {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-strip) / var(--tw-bg-opacity, 1)) !important
}

.hbz-bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1) !important
}

.hbz-bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important
}

.hbz-from-green {
  --tw-gradient-from: rgb(var(--c-green) / 1) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--c-green) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important
}

.hbz-to-green-bright {
  --tw-gradient-to: rgb(var(--c-green-bright) / 1) var(--tw-gradient-to-position) !important
}

.hbz-object-cover {
  -o-object-fit: cover !important;
     object-fit: cover !important
}

.hbz-p-4 {
  padding: 1rem !important
}

.hbz-p-5 {
  padding: 1.25rem !important
}

.hbz-p-6 {
  padding: 1.5rem !important
}

.hbz-px-2\.5 {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important
}

.hbz-px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important
}

.hbz-px-3\.5 {
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important
}

.hbz-px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important
}

.hbz-px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important
}

.hbz-px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important
}

.hbz-py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important
}

.hbz-py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important
}

.hbz-py-14 {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important
}

.hbz-py-16 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important
}

.hbz-py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important
}

.hbz-py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important
}

.hbz-py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important
}

.hbz-py-3\.5 {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important
}

.hbz-py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important
}

.hbz-pb-16 {
  padding-bottom: 4rem !important
}

.hbz-pb-3 {
  padding-bottom: 0.75rem !important
}

.hbz-pb-5 {
  padding-bottom: 1.25rem !important
}

.hbz-pb-6 {
  padding-bottom: 1.5rem !important
}

.hbz-pb-7 {
  padding-bottom: 1.75rem !important
}

.hbz-pt-14 {
  padding-top: 3.5rem !important
}

.hbz-pt-4 {
  padding-top: 1rem !important
}

.hbz-pt-5 {
  padding-top: 1.25rem !important
}

.hbz-pt-6 {
  padding-top: 1.5rem !important
}

.hbz-text-left {
  text-align: left !important
}

.hbz-text-center {
  text-align: center !important
}

.hbz-text-right {
  text-align: right !important
}

.hbz-font-display {
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif !important
}

.hbz-font-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace !important
}

.hbz-text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important
}

.hbz-text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important
}

.hbz-text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important
}

.hbz-text-\[0\.95rem\] {
  font-size: 0.95rem !important
}

.hbz-text-\[1\.35rem\] {
  font-size: 1.35rem !important
}

.hbz-text-\[10px\] {
  font-size: 10px !important
}

.hbz-text-\[11px\] {
  font-size: 11px !important
}

.hbz-text-\[13px\] {
  font-size: 13px !important
}

.hbz-text-\[15px\] {
  font-size: 15px !important
}

.hbz-text-\[2\.6rem\] {
  font-size: 2.6rem !important
}

.hbz-text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important
}

.hbz-text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important
}

.hbz-text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important
}

.hbz-text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important
}

.hbz-text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important
}

.hbz-font-bold {
  font-weight: 700 !important
}

.hbz-font-medium {
  font-weight: 500 !important
}

.hbz-font-normal {
  font-weight: 400 !important
}

.hbz-font-semibold {
  font-weight: 600 !important
}

.hbz-uppercase {
  text-transform: uppercase !important
}

.hbz-leading-\[0\.98\] {
  line-height: 0.98 !important
}

.hbz-leading-none {
  line-height: 1 !important
}

.hbz-leading-relaxed {
  line-height: 1.625 !important
}

.hbz-leading-snug {
  line-height: 1.375 !important
}

.hbz-leading-tight {
  line-height: 1.25 !important
}

.hbz-tracking-\[0\.14em\] {
  letter-spacing: 0.14em !important
}

.hbz-tracking-\[0\.16em\] {
  letter-spacing: 0.16em !important
}

.hbz-tracking-tight {
  letter-spacing: -0.025em !important
}

.hbz-tracking-wide {
  letter-spacing: 0.025em !important
}

.hbz-tracking-wider {
  letter-spacing: 0.05em !important
}

.hbz-text-green {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-green) / var(--tw-text-opacity, 1)) !important
}

.hbz-text-green-bright {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-green-bright) / var(--tw-text-opacity, 1)) !important
}

.hbz-text-green\/80 {
  color: rgb(var(--c-green) / 0.8) !important
}

.hbz-text-ink {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-ink) / var(--tw-text-opacity, 1)) !important
}

.hbz-text-ink\/85 {
  color: rgb(var(--c-ink) / 0.85) !important
}

.hbz-text-muted {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-muted) / var(--tw-text-opacity, 1)) !important
}

.hbz-text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}

.hbz-text-white\/50 {
  color: rgb(255 255 255 / 0.5) !important
}

.hbz-text-white\/60 {
  color: rgb(255 255 255 / 0.6) !important
}

.hbz-text-white\/70 {
  color: rgb(255 255 255 / 0.7) !important
}

.hbz-text-white\/75 {
  color: rgb(255 255 255 / 0.75) !important
}

.hbz-text-white\/90 {
  color: rgb(255 255 255 / 0.9) !important
}

.hbz-underline {
  text-decoration-line: underline !important
}

.hbz-decoration-green {
  text-decoration-color: rgb(var(--c-green) / 1) !important
}

.hbz-decoration-green\/40 {
  text-decoration-color: rgb(var(--c-green) / 0.4) !important
}

.hbz-decoration-2 {
  text-decoration-thickness: 2px !important
}

.hbz-underline-offset-2 {
  text-underline-offset: 2px !important
}

.hbz-underline-offset-4 {
  text-underline-offset: 4px !important
}

.hbz-opacity-0 {
  opacity: 0 !important
}

.hbz-opacity-100 {
  opacity: 1 !important
}

.hbz-shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.hbz-shadow-\[0_14px_34px_-14px_rgb\(var\(--c-green\)\/0\.9\)\] {
  --tw-shadow: 0 14px 34px -14px rgb(var(--c-green)/0.9) !important;
  --tw-shadow-colored: 0 14px 34px -14px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.hbz-shadow-\[0_34px_70px_-36px_rgb\(var\(--c-pine\)\/0\.65\)\] {
  --tw-shadow: 0 34px 70px -36px rgb(var(--c-pine)/0.65) !important;
  --tw-shadow-colored: 0 34px 70px -36px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.hbz-shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.hbz-shadow-lift {
  --tw-shadow: 0 24px 48px -28px rgb(var(--c-pine) / 0.45) !important;
  --tw-shadow-colored: 0 24px 48px -28px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.hbz-shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.hbz-backdrop-blur {
  --tw-backdrop-blur: blur(8px) !important;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important
}

.hbz-backdrop-blur-md {
  --tw-backdrop-blur: blur(12px) !important;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important
}

.hbz-backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px) !important;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important
}

.hbz-transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important
}

.hbz-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important
}

.hbz-transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important
}

.hbz-duration-200 {
  transition-duration: 200ms !important
}

.hover\:hbz-border-green:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--c-green) / var(--tw-border-opacity, 1)) !important
}

.hover\:hbz-border-green\/40:hover {
  border-color: rgb(var(--c-green) / 0.4) !important
}

.hover\:hbz-border-white\/70:hover {
  border-color: rgb(255 255 255 / 0.7) !important
}

.hover\:hbz-bg-ink\/50:hover {
  background-color: rgb(var(--c-ink) / 0.5) !important
}

.hover\:hbz-bg-mint:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-mint) / var(--tw-bg-opacity, 1)) !important
}

.hover\:hbz-bg-mint\/40:hover {
  background-color: rgb(var(--c-mint) / 0.4) !important
}

.hover\:hbz-bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1) !important
}

.hover\:hbz-bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2) !important
}

.hover\:hbz-text-green:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-green) / var(--tw-text-opacity, 1)) !important
}

.hover\:hbz-text-green-bright:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-green-bright) / var(--tw-text-opacity, 1)) !important
}

.hover\:hbz-text-ink:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-ink) / var(--tw-text-opacity, 1)) !important
}

.hover\:hbz-text-white:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}

.hover\:hbz-text-white\/80:hover {
  color: rgb(255 255 255 / 0.8) !important
}

.hover\:hbz-shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.hbz-group:hover .group-hover\:hbz-text-ink {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-ink) / var(--tw-text-opacity, 1)) !important
}

@media (min-width: 640px) {
  .sm\:hbz-left-6 {
    left: 1.5rem !important
  }

  .sm\:hbz-right-6 {
    right: 1.5rem !important
  }

  .sm\:hbz-col-span-2 {
    grid-column: span 2 / span 2 !important
  }

  .sm\:hbz-block {
    display: block !important
  }

  .sm\:hbz-inline-block {
    display: inline-block !important
  }

  .sm\:hbz-flex {
    display: flex !important
  }

  .sm\:hbz-inline-flex {
    display: inline-flex !important
  }

  .sm\:hbz-hidden {
    display: none !important
  }

  .sm\:hbz-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .sm\:hbz-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }

  .sm\:hbz-grid-cols-\[4rem_1fr\] {
    grid-template-columns: 4rem 1fr !important
  }

  .sm\:hbz-gap-5 {
    gap: 1.25rem !important
  }

  .sm\:hbz-p-6 {
    padding: 1.5rem !important
  }

  .sm\:hbz-px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important
  }

  .sm\:hbz-px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important
  }

  .sm\:hbz-px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important
  }

  .sm\:hbz-pb-4 {
    padding-bottom: 1rem !important
  }

  .sm\:hbz-text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important
  }

  .sm\:hbz-text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important
  }

  .sm\:hbz-text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important
  }
}

@media (min-width: 768px) {
  .md\:hbz-inline-block {
    display: inline-block !important
  }

  .md\:hbz-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .md\:hbz-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }

  .md\:hbz-py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important
  }

  .md\:hbz-py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important
  }

  .md\:hbz-py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
  }

  .md\:hbz-pl-0 {
    padding-left: 0px !important
  }
}

@media (min-width: 1024px) {
  .lg\:hbz-col-span-1 {
    grid-column: span 1 / span 1 !important
  }

  .lg\:hbz-col-span-2 {
    grid-column: span 2 / span 2 !important
  }

  .lg\:hbz-col-span-3 {
    grid-column: span 3 / span 3 !important
  }

  .lg\:hbz-col-span-4 {
    grid-column: span 4 / span 4 !important
  }

  .lg\:hbz-col-span-5 {
    grid-column: span 5 / span 5 !important
  }

  .lg\:hbz-col-span-7 {
    grid-column: span 7 / span 7 !important
  }

  .lg\:hbz-col-span-8 {
    grid-column: span 8 / span 8 !important
  }

  .lg\:hbz-mx-8 {
    margin-left: 2rem !important;
    margin-right: 2rem !important
  }

  .lg\:hbz-flex {
    display: flex !important
  }

  .lg\:hbz-hidden {
    display: none !important
  }

  .lg\:hbz-h-full {
    height: 100% !important
  }

  .lg\:hbz-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important
  }

  .lg\:hbz-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .lg\:hbz-grid-cols-\[4rem_1fr_15rem\] {
    grid-template-columns: 4rem 1fr 15rem !important
  }

  .lg\:hbz-flex-row {
    flex-direction: row !important
  }

  .lg\:hbz-items-center {
    align-items: center !important
  }

  .lg\:hbz-justify-end {
    justify-content: flex-end !important
  }

  .lg\:hbz-gap-14 {
    gap: 3.5rem !important
  }

  .lg\:hbz-p-7 {
    padding: 1.75rem !important
  }

  .lg\:hbz-px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important
  }

  .lg\:hbz-pb-20 {
    padding-bottom: 5rem !important
  }

  .lg\:hbz-pb-24 {
    padding-bottom: 6rem !important
  }

  .lg\:hbz-pt-16 {
    padding-top: 4rem !important
  }

  .lg\:hbz-pt-20 {
    padding-top: 5rem !important
  }
}


/* ========================================================
   region wrappers
   ======================================================== */
/* ============================================================
   REGION WRAPPERS  +  HOST-INTEGRATION OVERRIDES

   Elementor 4.x containers do NOT register the `_css_classes` control — it is
   registered only for widgets, in includes/widgets/common-base.php, and
   includes/base/element-base.php renders a wrapper class only for settings
   whose control declares a `prefix_class`. So a container cannot be given a
   Tailwind class. `_element_id` DOES render, so each region container is
   addressed by id instead. These declarations are the exact equivalents of the
   region classes they replace.
   ============================================================ */

/* The source's <body class="font-body antialiased"> (index.html line 52), plus
   Tailwind preflight's `html { line-height: 1.5 }`. Without these the regions
   inherit the host theme's Rubik and its px-based line-height (24px), which
   pushed the nav text off by 1.2px because the source's nav line box is
   14.4 x 1.5 = 21.6px. Utility line-heights (!important) still win. */
#hbz-strip,
#hbz-bar,
#hbz-drawer,
#hbz-footer,
#hbz-hero,
#hbz-brands,
#how,
#reconditioned,
#hbz-faq,
#hbz-cta {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  /* The ink colour is not decoration. Elementor hands these regions the kit's
     text colour (rgb(106 112 110)) unless told otherwise; the source gets the
     ink from body{color:rgb(var(--c-ink))} in css/style.css line 38. Each
     region below that wants a different colour overrides this later in the
     file — same specificity, so source order decides. */
  color: rgb(var(--c-ink));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The host theme colours anchors itself at specificity (0,1,1) — above the
   component classes at (0,1,0) — which turned the nav links, the header CTA and
   the strip phone number near-black. The source does not have that rule: it
   relies on Tailwind preflight's `a { color: inherit }`, so anchors take their
   region's colour and only the component classes override them. Reproduced here
   at (1,0,1), which out-ranks the theme. */
#hbz-strip a,
#hbz-bar a,
#hbz-drawer a,
#hbz-footer a,
#hbz-hero a,
#hbz-brands a,
#how a,
#reconditioned a,
#hbz-faq a,
#hbz-cta a {
  color: inherit;
  text-decoration: inherit;
}

/* ...and the component classes are re-asserted above the theme's (0,1,1) link
   rule. They need !important because a plain (1,1,0) would also out-rank the
   `hover:hbz-*` utilities that are !important. Scoped to the regions, so nothing
   outside the header and footer is affected. */
#hbz-bar .navlink {
  color: rgb(var(--c-muted)) !important;
}
#hbz-bar .navlink:hover {
  color: rgb(var(--c-ink)) !important;
}
#hbz-bar .btn-primary,
#hbz-drawer .btn-primary {
  color: #fff !important;
  background: rgb(var(--c-green)) !important;
}
#hbz-bar .btn-primary:hover,
#hbz-drawer .btn-primary:hover {
  background: rgb(var(--c-pine)) !important;
}
#hbz-footer .soc {
  color: rgb(255 255 255 / 0.72) !important;
}
#hbz-footer .soc:hover {
  color: #fff !important;
}

/* index.html line 58: <div class="bg-strip text-white/90"> */
#hbz-strip {
  background-color: rgb(var(--c-strip));
  color: rgb(255 255 255 / 0.9);
}

/* index.html line 68:
   <header class="sticky top-0 z-50 border-b border-line bg-card/95 backdrop-blur-md transition-shadow">
   position / top / z-index live on .elementor-location-header instead: a sticky
   element can only travel inside its own parent's box, and the Elementor element
   that holds this container is exactly header-height tall.
   `color` is here because the source takes it from
   `body { color: rgb(var(--c-ink)) }` (css/style.css line 38) — without it the
   wordmark and the menu icon inherit the host kit's text colour, measured
   rgb(106 112 110) instead of rgb(12 18 14). */
#hbz-bar {
  color: rgb(var(--c-ink));
  border-bottom: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card) / 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tailwind preflight normalises bare buttons — `background-color: transparent;
   background-image: none; color: inherit; padding: 0`. Without that, the host
   theme paints every <button> with its secondary colour: the menu button was
   measured as a solid rgb(21 87 255) disc instead of a white one with a hairline
   border. Written at (1,0,1) so it out-ranks the theme, while the utilities keep
   `!important` and still win (that is how hbz-border survives). */
#hbz-bar button,
#hbz-drawer button {
  background-color: transparent;
  background-image: none;
  color: inherit;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--c-line));
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* The sticky carrier — Elementor's header template wrapper, a direct child of
   <body>, so it has the whole page as travel. top:-32px lifts the 32px utility
   strip out of view and leaves the 72px bar flush with the viewport top, which
   is exactly what the source's `sticky top-0` header achieves, the strip not
   being sticky there either. */
/* Sticky is Elementor Pro's own setting on the bar container
   (.elementor-element-8a7e814 - Motion Effects > Sticky: Top, all devices),
   not a rule here: the wrapper is left static so the bar's own travel lifts the
   32px utility strip out of view. Elementor marks the pinned bar with
   .elementor-sticky--active and the scrolled state with
   .elementor-sticky--effects, which is the hook for the logo shrink below. */
.elementor-location-header {
  position: sticky;
  top: -32px;
  z-index: 50;
  border-bottom: 0;
  margin-bottom: 0;
}

/* On phones the utility strip wraps to two lines (measured 48px), so the carrier
   has to lift that much to leave the bar flush with the viewport top - at -32px
   a 16px sliver of the strip stayed visible above the pinned bar. */
@media (max-width: 639px) {
  .elementor-location-header { top: -48px !important; }
}

/* ---- native header bar (template 23, rebuilt with Elementor widgets) ----
   Reference measurements from the original design: 72px bar, compact lockup,
   40px round burger, phone pill. The bar has to be one non-wrapping row at
   every width: measured before this rule it computed as a wrapping column on
   phones, which pushed the burger to x=551 and the CTA to x=633 on a 390px
   screen - both off-screen, with the logo stretched to 491px. */
.elementor-23 .elementor-element.elementor-element-8a7e814 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  gap: 10px !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
@media (min-width: 640px) {
  .elementor-23 .elementor-element.elementor-element-8a7e814 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}
.elementor-23 .elementor-element.elementor-element-8a7e814.elementor-sticky--active {
  z-index: 50;
  box-shadow: 0 24px 48px -28px rgb(var(--c-pine) / 0.45);
}

/* Desktop: logo 30% down against the shipped lockup, tighter again once the bar
   is pinned, and the bar compresses 72 -> 60 with it. */
@media (min-width: 768px) {
  .elementor-23 .elementor-element.elementor-element-8a7e814 {
    min-height: 72px;
    transition: min-height 0.2s ease;
  }
  .elementor-23 .elementor-element.elementor-element-8a7e814.elementor-sticky--effects { min-height: 60px; }
  .elementor-23 .elementor-element.elementor-element-74f47cc img {
    width: 70%;
    transition: width 0.2s ease;
  }
  .elementor-23 .elementor-element.elementor-element-8a7e814.elementor-sticky--effects .elementor-element-74f47cc img { width: 52%; }
}

/* Phones: [logo] [call] [burger] - nothing may be pushed off-screen. */
@media (max-width: 767px) {
  .elementor-23 .elementor-element.elementor-element-8a7e814 {
    justify-content: space-between !important;
    min-height: 56px;
  }
  .elementor-23 .elementor-element.elementor-element-11c8c44 {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    order: 1 !important;
  }
  .elementor-23 .elementor-element.elementor-element-74f47cc img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 40px !important;
    object-fit: contain;
    object-position: left center;
  }
  .elementor-23 .elementor-element.elementor-element-43a56a7 {
    width: auto !important;
    flex: 0 0 auto !important;
    order: 2 !important;
    align-items: center;
  }
  .elementor-23 .elementor-element.elementor-element-c51a2b2 {
    width: auto !important;
    flex: 0 0 auto !important;
    order: 3 !important;
  }
}
@media (max-width: 639px) {
  /* The pill label cannot sit next to a legible logo on a phone, so the CTA
     stays as a 44px round tap target (the original design hid it here entirely). */
  .elementor-23 .elementor-element.elementor-element-5eca6a9 .elementor-button-text { display: none; }
  .elementor-23 .elementor-element.elementor-element-5eca6a9 .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .elementor-23 .elementor-element.elementor-element-5eca6a9 .elementor-button-content-wrapper {
    gap: 0;
    justify-content: center;
  }
}

/* Scrolled state, driven by the #top-sentinel IntersectionObserver in hbz.js.
   The shadow is the source's `shadow-lift` utility, so this is its exact value.
   Applied to #hbz-bar rather than to the wrapper: once scrolled, the wrapper's
   own top edge sits at -32px, above the viewport, so a shadow on it cannot show. */
/* Scrolled-state shadow, at every width. Two independent signals cover it:
   Elementor adds .elementor-sticky--active when its own sticky pins the bar, and
   hbz.js toggles .hbz-header-scrolled on the wrapper from the #top-sentinel
   observer (the wrapper is what pins the bar at tablet widths, where Elementor
   leaves it relative). Value is the source design shadow-lift. */
.elementor-23 .elementor-element.elementor-element-8a7e814.elementor-sticky--active,
.elementor-location-header.hbz-header-scrolled .elementor-element.elementor-element-8a7e814 {
  box-shadow: 0 24px 48px -28px rgb(var(--c-pine) / 0.45);
}

/* index.html line 100:
   <div class="fixed inset-0 z-[60] lg:hidden pointer-events-none">
   pointer-events-none is left to hbz.js, which adds and removes that utility.
   `color` as for the bar: the source's drawer text is the body ink. */
#hbz-drawer {
  color: rgb(var(--c-ink));
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* The drawer is built from NATIVE Elementor containers now (the backdrop and
   the panel are containers, not one html widget), so both are addressed by
   element id. The old `#hbz-drawer > .elementor-element { position: static }`
   rule is GONE on purpose: at (1,1,0) it out-ranked `#hbz-drawer-bk` (1,0,0)
   and would have forced the backdrop back to static. Both children position
   absolutely against #hbz-drawer (fixed, full height), and the panel carries
   pointer-events: auto because #hbz-drawer itself is pointer-events: none
   until hbz.js adds .drawer-open. */
#hbz-drawer-bk {
  position: absolute;
  inset: 0;
  background-color: rgb(var(--c-pine) / 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#hbz-drawer.drawer-open #hbz-drawer-bk {
  opacity: 1;
  pointer-events: auto;
}
#hbz-drawer-pn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 86%;
  max-width: 24rem;
  background-color: rgb(var(--c-card));
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
#hbz-drawer.drawer-open #hbz-drawer-pn {
  transform: none;
}
#hbz-drawer.drawer-open {
  pointer-events: auto;
}

@media (min-width: 1024px) {
  #hbz-drawer {
    display: none;
  }
}

/* Widget-rendered <button>s need the host-theme reset.
   Hello Elementor paints every bare <button> with its secondary colour at
   (0,1,1). The hbz-makes widget renders real <button> elements (the make
   toggle and the Get quote buttons) and the native-Elementor accordion it
   replaced used <div>s, so without this reset every make card renders as a
   solid blue bar. The attribute selector (0,1,1 + element) outranks the
   theme's plain `button` rule. */
[data-hbz-makes] button,
[data-hbz-issues] button {
  background-color: transparent;
  background-image: none;
  color: inherit;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--c-line));
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* index.html line 322: <footer class="bg-pine text-white/75"> */
#hbz-footer {
  background-color: rgb(var(--c-pine));
  color: rgb(255 255 255 / 0.75);
}

/* ------------------------------------------------------------ hero region ---
   The host theme colours anchors at (0,1,1) — above .btn's own declarations at
   (0,1,0) — so both hero buttons need their colours re-asserted here. They need
   !important because a plain (1,1,0) would also outrank the hover: utilities,
   which the config emits as !important.

   #hbz-hero is the widget's own <section> (see plugin/build/hero-markup.html);
   it is not an Elementor container, so this is the only place that names it. */
#hbz-hero .btn-primary {
  color: #fff !important;
  background: rgb(var(--c-green)) !important;
}
#hbz-hero .btn-primary:hover {
  background: rgb(var(--c-pine)) !important;
}
#hbz-hero .btn-ghost {
  color: rgb(var(--c-ink)) !important;
  background: rgb(var(--c-card)) !important;
  border: 1px solid rgb(var(--c-line)) !important;
}
#hbz-hero .btn-ghost:hover {
  color: rgb(var(--c-green)) !important;
  border-color: rgb(var(--c-green)) !important;
}

/* ------------------------------------------------- hero type defaults ---
   The hero's typography lives here rather than in Tailwind utilities, and that
   is a deliberate exception to how the rest of the design layer works. The
   utilities are emitted with `!important` (tailwind.config.js sets
   `important: true`), and the cascade compares importance BEFORE specificity —
   so no ordinary declaration can out-rank an !important one at any specificity,
   and an Elementor Typography group control (which cannot emit !important) would
   be dead on arrival.

   These values are Tailwind's own, at (1,1,0) and without !important, so the
   page renders exactly as before. The widget's typography controls write
   `{{WRAPPER}} #hbz-hero .hbz-hero__x` — (1,2,0), ordinary declarations — and
   therefore win normally.

   Line-height is set only where the source set it. The eyebrow and chip inherit
   the region's 1.5 exactly as they did before. */
#hbz-hero .hbz-hero__title {
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.25rem;      /* text-4xl  */
  font-weight: 700;        /* font-bold */
  line-height: 0.98;       /* leading-[0.98] — only wins below 640px */
  letter-spacing: -0.025em;/* tracking-tight */
  text-transform: uppercase;
}

/* line-height is deliberately NOT constant here, and this is the subtle part.
   Tailwind emits all base utilities first and each breakpoint block after them,
   so in the source `sm:text-5xl` — which carries line-height: 1 — is written
   AFTER `leading-[0.98]` and therefore wins from 640px up, while
   `lg:text-[3.35rem]` is an arbitrary size that carries no line-height at all,
   so 1 survives to the widest breakpoint.

   Measured against the reference rather than assumed: the hero's two heading
   lines sit 54px apart on desktop (ratio 1) and 35px apart on mobile (ratio
   0.98), with identical glyph heights in both. Reproducing only the 0.98 made
   the hero 4px short at 1440 while staying pixel-identical at 390. */
@media (min-width: 640px) {
  #hbz-hero .hbz-hero__title {
    font-size: 3rem;       /* sm:text-5xl */
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  #hbz-hero .hbz-hero__title {
    font-size: 3.35rem;    /* lg:text-[3.35rem] */
  }
}

#hbz-hero .hbz-hero__sub {
  font-size: 1.125rem;     /* text-lg    */
  line-height: 1.75rem;
}

#hbz-hero .hbz-hero__eyebrow {
  font-size: 11px;         /* text-[11px]      */
  font-weight: 700;        /* font-bold        */
  letter-spacing: 0.16em;  /* tracking-[0.16em] */
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ footer --
   The footer (theme-builder record 16) is now built from NATIVE Elementor
   widgets instead of one big html widget, so the layout that used to live in
   Tailwind utilities inside that markup is reproduced here on the new
   container ids. A container cannot carry a css class in Elementor 4.x
   (_css_classes is widget-only), hence the ids. */
#hbz-ft-wrap {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 3.5rem 1rem;
}
@media (min-width: 640px) {
  #hbz-ft-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  #hbz-ft-wrap { padding-left: 2rem; padding-right: 2rem; }
}
#hbz-ft-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 1023px) {
  #hbz-ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #hbz-ft-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  #hbz-ft-grid > .elementor-element-9a1f2f1 { grid-column: span 4; }
  #hbz-ft-grid > .elementor-element-9a1f2f2 { grid-column: span 3; }
  #hbz-ft-grid > .elementor-element-9a1f2f3 { grid-column: span 2; }
  #hbz-ft-grid > .elementor-element-9a1f2f4 { grid-column: span 3; }
}
#hbz-ft-logo {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background-color: rgb(var(--c-green));
}
#hbz-ft-logo img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}
#hbz-ft-socials {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
#hbz-ft-socials .elementor-widget-icon .elementor-icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 0.18);
  color: rgb(255 255 255 / 0.72);
  transition: color 0.2s ease, border-color 0.2s ease;
}
#hbz-ft-socials .elementor-widget-icon .elementor-icon:hover,
#hbz-ft-socials .elementor-widget-icon .elementor-icon:focus {
  color: #fff;
  border-color: rgb(255 255 255 / 0.4);
}
#hbz-ft-socials .elementor-widget-icon svg { fill: currentColor; }
#hbz-footer .elementor-widget-text-editor ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#hbz-footer .elementor-widget-text-editor li + li { margin-top: 0.625rem; }
#hbz-footer .elementor-widget-text-editor p { margin: 0; }
#hbz-ft-states ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 0.625rem;
}
#hbz-ft-states ul li + li { margin-top: 0; }
#hbz-ft-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
#hbz-footer .elementor-widget-button .elementor-button {
  background-color: transparent;
  background-image: none;
  padding: 0;
}
#hbz-footer .elementor-widget-button .elementor-button:hover { color: rgb(var(--c-green-bright)); }

/* ------------------------------------------------------------------- header --
   The header (theme-builder record 23) is now built from NATIVE Elementor
   widgets too, so the geometry that used to live in Tailwind utilities inside
   the three html widgets is reproduced here on the new container ids.
   Every rule is id-scoped (1,0,0) so it beats the generated container rules
   (.elementor-23 .elementor-element.<id> at (0,3,0)) — which matters twice:
   a container's generated rule always sets width:100%, and the inner row
   children (logo / nav / acts / CTA pill) must be content-sized instead. */
#hbz-strip-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 0.5rem 1rem;
}
@media (min-width: 640px) { #hbz-strip-in { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #hbz-strip-in { padding-left: 2rem; padding-right: 2rem; } }

#hbz-bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 72px;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) { #hbz-bar-in { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #hbz-bar-in { padding-left: 2rem; padding-right: 2rem; } }

#hbz-bar-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: auto;
}
#hbz-bar-mark {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background-color: rgb(var(--c-green));
}
#hbz-bar-mark img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}
#hbz-bar-word { width: auto; }

#hbz-bar-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: auto;
}
@media (max-width: 1023px) { #hbz-bar-nav { display: none; } }

#hbz-bar-acts {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: auto;
}
/* The dropped theme-toggle's 40px slot: removing it shifts every nav label
   exactly +25px because the bar distributes free space with space-between. */
#hbz-bar-slot {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
}
@media (max-width: 639px) { #hbz-bar-slot { display: none; } }

#hbz-bar-cta,
#hbz-drawer-cta {
  display: inline-flex;
  /* MEASURED: without this the Elementor container default (flex-direction:
     column) stacked the phone icon above the label, so the pill measured
     166x73.6 instead of the source's 189x41.6 -- and the 23px of lost width
     shifted every nav label +11px (the bar is justify-content: space-between). */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: rgb(var(--c-green));
  color: #fff;
  padding: 0.85rem 1.35rem;
  white-space: nowrap;
}
#hbz-bar-cta { width: auto; }
#hbz-drawer-cta { width: 100%; }
/* The pill's phone glyph is an Image widget. An inline-level <img> sits in a
   line box, so the wrapper inherited the region's line-height (24px) and the
   pill measured 51.19px tall instead of the source's 41.6
   (measured: #hbz-bar-cta height 51.1875, padding 13.6/13.6, content 23.99
   instead of 14.4). display:block removes the line box so the wrapper is
   exactly the glyph height. */
#hbz-bar-cta .elementor-widget-image img,
#hbz-drawer-cta .elementor-widget-image img,
#hbz-bar-cta .elementor-widget-image,
#hbz-drawer-cta .elementor-widget-image { display: block; line-height: 1; width: 0.9rem; height: 0.9rem; }
@media (max-width: 639px) { #hbz-bar-cta { display: none; } }

#hbz-burger {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid rgb(var(--c-line));
  cursor: pointer;
}
#hbz-burger img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 1024px) { #hbz-burger { display: none; } }

#hbz-drawer-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#hbz-drawer-close {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid rgb(var(--c-line));
  cursor: pointer;
}
#hbz-drawer-close img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}
#hbz-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#hbz-drawer-ft { margin-top: auto; }

/* --- common-issues hero note: a native container + Icon + Text Editor --- */
#hbz-ci-note {
  background-color: rgb(var(--c-mint) / 0.55);
  border: 1px solid rgb(var(--c-line));
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  /* keep the icon and the copy on one row at every width: with flex-wrap
     the text's max-content basis pushed the icon onto its own line on
     mobile, so the note was icon-above-text there and icon-left on desktop. */
  flex-wrap: nowrap;
}
#hbz-ci-note .elementor-widget-icon { flex: 0 0 auto; }
#hbz-ci-note .elementor-widget-text-editor { flex: 1 1 0%; min-width: 0; }

/* --- about process cards: native Image Box widgets --- */
#hbz-ab-process .elementor-element-b0a2k1,
#hbz-ab-process .elementor-element-b0a2k2,
#hbz-ab-process .elementor-element-b0a2k3 {
  border: 1px solid rgb(var(--c-line));
  border-radius: 1rem;
  background-color: rgb(var(--c-card));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.2s ease;
}
#hbz-ab-process .elementor-element-b0a2k1:hover,
#hbz-ab-process .elementor-element-b0a2k2:hover,
#hbz-ab-process .elementor-element-b0a2k3:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
#hbz-ab-process .elementor-element-b0a2n1,
#hbz-ab-process .elementor-element-b0a2n2,
#hbz-ab-process .elementor-element-b0a2n3 { flex: 0 0 auto; }
#hbz-ab-process .elementor-element-b0a2m1,
#hbz-ab-process .elementor-element-b0a2m2,
#hbz-ab-process .elementor-element-b0a2m3 { flex: 1 1 auto; min-width: 0; }
#hbz-ab-process .elementor-image-box-wrapper {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
}
/* MEASURED: the Image Box's `position` control alone did NOT flip the order
   (both inline-start and inline-end rendered [image][content]); the source card
   is grid-cols-[4rem_1fr_15rem] = number | text | image, so force row-reverse
   at the desktop breakpoint. Below 1024px the image spans full width and wraps
   above the copy. */
@media (min-width: 1024px) {
  #hbz-ab-process .elementor-image-box-wrapper { flex-direction: row-reverse; }
}
#hbz-ab-process .elementor-image-box-img {
  flex: 0 0 15rem;
  width: 15rem;
  margin: 0;
}
#hbz-ab-process .elementor-image-box-img img {
  display: block;
  width: 100%;
  height: 157.5px;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--c-line));
}
#hbz-ab-process .elementor-image-box-content { flex: 1 1 auto; min-width: 0; }
#hbz-ab-process .elementor-image-box-title { margin: 0; }
#hbz-ab-process .elementor-image-box-description { margin: 0.625rem 0 0 0; }

/* --- the about / common-issues floating badges (native containers) --- */
#hbz-ab-badge,
#hbz-ci-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card) / 0.95);
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#hbz-ab-badge { left: -0.5rem; bottom: 1.5rem; }
@media (min-width: 640px) { #hbz-ab-badge { left: 1.5rem; } }
#hbz-ci-badge { right: -0.5rem; bottom: 1.5rem; flex-direction: row-reverse; }
@media (min-width: 640px) { #hbz-ci-badge { right: 1.5rem; } }
#hbz-ab-badge .elementor-widget-icon,
#hbz-ci-badge .elementor-widget-icon { flex: 0 0 auto; }
#hbz-ab-badge .elementor-widget-text-editor p,
#hbz-ci-badge .elementor-widget-text-editor p { margin: 0; font-size: 0.75rem; font-weight: 600; line-height: 1.25; }
#hbz-ab-badge .elementor-widget-text-editor span,
#hbz-ci-badge .elementor-widget-text-editor span { font-weight: 400; color: rgb(var(--c-muted)); }

/* --- the 6 native icon tiles (were pasted html spans) --- */
#hbz-ci-diag .elementor-element-b0i3i1,
#hbz-ci-diag .elementor-element-b0i3i2,
#hbz-ci-diag .elementor-element-b0i3i3,
#hbz-fb-notes .elementor-element-b0f3i1,
#hbz-fb-notes .elementor-element-b0f3i2,
#hbz-fb-notes .elementor-element-b0f3i3 {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background-color: rgb(var(--c-mint));
}

/* --- the find-battery talk call-out (native container) --- */
#hbz-fb-talk {
  background-color: rgb(var(--c-mint) / 0.6);
  border: 1px solid rgb(var(--c-line));
  border-radius: 1rem;
  padding: 1.25rem;
}
#hbz-fb-talk .elementor-widget-icon { flex: 0 0 auto; }

/* --- the find-battery CTA background (was an html widget) ---
   The image and its 75% black tint are one id-scoped rule with !important so
   Elementor's `.e-con.e-parent:nth-of-type(n+4)` background-image lazy-load
   guard (lesson_277) cannot strip it. */
#hbz-fb-cta {
  background-image: linear-gradient(rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.75)), url(//srv/htdocs/wp-content/uploads/hbz/step-install.webp) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* --- the native Search Form + count line in the common-issues code guide ---
   The source's search row is 45.6562 tall with a 1px line border and a 10px
   radius, and the count line below it is 12px JetBrains Mono. The native
   Search Form renders an input PLUS a square icon submit button, so the button
   is styled into the row's right end (the source has no button) and the input
   carries the source's own field metrics. */
#hbz-ci-search .elementor-search-form__container {
  display: flex;
  align-items: stretch;
  border: 1px solid rgb(var(--c-line));
  border-radius: 10px;
  background-color: rgb(var(--c-card));
  height: 45.6562px;
  min-height: 45.6562px;
  overflow: hidden;
}
#hbz-ci-search .elementor-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 43.6562px;
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-size: 15.2px;
  line-height: 21.28px;
  color: rgb(var(--c-ink));
  padding: 0 14.4px;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}
#hbz-ci-search .elementor-search-form__input::placeholder { color: rgb(var(--c-muted)); }
#hbz-ci-search .elementor-search-form__submit {
  flex: 0 0 auto;
  width: 45.6562px;
  min-width: 45.6562px;
  height: auto;
  background-color: rgb(var(--c-mint));
  color: rgb(var(--c-green));
  font-size: 15px;
}
#hbz-ci-sc { margin: 0; }
@media (max-width: 1023px) {
  #hbz-ab-process .elementor-image-box-wrapper { flex-wrap: wrap; }
  #hbz-ab-process .elementor-image-box-img { flex: 0 0 100%; width: 100%; }
}
@media (max-width: 767px) {
  #hbz-ab-process .elementor-element-b0a2k1,
  #hbz-ab-process .elementor-element-b0a2k2,
  #hbz-ab-process .elementor-element-b0a2k3 { flex-direction: column; }
}

/* =======================================================================
   MOBILE OVERFLOW FIX
   Every "content is cropped on mobile" report has one cause: the
   12-column grids keep their large column-gap (40 / 48 / 56px) when their
   children collapse to grid-column: span 12 below the desktop breakpoint.
   Each 1fr track clamps to 0px but the 11 gaps stay, so a full-width child
   measures 11 x gap = 440 / 528 / 616px - wider than a 390px phone.
   body{overflow-x: clip} then clips the excess silently.
   Fix: at the same breakpoint where the children start stacking, drop the
   grid to one column and remove the column-gap (row-gap stays).
   ======================================================================= */

/* /about/ process cards, /common-issues/ diagnoser, /find-battery/ hero and
   makes band, home reconditioned band - all stack at 1023px. */
@media (max-width: 1023px) {
  #hbz-ab-process > .elementor-element-b0a2c1,
  #hbz-ci-diag > .elementor-element-b0i3c1,
  #hbz-fb-hero > .elementor-element-b0f1c1,
  #hbz-fb-makes > .elementor-element-b0f2c1,
  #hbz-recondgrid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
}

/* home reconditioned band: below 1024px the slider column is a full-width grid
   row with no height driver, and the carousel's aspect-ratio stage contributes
   nothing to that row's intrinsic size - so the slider box collapsed to its 2px
   border while its slides still rendered at full size and painted over the copy
   underneath. Give the slider container the same 4/3 ratio so the row sizes. */
@media (max-width: 1023px) {
  #hbz-recondslider { aspect-ratio: 4 / 3; }
}

/* home #how and #hbz-faq are Elementor grid containers: Elementor renders
   their grid on .e-con-inner, so the rule needs the id and both targets. */
@media (max-width: 767px) {
  #how .elementor-element-9a1f101,
  #how .elementor-element-9a1f101 > .e-con-inner,
  #hbz-faq .elementor-element-9a1f300,
  #hbz-faq .elementor-element-9a1f300 > .e-con-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
}

/* home #calculator: the "no deposit" pill used flex-wrap: wrap, so on mobile
   the check icon dropped onto its own centred line above the copy. Keep it
   on one row, icon left and text left, like an alert. */
@media (max-width: 767px) {
  #hbz-calcband .hbz-calc-pill {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    border-radius: 1rem;
  }
  #hbz-calcband .hbz-calc-pill > span { min-width: 0; }
}

/* home #hbz-cta: the button row is right-aligned (flex-end) and the two
   buttons wrap at mobile, leaving both hugging the right edge. Centre them. */
@media (max-width: 767px) {
  #hbz-cta .elementor-element-9a1f403 { justify-content: center; }
}

/* ---- anchor landing: every in-page jump target clears the sticky header ----
   Without this the browser scrolls the target's top edge to y=0 and the
   sticky header (measured 105px tall) covers it. 7rem (112px) clears it.
   Targets are the ids that real links point at: #calculator (nav + hero +
   16 make chips + FAQ links), #how, #hbz-faq, #hbz-ci-codes, #hbz-ab-process,
   and #content (the skip-to-content target: the home hero wrapper carries
   id=content, the other pages the theme's <main id=content>; on home the
   target sits at y=105 so 7rem makes the browser clamp the scroll to 0 -
   the skip link then reveals the very top of the page instead of hiding the
   hero's first 105px behind the header). */
#content,
#calculator,
#how,
#hbz-faq,
#hbz-ci-codes,
#hbz-ab-process {
  scroll-margin-top: 7rem;
}


/* ========================================================
   scoped preflight
   ======================================================== */
/* ============================================================
   PREFLIGHT PARITY (scoped)

   The utility sheet is generated from `@tailwind utilities;` alone — preflight
   was deliberately left out so Tailwind's global reset could not leak into
   Elementor or this theme. But preflight is also what zeroes the default `<p>`
   margin and removes `<ul>` bullets, so without it the markup inherited the
   host theme's base rules: hello-elementor sets `p { margin-block-end: .9rem }`,
   which made the utility strip 46px against the source's 32px and the footer
   29px too tall.

   SPECIFICITY. Every selector here is `:where(<region ids>)` — which contributes
   ZERO — followed by the target selector written TWICE inside :is(). Doubling
   lands each rule at specificity (0,0,2):

     (0,0,1)  the host theme's element rules        -> this block outranks them
     (0,0,2)  this block
     (0,1,0)  any hbz- utility or component class   -> still outranks this block

   That is why the utilities and the component classes (.btn .navlink .soc
   .dot-live .drawer-*) are not disturbed, and why the block needs no
   !important. Nothing outside the four regions is touched.

   Only the universal rule below stays at (0,0,0): `*` cannot be doubled, and it
   only has to outrank the browser's own stylesheet, which any author rule does.
   ============================================================ */

/* border-style: solid is what makes border-width utilities render; it needs the
   matching border-width: 0 reset, otherwise every element would draw the UA's
   medium border. Both stay unscoped-specifically so that border utilities and
   .soc's own border shorthand still win. */
:where(#hbz-strip, #hbz-bar, #hbz-drawer, #hbz-footer, #hbz-hero, #hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :where(*, ::before, ::after) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--c-line));
}

/* Tailwind preflight: blockquote, dl, dd, h1-h6, hr, figure, p, pre { margin: 0 } */
:where(#hbz-strip, #hbz-bar, #hbz-drawer, #hbz-footer, #hbz-hero, #hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta)
  :is(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre):is(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
  margin: 0;
}

/* Tailwind preflight: ol, ul { list-style: none; margin: 0; padding: 0 } */
:where(#hbz-strip, #hbz-bar, #hbz-drawer, #hbz-footer, #hbz-hero, #hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(ol, ul):is(ol, ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tailwind preflight: h1-h6 { font-size: inherit; font-weight: inherit } */
:where(#hbz-strip, #hbz-bar, #hbz-drawer, #hbz-footer, #hbz-hero, #hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(h1, h2, h3, h4, h5, h6):is(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}

/* Tailwind preflight: a { color: inherit; text-decoration: inherit } */
:where(#hbz-strip, #hbz-bar, #hbz-drawer, #hbz-footer, #hbz-hero, #hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(a):is(a) {
  color: inherit;
  text-decoration: inherit;
}

/* Tailwind preflight button reset */
:where(#hbz-strip, #hbz-bar, #hbz-drawer, #hbz-footer, #hbz-hero, #hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(button):is(button) {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: none;
  text-transform: none;
  cursor: pointer;
}

/* Tailwind preflight: img, svg, video, canvas, audio, iframe, embed, object
   { display: block; vertical-align: middle } */
:where(#hbz-strip, #hbz-bar, #hbz-drawer, #hbz-footer, #hbz-hero, #hbz-brands, #how, #reconditioned, #hbz-faq, #hbz-cta) :is(svg, img, video):is(svg, img, video) {
  display: block;
  vertical-align: middle;
}

/* >>> HBZ DESIGN LAYER END <<< */