/* ==========================================================================
   Wealth Being — theme styles
   Ported from /Users/muhammadadnan/Desktop/wealth-being-web-landing.
   This stylesheet does two jobs:
     1) Provides @font-face for the three local fonts and base typography.
     2) Overrides Elementor's defaults so widgets render with the exact
        Tailwind/React look from the original landing.
   ========================================================================== */

/* ---------- @font-face ---------- */
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-Thin.ttf")        format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-ThinItalic.ttf")  format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-Light.ttf")       format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-Regular.ttf")     format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-RegularItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-SemiBold.ttf")    format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-Bold.ttf")        format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IvyPresto Display"; src: url("../fonts/IvyprestoDisplay-BoldItalic.ttf")  format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue LT Pro"; src: url("../fonts/HelveticaNeueLTPro-Roman.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Commuters Sans";        src: url("../fonts/CommutersSans-Regular.otf")    format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Design tokens (mirroring original Tailwind values) ---------- */
:root {
  --color-cream:      #F3E8AF;
  --color-cream-soft: #E8DB96;
  --color-cream-dim:  #D3C0AF;
  --color-green:      #112D1E;   /* nav + body green */
  --color-green-2:    #1a3d2e;
  --color-green-3:    #122E1F;   /* slightly lighter section green */
  --color-bg-cream:   #F5F2EC;
  --color-bg-stone:   #E6E0D9;
  --color-footer:     #0E0E0E;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body.wb-body {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #111;
  line-height: 1.5;
  /* Single brand fabric — the same image the hero uses, fixed so it
     stays consistent across every section that lets the body bg show
     through (notably the navbar). No color seam between sections. */
  background: var(--color-green) url("../images/green_background.png") center top / cover no-repeat fixed;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Lock scroll when mobile menu open */
body.wb-no-scroll { overflow: hidden; }

/* Custom scrollbar (matches original globals.css) */
* { scrollbar-width: thin; scrollbar-color: #D3C0AF #122E1F; }
*::-webkit-scrollbar       { width: 12px; }
*::-webkit-scrollbar-track { background: #122E1F; }
*::-webkit-scrollbar-thumb { background: #D3C0AF; border-radius: 6px; border: 2px solid #122E1F; }
*::-webkit-scrollbar-thumb:hover { background: #E8DB96; }

/* ==========================================================================
   Header — fixed sticky bar with cream nav + glow-shimmer CTA
   ========================================================================== */
.wb-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9999;
  width: 100%;
  /* Match the body / hero fabric. The image is sized to cover the
     window and pinned to the top so the visible slice through the
     header is the same slice that paints behind the hero — no seam. */
  background: var(--color-green) url("../images/green_background.png") center top / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease;
}
.wb-header--hidden { transform: translateY(-100%); }
.wb-header__inner  { width: 100%; max-width: 1300px; padding: 0 1.5rem; }
.wb-header__nav    { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.wb-header__logo   { display: inline-flex; }
.wb-header__logo img { width: 65px; height: 65px; transition: transform 0.3s ease; }
.wb-header__logo:hover img { transform: scale(1.1); }

.wb-header__links { display: none; align-items: center; gap: 1.75rem; }
.wb-header__link  {
  position: relative;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  font-size: 1rem;
  color: var(--color-cream);
  transition: opacity 0.3s ease;
}
.wb-header__link:hover { opacity: 0.7; }
.wb-header__link.is-current { font-weight: 600; }
.wb-header__link.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--color-cream); border-radius: 2px;
}

.wb-header__cta-wrap { display: flex; align-items: center; gap: 1.5rem; color: var(--color-cream); }
.wb-header__cta {
  display: none;
  align-items: center; gap: 0.5rem;
  height: 45px;
  padding: 0 1.5rem;
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  font-size: 0.8125rem;
  text-transform: uppercase;
  color: var(--color-green) !important;
}
.wb-header__burger { background: transparent; border: 0; padding: 0.5rem; color: var(--color-cream); cursor: pointer; }
.wb-header__burger:hover { background: rgba(255,255,255,0.08); border-radius: 0.5rem; }

@media (min-width: 1024px) {
  .wb-header__links { display: flex; }
  .wb-header__cta   { display: inline-flex; }
  .wb-header__burger { display: none; }
}

/* Mobile menu overlay — z-index sits ABOVE .wb-header (9999) so the
   overlay (and its close button) is never covered by the fixed header
   bar. Previously it was 9990, which meant the header painted on top
   and intercepted taps meant for the close button. */
.wb-mobile-menu {
  position: fixed; inset: 0; z-index: 10010;
  background: var(--color-green);
  padding: 90px 2rem 3rem;
  display: none;
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2rem;
}
.wb-mobile-menu.is-open { display: flex; }
.wb-mobile-menu__logo  { position: absolute; left: 1.25rem; top: 1rem; }
.wb-mobile-menu__close {
  position: absolute; right: 1.25rem; top: 1.5rem;
  z-index: 2;                 /* above the menu's flow content */
  background: transparent; border: 0;
  color: var(--color-cream); cursor: pointer; padding: 0.75rem;
}
/* Let taps fall through the SVG straight to the <button> so e.target is
   always the button — avoids missed taps on the icon strokes. */
.wb-mobile-menu__close svg,
.wb-header__burger svg { pointer-events: none; }
.wb-mobile-menu__links { display: flex; flex-direction: column; gap: 2rem; align-items: center; padding-top: 2rem; }
.wb-mobile-menu__link  { font-family: "IvyPresto Display", serif; color: var(--color-cream); font-size: 2rem; text-transform: uppercase; letter-spacing: 0.01em; }
.wb-mobile-menu__cta   { margin-top: 2rem; height: 50px; padding: 0 2rem; border-radius: 9999px; display: inline-flex; align-items: center; color: var(--color-green) !important; }

/* ==========================================================================
   Footer — disclaimer
   ========================================================================== */
.wb-footer { width: 100%; }
.wb-footer__section { background: var(--color-footer); padding: 5rem 1.5rem; }
.wb-footer__card    { max-width: 64rem; margin: 0 auto; color: rgba(211,192,175,0.8); font-family: "Commuters Sans", sans-serif; font-size: 1.0625rem; line-height: 1.75; }
.wb-footer__card p  { margin: 0 0 1.5rem; }
.wb-footer__card p:last-child { margin-bottom: 0; }
.wb-footer__no-refunds { color: var(--color-cream-dim); }

/* ==========================================================================
   /3 — Signature Members Welcome Pass — NATIVE WIDGET BRIDGES
   Green texture bg (fixed), centered hero, white offer card with the
   feature list + tiered pricing + gold glow CTA.
   ========================================================================== */

.elementor-section.wb-three {
  position: relative;
  isolation: isolate;
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: var(--color-cream);
}
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .elementor-section.wb-three { background-attachment: scroll !important; }
}
.elementor-section.wb-three > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(0.65rem, 1.4vw, 1rem) !important;
}

/* Logo. */
.elementor-section.wb-three .elementor-widget.wb-three-logo-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-three .elementor-widget.wb-three-logo-el img {
  width: clamp(120px, 16vw, 180px) !important;
  height: auto !important;
}

/* Eyebrow. */
.elementor-section.wb-three .elementor-widget.wb-three-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-three .elementor-widget.wb-three-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(243,232,175,0.78) !important;
  margin: 0.75rem 0 0.25rem !important;
  text-align: center;
}

/* Title. */
.elementor-section.wb-three .elementor-widget.wb-three-title-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-three .elementor-widget.wb-three-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-cream) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-three .elementor-widget.wb-three-title-el .elementor-heading-title em {
  font-style: italic;
  display: block;
}

/* Hero rule. */
.wb-three-rule {
  width: 7rem;
  height: 1px;
  margin: 1.25rem auto 1.75rem;
  background: linear-gradient(90deg, transparent, rgba(243,232,175,0.5), transparent);
}

/* ---- OFFER CARD ---- */
.elementor-section.wb-three .elementor-inner-section.wb-three-card-el {
  width: 100% !important;
  max-width: 36rem !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(243,232,175,0.30) !important;
  border-radius: 1.5rem !important;
  padding: clamp(1.75rem, 4vw, 3rem) !important;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.45);
}
.elementor-section.wb-three .elementor-inner-section.wb-three-card-el > .elementor-container { max-width: 100%; }
.elementor-section.wb-three .elementor-inner-section.wb-three-card-el .elementor-column > .elementor-element-populated,
.elementor-section.wb-three .elementor-inner-section.wb-three-card-el .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* "What's included:" */
.elementor-section.wb-three .elementor-widget.wb-three-what-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-three .elementor-widget.wb-three-what-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  color: #112D1E !important;
  margin: 0 0 1rem !important;
  text-align: center;
}

/* Feature list — check icons in brand green. */
.elementor-section.wb-three .elementor-widget.wb-three-list-el .elementor-widget-container { padding: 0 !important; width: 100%; }
.elementor-section.wb-three .elementor-widget.wb-three-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  width: 100%;
}
.elementor-section.wb-three .elementor-widget.wb-three-list-el .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid rgba(17,45,30,0.08);
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #112D1E;
  align-items: flex-start !important;
  gap: 0.65rem !important;
}
.elementor-section.wb-three .elementor-widget.wb-three-list-el .elementor-icon-list-item:last-child { border-bottom: 0; }
.elementor-section.wb-three .elementor-widget.wb-three-list-el .elementor-icon-list-icon {
  color: #1a7a4a !important;
  font-size: 0.8rem !important;
  margin-top: 0.2rem;
}
.elementor-section.wb-three .elementor-widget.wb-three-list-el .elementor-icon-list-icon i { color: inherit !important; }
.elementor-section.wb-three .elementor-widget.wb-three-list-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Card divider. */
.wb-three-divider {
  width: 100%;
  height: 1px;
  margin: 1.5rem 0;
  background: rgba(17,45,30,0.12);
}

/* Pricing small labels. */
.elementor-section.wb-three .elementor-widget.wb-three-small-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-three .elementor-widget.wb-three-small-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.55) !important;
  margin: 0.25rem 0 !important;
  text-align: center;
}
.elementor-section.wb-three .elementor-widget.wb-three-small--only-el .elementor-heading-title { margin-top: 1.25rem !important; }

/* Struck-through prices. */
.elementor-section.wb-three .elementor-widget.wb-three-strike-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-three .elementor-widget.wb-three-strike-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem) !important;
  color: rgba(17,45,30,0.45) !important;
  text-decoration: line-through;
  margin: 0 0 0.25rem !important;
  text-align: center;
}

/* Bonus banner. */
.elementor-section.wb-three .elementor-widget.wb-three-bonus-el .elementor-widget-container {
  padding: 0 !important;
  margin: 1rem auto;
}
.elementor-section.wb-three .elementor-widget.wb-three-bonus-el .elementor-heading-title {
  display: inline-block;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #112D1E !important;
  background: linear-gradient(135deg, #F3E8AF, #E8DB96);
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  margin: 0 !important;
}

/* Access-to-programme block. */
.elementor-section.wb-three .elementor-widget.wb-three-access-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0.5rem auto 1rem;
  max-width: 26rem;
}
.elementor-section.wb-three .elementor-widget.wb-three-access-el,
.elementor-section.wb-three .elementor-widget.wb-three-access-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: rgba(17,45,30,0.75) !important;
  text-align: center !important;
  margin: 0 0 0.35rem !important;
}
.elementor-section.wb-three .elementor-widget.wb-three-access-el .wb-three-access-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-size: 1.05rem !important;
  color: #112D1E !important;
  margin: 0.25rem 0 !important;
}
.elementor-section.wb-three .elementor-widget.wb-three-access-el .wb-three-access-title em { font-style: italic; }
.elementor-section.wb-three .elementor-widget.wb-three-access-el .wb-three-access-val {
  font-size: 0.8rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.5) !important;
}

/* Big price. */
.elementor-section.wb-three .elementor-widget.wb-three-price-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0.25rem auto 0;
}
.elementor-section.wb-three .elementor-widget.wb-three-price-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(3rem, 7vw, 4.5rem) !important;
  line-height: 1 !important;
  color: #112D1E !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-three .elementor-widget.wb-three-price-sub-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-three .elementor-widget.wb-three-price-sub-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.55) !important;
  margin: 0.25rem 0 0 !important;
  text-align: center;
}

/* CTA — gold glow shimmer. */
.elementor-section.wb-three .elementor-widget.wb-three-cta-el {
  margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
}
.elementor-section.wb-three .elementor-widget.wb-three-cta-el .elementor-widget-container { padding: 0 !important; text-align: center; }
.elementor-section.wb-three .elementor-widget.wb-three-cta-el a.elementor-button,
.elementor-section.wb-three .elementor-widget.wb-three-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.1rem 2.25rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-section.wb-three .elementor-widget.wb-three-cta-el a.elementor-button:hover,
.elementor-section.wb-three .elementor-widget.wb-three-cta-el .elementor-button-link:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-section.wb-three .elementor-widget.wb-three-cta-el .elementor-button-icon:empty { display: none; }

/* ==========================================================================
   WORKSHOP — Live W.E.A.L.T.H. B.E.I.N.G. workshop landing
   Fully native Elementor widgets. Section variants:
     - .wb-ws--hero      green texture bg, cream type
     - .wb-ws--benefits  light bg, "You will…" list
     - .wb-ws--fit       green bg, 2-card yes/no split
     - .wb-ws--host      light bg, author photo + bio
   ========================================================================== */

.elementor-section.wb-ws { position: relative; isolation: isolate; }

/* Section backgrounds. */
.elementor-section.wb-ws--hero,
.elementor-section.wb-ws--fit {
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-cream);
}
.elementor-section.wb-ws--benefits,
.elementor-section.wb-ws--host {
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* Column = readable centered editorial stack. */
.elementor-section.wb-ws > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(0.75rem, 1.4vw, 1.25rem) !important;
}
.elementor-section.wb-ws--fit > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 64rem;
}

/* Logo image. */
.elementor-widget.wb-ws-logo-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-logo-el img {
  width: clamp(120px, 14vw, 180px) !important;
  height: auto !important;
}

/* HERO eyebrow + kicker + title. */
.elementor-widget.wb-ws-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(243,232,175,0.78) !important;
  margin: 0.5rem 0 0.25rem !important;
  text-align: center;
}
.elementor-widget.wb-ws-eyebrow-el .elementor-heading-title em { font-style: italic; }

.elementor-widget.wb-ws-kicker-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-kicker-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(243,232,175,0.85) !important;
  margin: 0.5rem 0 !important;
  text-align: center;
}

.elementor-widget.wb-ws-title-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto;
  max-width: 60rem;
}
.elementor-widget.wb-ws-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-cream) !important;
  margin: 0.25rem 0 1rem !important;
  text-align: center;
}
.elementor-widget.wb-ws-title-el .elementor-heading-title em { font-style: italic; font-weight: 100; }

/* Decorative hairline rule. */
.wb-ws-rule {
  width: 8rem;
  height: 1px;
  margin: 1rem auto 1.25rem;
  background: linear-gradient(90deg, transparent, rgba(243,232,175,0.50), transparent);
}
.wb-ws-rule--dark {
  background: linear-gradient(90deg, transparent, rgba(17,45,30,0.40), transparent);
}

/* Host label / host name (inside HERO). */
.elementor-widget.wb-ws-host-label-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-host-label-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(243,232,175,0.6) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-widget.wb-ws-host-name-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-host-name-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: 1.5rem !important;
  color: var(--color-cream) !important;
  margin: 0.25rem 0 0.75rem !important;
  text-align: center;
}

/* Badges (chips). */
.elementor-widget.wb-ws-badges-el .elementor-widget-container,
.elementor-widget.wb-ws-host-badges-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-badges-el .elementor-icon-list-items,
.elementor-widget.wb-ws-host-badges-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
}
.elementor-widget.wb-ws-badges-el .elementor-icon-list-item,
.elementor-widget.wb-ws-host-badges-el .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0.45rem 0.95rem !important;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 9999px;
  display: inline-flex !important;
  align-items: center !important;
}
.elementor-section.wb-ws--hero .elementor-widget.wb-ws-badges-el .elementor-icon-list-item,
.elementor-section.wb-ws--host .elementor-widget.wb-ws-host-badges-el .elementor-icon-list-item {
  color: rgba(243,232,175,0.85);
  border: 1px solid rgba(243,232,175,0.28);
  background: rgba(243,232,175,0.06);
}
.elementor-section.wb-ws--host .elementor-widget.wb-ws-host-badges-el .elementor-icon-list-item {
  color: rgba(17,45,30,0.85);
  border-color: rgba(17,45,30,0.18);
  background: rgba(17,45,30,0.03);
}
.elementor-widget.wb-ws-badges-el .elementor-icon-list-icon,
.elementor-widget.wb-ws-host-badges-el .elementor-icon-list-icon { display: none !important; }
.elementor-widget.wb-ws-badges-el .elementor-icon-list-text,
.elementor-widget.wb-ws-host-badges-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: 1.2 !important;
  padding-left: 0 !important;
}

/* CTA — gold glow shimmer, used by all 4 CTAs on this page. */
.elementor-widget.wb-ws-cta-el {
  margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
}
.elementor-widget.wb-ws-cta-el .elementor-widget-container { padding: 0 !important; text-align: center; }
.elementor-widget.wb-ws-cta-el a.elementor-button,
.elementor-widget.wb-ws-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.05rem 2.5rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-widget.wb-ws-cta-el a.elementor-button:hover,
.elementor-widget.wb-ws-cta-el .elementor-button-link:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-widget.wb-ws-cta-el .elementor-button-icon:empty { display: none; }

/* SECTION TITLE — used by "You will…" and the host "About Your Host" header */
.elementor-widget.wb-ws-section-title-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-section-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.2 !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-widget.wb-ws-section-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-section-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.55) !important;
  margin: 0 0 0.5rem !important;
  text-align: center;
}

/* BENEFITS list — long-form bullets, dark on light bg. */
.elementor-widget.wb-ws-benefits-list-el .elementor-widget-container {
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(17,45,30,0.08);
  border-radius: 1.25rem;
  max-width: 56rem;
  margin: 0.5rem auto 0;
  width: 100%;
}
.elementor-widget.wb-ws-benefits-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor-widget.wb-ws-benefits-list-el .elementor-icon-list-item {
  position: relative;
  padding: 1rem 0 1rem 1.75rem !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(17,45,30,0.10);
  font-family: "Commuters Sans", sans-serif;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: rgba(17,45,30,0.92);
  align-items: flex-start !important;
}
.elementor-widget.wb-ws-benefits-list-el .elementor-icon-list-item:last-child { border-bottom: 0; }
.elementor-widget.wb-ws-benefits-list-el .elementor-icon-list-item::before {
  content: "";
  position: absolute;
  left: 0; top: 1.6em;
  width: 8px; height: 8px; border-radius: 9999px;
  background: linear-gradient(135deg, #E8DB96, #F3E8AF);
}
.elementor-widget.wb-ws-benefits-list-el .elementor-icon-list-icon { display: none !important; }
.elementor-widget.wb-ws-benefits-list-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  padding-left: 0 !important;
}

/* FIT — 2-card yes/no split. */
.elementor-inner-section.wb-ws-fit-grid-el {
  width: 100% !important;
  margin: 1rem auto 1rem !important;
}
.elementor-inner-section.wb-ws-fit-grid-el > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
@media (min-width: 900px) {
  .elementor-inner-section.wb-ws-fit-grid-el > .elementor-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}
.elementor-inner-section.wb-ws-fit-grid-el .elementor-column.wb-ws-fit-card-col {
  width: 100% !important;
  max-width: 100% !important;
}
.elementor-inner-section.wb-ws-fit-grid-el .elementor-column.wb-ws-fit-card-col > .elementor-element-populated,
.elementor-inner-section.wb-ws-fit-grid-el .elementor-column.wb-ws-fit-card-col > .elementor-widget-wrap {
  background: rgba(243,232,175,0.06);
  border: 1px solid rgba(243,232,175,0.18);
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.85rem !important;
  height: 100%;
}
.elementor-inner-section.wb-ws-fit-grid-el .wb-ws-fit-card--no > .elementor-element-populated,
.elementor-inner-section.wb-ws-fit-grid-el .wb-ws-fit-card--no > .elementor-widget-wrap {
  background: rgba(243,232,175,0.02);
  border-color: rgba(243,232,175,0.10);
}

/* Yes/no icon circles. */
.wb-ws-fit-icon {
  width: 48px; height: 48px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  margin: 0 0 0.5rem;
}
.wb-ws-fit-icon--yes { background: rgba(243,232,175,0.20); color: #F3E8AF; }
.wb-ws-fit-icon--no  { background: rgba(243,232,175,0.08); color: rgba(243,232,175,0.50); }

/* Card title. */
.elementor-widget.wb-ws-fit-title-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-fit-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
  line-height: 1.2 !important;
  color: var(--color-cream) !important;
  margin: 0 0 0.5rem !important;
  text-align: left;
}
.elementor-widget.wb-ws-fit-title-el.wb-ws-fit-title--dim .elementor-heading-title { color: rgba(243,232,175,0.5) !important; }

/* Card list — yes uses gold dots, no uses dim dots with strikethrough. */
.elementor-widget.wb-ws-fit-list-el .elementor-widget-container { padding: 0 !important; width: 100%; }
.elementor-widget.wb-ws-fit-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor-widget.wb-ws-fit-list-el .elementor-icon-list-item {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.4rem !important;
  margin: 0 !important;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(243,232,175,0.92);
  align-items: flex-start !important;
}
.elementor-widget.wb-ws-fit-list-el .elementor-icon-list-item::before {
  content: "";
  position: absolute;
  left: 0; top: 1em;
  width: 7px; height: 7px; border-radius: 9999px;
  background: #F3E8AF;
}
.elementor-widget.wb-ws-fit-list-el.wb-ws-fit-list--strike .elementor-icon-list-item {
  color: rgba(243,232,175,0.55);
  text-decoration: line-through;
}
.elementor-widget.wb-ws-fit-list-el.wb-ws-fit-list--strike .elementor-icon-list-item::before {
  background: rgba(243,232,175,0.30);
}
.elementor-widget.wb-ws-fit-list-el .elementor-icon-list-icon { display: none !important; }
.elementor-widget.wb-ws-fit-list-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  padding-left: 0 !important;
}

/* HOST section — pill, image, name, bio, reviews. */
.elementor-widget.wb-ws-host-pill-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-host-pill-el .elementor-heading-title {
  display: inline-block;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--color-green) !important;
  background: #F3E8AF;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  margin: 0.5rem auto !important;
  text-align: center;
}

.elementor-widget.wb-ws-host-image-el .elementor-widget-container { padding: 0 !important; text-align: center; }
.elementor-widget.wb-ws-host-image-el img {
  width: clamp(180px, 30vw, 320px) !important;
  height: clamp(180px, 30vw, 320px) !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 3px solid rgba(243,232,175,0.55);
  box-shadow: 0 30px 60px -30px rgba(17,45,30,0.30);
  margin: 1rem auto !important;
}

.elementor-widget.wb-ws-host-name-big-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ws-host-name-big-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  color: var(--color-green) !important;
  margin: 0.5rem 0 0.75rem !important;
  text-align: center;
}

.wb-ws-divider {
  width: 8rem;
  height: 1px;
  margin: 1rem auto;
  background: linear-gradient(90deg, transparent, rgba(17,45,30,0.30), transparent);
}

.elementor-widget.wb-ws-host-bio-el .elementor-widget-container {
  padding: 0 !important;
  max-width: 44rem;
  margin: 0 auto;
}
.elementor-widget.wb-ws-host-bio-el,
.elementor-widget.wb-ws-host-bio-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: clamp(1rem, 1.3vw, 1.1rem) !important;
  line-height: 1.7 !important;
  color: rgba(17,45,30,0.85) !important;
  margin: 0 0 1rem !important;
  text-align: center !important;
}
.elementor-widget.wb-ws-host-bio-el em { color: var(--color-green); font-style: italic; font-weight: 500; }

.elementor-widget.wb-ws-host-quote-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0.5rem auto 1rem;
  max-width: 44rem;
}
.elementor-widget.wb-ws-host-quote-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-style: italic !important;
  font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
  line-height: 1.4 !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
}

.elementor-widget.wb-ws-reviews-el .elementor-widget-container { padding: 0 !important; text-align: center; margin-top: 2rem; }
.elementor-widget.wb-ws-reviews-el img {
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  border-radius: 1rem !important;
  display: inline-block !important;
}

/* ==========================================================================
   INNER PAGES — About / Contact / Privacy / Terms
   Pages built with native Elementor widgets via elementor-build/pages/*.
   Shared widget classes prefixed with `.wb-ip-*-el` so the same bridges
   style every page consistently. The page.php template wraps the
   Elementor output in `.wb-inner-page` (a wrapper that lets the
   Elementor full-bleed sections breathe edge-to-edge).
   ========================================================================== */

.wb-inner-page { width: 100%; }
.wb-inner-page > article { width: 100%; }

/* Inner-page section base — every wb-ip section sits full-bleed,
   constrained inside to a readable column. */
.elementor-section.wb-ip {
  position: relative;
  isolation: isolate;
}
.elementor-section.wb-ip > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(0.85rem, 1.5vw, 1.25rem) !important;
}

/* Backgrounds per page variant. */
.elementor-section.wb-ip--about {
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-cream);
}
.elementor-section.wb-ip--contact {
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-cream);
}
.elementor-section.wb-ip--legal {
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* Eyebrow heading — small uppercase brand label. Cream on about (green
   bg), dim-green on the light pages. */
.elementor-widget.wb-ip-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ip-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.75rem !important;
  text-align: center;
}
.elementor-section.wb-ip--about .elementor-widget.wb-ip-eyebrow-el .elementor-heading-title,
.elementor-section.wb-ip--contact .elementor-widget.wb-ip-eyebrow-el .elementor-heading-title { color: rgba(243,232,175,0.78) !important; }
.elementor-section.wb-ip--legal .elementor-widget.wb-ip-eyebrow-el .elementor-heading-title { color: rgba(17,45,30,0.55) !important; }

/* Big founder/page name (h1) — IvyPresto serif italic on green page,
   regular on the light pages. */
.elementor-widget.wb-ip-name-el .elementor-widget-container,
.elementor-widget.wb-ip-page-title-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ip-name-el .elementor-heading-title,
.elementor-widget.wb-ip-page-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em !important;
  margin: 0 0 0.75rem !important;
  text-align: center;
}
.elementor-section.wb-ip--about .elementor-widget.wb-ip-name-el .elementor-heading-title { color: var(--color-cream) !important; font-style: italic; }
.elementor-section.wb-ip--contact .elementor-widget.wb-ip-page-title-el .elementor-heading-title { color: var(--color-cream) !important; }
.elementor-section.wb-ip--legal .elementor-widget.wb-ip-page-title-el .elementor-heading-title { color: var(--color-green) !important; }

/* Page subtitle (under H1). */
.elementor-widget.wb-ip-page-subtitle-el .elementor-widget-container { padding: 0 !important; max-width: 36rem; margin: 0 auto 1.25rem; }
.elementor-widget.wb-ip-page-subtitle-el .elementor-heading-title,
.elementor-widget.wb-ip-page-subtitle-el,
.elementor-widget.wb-ip-page-subtitle-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: rgba(17,45,30,0.7) !important;
  text-align: center !important;
  margin: 0 !important;
}
.elementor-section.wb-ip--about .elementor-widget.wb-ip-page-subtitle-el,
.elementor-section.wb-ip--about .elementor-widget.wb-ip-page-subtitle-el p,
.elementor-section.wb-ip--about .elementor-widget.wb-ip-page-subtitle-el .elementor-heading-title,
.elementor-section.wb-ip--contact .elementor-widget.wb-ip-page-subtitle-el,
.elementor-section.wb-ip--contact .elementor-widget.wb-ip-page-subtitle-el p,
.elementor-section.wb-ip--contact .elementor-widget.wb-ip-page-subtitle-el .elementor-heading-title { color: rgba(243,232,175,0.85) !important; }

/* Badges (about page) — uppercase chips, cream on green. */
.elementor-widget.wb-ip-badges-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ip-badges-el .elementor-icon-list-items {
  margin: 0.5rem 0 1.25rem !important;
  padding: 0 !important;
  list-style: none;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
}
.elementor-widget.wb-ip-badges-el .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0.4rem 0.85rem !important;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.85);
  border: 1px solid rgba(243,232,175,0.28);
  border-radius: 9999px;
  background: rgba(243,232,175,0.06);
  display: inline-flex !important;
  align-items: center !important;
}
.elementor-widget.wb-ip-badges-el .elementor-icon-list-icon { display: none !important; }
.elementor-widget.wb-ip-badges-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: 1.2 !important;
  padding-left: 0 !important;
}

/* Divider rule — about page hairline under the name/badges. */
.wb-ip-divider {
  width: 80px;
  height: 1px;
  margin: 0.5rem auto 1.5rem;
  background: linear-gradient(90deg, transparent, rgba(243,232,175,0.45), transparent);
}

/* Body paragraphs — Commuters Sans, readable column. */
.elementor-widget.wb-ip-body-el .elementor-widget-container {
  padding: 0 !important;
  max-width: 44rem;
  margin: 0 auto;
}
.elementor-widget.wb-ip-body-el,
.elementor-widget.wb-ip-body-el p,
.elementor-widget.wb-ip-body-el .elementor-text-editor p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: clamp(1rem, 1.3vw, 1.1rem) !important;
  line-height: 1.7 !important;
  margin: 0 0 1rem !important;
  text-align: center !important;
}
.elementor-section.wb-ip--about .elementor-widget.wb-ip-body-el,
.elementor-section.wb-ip--about .elementor-widget.wb-ip-body-el p,
.elementor-section.wb-ip--about .elementor-widget.wb-ip-body-el .elementor-text-editor p { color: rgba(243,232,175,0.92) !important; }
.elementor-section.wb-ip--contact .elementor-widget.wb-ip-body-el,
.elementor-section.wb-ip--contact .elementor-widget.wb-ip-body-el p { color: rgba(243,232,175,0.92) !important; }

/* Italic pull-quote on about page. */
.elementor-widget.wb-ip-quote-el .elementor-widget-container {
  padding: 0 !important;
  margin: 1.25rem auto 0;
  max-width: 44rem;
}
.elementor-widget.wb-ip-quote-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-style: italic !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  line-height: 1.4 !important;
  color: var(--color-cream) !important;
  margin: 0 !important;
  text-align: center;
}

/* App store buttons row (about page) — 2 gold pills, exactly the
   same pattern as the lifestyle section + footer. */
.elementor-inner-section.wb-ip-apps-row-el {
  width: 100% !important;
  max-width: 520px !important;
  margin: 2rem auto 0 !important;
}
.elementor-inner-section.wb-ip-apps-row-el > .elementor-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex-wrap: nowrap !important;
}
@media (min-width: 640px) {
  .elementor-inner-section.wb-ip-apps-row-el > .elementor-container {
    flex-direction: row !important;
    justify-content: center !important;
  }
}
.elementor-inner-section.wb-ip-apps-row-el .elementor-column {
  width: 100% !important;
  max-width: 240px !important;
  flex: 0 0 auto !important;
}
.elementor-inner-section.wb-ip-app-btn-el {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.85rem 1.25rem !important;
  background: #F3E8AF !important;
  border: 1px solid rgba(18,46,31,0.10) !important;
  border-radius: 9999px !important;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.elementor-inner-section.wb-ip-app-btn-el:hover {
  background: #E8DB96 !important;
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
}
.elementor-inner-section.wb-ip-app-btn-el .elementor-column > .elementor-widget-wrap,
.elementor-inner-section.wb-ip-app-btn-el .elementor-column > .elementor-element-populated {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0 !important;
  background: transparent !important;
}
.elementor-inner-section.wb-ip-app-btn-el .elementor-widget.wb-ip-app-icon-el {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.elementor-inner-section.wb-ip-app-btn-el .elementor-widget.wb-ip-app-icon-el .elementor-widget-container { padding: 0 !important; }
.elementor-inner-section.wb-ip-app-btn-el .elementor-widget.wb-ip-app-icon-el img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}
.elementor-inner-section.wb-ip-app-btn-el .elementor-widget.wb-ip-app-label-el {
  width: auto !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}
.elementor-inner-section.wb-ip-app-btn-el .elementor-widget.wb-ip-app-label-el .elementor-widget-container { padding: 0 !important; }
.elementor-inner-section.wb-ip-app-btn-el .elementor-widget.wb-ip-app-label-el .elementor-heading-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  margin: 0 !important;
  color: #000 !important;
}
.elementor-inner-section.wb-ip-app-btn-el .elementor-widget.wb-ip-app-label-el .elementor-heading-title small {
  font: 400 10px/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000 !important;
  margin-bottom: 2px;
}
.elementor-inner-section.wb-ip-app-btn-el .elementor-widget.wb-ip-app-label-el .elementor-heading-title .wb-ip-app-store {
  font: 400 18px/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.05em;
  color: #000 !important;
}

/* Legal body (privacy + terms) — long-form rich text. */
.elementor-widget.wb-ip-legal-body-el .elementor-widget-container {
  padding: 0 !important;
  max-width: 56rem;
  margin: 1.5rem auto 0;
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.08);
  border-radius: 1.25rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
}
.elementor-widget.wb-ip-legal-body-el {
  font-family: "Commuters Sans", sans-serif !important;
  color: rgba(17,45,30,0.85) !important;
}
.elementor-widget.wb-ip-legal-body-el p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 1rem;
  color: inherit !important;
}
.elementor-widget.wb-ip-legal-body-el h2,
.elementor-widget.wb-ip-legal-body-el .wb-legal__h2 {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
  line-height: 1.25 !important;
  color: var(--color-green) !important;
  margin: 2rem 0 0.75rem !important;
}
.elementor-widget.wb-ip-legal-body-el h3,
.elementor-widget.wb-ip-legal-body-el .wb-legal__h3 {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  color: var(--color-green) !important;
  margin: 1.25rem 0 0.5rem !important;
}
.elementor-widget.wb-ip-legal-body-el ul,
.elementor-widget.wb-ip-legal-body-el .wb-legal__list {
  margin: 0.5rem 0 1.25rem 1.25rem;
  padding: 0;
}
.elementor-widget.wb-ip-legal-body-el li {
  margin: 0.4rem 0;
  line-height: 1.65;
}

/* ---- LEGAL PAGES (green) variant — green texture bg, golden type ----
   Applied to Privacy Policy + Terms & Conditions via the shared
   `.wb-ip--privacy` class. Overrides the light .wb-ip--legal defaults.
   Headings use IvyPresto Display; body copy uses Commuters Sans. */
.elementor-section.wb-ip--privacy {
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;   /* image stays put, content scrolls over it */
  color: var(--color-cream);
}
/* iOS / mobile Safari can't honor background-attachment: fixed reliably
   — fall back to a normal scroll-attached image on touch / narrow. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .elementor-section.wb-ip--privacy {
    background-attachment: scroll !important;
  }
}
/* H1 title — IvyPresto, golden. */
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-page-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  color: #F3E8AF !important;
}
/* Subtitle (address line) — Commuters Sans, soft gold. */
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-page-subtitle-el .elementor-heading-title,
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-page-subtitle-el,
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-page-subtitle-el p {
  font-family: "Commuters Sans", sans-serif !important;
  color: rgba(243,232,175,0.8) !important;
}
/* Centre the decorative dot-row divider. */
.elementor-section.wb-ip--privacy .elementor-widget-html .wb-legal__dot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem auto;
}
.elementor-section.wb-ip--privacy .wb-legal__dot-row .wb-legal__line {
  width: 4rem;
  height: 1px;
  background: rgba(243,232,175,0.5);
}
.elementor-section.wb-ip--privacy .wb-legal__dot-row .wb-legal__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  background: #F3E8AF;
}
/* Legal body card — translucent gold-tinted panel on the green bg. */
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el .elementor-widget-container {
  background: rgba(243,232,175,0.06) !important;
  border: 1px solid rgba(243,232,175,0.18) !important;
}
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el,
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el p,
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el li {
  font-family: "Commuters Sans", sans-serif !important;
  color: rgba(243,232,175,0.88) !important;
}
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el h2,
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el .wb-legal__h2,
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el h3,
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el .wb-legal__h3 {
  font-family: "IvyPresto Display", Georgia, serif !important;
  color: #F3E8AF !important;
}
.elementor-section.wb-ip--privacy .elementor-widget.wb-ip-legal-body-el strong {
  color: #F3E8AF !important;
}

/* Contact form card. */
.elementor-widget.wb-ip-form-el .elementor-widget-container { padding: 0 !important; max-width: 36rem; margin: 1.5rem auto 0; width: 100%; }

/* CF7 validation + response messages — force black so they read on the
   light form card AND on any surrounding bg variant (green contact bg
   would otherwise inherit cream). Covers the summary banner and each
   field's not-valid tip. */
.elementor-section.wb-ip--contact .wpcf7-response-output,
.elementor-section.wb-ip--contact .wpcf7-not-valid-tip,
.elementor-section.wb-ip--contact .wpcf7-form .wpcf7-response-output,
.elementor-section.wb-ip--contact .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  color: #000 !important;
}

/* ==========================================================================
   FOOTER — Elementor-driven, fully editable
   Black bg, cream/dim type. Layout mirrors the To Be Magnetic reference:
   top 3-col row → social icons → legal nav → copyright → disclaimer.
   ========================================================================== */

/* Outer wrapper styling — applies both when the footer is rendered
   inside footer.php on the live site (.wb-footer--elementor wrapper)
   AND when the Site Footer page is viewed standalone in Elementor's
   editor preview or via /site-footer/ direct link (body.page-id-135).
   That way the brand-dark theme is identical in both contexts. */
.wb-footer--elementor,
body.page-id-135 .elementor.elementor-135 {
  background: var(--color-footer);
  color: rgba(211,192,175,0.8);
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
}

/* When the page is rendered standalone, hide the theme header so the
   footer fills the canvas like the editor expects. */
body.page-id-135 {
  background: var(--color-footer);
}
body.page-id-135 .wb-header,
body.page-id-135 .site-header,
body.page-id-135 .wb-mobile-cta {
  display: none !important;
}

/* Each row inside the footer is a normal Elementor section. Give them all
   a comfortable max-width and the same cream type defaults. */
.wb-footer--elementor .elementor-section,
body.page-id-135 .elementor-section {
  background: transparent !important;
  color: inherit;
}
.wb-footer--elementor .elementor-section > .elementor-container,
body.page-id-135 .elementor-section > .elementor-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* ---- TOP ROW — WEALTH BEING brand + 2 primary links (centered) ---- */
.elementor-section.wb-ft-top-row {
  margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}
.elementor-section.wb-ft-top-row .elementor-column > .elementor-element-populated,
.elementor-section.wb-ft-top-row .elementor-column > .elementor-widget-wrap {
  background: transparent !important;
  padding: 0 !important;
}

/* Column heading (WEALTH BEING / EXPLORE) — uppercase cream label. */
.elementor-widget.wb-ft-col-heading-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ft-col-heading-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  margin: 0 0 1.5rem !important;
  text-align: center;
}

/* Column links list — vertical, no bullets, soft hover. */
.elementor-widget.wb-ft-col-links-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ft-col-links-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}
.elementor-widget.wb-ft-col-links-el .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: rgba(211,192,175,0.85);
  align-items: center !important;
}
.elementor-widget.wb-ft-col-links-el .elementor-icon-list-icon {
  display: none !important;
}
.elementor-widget.wb-ft-col-links-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1.5 !important;
  padding-left: 0 !important;
  transition: color 0.2s ease;
}
.elementor-widget.wb-ft-col-links-el .elementor-icon-list-item:hover .elementor-icon-list-text { color: #F3E8AF !important; }
.elementor-widget.wb-ft-col-links-el .elementor-icon-list-item a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Brand tagline — italic editorial copy below the WEALTH BEING heading. */
.elementor-widget.wb-ft-tagline-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto 1.75rem;
  max-width: 520px;
}
.elementor-widget.wb-ft-tagline-el,
.elementor-widget.wb-ft-tagline-el p {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
  line-height: 1.6 !important;
  color: rgba(211,192,175,0.85) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Apps download row — caption + 2 small app store badge images. */
.elementor-widget.wb-ft-apps-label-el {
  margin-top: 1.5rem !important;
}
.elementor-widget.wb-ft-apps-label-el .elementor-widget-container { padding: 0 !important; text-align: center; }
.wb-ft-apps-label {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(211,192,175,0.6);
  margin-bottom: 0.75rem;
}

/* App store badge images. The two badges sit side-by-side on a flex row;
   we achieve that via negative margins because they're siblings in the
   column's widget-wrap (Elementor stacks widgets vertically by default). */
.elementor-widget.wb-ft-app-btn-el {
  display: inline-block !important;
  width: auto !important;
  margin: 0 0.5rem !important;
  vertical-align: middle;
}
.elementor-widget.wb-ft-app-btn-el .elementor-widget-container { padding: 0 !important; text-align: center; }
.elementor-widget.wb-ft-app-btn-el .elementor-image,
.elementor-widget.wb-ft-app-btn-el .elementor-image a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(243,232,175,0.08);
  border: 1px solid rgba(243,232,175,0.18);
  border-radius: 9999px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.elementor-widget.wb-ft-app-btn-el:hover .elementor-image,
.elementor-widget.wb-ft-app-btn-el:hover .elementor-image a {
  background: #F3E8AF;
  border-color: #F3E8AF;
  transform: translateY(-2px);
}
.elementor-widget.wb-ft-app-btn-el img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(0.85);
  transition: filter 0.25s ease;
}
.elementor-widget.wb-ft-app-btn-el:hover img {
  filter: brightness(0);
}

/* Stack the app row centered — place caption above, two badges below. */
.elementor-section.wb-ft-top-row .elementor-widget.wb-ft-apps-label-el,
.elementor-section.wb-ft-top-row .elementor-widget.wb-ft-app-btn-el {
  text-align: center;
}
.elementor-section.wb-ft-top-row .elementor-widget.wb-ft-apps-label-el {
  width: 100% !important;
}
/* Make the two app buttons share a row instead of stacking. */
.elementor-section.wb-ft-top-row > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wrap > .elementor-widget.wb-ft-app-btn-el {
  width: auto !important;
}

/* ---- SOCIAL ICONS ROW ---- */
.elementor-section.wb-ft-socials-row {
  margin: clamp(1.5rem, 3vw, 2.5rem) auto !important;
}
.elementor-widget.wb-ft-socials-el .elementor-widget-container {
  padding: 0 !important;
  text-align: center;
}
.elementor-widget.wb-ft-socials-el .elementor-social-icons-wrapper {
  display: inline-flex !important;
  gap: 0.75rem !important;
  justify-content: center !important;
}
/* Default: dim icons (look almost black on the black bg). On hover the
   icon's brand color comes through — Instagram pink-violet, Facebook
   blue, YouTube red, TikTok cyan/magenta. */
.elementor-widget.wb-ft-socials-el .elementor-social-icon {
  width: 40px;
  height: 40px;
  background: transparent !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  color: rgba(211,192,175,0.35) !important;
  transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  margin: 0 !important;
}
.elementor-widget.wb-ft-socials-el .elementor-social-icon i,
.elementor-widget.wb-ft-socials-el .elementor-social-icon svg {
  color: inherit !important;
  fill: currentColor !important;
}
.elementor-widget.wb-ft-socials-el .elementor-social-icon:hover {
  transform: translateY(-2px);
  background: transparent !important;
}
/* Brand gold on hover (every social icon). */
.elementor-widget.wb-ft-socials-el .elementor-social-icon:hover,
.elementor-widget.wb-ft-socials-el .elementor-social-icon:hover i,
.elementor-widget.wb-ft-socials-el .elementor-social-icon:hover svg { color: #F3E8AF !important; }

/* ---- LEGAL LINKS ROW — horizontal, uppercase, spaced ---- */
.elementor-section.wb-ft-legal-row {
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem) !important;
  border-bottom: 1px solid rgba(211,192,175,0.15) !important;
}
.elementor-widget.wb-ft-legal-links-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ft-legal-links-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem 1.75rem !important;
  justify-content: center !important;
}
.elementor-widget.wb-ft-legal-links-el .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(211,192,175,0.7);
}
.elementor-widget.wb-ft-legal-links-el .elementor-icon-list-icon { display: none !important; }
.elementor-widget.wb-ft-legal-links-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: 1.4 !important;
  padding-left: 0 !important;
  transition: color 0.2s ease;
}
.elementor-widget.wb-ft-legal-links-el .elementor-icon-list-item:hover .elementor-icon-list-text { color: #F3E8AF !important; }
.elementor-widget.wb-ft-legal-links-el .elementor-icon-list-item a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ---- COPYRIGHT ROW ---- */
.elementor-section.wb-ft-copyright-row {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.elementor-widget.wb-ft-copyright-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ft-copyright-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(211,192,175,0.7) !important;
  margin: 0 !important;
  text-align: center;
}

/* ---- DISCLAIMER ROW — legal copy ---- */
.elementor-section.wb-ft-disclaimer-row > .elementor-container {
  max-width: 900px;
  margin: 0 auto;
}
.elementor-widget.wb-ft-disclaimer-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-ft-disclaimer-el,
.elementor-widget.wb-ft-disclaimer-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
  color: rgba(211,192,175,0.6) !important;
  text-align: center !important;
}
.elementor-widget.wb-ft-disclaimer-el p { margin: 0 0 1rem !important; }
.elementor-widget.wb-ft-disclaimer-el p:last-child {
  margin-bottom: 0 !important;
  color: var(--color-cream-dim) !important;
}

/* ==========================================================================
   Glow-shimmer pill (header CTA, mobile CTA, helper class)
   ========================================================================== */
/* Glow-shimmer pill — applied to header CTA, every button widget with
   wb-glow-btn class, and any link with wb-glow-btn-link. The animation
   keyframes are declared with !important because Elementor's
   per-page generated CSS is more specific than ours and would otherwise
   suppress `animation`. Using longhand background-image + background-size
   so the shorthand `background:` doesn't reset background-position each
   frame and kill the shimmer. */
/* Glow-shimmer pill — exact port of GlowButton from
   /Users/muhammadadnan/Desktop/wealth-being-web-landing/app/page.tsx
   and the header CTA from /components/Header.tsx.
   - background-position animates slowly across the gradient (the "shimmer")
   - halo is subtle when idle, intensifies on hover */
.wb-glow-pill,
.wb-glow-btn .elementor-button,
.elementor-widget-button.wb-glow-btn .elementor-button,
.elementor-button.wb-glow-btn,
.wb-glow-btn-link,
a.wb-glow-pill,
a.wb-glow-btn-link {
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  box-shadow:
    0 0 18px 2px rgba(243,232,175,0.45),
    0 0 40px 4px rgba(243,232,175,0.20),
    0 4px 16px   rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  will-change: background-position;
}

/* Header CTA uses the slightly subtler halo from Header.tsx */
.wb-glow-pill,
a.wb-glow-pill {
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.28),
    0 0 32px 3px   rgba(243,232,175,0.11),
    0 4px 16px     rgba(0,0,0,0.12) !important;
}

/* On hover: pop the glow + slight scale, just like the original
   `hover:scale-105 hover:bg-[#F3E8AF] transition-all duration-300` */
.wb-glow-pill:hover,
.wb-glow-btn:hover .elementor-button,
.elementor-button.wb-glow-btn:hover,
.wb-glow-btn-link:hover,
a.wb-glow-pill:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 28px 5px  rgba(243,232,175,0.70),
    0 0 55px 6px  rgba(243,232,175,0.32),
    0 0 90px 12px rgba(243,232,175,0.18),
    0 6px 20px    rgba(0,0,0,0.15) !important;
}

/* Original keyframes from page.tsx — only background-position is animated,
   creating a slow, elegant gradient drift (the "shimmer"). */
@keyframes glowShimmer {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
.wb-glow-pill:hover,
.wb-glow-btn .elementor-button:hover,
.elementor-button.wb-glow-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 28px 6px  rgba(243,232,175,0.80),
    0 0 70px 15px rgba(243,232,175,0.45),
    0 0 130px 28px rgba(243,232,175,0.20),
    0 6px 20px rgba(0,0,0,0.15) !important;
}


/* ==========================================================================
   Elementor overrides — make widgets honor our typography and spacing
   ========================================================================== */

/* Push content below the fixed header. The first child section also paints
   itself behind the navbar so there is no visible seam between body/navbar
   green and section green. */
.elementor-default .elementor { padding-top: 0; }
.elementor-default .elementor > .elementor-top-section:first-child {
  margin-top: 0;
  padding-top: 120px !important;
}

/* Default font on every Elementor widget unless explicitly overridden */
.elementor-widget-text-editor,
.elementor-widget-icon-list,
.elementor-widget-text-editor p,
.elementor-widget-icon-list li,
.elementor-widget-button .elementor-button {
  font-family: "Commuters Sans", "Helvetica Neue", Arial, sans-serif !important;
}
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
  font-family: "IvyPresto Display", Georgia, serif !important;
  /* Weight intentionally not forced — each widget controls its own weight */
}
.elementor-widget-heading h1 em,
.elementor-widget-heading h2 em,
.elementor-widget-heading h3 em,
.elementor-widget-heading h4 em { font-style: italic; font-weight: 100; }

/* Headings size scale (matches Tailwind: text-4xl, text-5xl, text-6xl) */
.elementor-widget-heading h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; }
.elementor-widget-heading h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.15; }
.elementor-widget-heading h3 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); line-height: 1.2; }

/* Body text matches text-lg/text-xl */
.elementor-widget-text-editor p { font-size: 1.125rem; line-height: 1.8; margin: 0 0 1rem; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor ul { padding: 0; margin: 0; list-style: none; }
.elementor-widget-text-editor li { font-size: 1.125rem; line-height: 1.8; }

/* Hide forced <br>s on mobile (mirrors Tailwind's `hidden md:block`) */
br.hidden-mobile { display: none; }
@media (min-width: 768px) { br.hidden-mobile { display: inline; } }

/* Reason-bullets indent (matches px-0 md:px-[15%]) */
@media (min-width: 768px) { .wb-reason-bullets { padding-left: 15% !important; padding-right: 15% !important; } }

/* Centered list-as-block: items stay left-aligned but the ul itself centers */
.wb-list-centered .elementor-icon-list-items {
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Icon list bullets — keep the original fa-circle but bump to a readable size.
   Elementor sets color on the <i> directly via the widget's icon_color setting,
   so leaving the icon visible keeps per-widget color (no inheritance hacks). */
.elementor-widget-icon-list .elementor-icon-list-icon {
  align-self: flex-start;
  margin-top: 0.45em;
  flex: 0 0 auto;
}
.elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg {
  width: 8px !important;
  height: 8px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  display: inline-block !important;
}
.elementor-widget-icon-list .elementor-icon-list-text { font-size: 1.125rem; line-height: 1.625; color: inherit; }
.elementor-widget-icon-list .elementor-icon-list-items > li + li { margin-top: 1rem; }

/* wb-plus-list: "Join Wealth Being Now to:" bullets — center-aligned,
   each line prefixed with literal "+ " from the source HTML. */
.wb-plus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 1.625;
  color: rgba(0,0,0,0.9);
}
.wb-plus-list li { margin-bottom: 1rem; }
.wb-plus-list li:last-child { margin-bottom: 0; }
.wb-plus-list--center { text-align: center; }

/* The ContentCard wrapper for §6 bullets (rounded-3xl, p-8 md:p-10,
   transparent / no shadow per original `<ContentCard noShadow>`) */
.wb-join-card {
  border-radius: 1.5rem;
  padding: 2rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) { .wb-join-card { padding: 2.5rem; } }

/* §8 Pricing — gradient dividers above/below "Choose The Right Status" */
.wb-pricing-divider {
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, #F3E8AF, transparent);
}
.wb-pricing-divider--sm { width: 6rem; }
.wb-pricing-divider--lg { width: 8rem; }

/* §8 "Join core now for $1.11" card — cap to 75% width on desktop.
   Targeted via :has() since Elementor inner sections don't honor _css_classes
   on this version. The card contains a heading with id=join-now-become-member. */
@media (min-width: 768px) {
  .elementor-inner-section:has(#join-now-become-member) {
    max-width: 75% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* §9 Testimonials — vertical-fade white overlay (50% top → 0 middle → 50% bottom) */
.wb-testimonials-section { position: relative; }
.wb-testimonials-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0)   50%,
    rgba(255,255,255,0.5) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.wb-testimonials-section > .elementor-container { position: relative; z-index: 2; }

/* Elementor "Section" widths so content_width=1100 actually means 1100 */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1280px; }

/* Buttons — when wb-glow-btn class is set on the button widget */
.elementor-widget-button .wb-glow-btn .elementor-button,
.elementor-widget-button.wb-glow-btn .elementor-button {
  padding: 1.25rem 2.5rem !important;
  font-size: 1rem !important;
}

/* ==========================================================================
   Section pattern overlays (the gold embossed pattern used on green sections)
   ========================================================================== */
.wb-embossed-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../images/embossed_pattern.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.wb-embossed-overlay > .elementor-container,
.wb-embossed-overlay > .elementor-column-wrap { position: relative; z-index: 1; }

/* ==========================================================================
   Pillar card refinements (glass effect)
   ========================================================================== */
.wb-pillar-col {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   Pricing card refinements
   ========================================================================== */
/* ==========================================================================
   Pricing cards — single-HTML port of PricingCard from
   /Users/muhammadadnan/Desktop/wealth-being-web-landing/app/page.tsx:674.
   Every class corresponds one-to-one with the original Tailwind utilities.
   ========================================================================== */
.wb-pcards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .wb-pcards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Legacy HTML card (original Tailwind-translated `<article class="wb-pcard">`
   inside `.wb-pcards-grid`). The native Elementor build reuses the same
   `.wb-pcard` class on `<div class="elementor-column">`, so these rules
   are scoped via `:not(.elementor-column)` — that way they only target
   the legacy plain-HTML cards and never paint a duplicate "outer white
   card" behind the real Elementor card. */
.wb-pcard:not(.elementor-column) {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 1.5rem;
  padding: 2.5rem;
  border: 1px solid rgba(18, 46, 31, 0.10);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.5s ease;
}
@media (min-width: 768px) { .wb-pcard:not(.elementor-column) { padding: 3rem; } }
.wb-pcard:not(.elementor-column):hover { box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.30); }

/* Featured (Most Popular): cream border + ambient gold glow.
   The hover state below preserves the gold glow rather than replacing it. */
.wb-pcard--featured {
  border-color: #F3E8AF;
  box-shadow:
    0 0 20px 6px    rgba(243, 232, 175, 0.45),
    0 0 120px 20px  rgba(243, 232, 175, 0.14),
    0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.wb-pcard--featured:hover {
  box-shadow:
    0 0 28px 8px    rgba(243, 232, 175, 0.55),
    0 0 140px 28px  rgba(243, 232, 175, 0.20),
    0 35px 60px -15px rgba(0, 0, 0, 0.30);
}

/* Badge wrap: absolute -top-4 left-1/2 -translate-x-1/2 */
.wb-pcard__badge-wrap {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
/* Badge pill: inline-block bg-gradient-to-r from-#F3E8AF to-#E8DB96
   text-#122E1F px-6 py-2 rounded-full font-commuters tracking-[0.2em]
   text-xs shadow-lg uppercase */
.wb-pcard__badge {
  display: inline-block;
  background: linear-gradient(to right, #F3E8AF, #E8DB96);
  color: #122E1F;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

/* Title: text-3xl md:text-4xl lg:text-5xl font-ivypresto font-thin text-#000 mb-3 leading-tight */
.wb-pcard__title {
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-size: 1.875rem;
  line-height: 1.25;
  color: #000;
  margin: 0 0 0.75rem;
}
@media (min-width: 768px) { .wb-pcard__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .wb-pcard__title { font-size: 3rem; } }
.wb-pcard__title em,
.wb-pcard__title i { font-style: italic; }

/* Subtitle: text-xl md:text-2xl font-ivypresto font-thin italic text-#000 mb-8 */
.wb-pcard__subtitle {
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #000;
  margin: 0 0 2rem;
}
@media (min-width: 768px) { .wb-pcard__subtitle { font-size: 1.5rem; } }

/* Description: text-base md:text-lg font-helvetica text-#000 mb-10 leading-relaxed */
.wb-pcard__desc {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625;
  color: #000;
  margin: 0 0 2.5rem;
}
@media (min-width: 768px) { .wb-pcard__desc { font-size: 1.125rem; } }

/* Feature list: space-y-4 with cream dots */
.wb-pcard__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}
.wb-pcard__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.wb-pcard__features li:last-child { margin-bottom: 0; }
.wb-pcard__dot {
  color: #F3E8AF;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.125rem;
  flex: 0 0 auto;
}
.wb-pcard__feat-text {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625;
  color: #000;
}
@media (min-width: 768px) { .wb-pcard__feat-text { font-size: 1.125rem; } }

/* Divider: w-full h-[1px] bg-gradient via-#122E1F/20 mb-8 */
.wb-pcard__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(18, 46, 31, 0.20), transparent);
  margin-bottom: 2rem;
}

/* Price box: bg-gradient-to-br from-#122E1F to-#1a3d2e rounded-2xl p-8 mb-8 overflow-hidden */
.wb-pcard__price-box {
  position: relative;
  background: linear-gradient(to bottom right, #122E1F, #1a3d2e);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.wb-pcard:hover .wb-pcard__price-box {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
}
/* Price: text-5xl md:text-6xl lg:text-7xl font-ivypresto font-thin text-#F3E8AF mb-3 leading-none */
.wb-pcard__price {
  position: relative;
  z-index: 1;
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-size: 3rem;
  line-height: 1;
  color: #F3E8AF;
  margin: 0 0 0.75rem;
}
@media (min-width: 768px) { .wb-pcard__price { font-size: 3.75rem; } }
@media (min-width: 1024px) { .wb-pcard__price { font-size: 4.5rem; } }
/* Period: text-lg md:text-xl font-helvetica text-#F3E8AF/90 mb-4 italic */
.wb-pcard__period {
  position: relative;
  z-index: 1;
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.125rem;
  color: rgba(243, 232, 175, 0.90);
  margin: 0 0 1rem;
}
@media (min-width: 768px) { .wb-pcard__period { font-size: 1.25rem; } }
/* Savings: inline-block bg-#F3E8AF text-black px-5 py-2 rounded-full text-sm tracking-[0.2em] uppercase */
.wb-pcard__savings {
  display: inline-block;
  background: #F3E8AF;
  color: #000;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

/* Note (alternative price): text-base md:text-lg font-helvetica text-#122E1F mb-8 text-center */
.wb-pcard__note {
  text-align: center;
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #122E1F;
  margin: 0 0 2rem;
}
@media (min-width: 768px) { .wb-pcard__note { font-size: 1.125rem; } }

/* CTA: full-width pill — inherits wb-glow-btn-link styles for gradient + shimmer */
.wb-pcard__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1.5rem 2.5rem;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

/* Decorative top-right corner: subtle radial bleed */
.wb-pcard__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(to bottom right, rgba(211, 192, 175, 0.10), transparent);
  border-bottom-left-radius: 9999px;
  z-index: 0;
  pointer-events: none;
}

/* ==========================================================================
   Testimonial masonry (free Elementor has no masonry widget)
   ========================================================================== */
.wb-masonry { columns: 1; column-gap: 1.5rem; }
@media (min-width: 768px)  { .wb-masonry { columns: 2; } }
@media (min-width: 1024px) { .wb-masonry { columns: 3; } }
.wb-masonry > article {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(17,45,30,0.10);
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 0 0 1.5rem;
  break-inside: avoid;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.wb-masonry > article:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); transform: translateY(-2px); }
.wb-testi__head   {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.wb-testi__row    {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.wb-testi__avatar { width: 56px; height: 56px; border-radius: 9999px; background: linear-gradient(135deg, #112D1E, #1a3d2e); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: "IvyPresto Display", serif; font-weight: 600; font-size: 1.125rem; flex: 0 0 auto; overflow: hidden; box-shadow: 0 0 0 2px rgba(17,45,30,0.20); }
.wb-testi__avatar img { width: 100%; height: 100%; object-fit: cover; }
.wb-testi__meta   { flex: 1; min-width: 0; }
.wb-testi__name   { font-family: "IvyPresto Display", serif; font-weight: 600; font-size: 1.125rem; color: #112D1E; margin: 0; word-break: break-word; }
.wb-testi__country{ font-family: "IvyPresto Display", serif; font-weight: 300; font-size: 0.875rem; color: rgba(17,45,30,0.7); display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }
.wb-testi__country svg { color: rgba(17,45,30,0.5); flex: 0 0 auto; }
.wb-testi__stars  { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.wb-testi__star   { width: 22px; height: 22px; background: #00B67A; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.wb-testi__star svg { fill: #fff; }
.wb-testi__title  { font-family: "IvyPresto Display", serif; font-weight: 600; font-size: 1.25rem; color: #112D1E; margin: 0; }
.wb-testi__body   { font-family: "Commuters Sans", sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.625; color: rgba(17,45,30,0.85); white-space: pre-line; margin: 0; }

/* ==========================================================================
   Misc
   ========================================================================== */
.wb-or-divider {
  display: flex; align-items: center; gap: 1.5rem; justify-content: center; padding: 1.5rem 0;
  color: #000;
}
.wb-or-divider span { font-family: "IvyPresto Display", serif; font-weight: 100; font-style: italic; font-size: 1.25rem; letter-spacing: 0.2em; }
.wb-or-divider::before, .wb-or-divider::after { content: ""; display: block; width: 4rem; height: 1px; background: currentColor; }

/* Hide footer placeholder text if anything leaks */
.elementor-page #content > main { padding: 0; }

/* ==========================================================================
   App store buttons (used on About, sales pages, /3, /globel)
   Ported from components/app_store_buttons_branding.tsx
   ========================================================================== */
.wb-app-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
@media (min-width: 640px) { .wb-app-buttons { flex-direction: row; } }
.wb-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  text-decoration: none;
}
.wb-app-btn:hover { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15); }
.wb-app-btn__icon { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }
.wb-app-btn__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.wb-app-btn__text small { font: 400 10px/1 "Commuters Sans", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.wb-app-btn__text strong { font: 400 18px/1 "Commuters Sans", sans-serif; letter-spacing: 0.05em; }
/* Dark (green pill) variant — original AppStoreButtons */
.wb-app-buttons--dark .wb-app-btn { background: #122E1F; border: 1px solid rgba(211,192,175,0.20); }
.wb-app-buttons--dark .wb-app-btn:hover { background: #1a3d2e; }
.wb-app-buttons--dark .wb-app-btn__icon { filter: brightness(0) invert(1); }
.wb-app-buttons--dark .wb-app-btn__text small { color: rgba(211,192,175,0.80); }
.wb-app-buttons--dark .wb-app-btn__text strong { color: #D3C0AF; }
/* Gold (cream pill) variant — original AppStoreButtonsGold */
.wb-app-buttons--gold .wb-app-btn { background: #F3E8AF; border: 1px solid rgba(18,46,31,0.10); }
.wb-app-buttons--gold .wb-app-btn:hover { background: #E8DB96; }
.wb-app-buttons--gold .wb-app-btn__text small { color: rgba(18,46,31,0.80); }
.wb-app-buttons--gold .wb-app-btn__text strong { color: #122E1F; }

/* ==========================================================================
   Workshop page — sales-letter style green hero + benefits/host cards
   ========================================================================== */
.wb-workshop__hero { text-align: center; max-width: 80rem; margin: 0 auto; color: #F3E8AF; padding: 4rem 0; }
.wb-workshop__hero-logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.wb-workshop__hero-logo img { width: 120px; height: 120px; transition: transform 0.3s ease; }
@media (min-width: 768px) { .wb-workshop__hero-logo img { width: 180px; height: 180px; } }
.wb-workshop__hero-eyebrow {
  font: 400 0.875rem/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #F3E8AF;
  margin: 0 0 1.5rem;
}
.wb-workshop__hero-eyebrow em { font-style: italic; }
.wb-workshop__hero-pre {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  color: rgba(243,232,175,0.90);
  max-width: 48rem;
  margin: 0 auto 1rem;
  font-size: clamp(1.1rem, 2.5vw, 1.75rem);
  line-height: 1.5;
}
.wb-workshop__hero-title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(2rem, 7vw, 6rem);
  line-height: 1.1;
  color: #F3E8AF;
  max-width: 64rem;
  margin: 0 auto 1.5rem;
}
.wb-workshop__hero-title em { font-style: italic; }
.wb-workshop__hero-divider { width: 8rem; height: 1px; background: linear-gradient(to right, transparent, rgba(243,232,175,0.50), transparent); margin: 0 auto 1.5rem; }
.wb-workshop__host-block { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 2rem; color: #F3E8AF; }
.wb-workshop__host-by { font: 400 0.875rem/1 "Commuters Sans", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243,232,175,0.60); }
.wb-workshop__host-name { font: 100 1.5rem/1 "IvyPresto Display", serif; color: #F3E8AF; }
.wb-workshop__host-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.wb-workshop__host-badges span {
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(243,232,175,0.30);
  border-radius: 9999px;
  font: 400 0.75rem/1.4 "Commuters Sans", sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.80);
}
.wb-workshop__cta-btn,
.wb-three__cta {
  display: inline-block;
  padding: 1.25rem 2.5rem;
}

.wb-workshop__benefits { background: rgba(255,255,255,0.85); border-radius: 1.5rem; padding: 2rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 768px) { .wb-workshop__benefits { padding: 3rem; } }
.wb-workshop__benefits h2 { font: 100 clamp(2rem,4vw,3rem)/1.2 "IvyPresto Display", serif; color: #112D1E; text-align: center; margin: 0 0 2rem; }
.wb-workshop__benefits ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.wb-workshop__benefits li { padding: 1rem 0; border-bottom: 1px solid rgba(17,45,30,0.10); color: #112D1E; font: 400 1.125rem/1.625 "Commuters Sans", sans-serif; }
.wb-workshop__benefits li:last-child { border-bottom: 0; }

.wb-workshop__for-you { max-width: 80rem; margin: 0 auto; }
.wb-workshop__for-you h2 { font: 100 clamp(2rem,4vw,3rem)/1.2 "IvyPresto Display", serif; color: #F3E8AF; text-align: center; margin: 0 0 3rem; }
.wb-workshop__fit-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .wb-workshop__fit-grid { grid-template-columns: repeat(2, 1fr); } }
.wb-workshop__fit-card { border-radius: 1.5rem; padding: 2rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(243,232,175,0.18); color: #F3E8AF; }
.wb-workshop__fit-card h3 { font: 100 1.5rem/1.3 "IvyPresto Display", serif; margin: 0 0 1rem; }
.wb-workshop__fit-card ul { list-style: none; padding: 0; margin: 0; }
.wb-workshop__fit-card li { padding: 0.5rem 0; font: 400 1rem/1.5 "Commuters Sans", sans-serif; color: rgba(243,232,175,0.90); }
.wb-workshop__fit-card--no li { text-decoration: line-through; opacity: 0.75; }

.wb-workshop__host { max-width: 64rem; margin: 0 auto; color: #F3E8AF; text-align: center; }
.wb-workshop__host-eyebrow { font: 400 0.875rem/1 "Commuters Sans", sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243,232,175,0.60); margin: 0 0 1rem; }
.wb-workshop__host-h2 { font: 100 clamp(2.25rem,5vw,3.5rem)/1.2 "IvyPresto Display", serif; color: #F3E8AF; margin: 0 0 2.5rem; }
.wb-workshop__host-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(243,232,175,0.18); border-radius: 1.5rem; padding: 2rem; text-align: left; }
@media (min-width: 768px) { .wb-workshop__host-card { padding: 3rem; } }
.wb-workshop__host-card img { width: 100%; max-width: 240px; height: auto; border-radius: 1rem; margin: 0 auto 1.5rem; display: block; }
.wb-workshop__host-card h3 { font: 100 1.75rem/1.2 "IvyPresto Display", serif; color: #F3E8AF; text-align: center; margin: 0 0 1rem; }
.wb-workshop__host-card p { font: 400 1rem/1.7 "Commuters Sans", sans-serif; color: rgba(243,232,175,0.90); margin: 0 0 1rem; }
.wb-workshop__host-card em.wb-workshop__italic { font-style: italic; }
.wb-workshop__reviews-img { display: block; max-width: 64rem; width: 100%; height: auto; margin: 2rem auto 0; border-radius: 1rem; }

/* ==========================================================================
   Fellowship page — earned-led culture marketing
   ========================================================================== */
.wb-fellowship__hero { max-width: 80rem; margin: 0 auto; padding: 5rem 0; color: #F3E8AF; }
.wb-fellowship__hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .wb-fellowship__hero-grid { grid-template-columns: 1fr 1fr; } }
.wb-fellowship__hero-eyebrow,
.wb-fellowship__journey-eyebrow,
.wb-fellowship__why-eyebrow,
.wb-fellowship__wwd-eyebrow { font: 400 0.875rem/1 "Commuters Sans", sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243,232,175,0.60); margin: 0 0 1.5rem; }
.wb-fellowship__hero-title,
.wb-fellowship__cta-title { font: 100 clamp(2.25rem,5vw,4rem)/1.15 "IvyPresto Display", serif; color: #F3E8AF; margin: 0 0 1.5rem; }
.wb-fellowship__hero-title--accent,
.wb-fellowship__cta-title--accent { font-style: italic; }
.wb-fellowship__hero-lede { font: 400 1.125rem/1.7 "Commuters Sans", sans-serif; color: rgba(243,232,175,0.90); margin: 0 0 2rem; }
.wb-fellowship__hero-cta { display: inline-block; padding: 1.25rem 2.5rem; }
.wb-fellowship__hero-media { border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4/3; }
.wb-fellowship__hero-media img { width: 100%; height: 100%; object-fit: cover; }

.wb-fellowship__journey,
.wb-fellowship__why,
.wb-fellowship__wwd { max-width: 80rem; margin: 0 auto; color: #F3E8AF; padding: 5rem 0; }
.wb-fellowship__journey-title,
.wb-fellowship__why-title,
.wb-fellowship__wwd-title { font: 100 clamp(2rem,4vw,3rem)/1.2 "IvyPresto Display", serif; color: #F3E8AF; margin: 0 0 3rem; text-align: center; }
.wb-fellowship__journey-grid,
.wb-fellowship__why-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .wb-fellowship__journey-grid,.wb-fellowship__why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wb-fellowship__journey-grid,.wb-fellowship__why-grid { grid-template-columns: repeat(4, 1fr); } }
.wb-fellowship__journey-card,
.wb-fellowship__why-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(243,232,175,0.18); border-radius: 1rem; padding: 1.5rem; transition: transform 0.3s ease; }
.wb-fellowship__journey-card:hover,
.wb-fellowship__why-card:hover { transform: translateY(-4px); }
.wb-fellowship__journey-num { display: inline-block; font: 100 2.5rem/1 "IvyPresto Display", serif; color: rgba(243,232,175,0.50); margin-bottom: 0.75rem; }
.wb-fellowship__journey-card-title,
.wb-fellowship__why-card-title { font: 400 1.25rem/1.3 "Commuters Sans", sans-serif; color: #F3E8AF; margin: 0 0 0.5rem; }
.wb-fellowship__journey-card-desc,
.wb-fellowship__why-card-desc { font: 400 0.95rem/1.625 "Commuters Sans", sans-serif; color: rgba(243,232,175,0.85); margin: 0; }
.wb-fellowship__wwd-scroller { overflow-x: auto; padding-bottom: 1rem; }
.wb-fellowship__wwd-track { display: flex; gap: 1.5rem; }
.wb-fellowship__wwd-card { flex: 0 0 18rem; border-radius: 1.5rem; padding: 2rem; color: #fff; min-height: 16rem; display: flex; flex-direction: column; justify-content: flex-end; }
.wb-fellowship__wwd-card--amber { background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444); }
.wb-fellowship__wwd-card--pink { background: linear-gradient(135deg, #a855f7, #ec4899, #f43f5e); }
.wb-fellowship__wwd-card--cyan { background: linear-gradient(135deg, #3b82f6, #06b6d4, #14b8a6); }
.wb-fellowship__wwd-card--emerald { background: linear-gradient(135deg, #22c55e, #10b981, #14b8a6); }
.wb-fellowship__wwd-card h3 { font: 600 1.5rem/1.2 "Commuters Sans", sans-serif; margin: 0 0 0.5rem; color: #fff; }
.wb-fellowship__wwd-card p { font: 400 0.95rem/1.5 "Commuters Sans", sans-serif; margin: 0; color: rgba(255,255,255,0.95); }

.wb-fellowship__cta { max-width: 56rem; margin: 0 auto; padding: 5rem 0; text-align: center; color: #F3E8AF; }
.wb-fellowship__cta-desc { font: 400 1.125rem/1.625 "Commuters Sans", sans-serif; color: rgba(243,232,175,0.85); margin: 0 auto 2rem; }
.wb-fellowship__cta-btn { display: inline-block; padding: 1.25rem 2.5rem; }

/* ==========================================================================
   /3 — Signature Members Welcome Pass
   ========================================================================== */
.wb-three { max-width: 56rem; margin: 0 auto; text-align: center; color: #F3E8AF; }
.wb-three__logo { display: flex; justify-content: center; margin-bottom: 5rem; }
.wb-three__logo img { width: 180px; height: 180px; transition: transform 0.3s ease; }
.wb-three__eyebrow { font: 400 0.875rem/1 "Commuters Sans", sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243,232,175,0.60); margin: 0 0 1.5rem; }
.wb-three__title { font: 100 clamp(2.4rem,6vw,5rem)/1.1 "IvyPresto Display", serif; color: #F3E8AF; max-width: 56rem; margin: 0 auto 1.5rem; }
.wb-three__title em { font-style: italic; }
.wb-three__rule { display: block; width: 8rem; height: 1px; background: linear-gradient(to right, transparent, rgba(243,232,175,0.50), transparent); margin: 0 auto 3rem; }
.wb-three__card {
  max-width: 42rem;
  margin: 0 auto;
  background: rgba(243,232,175,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(243,232,175,0.20);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: left;
}
@media (min-width: 768px) { .wb-three__card { padding: 3rem; } }
.wb-three__what { font: 100 clamp(1.5rem,3vw,1.875rem)/1.3 "IvyPresto Display", serif; color: #F3E8AF; text-align: center; margin: 0 0 2rem; }
.wb-three__list { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.wb-three__list li { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.wb-three__check { display: inline-flex; width: 1.25rem; height: 1.25rem; border-radius: 9999px; align-items: center; justify-content: center; background: rgba(243,232,175,0.15); border: 1px solid rgba(243,232,175,0.35); color: #F3E8AF; font-size: 0.625rem; flex: 0 0 auto; }
.wb-three__list li > span:last-child { font: 400 1rem/1.5 "Commuters Sans", sans-serif; color: #F3E8AF; }
@media (min-width: 768px) { .wb-three__list li > span:last-child { font-size: 1.125rem; } }
.wb-three__divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(243,232,175,0.20), transparent); margin: 0 0 2.5rem; }
.wb-three__pricing { text-align: center; }
.wb-three__small { font: 400 0.875rem/1 "Commuters Sans", sans-serif; letter-spacing: 0.15em; text-transform: uppercase; color: #F3E8AF; margin: 0 0 0.5rem; }
.wb-three__strike { font: 100 1.875rem/1 "IvyPresto Display", serif; color: #F3E8AF; text-decoration: line-through; text-decoration-color: rgba(243,232,175,0.30); margin: 0 0 1rem; }
.wb-three__bonus {
  display: inline-block;
  background: linear-gradient(to right, #F3E8AF, #E8DB96);
  color: #122E1F;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  font: 400 0.75rem/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10);
  margin: 1rem 0;
}
.wb-three__access {
  background: #F3F1ED;
  border: 1px solid rgba(243,232,175,0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  margin: 1rem 0;
}
.wb-three__access p { font: 400 1rem/1.5 "Commuters Sans", sans-serif; color: #000; margin: 0 0 0.5rem; }
.wb-three__access-title { font: 100 1.25rem/1.4 "IvyPresto Display", serif !important; font-style: italic; color: #000; }
.wb-three__access-val { font: 400 0.875rem/1 "Commuters Sans", sans-serif !important; letter-spacing: 0.1em; color: #000 !important; }
.wb-three__price-box {
  display: inline-block;
  background: linear-gradient(135deg, #122E1F, #1a3d2e);
  border: 1px solid rgba(243,232,175,0.25);
  border-radius: 1rem;
  padding: 1.5rem 2.5rem;
  box-shadow: 0 0 40px rgba(243,232,175,0.10);
}
.wb-three__price { font: 100 clamp(3rem,8vw,5rem)/1 "IvyPresto Display", serif; color: #F3E8AF; margin: 0 0 0.5rem; }
.wb-three__cta-wrap { margin-top: 5rem; text-align: center; }
.wb-three__cta { display: inline-block; }

/* ==========================================================================
   Courses index — grid of project cards
   ========================================================================== */
.wb-courses { max-width: 80rem; margin: 0 auto; }
.wb-courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) { .wb-courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wb-course-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(243,232,175,0.18);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wb-course-card:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); }
.wb-course-card__image { aspect-ratio: 4 / 3; overflow: hidden; }
.wb-course-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.wb-course-card:hover .wb-course-card__image img { transform: scale(1.05); }
.wb-course-card__body { padding: 1.5rem; color: #F3E8AF; }
.wb-course-card__meta {
  font: 400 0.75rem/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.70);
  margin: 0 0 0.75rem;
}
.wb-course-card__title {
  font: 100 1.5rem/1.2 "IvyPresto Display", serif;
  color: #F3E8AF;
  margin: 0 0 0.75rem;
}
.wb-course-card__desc {
  font: 400 0.95rem/1.625 "Commuters Sans", sans-serif;
  color: rgba(243,232,175,0.85);
  margin: 0 0 1rem;
}
.wb-course-card__loc {
  font: 400 0.85rem/1 "Commuters Sans", sans-serif;
  color: rgba(243,232,175,0.70);
  margin: 0;
}

/* ==========================================================================
   Our-plans page (OurPlans + PlanTable)
   ========================================================================== */
.wb-opplans { max-width: 80rem; margin: 0 auto; text-align: center; color: #F3E8AF; }
.wb-opplans__eyebrow {
  font-family: "Commuters Sans", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #F3E8AF;
  margin: 0 0 1rem;
}
.wb-opplans__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.4;
  color: #F3E8AF;
  margin: 0 auto 3rem;
  max-width: 56rem;
}
.wb-opplans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .wb-opplans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wb-opplan {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10);
  text-align: left;
  display: flex;
  flex-direction: column;
  color: #112D1E;
}
.wb-opplan__type {
  display: inline-block;
  background: #f3f4f6;
  width: fit-content;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font: 600 0.875rem/1.2 "Commuters Sans", sans-serif;
  letter-spacing: 0.15em;
  color: #112D1E;
  margin: 0 0 1.5rem;
}
.wb-opplan__title {
  font: 700 1.5rem/1.2 "IvyPresto Display", serif;
  color: #111;
  margin: 0 0 0.5rem;
}
.wb-opplan__desc {
  font: 400 0.875rem/1.5 "Commuters Sans", sans-serif;
  color: #737373;
  margin: 0 0 1.5rem;
}
.wb-opplan__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10rem;
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: #F3E8AF;
  text-align: center;
  margin-bottom: 1.5rem;
}
.wb-opplan__badge-label {
  font: 400 0.875rem/1 "Commuters Sans", sans-serif;
  margin-bottom: 0.5rem;
}
.wb-opplan__badge-off {
  font: 700 1.5rem/1 "Commuters Sans", sans-serif;
}
.wb-opplan__price { margin: 1.5rem 0; }
.wb-opplan__price-amount {
  display: block;
  font: 700 3rem/1 "Commuters Sans", sans-serif;
  color: #111;
}
.wb-opplan__price-sub {
  display: block;
  margin-top: 0.5rem;
  font: 600 1rem/1.25 "Commuters Sans", sans-serif;
  color: #1f2937;
}
.wb-opplan__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 0.75rem;
  border-top: 2px solid #E8DB96;
  border-right: 2px solid #E8DB96;
  border-bottom: 4.5px solid #E8DB96;
  border-left: 2px solid #E8DB96;
  background: linear-gradient(to right, #E8DB96, #CCB746, #E8DB96);
  font: 700 1rem/1 "IvyPresto Display", serif;
  text-transform: uppercase;
  color: #382F00;
  transition: transform 0.15s ease;
  margin-bottom: 1.25rem;
}
.wb-opplan__btn:hover { transform: scale(1.02); }
.wb-opplan__btn:active { transform: scale(0.98); }
.wb-opplan__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wb-opplan__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font: 400 0.95rem/1.5 "Commuters Sans", sans-serif;
  color: #112D1E;
}
.wb-opplan__list li::before {
  content: "✓";
  color: #112D1E;
  font-weight: 700;
  flex: 0 0 auto;
}

.wb-cmp { max-width: 72rem; margin: 0 auto; color: #F3E8AF; }
.wb-cmp__title { font: 600 clamp(1.875rem,3vw,2.25rem)/1.2 "IvyPresto Display", serif; margin: 0 0 3rem; }
.wb-cmp__scroller { overflow-x: auto; }
.wb-cmp__table { width: 100%; min-width: 44rem; border-collapse: collapse; text-align: left; }
.wb-cmp__table thead tr { border-bottom: 1px solid rgba(243,232,175,0.30); }
.wb-cmp__table th { padding: 1rem 1rem; font: 600 1.125rem/1.2 "IvyPresto Display", serif; border-right: 1px solid rgba(109,109,109,0.40); }
.wb-cmp__table th:last-child { border-right: 0; }
.wb-cmp__table tbody tr { border-bottom: 1px solid rgba(74,90,82,1); color: #fff; }
.wb-cmp__table td { padding: 1.25rem 1rem; font: 400 1rem/1.4 "IvyPresto Display", serif; border-right: 1px solid rgba(109,109,109,0.40); }
.wb-cmp__table td:last-child { border-right: 0; }
.wb-cmp__yes { display: inline-flex; align-items: center; gap: 0.5rem; color: #F3E8AF; }
.wb-cmp__no  { display: inline-flex; color: #F3E8AF; }

/* ==========================================================================
   Plans page header + footer CTA
   ========================================================================== */
.wb-plans-header {
  text-align: center;
  margin-bottom: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.wb-plans-title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.2;
  color: #F3E8AF;
  margin: 0;
}
.wb-plans-tagline {
  text-align: center;
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.406rem;
  color: rgba(243,232,175,0.90);
  margin: 3rem auto 0;
  max-width: 48rem;
  line-height: 1.55;
}
.wb-plans-footer-cta {
  text-align: center;
  margin-top: 5rem;
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.wb-plans-footer-title {
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #F3E8AF;
  margin: 0;
}
.wb-plans-footer-desc {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.625;
  color: rgba(243,232,175,0.90);
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) { .wb-plans-footer-desc { font-size: 1.25rem; } }
.wb-plans-apps { margin: 2rem 0 5rem; }

/* ==========================================================================
   404 page — brand-styled "page not found"
   ========================================================================== */
.wb-404 {
  position: relative;
  min-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 1.5rem 80px;
  color: #F3E8AF;
  background-color: #112D1E;
  background-image: url("../images/here_section_green_color.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.wb-404::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,46,30,0.40) 0%,
    transparent          50%,
    rgba(10,46,30,0.60) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.wb-404 > * { position: relative; z-index: 2; }

.wb-404__logo {
  width: 90px;
  height: 90px;
  margin: 0 0 1.5rem;
  filter: drop-shadow(0 0 20px rgba(243,232,175,0.15));
}
@media (min-width: 768px) { .wb-404__logo { width: 120px; height: 120px; } }

.wb-404__eyebrow {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.60);
  margin: 0 0 1rem;
}

.wb-404__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #F3E8AF;
  margin: 0 0 1.5rem;
  max-width: 56rem;
}
.wb-404__title em { font-style: italic; }

.wb-404__dot-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.wb-404__line { display: block; width: 4rem; height: 1px; background: rgba(243,232,175,0.50); }
.wb-404__dot  { display: block; width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: #F3E8AF; }

.wb-404__desc {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(243,232,175,0.85);
  margin: 0 0 2.5rem;
  max-width: 36rem;
}

.wb-404__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 56px;
  padding: 0 2rem;
  text-decoration: none;
}

.wb-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}
.wb-404__links a {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: rgba(243,232,175,0.80);
  text-decoration: none;
  transition: color 0.2s ease;
}
.wb-404__links a:hover { color: #fff; }
.wb-404__sep { color: rgba(243,232,175,0.30); }

/* ==========================================================================
   Shared "page hero" header (Contact, Waitlist, legal pages)
   ========================================================================== */
.wb-page-hero {
  text-align: center;
  max-width: 80rem;
  margin: 0 auto 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #F3E8AF;
}
.wb-page-hero__rule {
  display: block;
  width: 6rem;
  height: 2px;
  background: linear-gradient(to right, transparent, #F3E8AF, transparent);
}
.wb-page-hero__rule--lg { width: 8rem; }
.wb-page-hero__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #F3E8AF;
  margin: 0;
}
.wb-page-hero__subtitle {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  color: rgba(243,232,175,0.90);
  margin: 0;
}
.wb-page-hero__subtitle--italic {
  font-family: "IvyPresto Display", serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.wb-page-hero__desc {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 300;
  font-size: 1.125rem;
  color: rgba(243,232,175,0.80);
  max-width: 36rem;
  margin: 0 auto;
  padding: 0 1rem;
  line-height: 1.625;
}
.wb-page-hero__dot-row { display: flex; align-items: center; gap: 1rem; }
.wb-page-hero__dot-row .wb-page-hero__line { width: 4rem; height: 1px; background: rgba(243,232,175,0.50); }
.wb-page-hero__dot-row .wb-page-hero__dot  { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: #F3E8AF; }

/* ==========================================================================
   Form card (wraps CF7 forms on Contact / Waitlist)
   ========================================================================== */
.wb-form-card {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid rgba(243,232,175,0.30);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  max-width: 48rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .wb-form-card { padding: 3rem; } }
.wb-form-card .wb-cf7-row { margin-bottom: 1.25rem; }
.wb-form-card .wb-cf7-row label {
  display: block;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #112D1E;
  margin-bottom: 0.5rem;
}
.wb-form-card input[type="text"],
.wb-form-card input[type="email"],
.wb-form-card textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(17,45,30,0.20);
  border-radius: 0.75rem;
  background: #FFFFFF;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  color: #112D1E;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wb-form-card input:focus,
.wb-form-card textarea:focus {
  outline: none;
  border-color: #F3E8AF;
  box-shadow: 0 0 0 3px rgba(243,232,175,0.30);
}
.wb-form-card textarea { min-height: 8rem; resize: vertical; }
.wb-form-card .wpcf7-submit {
  padding: 1.25rem 2.5rem;
  font: 400 1rem/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 1rem;
}
.wb-form-card .wpcf7-response-output {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.9rem;
}

/* ==========================================================================
   FAQ page — tabbed accordion on green bg
   ========================================================================== */
.wb-faq {
  max-width: 64rem;
  margin: 0 auto;
  color: #F3E8AF;
  text-align: center;
}
.wb-faq__header { margin-bottom: 2.5rem; }
.wb-faq__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: #F3E8AF;
  margin: 0 0 0.75rem;
}
.wb-faq__subtitle {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #F3E8AF;
  margin: 0;
}
.wb-faq__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem 0;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.95rem;
}
.wb-faq__tab {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: rgba(255,255,255,0.75);
  padding: 0 0 0.5rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.wb-faq__tab:hover { color: #F3E8AF; }
.wb-faq__tab.is-active { color: #F3E8AF; border-color: #F3E8AF; }
.wb-faq__panel { display: none; text-align: left; }
.wb-faq__panel.is-active { display: block; }

.wb-faq__item {
  background: rgba(243,232,175,0.04);
  border: 1px solid rgba(243,232,175,0.18);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.wb-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: 1.125rem;
  color: #F3E8AF;
}
.wb-faq__item summary::-webkit-details-marker { display: none; }
.wb-faq__icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.wb-faq__icon::before,
.wb-faq__icon::after {
  content: "";
  position: absolute;
  background: #F3E8AF;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wb-faq__icon::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.wb-faq__icon::after  { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.wb-faq__item[open] .wb-faq__icon::after { transform: rotate(90deg); opacity: 0; }
.wb-faq__body {
  margin-top: 0.75rem;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(243,232,175,0.92);
}
.wb-faq__body p { margin: 0; }

/* ==========================================================================
   Legal pages (Privacy Policy, Terms & Conditions)
   ========================================================================== */
.wb-legal {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
}
.wb-legal__header {
  text-align: center;
  margin-bottom: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.wb-legal__rule       { width: 6rem; height: 2px; background: linear-gradient(to right, transparent, #112D1E, transparent); }
.wb-legal__rule--lg   { width: 8rem; }
.wb-legal__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #112D1E;
  margin: 0;
}
.wb-legal__dot-row { display: flex; align-items: center; gap: 1rem; }
.wb-legal__dot-row .wb-legal__line { width: 4rem; height: 1px; background: rgba(17,45,30,0.50); }
.wb-legal__dot-row .wb-legal__dot  { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: #112D1E; }
.wb-legal__subtitle {
  font-family: "IvyPresto Display", serif;
  font-weight: 300;
  font-size: 1.125rem;
  color: rgba(17,45,30,0.70);
  margin: 0;
}
.wb-legal__card {
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid rgba(17,45,30,0.20);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.20);
}
@media (min-width: 768px) { .wb-legal__card { padding: 3rem; } }
.wb-legal__body {
  color: #112D1E;
  font-family: "IvyPresto Display", serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
}
.wb-legal__body > * + * { margin-top: 2rem; }
.wb-legal__body p { margin: 0; }
.wb-legal__h2 {
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #112D1E;
  margin: 2.5rem 0 1rem;
}
.wb-legal__h3 {
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #112D1E;
  margin: 2rem 0 0.75rem;
}
.wb-legal__list { list-style: disc; padding-left: 1.5rem; }
.wb-legal__list li { margin-bottom: 0.5rem; }
.wb-legal__list li strong { font-weight: 600; }
.wb-legal__body strong { font-weight: 600; }
.wb-legal__body a { color: #112D1E; text-decoration: underline; }

/* ==========================================================================
   About page (Jasmin Manke founder bio)
   ========================================================================== */
.wb-about {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  text-align: center;
  color: #F3E8AF;
}
.wb-about__eyebrow {
  font: 400 0.75rem/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.60);
  margin: 0 0 1.5rem;
}
.wb-about__name {
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  color: #F3E8AF;
}
.wb-about__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 0 0 2rem;
}
.wb-about__badges span {
  padding: 0.375rem 1rem;
  border: 1px solid rgba(243,232,175,0.30);
  border-radius: 9999px;
  font: 400 0.75rem/1.4 "Commuters Sans", sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.80);
}
.wb-about__divider {
  width: 6rem;
  height: 1px;
  margin: 0 auto 2rem;
  background: linear-gradient(to right, transparent, rgba(243,232,175,0.40), transparent);
}
.wb-about__body {
  max-width: 48rem;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wb-about__body p {
  font: 400 1.125rem/1.625 "Commuters Sans", sans-serif;
  color: rgba(243,232,175,0.90);
  margin: 0;
}
@media (min-width: 768px) { .wb-about__body p { font-size: 1.25rem; } }
.wb-about__body em { font-style: italic; color: #F3E8AF; }
.wb-about__quote em {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media (min-width: 768px) { .wb-about__quote em { font-size: 1.5rem; } }
.wb-about__apps { margin: 2.5rem 0 5rem; }
.wb-about__footer { border-top: 1px solid rgba(243,232,175,0.20); padding-top: 3rem; }
.wb-about__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.wb-about__links a {
  font: 300 0.875rem/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.2em;
  color: #F3E8AF;
  transition: color 0.3s ease;
}
.wb-about__links a:hover { color: #fff; }
.wb-about__dot { color: rgba(243,232,175,0.30); }
.wb-about__copy {
  text-align: center;
  font: 300 0.875rem/1.5 "Commuters Sans", sans-serif;
  color: rgba(243,232,175,0.70);
  margin: 0;
}

/* ==========================================================================
   ==========================================================================
   2026 Home redesign (front-page.php + template-parts/home/*)
   Prefix:    .wb-hh-  (Wealth Being Home — Hero)
   Wrapper:   .wb-home--2026
   Goal:      Modern editorial structure inspired by tobemagnetic.com while
              keeping ALL brand colors, fonts, copy and assets unchanged.
   Brand tokens are already declared above (:root): --color-cream,
   --color-green, --color-bg-cream, --color-bg-stone.
   ========================================================================== */

/* Reset the legacy "Elementor first child padding-top: 120px" rule which
   would push our cinematic hero off the top of the viewport. */
.wb-home--2026 { padding-top: 0; }
.elementor-default .elementor:has(.wb-home--2026) > .elementor-top-section:first-child { padding-top: 0 !important; }

/* ---------- Section shell ---------- */
.wb-hh {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4rem, 8vw, 7rem) 1.25rem;
}
.wb-hh__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}
.wb-hh__bg--soft { opacity: 0.55; }
.wb-hh__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,45,30,0.55) 0%, rgba(17,45,30,0.35) 40%, rgba(17,45,30,0.65) 100%);
  z-index: -1;
}

.wb-hh__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.wb-hh__inner--narrow { max-width: 880px; }

.wb-hh__rule {
  display: block;
  width: clamp(4rem, 10vw, 7rem);
  height: 1px;
  margin: 1.5rem auto;
  background: linear-gradient(90deg, transparent, rgba(243,232,175,0.55), transparent);
}

/* ---------- Eyebrow / kicker / titles ---------- */
.wb-hh__eyebrow {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.78);
  margin: 0 0 1rem;
  text-align: center;
}
.wb-hh__eyebrow--dark { color: rgba(17,45,30,0.55); }

.wb-hh__kicker {
  font-family: "Commuters Sans", sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  color: rgba(243,232,175,0.85);
  text-align: center;
  margin: 1.5rem 0 0.5rem;
}

.wb-hh-head {
  text-align: center;
  margin: 0 auto 3rem;
  max-width: 56rem;
}
.wb-hh-head--tight { margin: 3.5rem auto 1.5rem; }
.wb-hh-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  text-align: left; max-width: 100%; margin-bottom: 2.5rem;
}
.wb-hh-head__title {
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  color: var(--color-cream);
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
}
.wb-hh-head__title em { font-style: italic; font-weight: 100; }
.wb-hh-head__title--dark { color: var(--color-green); }
.wb-hh-head__lede {
  margin: 1.25rem auto 0;
  max-width: 38rem;
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(243,232,175,0.88);
}

/* ---------- Buttons ---------- */
.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.05rem 1.5rem;
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
.wb-btn--gold {
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%);
  background-size: 200% 200%;
  color: #122E1F;
  border: 1.5px solid rgba(243,232,175,0.7);
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12);
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
}
.wb-btn--gold:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15);
}
.wb-btn--ghost {
  color: var(--color-cream);
  border: 1px solid rgba(243,232,175,0.55);
  background: transparent;
}
.wb-btn--ghost:hover { background: rgba(243,232,175,0.10); }

/* ==========================================================================
   1. Hero — legacy block intentionally emptied. Active rules now live in
   the PASS 4 (HERO v4) section near the end of this file. The bullet
   (.wb-hh__bullets / .wb-hh__col) and marquee styles below remain in
   use by other sections (e.g. the testimonials marquee), so they stay.
   ========================================================================== */

.wb-hh__bullets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 3rem;
  max-width: 60rem;
  margin: 2.25rem auto 2.5rem;
  text-align: left;
}
@media (min-width: 768px) { .wb-hh__bullets { grid-template-columns: 1fr 1fr; } }
.wb-hh__col {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.wb-hh__col li {
  position: relative;
  padding-left: 1.5rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(243,232,175,0.92);
}
.wb-hh__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-cream);
  box-shadow: 0 0 8px rgba(243,232,175,0.6);
}

.wb-hh__ctas {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  justify-content: center; align-items: center;
  margin-top: 1.25rem;
}
.wb-hh__ctas--center { justify-content: center; }

.wb-hh__marquee {
  position: relative;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(243,232,175,0.18);
  border-bottom: 1px solid rgba(243,232,175,0.18);
  padding: 1rem 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wb-hh__marquee-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 2.5rem;
  animation: wb-marquee 40s linear infinite;
  font-family: "IvyPresto Display", serif;
  font-style: italic;
  font-weight: 100;
  font-size: 1.5rem;
  color: rgba(243,232,175,0.65);
}
.wb-hh__marquee-item em {
  font-family: "Commuters Sans", sans-serif;
  font-style: normal;
  color: var(--color-cream);
  margin-right: 0.5rem;
  letter-spacing: 0;
}
@keyframes wb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   2. Trust strip
   ========================================================================== */
.wb-hh--trust {
  background: #f9f6ee;
  padding: clamp(2.25rem, 4vw, 3rem) 1.25rem;
  text-align: center;
  border-bottom: 1px solid rgba(17,45,30,0.06);
}
.wb-hh-trust {
  display: flex; flex-direction: column; align-items: center; gap: 0.65rem;
}
.wb-hh-trust__stars { display: inline-flex; gap: 0.15rem; color: #d4a72c; font-size: 1.25rem; letter-spacing: 0.05em; }
.wb-hh-trust__lead {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.95rem;
  color: var(--color-green);
  margin: 0;
  letter-spacing: 0.02em;
}
.wb-hh-trust__lead strong { font-weight: 600; color: var(--color-green); }
.wb-hh-trust__countries {
  list-style: none; padding: 0; margin: 0.25rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
}
.wb-hh-trust__countries li {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.7);
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(17,45,30,0.15);
  border-radius: 9999px;
}

/* ==========================================================================
   3. Editorial intro
   ========================================================================== */
.wb-hh--intro {
  /* Same light fabric the pricing + AI sections use — keeps light-section
     family visually consistent. !important wins Elementor per-page CSS. */
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
  text-align: center;
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh-intro {
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.55;
  color: var(--color-green);
  max-width: 48rem;
  margin: 0 auto;
}
.wb-hh-intro p { margin: 0 0 1.5rem; }
.wb-hh-intro p:last-child { margin-bottom: 0; }

.wb-hh-or {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem auto;
}
.wb-hh-or__line { display: block; width: 4rem; height: 1px; background: rgba(17,45,30,0.55); }
.wb-hh-or__text {
  font-family: "IvyPresto Display", serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  color: var(--color-green);
}

/* ==========================================================================
   4. Pillars grid
   ========================================================================== */
.wb-hh--pillars {
  background: var(--color-bg-stone);
  color: var(--color-green);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .wb-hh-pillars { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.wb-hh-pillar {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.08);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.wb-hh-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(243,232,175,0.6);
  box-shadow: 0 25px 50px -12px rgba(17,45,30,0.18), 0 0 0 1px rgba(243,232,175,0.35) inset;
}
.wb-hh-pillar__head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(17,45,30,0.10);
  padding-bottom: 1rem;
}
.wb-hh-pillar__num {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(17,45,30,0.32);
}
.wb-hh-pillar__icon { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; }
.wb-hh-pillar__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: 0.04em;
  color: var(--color-green);
  margin: 0;
}
.wb-hh-pillar__list { list-style: none; padding: 0; margin: 0; }
.wb-hh-pillar__list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(17,45,30,0.85);
  border-bottom: 1px solid rgba(17,45,30,0.06);
}
.wb-hh-pillar__list li:last-child { border-bottom: 0; }
.wb-hh-pillar__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45em;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #E8DB96, #F3E8AF);
}

/* ==========================================================================
   5. Reason + Shift Now (split storytelling)
   ========================================================================== */
.wb-hh--reason {
  background: var(--color-bg-cream);
  color: var(--color-green);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh-reason {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .wb-hh-reason { grid-template-columns: 1.05fr 0.95fr; gap: 2rem; }
}
.wb-hh-reason__light,
.wb-hh-reason__dark {
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 3rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.wb-hh-reason__light {
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.08);
}
.wb-hh-reason__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-green);
  margin: 0;
}
.wb-hh-reason__title strong { font-weight: 600; }
.wb-hh-reason__title em { font-style: italic; }
.wb-hh-reason__list { list-style: none; padding: 0; margin: 0; }
.wb-hh-reason__list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(17,45,30,0.88);
  border-bottom: 1px solid rgba(17,45,30,0.06);
}
.wb-hh-reason__list li:last-child { border-bottom: 0; }
.wb-hh-reason__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45em;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-green);
}

.wb-hh-reason__dark {
  background: linear-gradient(160deg, #112D1E 0%, #1a3d2e 100%);
  color: var(--color-cream);
  border: 1px solid rgba(243,232,175,0.18);
  box-shadow:
    0 0 0 1px rgba(243,232,175,0.08) inset,
    0 35px 60px -25px rgba(0,0,0,0.45);
}
.wb-hh-reason__dark .wb-hh__eyebrow { text-align: left; color: rgba(243,232,175,0.65); }
.wb-hh-reason__dark-title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-cream);
  margin: 0;
}
.wb-hh-reason__dark-title em { font-style: italic; }
.wb-hh-reason__copy {
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(243,232,175,0.92);
}
.wb-hh-reason__copy p { margin: 0 0 1rem; }
.wb-hh-reason__copy p:last-child { margin-bottom: 0; }
.wb-hh-reason__cta { align-self: flex-start; margin-top: auto; }

/* ==========================================================================
   6. Helps / Framework
   ========================================================================== */
.wb-hh--helps {
  color: var(--color-cream);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh-helps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .wb-hh-helps { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
}
.wb-hh-helps__copy .wb-hh__eyebrow { text-align: left; }
.wb-hh-helps__copy .wb-hh-head__title { text-align: left; }
.wb-hh-helps__list {
  list-style: none; padding: 0; margin: 1.75rem 0 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.wb-hh-helps__list li {
  position: relative;
  padding: 1rem 1rem 1rem 2.25rem;
  background: rgba(243,232,175,0.05);
  border: 1px solid rgba(243,232,175,0.16);
  border-radius: 0.85rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(243,232,175,0.92);
}
.wb-hh-helps__list li::before {
  content: "→";
  position: absolute;
  left: 1rem; top: 1rem;
  color: var(--color-cream);
  font-family: "Commuters Sans", sans-serif;
}
.wb-hh-helps__list li strong { color: var(--color-cream); font-weight: 600; }
.wb-hh-helps__media img { width: 100%; height: auto; }

/* ==========================================================================
   7. Join now editorial list
   ========================================================================== */
.wb-hh--join {
  background: #FFFFFF;
  color: var(--color-green);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh-join__list {
  list-style: none; padding: 0; margin: 0 auto;
  max-width: 56rem;
  border-top: 1px solid rgba(17,45,30,0.10);
}
.wb-hh-join__list li {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.4rem 0.5rem;
  border-bottom: 1px solid rgba(17,45,30,0.10);
  font-family: "Commuters Sans", sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: rgba(17,45,30,0.92);
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.wb-hh-join__list li:hover { background: rgba(243,232,175,0.18); padding-left: 1.25rem; }
.wb-hh-join__plus {
  font-family: "IvyPresto Display", serif;
  font-style: italic;
  font-weight: 100;
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(17,45,30,0.5);
  flex: 0 0 auto;
  width: 1.5rem;
}
.wb-hh-join__copy {
  max-width: 48rem; margin: 1.5rem auto 0; text-align: center;
  font-family: "IvyPresto Display", serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.55;
  color: var(--color-green);
}
.wb-hh-join__copy p { margin: 0 0 1.25rem; }
.wb-hh-join__copy p:last-child { margin-bottom: 0; }

/* ==========================================================================
   8. Long-form "Let's be real"
   ========================================================================== */
.wb-hh--long {
  background: var(--color-bg-cream);
  color: var(--color-green);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh-long__body {
  max-width: 44rem; margin: 0 auto;
  font-family: "Commuters Sans", sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  line-height: 1.8;
  color: rgba(17,45,30,0.92);
  text-align: center;
}
.wb-hh-long__body p { margin: 0 0 1.25rem; }
.wb-hh-long__body p:last-child { margin-bottom: 0; }

.wb-hh-long__quote {
  margin: 3rem auto;
  max-width: 44rem;
  background: #FFFFFF;
  border-left: 4px solid #E8DB96;
  border-radius: 1.25rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(17,45,30,0.10);
}
.wb-hh-long__quote-pre {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.6);
  margin: 0 0 1rem;
}
.wb-hh-long__quote-text {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.35;
  color: var(--color-green);
  margin: 0 0 1.5rem;
}
.wb-hh-long__quote-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}
.wb-hh-long__quote-list li {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-green);
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(17,45,30,0.18);
  border-radius: 9999px;
  background: rgba(17,45,30,0.03);
}

.wb-hh-long__sand {
  margin: 3rem auto 2rem;
  max-width: 56rem;
  background: linear-gradient(160deg, #112D1E 0%, #1a3d2e 100%);
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--color-cream);
  border: 1px solid rgba(243,232,175,0.20);
  box-shadow: 0 35px 60px -25px rgba(0,0,0,0.45);
  text-align: center;
}
.wb-hh-long__sand-body {
  font-family: "Commuters Sans", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(243,232,175,0.92);
}
.wb-hh-long__sand-body p { margin: 0 0 1rem; }
.wb-hh-long__sand-line {
  font-family: "IvyPresto Display", serif !important;
  font-weight: 100;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.3;
  color: var(--color-cream);
  margin: 1.5rem 0 !important;
}

.wb-hh-long__lifestyle {
  text-align: center;
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-style: italic;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.05;
  color: var(--color-green);
  margin: 3rem 0 0;
}
.wb-hh-long__lifestyle em { font-style: italic; }

/* ==========================================================================
   9. Pricing
   ========================================================================== */
.wb-hh--pricing {
  color: var(--color-cream);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 1024px) { .wb-hh-pricing { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.wb-hh-pcard {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.10);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--color-green);
  display: flex; flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.wb-hh-pcard:hover { transform: translateY(-4px); }
.wb-hh-pcard.is-featured {
  border-color: #F3E8AF;
  box-shadow:
    0 0 22px 6px rgba(243,232,175,0.40),
    0 0 120px 20px rgba(243,232,175,0.14),
    0 25px 50px -12px rgba(0,0,0,0.25);
}
.wb-hh-pcard__badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to right, #F3E8AF, #E8DB96);
  color: var(--color-green);
  padding: 0.45rem 1.25rem;
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 10px 20px -8px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.wb-hh-pcard__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-green);
  margin: 0 0 0.5rem;
}
.wb-hh-pcard__title em { font-style: italic; font-weight: 100; }
.wb-hh-pcard__subtitle {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(17,45,30,0.85);
  margin: 0 0 1.5rem;
}
.wb-hh-pcard__desc {
  font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(17,45,30,0.85);
  margin: 0 0 1.5rem;
}
.wb-hh-pcard__features { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.wb-hh-pcard__features li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.5rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.98rem;
  color: var(--color-green);
}
.wb-hh-pcard__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #E8DB96;
}
.wb-hh-pcard__price-box {
  background: linear-gradient(to bottom right, #122E1F, #1a3d2e);
  border-radius: 1.1rem;
  padding: 1.5rem;
  margin: 0 0 1.25rem;
  text-align: center;
}
.wb-hh-pcard__price {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: var(--color-cream);
  margin: 0 0 0.4rem;
}
.wb-hh-pcard__period {
  font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(243,232,175,0.9);
  margin: 0 0 0.5rem;
}
.wb-hh-pcard__savings {
  display: inline-block;
  background: var(--color-cream);
  color: var(--color-green);
  padding: 0.4rem 0.95rem;
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.wb-hh-pcard__note {
  text-align: center;
  font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
  font-size: 0.92rem;
  color: rgba(17,45,30,0.75);
  margin: 0 0 1rem;
}
.wb-hh-pcard__cta { margin-top: auto; }

.wb-hh-corecard {
  max-width: 56rem;
  margin: 3rem auto 0;
  background: linear-gradient(160deg, rgba(17,45,30,0.92) 0%, rgba(26,61,46,0.92) 100%);
  border: 1px solid rgba(243,232,175,0.22);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wb-hh-corecard__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-cream);
  margin: 0.25rem 0 1.5rem;
}
.wb-hh-corecard__title em { font-style: italic; font-weight: 100; }
.wb-hh-corecard__list {
  list-style: none; padding: 0; margin: 0 auto 1.5rem;
  max-width: 24rem;
  display: flex; flex-direction: column; gap: 0.65rem;
  text-align: left;
}
.wb-hh-corecard__list li {
  position: relative;
  padding-left: 1.5rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  color: var(--color-cream);
}
.wb-hh-corecard__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: var(--color-cream);
}

/* ==========================================================================
   LIFESTYLE v2 — light parallax embossed-pattern bg (testimonial style)
   Removes the green stage. Bg = embossed_pattern.webp at contain size,
   repeated, fixed-attachment for parallax. Two white gradient overlays
   (top + bottom) soften the pattern so the content stays readable.
   Text flips to dark green. The bottom-right diamond ornament is removed.
   ========================================================================== */
.wb-hh--lifestyle {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-cream); /* base under the pattern */
  color: var(--color-green);
}
.wb-hh-life__bg-pattern {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
  opacity: 0.45;
  z-index: -2;
}
.wb-hh-life__bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.50) 0%,
    rgba(255,255,255,0)    50%,
    rgba(255,255,255,0.50) 100%
  );
  pointer-events: none;
  z-index: -1;
}
/* iOS / mobile Safari can't honor background-attachment: fixed reliably. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .wb-hh-life__bg-pattern { background-attachment: scroll; }
}

/* Headline + eyebrow flip to brand green on the new light backdrop. */
.wb-hh--lifestyle .wb-hh-life__title {
  color: var(--color-green);
}
.wb-hh--lifestyle .wb-hh__eyebrow--dark {
  color: rgba(17,45,30,0.55);
}
.wb-hh--lifestyle .wb-hh-life__title em {
  color: var(--color-green);
}
.wb-hh--lifestyle .wb-hh__rule--dark {
  background: linear-gradient(90deg, transparent, rgba(17,45,30,0.45), transparent);
}

/* Gold wordmark watermark now sits behind the phones on a light field —
   reduce opacity so it reads as a whisper rather than blocking the
   pattern parallax. */
.wb-hh--lifestyle .wb-hh-life__watermark {
  opacity: 0.18;
  filter: drop-shadow(0 0 60px rgba(243,232,175,0.50));
}

/* App-store buttons row stays at the bottom, no diamond ornament now. */

/* ==========================================================================
   10. Selected work / Courses
   ========================================================================== */
.wb-hh--courses {
  background: var(--color-bg-cream);
  color: var(--color-green);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh--courses .wb-hh-head__title { text-align: left; }
.wb-hh--courses .wb-hh__eyebrow { text-align: left; }
.wb-hh-courses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 768px)  { .wb-hh-courses { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wb-hh-courses { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; } }

.wb-hh-course {
  background: #FFFFFF;
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid rgba(17,45,30,0.08);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.wb-hh-course:hover { transform: translateY(-6px); box-shadow: 0 35px 60px -25px rgba(17,45,30,0.25); }
@media (min-width: 1024px) {
  .wb-hh-course--portrait  { grid-column: span 2; }
  .wb-hh-course--landscape { grid-column: span 4; }
}
.wb-hh-course__media { overflow: hidden; aspect-ratio: 4/3; }
.wb-hh-course--portrait .wb-hh-course__media { aspect-ratio: 3/4; }
.wb-hh-course__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.wb-hh-course:hover .wb-hh-course__media img { transform: scale(1.04); }
.wb-hh-course__body { padding: clamp(1.25rem, 2vw, 1.75rem); }
.wb-hh-course__num {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.55);
  margin: 0 0 0.85rem;
}
.wb-hh-course__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  color: var(--color-green);
  margin: 0 0 0.85rem;
  letter-spacing: 0.01em;
}
.wb-hh-course__desc {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(17,45,30,0.82);
  margin: 0 0 1.25rem;
}
.wb-hh-course__meta {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.35rem 1rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.82rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(17,45,30,0.10);
  margin: 0;
}
.wb-hh-course__meta dt {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.55);
  font-size: 0.7rem;
}
.wb-hh-course__meta dd { color: var(--color-green); margin: 0; }

/* ==========================================================================
   11. Testimonials masonry (legacy — superseded by the brand-green
       rebuild in PASS 2 below; .wb-hh--testimonials rules live there)
   ========================================================================== */
.wb-hh-testi {
  columns: 1;
  column-gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 768px)  { .wb-hh-testi { columns: 2; } }
@media (min-width: 1024px) { .wb-hh-testi { columns: 3; } }
.wb-hh-testi__card {
  break-inside: avoid;
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.08);
  border-radius: 1.1rem;
  padding: 1.4rem 1.5rem;
  margin: 0 0 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wb-hh-testi__card:hover { transform: translateY(-3px); box-shadow: 0 25px 50px -12px rgba(17,45,30,0.18); }
.wb-hh-testi__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.85rem; }
.wb-hh-testi__avatar {
  width: 52px; height: 52px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #112D1E, #1a3d2e);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-cream);
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: 1.15rem;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(243,232,175,0.30);
}
.wb-hh-testi__avatar--initial { letter-spacing: 0; }
img.wb-hh-testi__avatar { object-fit: cover; }
.wb-hh-testi__meta { min-width: 0; }
.wb-hh-testi__name {
  font-family: "IvyPresto Display", serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-green);
}
.wb-hh-testi__country {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.6);
  margin-top: 0.15rem;
}
.wb-hh-testi__stars { color: #d4a72c; font-size: 1rem; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.wb-hh-testi__stars span { opacity: 0.25; }
.wb-hh-testi__stars span.is-on { opacity: 1; }
.wb-hh-testi__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-green);
  margin: 0 0 0.5rem;
}
.wb-hh-testi__body {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(17,45,30,0.82);
  margin: 0;
  white-space: pre-line;
}

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.wb-hh--faq {
  background: var(--color-bg-cream);
  color: var(--color-green);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.wb-hh-faq__tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
  margin: 0 0 2.5rem;
}
.wb-hh-faq__tab {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: rgba(17,45,30,0.55);
  padding: 0 0 0.5rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.wb-hh-faq__tab:hover { color: var(--color-green); }
.wb-hh-faq__tab.is-active { color: var(--color-green); border-color: var(--color-green); }

.wb-hh-faq__panel { display: none; }
.wb-hh-faq__panel.is-active { display: block; }

.wb-hh-faq__item {
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.10);
  border-radius: 0.9rem;
  padding: 1.15rem 1.4rem;
  margin-bottom: 0.85rem;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.wb-hh-faq__item[open] { border-color: rgba(243,232,175,0.55); box-shadow: 0 18px 40px -25px rgba(17,45,30,0.25); }
.wb-hh-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: "IvyPresto Display", serif;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--color-green);
}
.wb-hh-faq__item summary::-webkit-details-marker { display: none; }
.wb-hh-faq__icon {
  position: relative;
  display: inline-block;
  width: 14px; height: 14px;
  flex: 0 0 auto;
}
.wb-hh-faq__icon::before,
.wb-hh-faq__icon::after {
  content: ""; position: absolute; background: var(--color-green);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.wb-hh-faq__icon::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.wb-hh-faq__icon::after  { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.wb-hh-faq__item[open] .wb-hh-faq__icon::after { transform: rotate(90deg); opacity: 0; }
.wb-hh-faq__answer {
  margin-top: 0.85rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(17,45,30,0.85);
}
.wb-hh-faq__answer p { margin: 0; }

/* ==========================================================================
   13. Final cinematic CTA
   ========================================================================== */
.wb-hh--finalcta {
  color: var(--color-cream);
  padding-top: clamp(5rem, 12vw, 9rem);
  padding-bottom: clamp(5rem, 12vw, 9rem);
}
.wb-hh-finalcta { text-align: center; }
.wb-hh-finalcta__logo { display: flex; justify-content: center; margin: 0 auto 1.5rem; }
.wb-hh-finalcta__logo img {
  width: clamp(120px, 16vw, 200px);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(243,232,175,0.25));
}
.wb-hh-finalcta__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1.08;
  color: var(--color-cream);
  margin: 0 auto;
  max-width: 56rem;
  letter-spacing: -0.012em;
}
.wb-hh-finalcta__title em { font-style: italic; font-weight: 100; }

/* ==========================================================================
   ==========================================================================
   2026 redesign — PASS 2 (premium / cinematic upgrades)
   - embossed pattern overlay
   - hero side rails + watermark + scroll cue
   - editorial trust strip
   - lifestyle (app) showcase
   - testimonials feature-card + dual marquee
   - scroll-reveal entrance
   ========================================================================== */

/* Embossed brand pattern overlay shared by green sections.
   The pattern image is the same file used elsewhere on the site
   (assets/images/embossed_pattern.webp). It sits underneath content
   but above the green base layer. */
.wb-hh__pattern {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: 720px auto;
  background-position: center;
  opacity: 0.10;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}
.wb-hh__pattern--light {
  opacity: 0.08;
  mix-blend-mode: multiply;
}

/* Scroll-reveal entrance. Sections with .reveal start dim + offset and
   transition to default state when .is-in is added by main.js. */
.reveal {
  --reveal-y: 24px;
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition: opacity 0.9s cubic-bezier(0.2, 0.65, 0.2, 1) 0.05s,
              transform 0.9s cubic-bezier(0.2, 0.65, 0.2, 1) 0.05s;
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translate3d(0,0,0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Inside the Elementor editor the theme's frontend JS doesn't run, so
   the IntersectionObserver never adds `.is-in` — which would leave every
   `.reveal` / stagger / testimonial element stuck at opacity:0 and the
   editor canvas would look empty. Force everything visible whenever the
   Elementor editor is active (`body.elementor-editor-active`) so the
   client can see and edit the content. The scroll-reveal still runs
   normally on the live front-end. */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal.wb-reveal-stagger,
body.elementor-editor-active .reveal.wb-reveal-tm,
body.elementor-editor-active .wb-reveal-stagger > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element,
body.elementor-editor-active .wb-reveal-tm .wb-hh-tm__side > .elementor-widget-wrap > .elementor-element,
body.elementor-editor-active .wb-reveal-tm .wb-hh-tm__stage-col {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Staggered cascade for Elementor sections ──────────────────────────
   A section tagged `reveal wb-reveal-stagger` does NOT fade as one block
   — instead it stays in place and its direct child widgets cascade in
   one after another. The section still carries `.reveal` so main.js's
   IntersectionObserver picks it up and adds `.is-in` on scroll. The
   override below cancels the whole-section fade so only the children
   animate. Works for both top-level columns and inner-section columns
   (e.g. the pricing cards row, the book-a-call card). */
.reveal.wb-reveal-stagger {
  opacity: 1;
  transform: none;
}
.wb-reveal-stagger > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.85s cubic-bezier(0.2, 0.65, 0.2, 1),
              transform 0.85s cubic-bezier(0.2, 0.65, 0.2, 1);
  will-change: opacity, transform;
}
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Cascade timing — each successive widget starts a touch later. Covers
   up to 12 direct children (FAQ has 8: eyebrow + title + 3×[group
   heading + accordion]); extra items beyond 12 simply share the last
   delay rather than breaking. */
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(1)  { transition-delay: 0.05s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(2)  { transition-delay: 0.13s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(3)  { transition-delay: 0.21s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(4)  { transition-delay: 0.29s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(5)  { transition-delay: 0.37s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(6)  { transition-delay: 0.45s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(7)  { transition-delay: 0.53s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(8)  { transition-delay: 0.61s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(9)  { transition-delay: 0.69s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(10) { transition-delay: 0.77s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(11) { transition-delay: 0.85s; }
.wb-reveal-stagger.is-in > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(n+12) { transition-delay: 0.93s; }
@media (prefers-reduced-motion: reduce) {
  .wb-reveal-stagger > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Testimonials cascade ──────────────────────────────────────────────
   The testimonials section has a nested split (left text column / right
   cards stage), so the generic stagger above can't reach the pieces.
   `wb-reveal-tm` keeps the section itself static (cancels the .reveal
   whole-block fade) and instead cascades the LEFT column's widgets
   (eyebrow → title → lede → CTAs) while the right cards stage glides in
   just behind them. */
.reveal.wb-reveal-tm {
  opacity: 1;
  transform: none;
}
.wb-reveal-tm .wb-hh-tm__side > .elementor-widget-wrap > .elementor-element,
.wb-reveal-tm .wb-hh-tm__stage-col {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s cubic-bezier(0.2, 0.65, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.65, 0.2, 1);
  will-change: opacity, transform;
}
.wb-reveal-tm.is-in .wb-hh-tm__side > .elementor-widget-wrap > .elementor-element,
.wb-reveal-tm.is-in .wb-hh-tm__stage-col {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.wb-reveal-tm.is-in .wb-hh-tm__side > .elementor-widget-wrap > .elementor-element:nth-child(1) { transition-delay: 0.05s; }
.wb-reveal-tm.is-in .wb-hh-tm__side > .elementor-widget-wrap > .elementor-element:nth-child(2) { transition-delay: 0.15s; }
.wb-reveal-tm.is-in .wb-hh-tm__side > .elementor-widget-wrap > .elementor-element:nth-child(3) { transition-delay: 0.25s; }
.wb-reveal-tm.is-in .wb-hh-tm__side > .elementor-widget-wrap > .elementor-element:nth-child(4) { transition-delay: 0.35s; }
.wb-reveal-tm.is-in .wb-hh-tm__stage-col { transition-delay: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  .wb-reveal-tm .wb-hh-tm__side > .elementor-widget-wrap > .elementor-element,
  .wb-reveal-tm .wb-hh-tm__stage-col {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   HERO PASS 2 — side rails, watermark, scroll cue, crest
   ========================================================================== */
.wb-hh-hero__rail {
  position: absolute;
  top: 50%;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.45);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  display: none;
}
@media (min-width: 1280px) { .wb-hh-hero__rail { display: block; } }
.wb-hh-hero__rail--l {
  left: 2rem;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}
.wb-hh-hero__rail--r {
  right: 2rem;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
}
.wb-hh-hero__rail span {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(243,232,175,0.20);
  border-radius: 9999px;
  background: rgba(17,45,30,0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wb-hh-hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(140vw, 1400px);
  max-width: none;
  transform: translate(-50%, -50%);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.3px);
}

.wb-hh-hero__crest {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.7);
  margin: 0 auto 0.5rem;
}
.wb-hh-hero__crest svg {
  width: 12px; height: 12px;
  color: rgba(243,232,175,0.55);
}

.wb-hh-hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  color: rgba(243,232,175,0.6);
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
}
.wb-hh-hero__scroll:hover { color: var(--color-cream); }
.wb-hh-hero__scroll-line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(243,232,175,0.7), transparent);
  position: relative;
  overflow: hidden;
}
.wb-hh-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -100%; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(180deg, transparent, #F3E8AF, transparent);
  animation: wb-scroll-bead 1.8s ease-in-out infinite;
}
@keyframes wb-scroll-bead {
  0%   { top: -50%; opacity: 0; }
  30%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* Stagger child-reveal inside the hero inner block. */
.wb-hh--hero .wb-hh__inner.reveal > * { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s ease; }
.wb-hh--hero .wb-hh__inner.reveal.is-in > * { opacity: 1; transform: none; }
.wb-hh--hero .wb-hh__inner.reveal.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.wb-hh--hero .wb-hh__inner.reveal.is-in > *:nth-child(2) { transition-delay: 0.15s; }
.wb-hh--hero .wb-hh__inner.reveal.is-in > *:nth-child(3) { transition-delay: 0.25s; }
.wb-hh--hero .wb-hh__inner.reveal.is-in > *:nth-child(4) { transition-delay: 0.35s; }
.wb-hh--hero .wb-hh__inner.reveal.is-in > *:nth-child(5) { transition-delay: 0.45s; }
.wb-hh--hero .wb-hh__inner.reveal.is-in > *:nth-child(6) { transition-delay: 0.55s; }
.wb-hh--hero .wb-hh__inner.reveal.is-in > *:nth-child(n+7) { transition-delay: 0.65s; }

/* Make the hero headline read even more editorial. */
.wb-hh__title { letter-spacing: -0.018em; }

/* Marquee speed bump for hero — slightly slower and bigger. */
.wb-hh--hero .wb-hh__marquee-track { animation-duration: 55s; font-size: 1.65rem; }

/* ==========================================================================
   TRUST STRIP PASS 2 — magazine editorial
   ========================================================================== */
.wb-hh--trust {
  background: #FFFCF3;
  border-top: 1px solid rgba(17,45,30,0.10);
  border-bottom: 1px solid rgba(17,45,30,0.10);
  padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
}
.wb-hh-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .wb-hh-trust {
    grid-template-columns: auto 1fr auto;
    gap: 3rem;
    text-align: left;
  }
}

.wb-hh-trust__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.wb-hh-trust__big {
  display: inline-flex;
  align-items: baseline;
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-style: italic;
  color: var(--color-green);
  line-height: 1;
}
.wb-hh-trust__big-num { font-size: clamp(4rem, 7vw, 6.5rem); }
.wb-hh-trust__big-over { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-left: 0.35rem; color: rgba(17,45,30,0.5); }
.wb-hh-trust__stars {
  display: inline-flex;
  gap: 0.25rem;
  color: #c69a2e;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}
.wb-hh-trust__caption {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.6);
  margin: 0.4rem 0 0;
}

.wb-hh-trust__center {
  position: relative;
  padding: 0 0 0 0;
}
@media (min-width: 900px) {
  .wb-hh-trust__center {
    padding-left: 2rem;
    padding-right: 2rem;
    border-left: 1px solid rgba(17,45,30,0.12);
    border-right: 1px solid rgba(17,45,30,0.12);
  }
}
.wb-hh-trust__center .wb-hh__eyebrow { text-align: inherit; margin: 0 0 0.75rem; }
.wb-hh-trust__pull {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-green);
  margin: 0 0 1.25rem;
}
.wb-hh-trust__pull em { font-style: italic; font-weight: 100; }

.wb-hh-trust__marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.wb-hh-trust__marquee-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 0.55rem;
  animation: wb-marquee 38s linear infinite;
}
.wb-hh-trust__chip {
  flex: 0 0 auto;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-green);
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(17,45,30,0.20);
  border-radius: 9999px;
  background: rgba(243,232,175,0.18);
}

.wb-hh-trust__rail {
  display: none;
}
@media (min-width: 900px) {
  .wb-hh-trust__rail {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: "Commuters Sans", sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(17,45,30,0.50);
    padding: 0.5rem 0;
  }
}

/* ==========================================================================
   LIFESTYLE / APP SHOWCASE (replaces Featured Courses)
   ========================================================================== */
.wb-hh--lifestyle {
  color: var(--color-green);
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  text-align: center;
}
.wb-hh-life__head { max-width: 56rem; margin: 0 auto; }
.wb-hh-life__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-style: italic;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.04;
  color: var(--color-green);
  margin: 0.25rem auto 0;
  letter-spacing: -0.012em;
}
.wb-hh-life__title em { font-style: italic; }

.wb-hh-life__stage {
  position: relative;
  margin: clamp(2rem, 4vw, 3.5rem) auto 2rem;
  /* The new in-app screenshots are tall portraits (~1:2). The stage
     needs more vertical room than the old bezeled mocks. */
  height: clamp(440px, 56vw, 620px);
  width: 100%;
  max-width: 1100px;
}
.wb-hh-life__watermark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(220px, 38vw, 460px);
  height: auto;
  opacity: 0.12;
  filter: drop-shadow(0 0 60px rgba(243,232,175,0.35));
  z-index: 0;
}

/* Phone composition: each phone is absolutely placed inside the stage in a
   fan / scatter arrangement. CSS variables (--wb-life-i) come from PHP so we
   can compute positions per phone. */
.wb-hh-life__phones { position: absolute; inset: 0; }
.wb-hh-life__phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(140px, 16vw, 240px);
  z-index: calc(10 + var(--wb-life-z, 0));
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.2,0.65,0.2,1), filter 0.5s ease;
  filter:
    drop-shadow(0 24px 36px rgba(0,0,0,0.45))
    drop-shadow(0 4px 8px rgba(0,0,0,0.30));
  animation: wb-life-float 7s ease-in-out infinite;
  animation-delay: calc(var(--wb-life-i) * -0.7s);
}
/* The new images are full app screens, not bezeled mockups. A rounded
   corner + hairline gold ring + subtle inset highlight gives them the
   "device" feel without faking a phone frame. */
.wb-hh-life__phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.75rem;
  border: 1px solid rgba(243,232,175,0.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 1px 0 rgba(0,0,0,0.30);
}

/* 5-phone fan — center taller and forward, outer phones tilted and
   pushed back. */
.wb-hh-life__phone:nth-child(1) { transform: translate(-50%, -50%) translate(-78%,  4%)  rotate(-12deg) scale(0.86); }
.wb-hh-life__phone:nth-child(2) { transform: translate(-50%, -50%) translate(-40%, -2%)  rotate(-6deg)  scale(0.94); }
.wb-hh-life__phone:nth-child(3) { transform: translate(-50%, -50%) translate(0%,   -6%)  rotate(0deg)   scale(1.04); }
.wb-hh-life__phone:nth-child(4) { transform: translate(-50%, -50%) translate(40%,  -2%)  rotate(6deg)   scale(0.94); }
.wb-hh-life__phone:nth-child(5) { transform: translate(-50%, -50%) translate(78%,   4%)  rotate(12deg)  scale(0.86); }

/* Hide the outermost on small screens to avoid clipping. */
@media (max-width: 900px) {
  .wb-hh-life__phone:nth-child(1),
  .wb-hh-life__phone:nth-child(5) { display: none; }
}
@media (max-width: 600px) {
  .wb-hh-life__phone:nth-child(2),
  .wb-hh-life__phone:nth-child(4) { display: none; }
  .wb-hh-life__phone:nth-child(3) { transform: translate(-50%, -50%) translate(0%, -4%) rotate(0deg) scale(1.1); }
  .wb-hh-life__phone { width: clamp(180px, 60vw, 240px); }
}

.wb-hh-life__phones:hover .wb-hh-life__phone {
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5)) brightness(0.85);
}
.wb-hh-life__phones .wb-hh-life__phone:hover {
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.6)) brightness(1.05);
  z-index: 60;
}

@keyframes wb-life-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

.wb-hh-life__foot {
  margin-top: clamp(1rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.wb-hh-life__diamond {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 4vw, 3rem);
  width: clamp(40px, 5vw, 60px);
  height: auto;
  color: rgba(243,232,175,0.40);
  pointer-events: none;
}

/* ==========================================================================
   TESTIMONIALS — split editorial rotator (brand-color rebuild)
   Layout:
     ≥1024px : LEFT copy + CTAs + arrow nav + dots  /  RIGHT rotating card
     <1024px : stacks vertically (copy → card)
   Auto-advances every 7s. Arrows + dots are manual controls.
   ========================================================================== */
.wb-hh--testimonials {
  position: relative;
  isolation: isolate;
  /* Green fabric backdrop — same image the hero uses, brings the section
     into the dark-section family visually. Only the bg changes here;
     every other testimonial element (text colors, card surface, nav)
     is left as-is per the latest direction. */
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) !important;
  margin-top: -1px !important;
}
/* Soft gold ambient lift on the right side — toned down for the cream
   stage so the page still feels luminous without competing with the
   review card. */
.wb-hh--testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 50% at 95% 50%, rgba(243,232,175,0.20), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.wb-hh--testimonials > .wb-hh__inner { position: relative; z-index: 1; }

.wb-hh-tm__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  /* Pin both columns to the TOP — when a long review makes the right
     card very tall, the left header + CTAs + nav should stay at the
     top of the section, not float to the middle of the card. */
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .wb-hh-tm__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

/* --- LEFT: copy + CTAs + nav ---------------------------------------- */
.wb-hh-tm__side {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (max-width: 1023px) { .wb-hh-tm__side { text-align: center; align-items: center; } }

.wb-hh-tm__side .wb-hh__eyebrow {
  text-align: left;
  color: #F3E8AF;
  margin: 0;
}
@media (max-width: 1023px) { .wb-hh-tm__side .wb-hh__eyebrow { text-align: center; } }

.wb-hh-tm__title {
  margin: 0;
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: #F3E8AF;
}
.wb-hh-tm__title em { font-style: italic; font-weight: 100; color: #F3E8AF; }

.wb-hh-tm__lede {
  margin: 0;
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: #F3E8AF;
  max-width: 32rem;
}

.wb-hh-tm__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  /* Extra breathing room below the CTAs row before the arrows + dots
     navigation starts — separates "actions" from "controls". */
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.wb-hh-tm__nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  margin-top: 0;
  flex-wrap: wrap;
}
@media (max-width: 1023px) { .wb-hh-tm__nav { justify-content: center; } }

.wb-hh-tm__arrows {
  display: inline-flex;
  gap: 0.65rem;
}
.wb-hh-tm__arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid rgba(243,232,175,0.45);
  color: #F3E8AF;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.wb-hh-tm__arrow:hover {
  background: rgba(243,232,175,0.10);
  border-color: #F3E8AF;
  transform: translateY(-1px);
}
.wb-hh-tm__arrow svg { width: 18px; height: 18px; }

.wb-hh-tm__dots {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.wb-hh-tm__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(243,232,175,0.35);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: width 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.wb-hh-tm__dot:hover { background: rgba(243,232,175,0.60); }
.wb-hh-tm__dot.is-active {
  width: 28px;
  background: #F3E8AF;
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(243,232,175,0.45);
}

/* --- RIGHT: rotating testimonial card -------------------------------
   Cards used to share the same grid cell (grid-area: 1 / 1) and stayed
   in flow, which made the stage height equal to the TALLEST review.
   That left huge empty space below short reviews after we removed the
   320-char truncation. Now: inactive cards are absolutely positioned
   over the stage (they don't contribute to its height), and the active
   card stays in grid flow — so the stage auto-fits to the active
   review's actual content height. */
.wb-hh-tm__stage {
  position: relative;
  display: grid;
  width: 100%;
  transition: min-height 0.45s ease;
}
.wb-hh-tm__card {
  grid-area: 1 / 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Solid white card on the cream stage — clean, premium, prints the
     review text in sharp contrast. Subtle gold-cream border + drop
     shadow give it lift without competing with the gold-pill CTAs. */
  background: #FFFFFF;
  border: 1px solid rgba(243,232,175,0.55);
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow:
    0 0 0 1px rgba(17,45,30,0.04) inset,
    0 20px 50px -25px rgba(17,45,30,0.22);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.wb-hh-tm__card.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.wb-hh-tm__card-quote {
  width: clamp(34px, 4vw, 48px);
  height: auto;
  color: #D6BE6E;
  margin: 0 0 1rem;
  opacity: 0.7;
}
.wb-hh-tm__card-body {
  font-family: "Commuters Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-green);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.005em;
}

.wb-hh-tm__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid rgba(17,45,30,0.10);
}
.wb-hh-tm__person {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.wb-hh-tm__avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
  background: linear-gradient(135deg, #112D1E, #1a3d2e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  font-family: "IvyPresto Display", serif;
  font-size: 1.1rem;
  font-weight: 400;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(243,232,175,0.50);
}
.wb-hh-tm__avatar--initial { letter-spacing: 0; }
.wb-hh-tm__person-meta { display: flex; flex-direction: column; }
.wb-hh-tm__person-name {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.95rem;
  color: var(--color-green);
  letter-spacing: 0.02em;
}
.wb-hh-tm__person-designation {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.78rem;
  color: rgba(17,45,30,0.65);
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
}
.wb-hh-tm__person-country {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.55);
  margin-top: 0.2rem;
}
.wb-hh-tm__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.wb-hh-tm__stars {
  display: inline-flex;
  gap: 0.15rem;
  color: rgba(17,45,30,0.20);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.wb-hh-tm__stars .is-on { color: #C9A227; }
.wb-hh-tm__rating-num {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.85rem;
  color: var(--color-green);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Long-form pull-quote glyph
   ========================================================================== */
.wb-hh-long__quote { position: relative; }
.wb-hh-long__quote-glyph {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: auto;
  color: #F3E8AF;
  background: var(--color-bg-cream);
  padding: 0 0.5rem;
}

/* ==========================================================================
   Intro OR divider — glyph spacing
   ========================================================================== */
/* HIDDEN per client request — the diamond ornaments next to the "OR"
   divider are removed. They're baked into Elementor's stored page data
   (rendered by elementor-build/pages/home.php) so we hide them with
   CSS rather than touching the Elementor DB. The legacy sizing rule
   below stays for back-compat if the glyphs ever return. */
.wb-hh-or__glyph {
  display: none !important;
}
.wb-hh-or__glyph {
  width: 14px; height: 14px;
  color: var(--color-green);
  flex: 0 0 auto;
}

/* ==========================================================================
   Final CTA — gold corner ornaments
   ========================================================================== */
.wb-hh-finalcta__corner {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(243,232,175,0.35);
  pointer-events: none;
  z-index: 1;
}
.wb-hh-finalcta__corner--tl { top: 2rem; left: 2rem; border-right: 0; border-bottom: 0; }
.wb-hh-finalcta__corner--tr { top: 2rem; right: 2rem; border-left: 0; border-bottom: 0; }
.wb-hh-finalcta__corner--bl { bottom: 2rem; left: 2rem; border-right: 0; border-top: 0; }
.wb-hh-finalcta__corner--br { bottom: 2rem; right: 2rem; border-left: 0; border-top: 0; }
@media (max-width: 640px) { .wb-hh-finalcta__corner { width: 2rem; height: 2rem; top: 1rem !important; bottom: 1rem !important; left: 1rem !important; right: 1rem !important; } .wb-hh-finalcta__corner--tr, .wb-hh-finalcta__corner--br { left: auto !important; right: 1rem !important; } .wb-hh-finalcta__corner--bl, .wb-hh-finalcta__corner--br { top: auto !important; bottom: 1rem !important; } }

/* ==========================================================================
   ==========================================================================
   2026 redesign — PASS 3 (simplification + pricing front-and-center)
   - Hero is now minimal (logo + eyebrow + headline + 1 CTA)
   - "Choose Your Path" pricing renders immediately after hero (3-up row)
   - Soft gradient handoff between hero green and pricing cream
   - Right-now bullets get their own dedicated awareness section later
   ========================================================================== */

/* Reset every earlier hero rule. The new hero is light/cream, centered,
   and rendered from `template-parts/home/hero.php` using only the
   element-level classes prefixed `.wb-hh--hero__`. */
.wb-hh--hero .wb-hh__bg,
.wb-hh--hero .wb-hh__bg-overlay,
.wb-hh--hero .wb-hh__pattern,
.wb-hh--hero .wb-hh__marquee,
.wb-hh--hero .wb-hh-hero__rail,
.wb-hh--hero .wb-hh-hero__watermark,
.wb-hh--hero .wb-hh-hero__crest,
.wb-hh--hero .wb-hh-hero__scroll,
.wb-hh--hero .wb-hh__logo,
.wb-hh--hero .wb-hh__title,
.wb-hh--hero .wb-hh__kicker,
.wb-hh--hero .wb-hh__rule,
.wb-hh--hero .wb-hh__bullets,
.wb-hh--hero__fade { display: none !important; }
.wb-hh--hero .wb-hh__inner.reveal > * { opacity: 1; transform: none; transition: none; }

/* Drop the pull-up on .wb-hh--path: there is no longer a green fade to
   reach into. The pricing section sits below the hero on the same warm
   cream tone so the seam is invisible. */
.wb-hh--path { margin-top: 0 !important; }

/* ==========================================================================
   HERO v5 — brand-green editorial, art + CTAs UP, copy DOWN
   Inspired by tobemagnetic.com + holistic-society.com.
   Order in DOM (centered column):
     art → CTAs → spacer → rule → eyebrow → headline
   ========================================================================== */
.wb-hh--hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Green base + brand fabric image, sized to cover and never repeated.
     Applies whether the hero is rendered from the PHP partial OR from
     the Elementor section that carries this class. */
  background-color: var(--color-green);
  background-image: url("../images/green_background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-cream);
  text-align: center;
  /* Header is fixed (~96px). Hero leaves room for it on top and ample
     breathing room below before the next section. Padding alone owns
     the rhythm — no min-height. min-height: 96vh used to force the
     section to nearly full viewport height, but that left big empty
     green space below the content whenever the content was shorter
     than the viewport (zoom changes, tablets, short content edits).
     Without it the hero sizes to its content + padding like the other
     sections (Choose Your Path, etc.) and stays stable on zoom. */
  padding: clamp(7.5rem, 14vh, 10rem) 1.5rem clamp(10rem, 20vh, 14rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Hero background image (green_background_section.webp) sits underneath
   the content via its own layer. No radial glow — per brand direction. */
.wb-hh--hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}
/* A whisper-thin tint to deepen the bottom edge — keeps the bottom rule
   reading clearly without adding any halo around the logo art. */
.wb-hh--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
  z-index: -1;
}
/* Whisper-quiet hairline at the bottom seam — a clean editorial break
   between green hero and cream pricing, no gradient nonsense. */
.wb-hh--hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,232,175,0.30) 18%, rgba(243,232,175,0.55) 50%, rgba(243,232,175,0.30) 82%, transparent 100%);
  z-index: 1;
}

.wb-hh--hero__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* The gold "WEALTH BEING — RICH IN ALL AREAS OF YOUR LIFE" typographic
   art on dark green. Large + impactful. The soft gold halo behind it is
   produced by the section's radial gradient above; the drop-shadow on
   the image itself adds subtle depth. */
.wb-hh--hero__art {
  margin: 0;
  width: 100%;
  max-width: 1080px;
  display: flex;
  justify-content: center;
}
.wb-hh--hero__art img {
  width: min(100%, 960px);
  height: auto;
  display: block;
  /* Glow removed per brand direction — keep the gold art clean on the
     green stage. The ambient radial-gradient pools in `.wb-hh--hero::before`
     above provide just enough lift without adding a halo to the asset. */
  animation: wb-hero-art-rise 1.4s cubic-bezier(0.2,0.65,0.2,1) both;
}
@keyframes wb-hero-art-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.wb-hh--hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(0.25rem, 1vw, 0.75rem);
}
@media (min-width: 600px) {
  .wb-hh--hero__ctas { flex-direction: row; gap: 1.75rem; }
}

/* HIDDEN per client request — the "Choose Your Path" secondary CTA is
   removed from the hero. The link is built into Elementor's stored
   page data, so we hide it via CSS rather than touching the DB. The
   legacy styling below (.wb-hh--hero__link) is kept so if the link is
   ever re-enabled, the typography is intact. The :has() selector
   collapses the surrounding Elementor column wrapper so we don't
   leave an empty grid cell in the row. */
.wb-hh--hero__link,
.elementor-element:has(> .elementor-widget-container > .wb-hh--hero__link),
.elementor-column.wb-hh-hero-ctas-col:has(.wb-hh--hero__link) {
  display: none !important;
}

/* Secondary text-link CTA — sits next to the gold pill. On green we make
   it cream so it reads as the quieter sibling. */
.wb-hh--hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.85);
  text-decoration: none;
  padding: 0.55rem 0.25rem;
  transition: color 0.3s ease, gap 0.3s ease;
  position: relative;
}
.wb-hh--hero__link::after {
  content: "";
  position: absolute;
  left: 0.25rem; right: 1.25rem;
  bottom: 0.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.wb-hh--hero__link svg {
  width: 14px; height: 14px;
  transition: transform 0.3s ease;
}
.wb-hh--hero__link:hover { color: var(--color-cream); gap: 0.85rem; }
.wb-hh--hero__link:hover::after { opacity: 0.85; }
.wb-hh--hero__link:hover svg { transform: translateX(3px); }

/* Generous breathing space between the upper "destination" block
   (art + CTAs) and the lower "moment of truth" block (eyebrow + headline).
   A spacer element keeps the gap controlled at the layout level. */
.wb-hh--hero__spacer {
  width: 1px;
  height: clamp(2.5rem, 8vh, 5.5rem);
  background: transparent;
}

/* Single short vertical rule between the spacer and the eyebrow — like a
   typographer's bar. Whisper gold on green. */
.wb-hh--hero__rule {
  display: block;
  width: 1px;
  height: clamp(36px, 5vh, 56px);
  background: linear-gradient(180deg, transparent, rgba(243,232,175,0.55) 50%, transparent);
  margin: 0;
}

.wb-hh--hero__eyebrow {
  margin: 0;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(243,232,175,0.78);
}
@media (min-width: 768px) { .wb-hh--hero__eyebrow { font-size: 0.75rem; } }

.wb-hh--hero__title {
  margin: 0;
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.85rem, 4vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.008em;
  color: var(--color-cream);
  max-width: 26ch;
}
.wb-hh--hero__title em {
  font-style: italic;
  font-weight: 100;
}

/* Stagger the entrance: art → CTAs → spacer (no-op) → rule → eyebrow → title.
   Skip animating the spacer (it's purely structural). */
.wb-hh--hero__inner > *:not(.wb-hh--hero__spacer) {
  opacity: 0;
  transform: translateY(14px);
  animation: wb-hero-rise 0.9s cubic-bezier(0.2,0.65,0.2,1) forwards;
}
.wb-hh--hero__inner > .wb-hh--hero__art   { animation-delay: 0.05s; }
.wb-hh--hero__inner > .wb-hh--hero__ctas  { animation-delay: 0.32s; }
.wb-hh--hero__inner > .wb-hh--hero__title   { animation-delay: 0.55s; }
@keyframes wb-hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-hh--hero__inner > * { opacity: 1; transform: none; animation: none; }
  .wb-hh--hero__art img   { animation: none; }
}

/* Tablet — tighten padding (no min-height to override now). Keep
   bottom roomy enough that the hero still reads as a balanced block
   below the headline + buttons + lede. */
@media (max-width: 1024px) {
  .wb-hh--hero {
    padding-top: clamp(6rem, 11vh, 8.5rem);
    padding-bottom: clamp(6rem, 12vh, 8.5rem);
  }
}

/* Mobile spacing tuning. */
@media (max-width: 600px) {
  .wb-hh--hero {
    padding-top: 6.5rem;
    padding-bottom: 2.5rem;
  }
  .wb-hh--hero__title { font-size: clamp(1.5rem, 6vw, 2rem); max-width: 22ch; }
  .wb-hh--hero__art img { width: 100%; }
  .wb-hh--hero__spacer { height: 2rem; }
}

/* ==========================================================================
   CHOOSE YOUR PATH — 3-card pricing row
   ========================================================================== */
.wb-hh--path {
  position: relative;
  z-index: 3;
  /* Same light fabric the AI section uses — keeps light-section family
     visually consistent. !important needed to win over Elementor's
     per-page generated section CSS. */
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
  padding: clamp(4rem, 9vw, 7rem) 1.25rem clamp(5rem, 10vw, 8rem);
}

.wb-hh-path__head {
  text-align: center;
  max-width: 56rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.wb-hh-path__title {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--color-green);
  margin: 0.5rem 0 0;
}
.wb-hh-path__title em { font-style: italic; font-weight: 100; }
.wb-hh__rule--dark {
  background: linear-gradient(90deg, transparent, rgba(17,45,30,0.45), transparent);
}
.wb-hh-path__lede {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: rgba(17,45,30,0.78);
}
.wb-hh-path__lede em { font-style: italic; }

/* 3-card row. Mobile stacks. ≥720 → 1 / featured spotlights wider on ≥1080. */
.wb-hh-path__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  align-items: stretch;
}
@media (min-width: 720px) and (max-width: 1079px) {
  .wb-hh-path__grid { grid-template-columns: 1fr 1fr; }
  .wb-hh-path__card:nth-child(3) { grid-column: 1 / -1; max-width: 30rem; justify-self: center; width: 100%; }
}
@media (min-width: 1080px) {
  .wb-hh-path__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    align-items: stretch;
  }
}

/* Stacked layout — applied by pricing-cards.php when fewer than 3 cards
   are visible. Each visible card becomes a full-width hero block so the
   single "premium" card reads bigger and a 2-card layout stacks neatly
   (Annual on top, One Month below, etc.). Override the multi-column
   templates above with !important — they're behind media queries with
   higher specificity. */
.wb-hh-path__grid.is-stacked {
  grid-template-columns: 1fr !important;
  max-width: 880px;
  gap: 2rem;
}
.wb-hh-path__grid.is-stacked .wb-hh-path__card {
  grid-column: 1 / -1 !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  width: 100% !important;
  /* Cancel the desktop "lift" applied to .is-featured so a stacked
     featured card doesn't sit above its own block. */
  transform: none !important;
}
.wb-hh-path__grid.is-stacked .wb-hh-path__card:hover {
  transform: translateY(-4px) !important;
}

.wb-hh-path__card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.08);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 10px 30px -18px rgba(17,45,30,0.18);
  transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.wb-hh-path__card:hover {
  transform: translateY(-4px);
  border-color: rgba(243,232,175,0.6);
  box-shadow: 0 30px 60px -25px rgba(17,45,30,0.30);
}

/* Featured (middle) card: cream border + ambient gold glow. On wide screens
   it sits a touch taller than its siblings to draw the eye, without
   exploding the grid. */
.wb-hh-path__card.is-featured {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBE9 100%);
  border-color: #F3E8AF;
  box-shadow:
    0 0 0 1px rgba(243,232,175,0.45) inset,
    0 0 30px 4px rgba(243,232,175,0.30),
    0 30px 60px -30px rgba(17,45,30,0.35);
}
@media (min-width: 1080px) {
  .wb-hh-path__card.is-featured { transform: translateY(-12px); }
  .wb-hh-path__card.is-featured:hover { transform: translateY(-16px); }
}

/* Reusable gold-glow modifier — same look as the "Most Popular"
   featured card, but applied via a separate class so the client can
   toggle it on ANY card from Settings → Pricing Cards without touching
   code. Just adds the cream-to-white gradient, gold border + the
   ambient gold halo. No transform — let the host card decide its own
   lift/stack behavior. */
.wb-hh-path__card.wb-card--glow {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBE9 100%);
  border-color: #F3E8AF;
  box-shadow:
    0 0 0 1px rgba(243,232,175,0.45) inset,
    0 0 30px 4px rgba(243,232,175,0.30),
    0 30px 60px -30px rgba(17,45,30,0.35);
}

.wb-hh-path__badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17,45,30,0.92);
  color: var(--color-cream);
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(243,232,175,0.30);
  white-space: nowrap;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,0.30);
}
.wb-hh-path__card.is-featured .wb-hh-path__badge {
  background: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 100%);
  color: var(--color-green);
  border-color: rgba(17,45,30,0.20);
}

.wb-hh-path__card-head { padding-bottom: 1rem; border-bottom: 1px solid rgba(17,45,30,0.10); }
.wb-hh-path__name {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-green);
  margin: 0 0 0.25rem;
}
.wb-hh-path__name em { font-style: italic; font-weight: 100; }
.wb-hh-path__sub {
  font-family: "IvyPresto Display", serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1rem;
  color: rgba(17,45,30,0.65);
  margin: 0;
}

.wb-hh-path__price-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.wb-hh-path__price {
  font-family: "IvyPresto Display", serif;
  font-weight: 100;
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  line-height: 1;
  color: var(--color-green);
  letter-spacing: -0.02em;
}
.wb-hh-path__period {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(17,45,30,0.6);
}
.wb-hh-path__save {
  display: inline-block;
  background: rgba(243,232,175,0.55);
  color: var(--color-green);
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-left: auto;
}

.wb-hh-path__desc {
  font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17,45,30,0.80);
  margin: 0;
}

.wb-hh-path__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wb-hh-path__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-green);
}
.wb-hh-path__features li svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-green);
  opacity: 0.85;
}
.wb-hh-path__card.is-featured .wb-hh-path__features li svg { color: #b89426; opacity: 1; }

.wb-hh-path__cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
}

.wb-hh-path__note {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(17,45,30,0.55);
  margin: 0;
}

/* ==========================================================================
   PRICING CARDS — NATIVE ELEMENTOR VERSION (.wb-pcard)

   Each card is now an Elementor column carrying `.wb-pcard` (+ a slug
   class like .wb-pcard--annual, and optionally .is-featured / .wb-card--glow).
   Inside the column, each piece (badge, title, price, etc.) is a native
   widget tagged .wb-pcard__*-el. These bridges replicate the legacy
   .wb-hh-path__card design 1:1 — visual output is unchanged, but every
   text piece + link is editable in Elementor.

   The 3 columns sit inside an inner-section `.wb-hh-path__grid-el`,
   which is restyled here as the 3-card grid (responsive same as before).
   ========================================================================== */

/* ---- The grid container (inner section) ---- */
.elementor-inner-section.wb-hh-path__grid-el {
  width: 100% !important;
  margin: 0 !important;
}
.elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  max-width: 1280px;
  margin: 0 auto;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
@media (min-width: 720px) and (max-width: 1079px) {
  .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
    grid-template-columns: 1fr 1fr !important;
  }
  .elementor-inner-section.wb-hh-path__grid-el .elementor-column.wb-pcard:nth-child(3) {
    grid-column: 1 / -1 !important;
    max-width: 30rem;
    justify-self: center;
  }
}
@media (min-width: 1080px) {
  .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.75rem !important;
  }
}

/* Force every pricing-card column to stretch to the full row height in
   the grid. Without this, Elementor's default column behavior leaves
   cards auto-sized to their own content — which means the CTA's
   `margin-top: auto` has no free space to absorb, and buttons end up
   in their natural-flow positions instead of the bottom of the card.
   With stretch enforced + height:100% on the inner card-frame (already
   set at line 5969), the auto-margin pushes the CTA + note to the
   bottom consistently across all visible cards. */
.elementor-inner-section.wb-hh-path__grid-el .elementor-column.wb-pcard {
  align-self: stretch !important;
}

/* Settings → Pricing Cards "hide" toggles. When the body carries the
   corresponding class, the matching card column collapses out of the
   grid entirely. */
body.wb-pricing-hide-elite     .elementor-column.wb-pcard--elite,
body.wb-pricing-hide-one-month .elementor-column.wb-pcard--one-month,
body.wb-pricing-hide-annual    .elementor-column.wb-pcard--annual {
  display: none !important;
}

/* ── ORDER per card — driven by body class so the admin can reorder
   without rebuilding Elementor data. Lower order value renders first.
   The grid container respects CSS `order` on its items, so changing
   these values reshuffles the visual placement immediately. */
body.wb-pricing-order-annual-1     .elementor-column.wb-pcard--annual    { order: 1; }
body.wb-pricing-order-annual-2     .elementor-column.wb-pcard--annual    { order: 2; }
body.wb-pricing-order-annual-3     .elementor-column.wb-pcard--annual    { order: 3; }
body.wb-pricing-order-one-month-1  .elementor-column.wb-pcard--one-month { order: 1; }
body.wb-pricing-order-one-month-2  .elementor-column.wb-pcard--one-month { order: 2; }
body.wb-pricing-order-one-month-3  .elementor-column.wb-pcard--one-month { order: 3; }
body.wb-pricing-order-elite-1      .elementor-column.wb-pcard--elite     { order: 1; }
body.wb-pricing-order-elite-2      .elementor-column.wb-pcard--elite     { order: 2; }
body.wb-pricing-order-elite-3      .elementor-column.wb-pcard--elite     { order: 3; }

/* ── FEATURED ("Most Popular") — single body class picks which card
   gets the gold glow + halo + black CTA text. Works regardless of
   whether `wb-card--glow` / `is-featured` is baked on a column in
   Elementor: these rules override based on the admin's pick. */

/* The chosen card: apply the glow treatment. ONE soft halo only — no
   inset ring, no offset contact shadow. Those nested/offset shadows
   were rendering as a faint duplicate-card silhouette below or
   alongside the real card. With just the symmetric halo, the card
   stands alone with a single clean light cloud around it. */
:is(
  body.wb-pricing-featured-annual    .elementor-column.wb-pcard--annual,
  body.wb-pricing-featured-one-month .elementor-column.wb-pcard--one-month,
  body.wb-pricing-featured-elite     .elementor-column.wb-pcard--elite
) > .elementor-widget-wrap,
:is(
  body.wb-pricing-featured-annual    .elementor-column.wb-pcard--annual,
  body.wb-pricing-featured-one-month .elementor-column.wb-pcard--one-month,
  body.wb-pricing-featured-elite     .elementor-column.wb-pcard--elite
) > .elementor-element-populated {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBE9 100%) !important;
  border-color: #F3E8AF !important;
  box-shadow: 0 10px 28px -16px rgba(17,45,30,0.18) !important;
}

/* Non-chosen cards (when ANY featured-X is active) — reset to plain
   even if they had wb-card--glow / is-featured baked into Elementor. */
:is(
  body.wb-pricing-featured-annual    .elementor-column.wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-featured-one-month .elementor-column.wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-featured-elite     .elementor-column.wb-pcard:not(.wb-pcard--elite),
  body.wb-pricing-featured-none      .elementor-column.wb-pcard
) > .elementor-widget-wrap,
:is(
  body.wb-pricing-featured-annual    .elementor-column.wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-featured-one-month .elementor-column.wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-featured-elite     .elementor-column.wb-pcard:not(.wb-pcard--elite),
  body.wb-pricing-featured-none      .elementor-column.wb-pcard
) > .elementor-element-populated {
  background: #FFFFFF !important;
  border-color: rgba(17,45,30,0.08) !important;
  box-shadow: 0 10px 30px -18px rgba(17,45,30,0.18) !important;
}

/* Featured CTA button text: BLACK (overrides the baked is-featured /
   wb-card--glow rules). Non-featured CTAs stay gold. */
:is(
  body.wb-pricing-featured-annual    .wb-pcard--annual,
  body.wb-pricing-featured-one-month .wb-pcard--one-month,
  body.wb-pricing-featured-elite     .wb-pcard--elite
) .elementor-widget.wb-pcard__cta-el a.elementor-button,
:is(
  body.wb-pricing-featured-annual    .wb-pcard--annual,
  body.wb-pricing-featured-one-month .wb-pcard--one-month,
  body.wb-pricing-featured-elite     .wb-pcard--elite
) .elementor-widget.wb-pcard__cta-el .elementor-button-link {
  color: #000;
}
:is(
  body.wb-pricing-featured-annual    .wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-featured-one-month .wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-featured-elite     .wb-pcard:not(.wb-pcard--elite),
  body.wb-pricing-featured-none      .wb-pcard
) .elementor-widget.wb-pcard__cta-el a.elementor-button,
:is(
  body.wb-pricing-featured-annual    .wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-featured-one-month .wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-featured-elite     .wb-pcard:not(.wb-pcard--elite),
  body.wb-pricing-featured-none      .wb-pcard
) .elementor-widget.wb-pcard__cta-el .elementor-button-link {
  color: #b89426;
}

/* ── LAYOUT VARIATIONS — controlled from Settings → Pricing Cards ──
   The admin picks one of these and the body class drives the grid
   shape. Each layout is responsive (collapses to single column on
   mobile) and keeps the brand-card design intact. */

/* STACKED — every visible card on its own row, full-width, centered. */
body.wb-pricing-layout-stacked .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
  grid-template-columns: 1fr !important;
  max-width: 880px;
  gap: 2rem !important;
}
body.wb-pricing-layout-stacked .elementor-inner-section.wb-hh-path__grid-el .elementor-column.wb-pcard {
  max-width: 100% !important;
  width: 100% !important;
  justify-self: stretch !important;
  transform: none !important;
}

/* THREE — strict 3-column grid (force, even on tablet). Same as the
   original default. */
@media (min-width: 720px) {
  body.wb-pricing-layout-three .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.75rem !important;
    max-width: 1280px;
  }
  body.wb-pricing-layout-three .elementor-inner-section.wb-hh-path__grid-el .elementor-column.wb-pcard {
    grid-column: auto !important;
    max-width: 100% !important;
  }
}

/* TWO — 2-column grid. The card sitting in the visual 3rd position
   (order = 3) centers below. */
@media (min-width: 720px) {
  body.wb-pricing-layout-two .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.75rem !important;
    max-width: 980px;
  }
  :is(
    body.wb-pricing-layout-two.wb-pricing-order-annual-3     .elementor-column.wb-pcard--annual,
    body.wb-pricing-layout-two.wb-pricing-order-one-month-3  .elementor-column.wb-pcard--one-month,
    body.wb-pricing-layout-two.wb-pricing-order-elite-3      .elementor-column.wb-pcard--elite
  ) {
    grid-column: 1 / -1 !important;
    max-width: 30rem;
    justify-self: center;
  }
}

/* HERO-ROW — the card at order=1 becomes the full-width "hero" on top,
   remaining cards share a 2-column row underneath. */
@media (min-width: 720px) {
  body.wb-pricing-layout-hero-row .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.75rem !important;
    max-width: 1080px;
  }
  :is(
    body.wb-pricing-layout-hero-row.wb-pricing-order-annual-1     .elementor-column.wb-pcard--annual,
    body.wb-pricing-layout-hero-row.wb-pricing-order-one-month-1  .elementor-column.wb-pcard--one-month,
    body.wb-pricing-layout-hero-row.wb-pricing-order-elite-1      .elementor-column.wb-pcard--elite
  ) {
    grid-column: 1 / -1 !important;
    justify-self: stretch;
    max-width: 100% !important;
  }

  /* HERO-ROW lone-bottom-card alignment — only fires when hero-row layout
     is active AND only ONE of the non-hero cards is visible (the other
     bottom card is hidden in the Visibility table). The selectors target
     each non-hero card by slug, gated by the matching `wb-pricing-hide-*`
     classes that confirm the other two cards (the hero + the other bottom
     card) are accounted for. Driven by the admin's `wb_pricing_hero_align`
     setting via the `wb-pricing-hero-align-*` body class. */

  /* FULL WIDTH — lone bottom card spans the row below the hero */
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-full.wb-pricing-hide-annual    .elementor-column.wb-pcard--one-month,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-full.wb-pricing-hide-annual    .elementor-column.wb-pcard--elite,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-full.wb-pricing-hide-one-month .elementor-column.wb-pcard--annual,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-full.wb-pricing-hide-one-month .elementor-column.wb-pcard--elite,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-full.wb-pricing-hide-elite     .elementor-column.wb-pcard--annual,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-full.wb-pricing-hide-elite     .elementor-column.wb-pcard--one-month {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: 100% !important;
  }

  /* LEFT — lone bottom card pinned to the left half */
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-left.wb-pricing-hide-annual    .elementor-column.wb-pcard--one-month,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-left.wb-pricing-hide-annual    .elementor-column.wb-pcard--elite,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-left.wb-pricing-hide-one-month .elementor-column.wb-pcard--annual,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-left.wb-pricing-hide-one-month .elementor-column.wb-pcard--elite,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-left.wb-pricing-hide-elite     .elementor-column.wb-pcard--annual,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-left.wb-pricing-hide-elite     .elementor-column.wb-pcard--one-month {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    max-width: 30rem !important;
  }

  /* RIGHT — lone bottom card pinned to the right half */
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-right.wb-pricing-hide-annual    .elementor-column.wb-pcard--one-month,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-right.wb-pricing-hide-annual    .elementor-column.wb-pcard--elite,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-right.wb-pricing-hide-one-month .elementor-column.wb-pcard--annual,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-right.wb-pricing-hide-one-month .elementor-column.wb-pcard--elite,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-right.wb-pricing-hide-elite     .elementor-column.wb-pcard--annual,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-right.wb-pricing-hide-elite     .elementor-column.wb-pcard--one-month {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    max-width: 30rem !important;
  }

  /* CENTER (default) — lone bottom card centered in the row */
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-center.wb-pricing-hide-annual    .elementor-column.wb-pcard--one-month,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-center.wb-pricing-hide-annual    .elementor-column.wb-pcard--elite,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-center.wb-pricing-hide-one-month .elementor-column.wb-pcard--annual,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-center.wb-pricing-hide-one-month .elementor-column.wb-pcard--elite,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-center.wb-pricing-hide-elite     .elementor-column.wb-pcard--annual,
  body.wb-pricing-layout-hero-row.wb-pricing-hero-align-center.wb-pricing-hide-elite     .elementor-column.wb-pcard--one-month {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 30rem !important;
  }
}

/* HERO-ONE — the 2-card hero variant. Order=1 card sits on top
   full-width; order=2 card (the lone card below) is aligned per the
   `wb_pricing_hero_align` setting (full / left / right / center).
   Designed for the case where the admin has exactly 2 cards visible
   and wants a hero + accent layout where the bottom card can be
   positioned freely. Reuses the existing hero-align body class so
   the admin doesn't have to learn a new control. */
@media (min-width: 720px) {
  body.wb-pricing-layout-hero-one .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.75rem !important;
    max-width: 1080px;
  }

  /* Order=1 → full-width hero on top */
  :is(
    body.wb-pricing-layout-hero-one.wb-pricing-order-annual-1     .elementor-column.wb-pcard--annual,
    body.wb-pricing-layout-hero-one.wb-pricing-order-one-month-1  .elementor-column.wb-pcard--one-month,
    body.wb-pricing-layout-hero-one.wb-pricing-order-elite-1      .elementor-column.wb-pcard--elite
  ) {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: 100% !important;
  }

  /* Non-order-1 (the bottom card) → align per hero-align setting.
     `:not(.wb-pcard--<order1-slug>)` targets the bottom card by
     excluding whichever slug carries order=1 in the body class. */

  /* FULL WIDTH */
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-full.wb-pricing-order-annual-1     .elementor-column.wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-full.wb-pricing-order-one-month-1  .elementor-column.wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-full.wb-pricing-order-elite-1      .elementor-column.wb-pcard:not(.wb-pcard--elite) {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: 100% !important;
  }

  /* LEFT */
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-left.wb-pricing-order-annual-1     .elementor-column.wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-left.wb-pricing-order-one-month-1  .elementor-column.wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-left.wb-pricing-order-elite-1      .elementor-column.wb-pcard:not(.wb-pcard--elite) {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    max-width: 30rem !important;
  }

  /* RIGHT */
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-right.wb-pricing-order-annual-1     .elementor-column.wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-right.wb-pricing-order-one-month-1  .elementor-column.wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-right.wb-pricing-order-elite-1      .elementor-column.wb-pcard:not(.wb-pcard--elite) {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    max-width: 30rem !important;
  }

  /* CENTER (default) */
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-center.wb-pricing-order-annual-1     .elementor-column.wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-center.wb-pricing-order-one-month-1  .elementor-column.wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-layout-hero-one.wb-pricing-hero-align-center.wb-pricing-order-elite-1      .elementor-column.wb-pcard:not(.wb-pcard--elite) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 30rem !important;
  }
}

/* Mobile fallback — every layout collapses to a single column for any
   viewport under 720px so cards never crush. */
@media (max-width: 719px) {
  body[class*="wb-pricing-layout-"] .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  body[class*="wb-pricing-layout-"] .elementor-inner-section.wb-hh-path__grid-el .elementor-column.wb-pcard {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
  }
}

/* Legacy `wb-pricing-stacked` alias — kept so any older selectors
   still work. */
body.wb-pricing-stacked .elementor-inner-section.wb-hh-path__grid-el > .elementor-container {
  grid-template-columns: 1fr !important;
  max-width: 880px;
  gap: 2rem !important;
}
body.wb-pricing-stacked .elementor-inner-section.wb-hh-path__grid-el .elementor-column.wb-pcard {
  max-width: 100% !important;
  width: 100% !important;
  justify-self: stretch !important;
  transform: none !important;
}

/* ---- The card column itself = the white card frame ----
   IMPORTANT: in Elementor 4 the `.elementor-widget-wrap` and
   `.elementor-element-populated` classes live on the SAME element
   (`<div class="elementor-widget-wrap elementor-element-populated">`),
   NOT on parent + child like in Elementor 3. A descendant selector
   between them won't match anything. All card-frame styling targets
   that single element directly. */
.elementor-column.wb-pcard {
  width: 100% !important;
  max-width: 100% !important;
  /* Make the column itself a flex column with a single child (the
     widget-wrap). This is the only way to guarantee the widget-wrap
     gets a definite height — `height: 100%` on the widget-wrap won't
     compute reliably in some Elementor setups, but `flex: 1` always
     fills the parent's main-axis. With this in place, the inner card
     always equals the column's row-stretched height, and the CTA's
     `margin-top: auto` finally has free space to absorb. */
  display: flex !important;
  flex-direction: column !important;
}
.elementor-column.wb-pcard > .elementor-widget-wrap,
.elementor-column.wb-pcard > .elementor-element-populated {
  flex: 1 1 auto !important;
}
.elementor-column.wb-pcard > .elementor-widget-wrap,
.elementor-column.wb-pcard > .elementor-element-populated {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.08);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 2.8vw, 2.5rem) !important;
  box-shadow: 0 10px 30px -18px rgba(17,45,30,0.18);
  transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
  height: 100%;
  /* Flex column so widgets stack vertically. `flex-wrap: nowrap` is
     critical — Elementor's default is wrap:wrap which would cause
     widgets to wrap into a SECOND column inside the card. */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 1.25rem !important;
  align-content: stretch !important;
}
.elementor-column.wb-pcard:hover > .elementor-widget-wrap,
.elementor-column.wb-pcard:hover > .elementor-element-populated {
  transform: translateY(-4px);
  border-color: rgba(243,232,175,0.6);
  box-shadow: 0 30px 60px -25px rgba(17,45,30,0.30);
}

/* The featured ("Most Popular") card sits a touch taller on wide screens. */
.elementor-column.wb-pcard.is-featured > .elementor-widget-wrap,
.elementor-column.wb-pcard.is-featured > .elementor-element-populated {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBE9 100%);
  border-color: #F3E8AF;
  box-shadow: 0 10px 28px -16px rgba(17,45,30,0.18);
}
@media (min-width: 1080px) {
  .elementor-column.wb-pcard.is-featured > .elementor-widget-wrap,
  .elementor-column.wb-pcard.is-featured > .elementor-element-populated { transform: translateY(-12px); }
  .elementor-column.wb-pcard.is-featured:hover > .elementor-widget-wrap,
  .elementor-column.wb-pcard.is-featured:hover > .elementor-element-populated { transform: translateY(-16px); }
}

/* The reusable .wb-card--glow modifier — apply via Elementor's Advanced →
   CSS Classes field on ANY column to give it the same gold glow.
   Doesn't transform the card (so it composes safely with .is-featured
   and stacked layouts). */
.elementor-column.wb-pcard.wb-card--glow > .elementor-widget-wrap,
.elementor-column.wb-pcard.wb-card--glow > .elementor-element-populated {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBE9 100%);
  border-color: #F3E8AF;
  box-shadow: 0 10px 28px -16px rgba(17,45,30,0.18);
}

/* Reset Elementor's widget defaults so each piece reads natively. */
.elementor-column.wb-pcard .elementor-widget {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.elementor-column.wb-pcard .elementor-widget-container { padding: 0 !important; }

/* ---- Badge (top-pinned pill) ---- */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__badge-el { position: static; }
.elementor-column.wb-pcard .elementor-widget.wb-pcard__badge-el .elementor-heading-title {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17,45,30,0.92);
  color: var(--color-cream);
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(243,232,175,0.30);
  white-space: nowrap;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,0.30);
  margin: 0;
}
.elementor-column.wb-pcard.is-featured .elementor-widget.wb-pcard__badge-el .elementor-heading-title,
.elementor-column.wb-pcard.wb-card--glow .elementor-widget.wb-pcard__badge-el .elementor-heading-title {
  background: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 100%);
  color: var(--color-green);
  border-color: rgba(17,45,30,0.20);
}

/* ---- Title ---- */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__name-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-green) !important;
  margin: 0 0 0.25rem !important;
  text-align: center;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__name-el .elementor-heading-title em {
  font-style: italic;
  font-weight: 100;
}

/* ---- Subtitle ---- */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__sub-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 1rem !important;
  color: rgba(17,45,30,0.65) !important;
  margin: 0 0 1rem !important;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(17,45,30,0.10);
}

/* ---- Price + period + savings (stacked block) ---- */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__price-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2.6rem, 4.2vw, 3.6rem) !important;
  line-height: 1 !important;
  color: var(--color-green) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__period-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.6) !important;
  margin: 0.5rem 0 0 !important;
  text-align: center;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__save-el { width: auto !important; align-self: center; }
.elementor-column.wb-pcard .elementor-widget.wb-pcard__save-el .elementor-heading-title {
  display: inline-block;
  background: rgba(243,232,175,0.55);
  color: var(--color-green) !important;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  margin: 0.5rem auto 0 !important;
}

/* ---- Description (Commuters Sans per brand rule: headings IvyPresto,
   everything else Commuters Sans) ---- */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__desc-el,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__desc-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: rgba(17,45,30,0.80) !important;
  margin: 0 !important;
  text-align: center;
}

/* ---- Features list (Icon List → check rows) ----
   IMPORTANT: This widget has `flex: 1 1 auto` so it absorbs the
   leftover vertical space inside the card. This is the ONE thing that
   reliably pushes the CTA + note to the bottom of every card,
   regardless of how Elementor handles the column/widget-wrap chain
   underneath. It is INVISIBLE — the icon-list inside has its own
   natural height and never stretches. The extra space appears below
   the list items, inside the widget, where there is no background or
   border. DO NOT REMOVE — this is the only mechanism keeping the
   buttons aligned across cards with different content lengths. */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__features-el {
  flex: 1 1 auto !important;
}

.elementor-column.wb-pcard .elementor-widget.wb-pcard__features-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__features-el .elementor-icon-list-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: var(--color-green) !important;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__features-el .elementor-icon-list-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-green) !important;
  opacity: 0.85;
  font-size: 12px !important;
}
.elementor-column.wb-pcard.is-featured .elementor-widget.wb-pcard__features-el .elementor-icon-list-icon,
.elementor-column.wb-pcard.wb-card--glow .elementor-widget.wb-pcard__features-el .elementor-icon-list-icon {
  color: #b89426 !important;
  opacity: 1;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__features-el .elementor-icon-list-icon i { color: inherit !important; }
.elementor-column.wb-pcard .elementor-widget.wb-pcard__features-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  padding-left: 0 !important;
}

/* ---- CTA button ---- */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el { margin-top: auto !important; }
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-widget-container { text-align: center; }
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el a.elementor-button,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 1rem 1.5rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
/* UNIFIED CTA TREATMENT — solid full-width pill buttons that anchor at
   the bottom of every card (margin-top: auto above). Two visual variants:
     • Non-featured cards → deep-green pill with cream text
     • Featured / glow card → soft gold gradient pill with black text
   No bleed/halo outside the pill, no hover transform, no inner-ring. */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-widget-container {
  text-align: center !important;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el a.elementor-button,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-button-link {
  display: block !important;
  width: 100% !important;
  background: none !important;
  background-image: none !important;
  color: var(--color-cream) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 0.95rem 0.55rem !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el a.elementor-button:hover,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el a.elementor-button:focus,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-button-link:hover,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-button-link:focus {
  background: transparent !important;
  color: var(--color-cream) !important;

}
/* Featured / glow card (One Month Pass) — solid soft gold pill, black
   text. SOLID color (not a gradient) so there's no visible inner edge
   inside the pill. */
/* PRICING-CARD CTA BUTTON — transparent text-only treatment.
   The "outer ring" (the pricing-card frame) is the only thing that
   changes color when the admin picks a different Most Popular card.
   The "inner ring" (the actual button pill) is fully transparent —
   no background, no border, no shadow — so all you see is the
   button text. Only the TEXT COLOR changes based on whether this
   card is the dropdown-selected one or not. */
/* PRICING-CARD CTA BUTTON — transparent text-only treatment.
   The "outer ring" (the pricing-card frame) is the only thing that
   swaps gold/white when the admin picks a different Most Popular card.
   The "inner ring" (the actual button pill) is fully transparent on
   EVERY card regardless of selection — no background, no border, no
   shadow, no animation. Only the text color changes per slug
   (handled by the per-slug rule below: One Month=black,
   Annual/Elite=#F3E8AF). */
.elementor-column.wb-pcard.wb-card--glow .elementor-widget.wb-pcard__cta-el a.elementor-button,
.elementor-column.wb-pcard.wb-card--glow .elementor-widget.wb-pcard__cta-el .elementor-button-link,
.elementor-column.wb-pcard.is-featured .elementor-widget.wb-pcard__cta-el a.elementor-button,
.elementor-column.wb-pcard.is-featured .elementor-widget.wb-pcard__cta-el .elementor-button-link,
:is(
  body.wb-pricing-featured-annual    .wb-pcard--annual,
  body.wb-pricing-featured-one-month .wb-pcard--one-month,
  body.wb-pricing-featured-elite     .wb-pcard--elite
) .elementor-widget.wb-pcard__cta-el a.elementor-button,
:is(
  body.wb-pricing-featured-annual    .wb-pcard--annual,
  body.wb-pricing-featured-one-month .wb-pcard--one-month,
  body.wb-pricing-featured-elite     .wb-pcard--elite
) .elementor-widget.wb-pcard__cta-el .elementor-button-link {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
.elementor-column.wb-pcard.wb-card--glow .elementor-widget.wb-pcard__cta-el a.elementor-button:hover,
.elementor-column.wb-pcard.wb-card--glow .elementor-widget.wb-pcard__cta-el .elementor-button-link:hover,
.elementor-column.wb-pcard.is-featured .elementor-widget.wb-pcard__cta-el a.elementor-button:hover,
.elementor-column.wb-pcard.is-featured .elementor-widget.wb-pcard__cta-el .elementor-button-link:hover,
:is(
  body.wb-pricing-featured-annual    .wb-pcard--annual,
  body.wb-pricing-featured-one-month .wb-pcard--one-month,
  body.wb-pricing-featured-elite     .wb-pcard--elite
) .elementor-widget.wb-pcard__cta-el a.elementor-button:hover,
:is(
  body.wb-pricing-featured-annual    .wb-pcard--annual,
  body.wb-pricing-featured-one-month .wb-pcard--one-month,
  body.wb-pricing-featured-elite     .wb-pcard--elite
) .elementor-widget.wb-pcard__cta-el .elementor-button-link:hover {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* NON-SELECTED cards CTA → also transparent, no border, no shadow,
   no animation. Overrides the baked-in .wb-btn--green that would
   otherwise paint a solid green pill on these cards. */
:is(
  body.wb-pricing-featured-annual    .wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-featured-one-month .wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-featured-elite     .wb-pcard:not(.wb-pcard--elite),
  body.wb-pricing-featured-none      .wb-pcard
) .elementor-widget.wb-pcard__cta-el a.elementor-button,
:is(
  body.wb-pricing-featured-annual    .wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-featured-one-month .wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-featured-elite     .wb-pcard:not(.wb-pcard--elite),
  body.wb-pricing-featured-none      .wb-pcard
) .elementor-widget.wb-pcard__cta-el .elementor-button-link {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
:is(
  body.wb-pricing-featured-annual    .wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-featured-one-month .wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-featured-elite     .wb-pcard:not(.wb-pcard--elite),
  body.wb-pricing-featured-none      .wb-pcard
) .elementor-widget.wb-pcard__cta-el a.elementor-button:hover,
:is(
  body.wb-pricing-featured-annual    .wb-pcard:not(.wb-pcard--annual),
  body.wb-pricing-featured-one-month .wb-pcard:not(.wb-pcard--one-month),
  body.wb-pricing-featured-elite     .wb-pcard:not(.wb-pcard--elite),
  body.wb-pricing-featured-none      .wb-pcard
) .elementor-widget.wb-pcard__cta-el .elementor-button-link:hover {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* PER-CARD CTA TEXT COLORS (HARDCODED) — these override the
   dropdown-driven body-class rules above so each card always reads with
   its intended text color, regardless of which card is currently
   marked Most Popular:
     • One Month Pass        → BLACK
     • Signature Annual      → GOLD (#b89426)
     • Elite Membership      → GOLD (#b89426)
   Specificity (0,6,1) is one class higher than the body-class rules
   (0,5,2) so these always win. Both normal + hover handled. */
body .elementor-column.wb-pcard.wb-pcard--one-month .elementor-element.elementor-widget.wb-pcard__cta-el a.elementor-button,
body .elementor-column.wb-pcard.wb-pcard--one-month .elementor-element.elementor-widget.wb-pcard__cta-el .elementor-button-link,
body .elementor-column.wb-pcard.wb-pcard--one-month .elementor-element.elementor-widget.wb-pcard__cta-el a.elementor-button:hover,
body .elementor-column.wb-pcard.wb-pcard--one-month .elementor-element.elementor-widget.wb-pcard__cta-el .elementor-button-link:hover {
  color: #000 !important;
}
body .elementor-column.wb-pcard.wb-pcard--annual .elementor-element.elementor-widget.wb-pcard__cta-el a.elementor-button,
body .elementor-column.wb-pcard.wb-pcard--annual .elementor-element.elementor-widget.wb-pcard__cta-el .elementor-button-link,
body .elementor-column.wb-pcard.wb-pcard--annual .elementor-element.elementor-widget.wb-pcard__cta-el a.elementor-button:hover,
body .elementor-column.wb-pcard.wb-pcard--annual .elementor-element.elementor-widget.wb-pcard__cta-el .elementor-button-link:hover,
body .elementor-column.wb-pcard.wb-pcard--elite .elementor-element.elementor-widget.wb-pcard__cta-el a.elementor-button,
body .elementor-column.wb-pcard.wb-pcard--elite .elementor-element.elementor-widget.wb-pcard__cta-el .elementor-button-link,
body .elementor-column.wb-pcard.wb-pcard--elite .elementor-element.elementor-widget.wb-pcard__cta-el a.elementor-button:hover,
body .elementor-column.wb-pcard.wb-pcard--elite .elementor-element.elementor-widget.wb-pcard__cta-el .elementor-button-link:hover {
  color: #F3E8AF !important;
}

/* Clear every inner Elementor button element so no nested span draws
   its own background, border, padding, or shadow — this is what
   causes the "inner ring" appearance inside the pill. */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-button-content-wrapper,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-button-text,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-button-icon,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-align-icon-right,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-align-icon-left {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  text-decoration: none !important;
}
.elementor-column.wb-pcard .elementor-widget.wb-pcard__cta-el .elementor-button-icon:empty { display: none; }

/* ---- Note (small print under CTA) ---- */
.elementor-column.wb-pcard .elementor-widget.wb-pcard__note-el,
.elementor-column.wb-pcard .elementor-widget.wb-pcard__note-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  color: rgba(17,45,30,0.55) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Green ghost button variant — used on the non-featured (outer) cards so
   the featured card's gold CTA stays the dominant call. */
.wb-btn--green {
  background: var(--color-green);
  color: var(--color-cream);
  border: 1px solid var(--color-green);
  box-shadow: 0 8px 18px -10px rgba(17,45,30,0.45);
}
.wb-btn--green:hover {
  background: #1a3d2e;
  border-color: #1a3d2e;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -14px rgba(17,45,30,0.55);
}

/* ==========================================================================
   RIGHT NOW… — luxury minimalist refresh
   - Paper-texture background fabric
   - Black body copy + black eyebrow (high-contrast, editorial)
   - More breathing room between bullets, thinner separators
   - Native heading + HTML bullets + native button — built in Elementor
   ========================================================================== */
.wb-hh--rightnow {
  /* Paper-texture fabric. !important to win Elementor per-page CSS. */
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/paper_texture_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #000;
  /* Tighter top/bottom rhythm than the old clamp(4–6rem). */
  padding: clamp(3rem, 6vw, 4.5rem) 1.25rem !important;
}
.wb-hh-rightnow__head { margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }

/* 2-column grid — wider on desktop, more generous gutter for editorial
   white-space. */
.wb-hh-rightnow__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 4.5rem;
  max-width: 62rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .wb-hh-rightnow__cols { grid-template-columns: 1fr 1fr; } }

.wb-hh-rightnow__col {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wb-hh-rightnow__col li {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.5rem;
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.98rem, 1.3vw, 1.05rem);
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: #000;
  /* Thin hairline separator — luxe editorial divider, not heavy border. */
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.wb-hh-rightnow__col li:last-child { border-bottom: 0; }
.wb-hh-rightnow__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.6em;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #E8DB96, #F3E8AF);
}

/* Elementor native-widget bridges */

/* Outer column flex-stack: eyebrow → bullets → CTA, all centered. */
.elementor-section.wb-hh--rightnow > .elementor-container > .elementor-column > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(1.5rem, 3vw, 2rem) !important;
  max-width: 64rem;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
}
.elementor-section.wb-hh--rightnow .elementor-widget-wrap > .elementor-element {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}

/* Eyebrow "Right now…" — black, small caps editorial */
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-eyebrow-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-eyebrow-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.005em !important;
  color: #000 !important;
  margin: 0 !important;
  text-align: center;
}

/* Inner section split (2 columns 50/50) with editorial gutter. */
.elementor-section.wb-hh-rn-split-el > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.5rem 4.5rem !important;
  max-width: 62rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
@media (min-width: 768px) {
  .elementor-section.wb-hh-rn-split-el > .elementor-container {
    grid-template-columns: 1fr 1fr !important;
  }
}
.elementor-section.wb-hh-rn-split-el .elementor-column.wb-hh-rn-col {
  width: 100% !important;
}
.elementor-section.wb-hh-rn-split-el .elementor-column.wb-hh-rn-col > .elementor-widget-wrap {
  padding: 0 !important;
}

/* Native Icon List → styled as our original bullet column. The Font
   Awesome icon Elementor renders is HIDDEN; the gold dot comes from a
   CSS ::before pseudo-element so the visual is the same as the legacy
   <ul>/<li> design even when the markup is Elementor's. */
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-list-el .elementor-widget-container {
  padding: 0;
}
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-list-el .elementor-icon-list-item {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.5rem !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.98rem, 1.3vw, 1.05rem);
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: #000;
  align-items: flex-start !important;
}
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-list-el .elementor-icon-list-item:last-child {
  border-bottom: 0;
}
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-list-el .elementor-icon-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7em;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #000;
}
/* Hide Elementor's icon container (we use ::before for the dot). */
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-list-el .elementor-icon-list-icon {
  display: none !important;
}
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-list-el .elementor-icon-list-text {
  color: #000 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  padding-left: 0 !important;
}

/* CTA — gold glow-shimmer button override (same as hero) */
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-cta-el .elementor-widget-container {
  padding: 0;
  text-align: center;
}
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-cta-el a.elementor-button,
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.05rem 2rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-cta-el a.elementor-button:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-section.wb-hh--rightnow .elementor-widget.wb-hh-rn-cta-el .elementor-button-icon:empty { display: none; }

/* ==========================================================================
   Section-to-section premium handoff (very gentle separators on light bgs)
   ========================================================================== */
.wb-hh--rightnow + .wb-hh--intro,
.wb-hh--pillars + .wb-hh--reason,
.wb-hh--reason + .wb-hh--helps {
  /* no-op — kept so future additions have a hook */
}

/* Smooth scrolling default for anchor jumps (header CTA + "#choose-level") */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   Elementor full-bleed bridge
   Any Elementor section the builder emits with the .wb-fullbleed-row
   class is intended to host one of our .wb-hh-- sections. Those carry
   their own full-bleed background, padding, min-height etc — Elementor's
   default .elementor-container max-width: 1280px and column padding
   would clip the bg image and create a visible "darker rectangle"
   border. This block releases the container constraints. We leave the
   section's own padding untouched (so .wb-hh--hero, .wb-hh--path, …
   apply their own top/bottom space).
   ========================================================================== */
.elementor-section.wb-fullbleed-row {
  margin: 0 !important;
}
.elementor-section.wb-fullbleed-row > .elementor-container,
.elementor-section.wb-fullbleed-row.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-section.wb-fullbleed-row .elementor-column {
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-section.wb-fullbleed-row .elementor-widget-html,
.elementor-section.wb-fullbleed-row .elementor-widget-html .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   HERO — NATIVE-WIDGET BRIDGES
   When the hero section is built from Elementor's image/button/heading
   widgets, each widget is wrapped in .elementor-widget +
   .elementor-widget-container divs. These bridges:
     1. Turn the column's .elementor-widget-wrap into our hero flex
        column (replaces .wb-hh--hero__inner).
     2. Style the image, button, and heading widgets so they look
        identical to the PHP-rendered hero.
   ========================================================================== */

/* (1) Column widget-wrap behaves like .wb-hh--hero__inner. */
.elementor-section.wb-hh--hero > .elementor-container > .elementor-column > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  /* Tight base gap — covers image → CTAs spacing. The CTAs → headline
     gap is overridden below to feel tighter still. */
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto !important;
  text-align: center;
  position: relative;
  z-index: 1;
}
/* Small breathing room above the headline — sits a touch below the
   CTAs row so the editorial copy doesn't feel pinned to the buttons. */
.elementor-section.wb-hh--hero .wb-hh-hero-ctas-row + .elementor-element.wb-hh-hero-title-el {
  margin-top: 1.25rem !important;
}
/* Each Elementor widget inside the hero is content-sized, not full-row. */
.elementor-section.wb-hh--hero .elementor-widget-wrap > .elementor-element {
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
}

/* (2a) Image widget — rich-in-all-areas.png */
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-art-el {
  width: 100% !important;
  max-width: 1080px;
}
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-art-el .elementor-widget-container {
  padding: 0;
  text-align: center;
}
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-art-el img {
  width: min(100%, 960px);
  height: auto;
  margin: 0 auto;
  display: block;
  animation: wb-hero-art-rise 1.4s cubic-bezier(0.2,0.65,0.2,1) both;
}

/* (2a-2) CTA inner-section row — wraps the Become a Member button and
   the Choose Your Path → link in a flex row.

   Elementor's default tablet stylesheet forces .elementor-col-50 to
   100% width at ≤1024px (and ≤767px on mobile), which is why the two
   columns were stacking onto their own lines on any sub-desktop screen.
   The overrides below pin both columns to auto-width via stronger
   selectors + !important at every breakpoint above 600px. */
.elementor-section.wb-hh--hero .wb-hh-hero-ctas-row {
  width: 100% !important;
  max-width: 32rem !important;
  margin: 0 auto !important;
}
.elementor-section.wb-hh--hero .wb-hh-hero-ctas-row > .elementor-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
/* Force column auto-width at ALL viewport sizes — beats Elementor's own
   tablet/mobile .elementor-col-50 → 100% override. */
.elementor-section.wb-hh--hero .wb-hh-hero-ctas-row .elementor-column.wb-hh-hero-ctas-col,
.elementor-section.wb-hh--hero .wb-hh-hero-ctas-row .elementor-column.elementor-col-50.wb-hh-hero-ctas-col {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.elementor-section.wb-hh--hero .wb-hh-hero-ctas-col > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  max-width: none !important;
}
.elementor-section.wb-hh--hero .wb-hh-hero-ctas-col .elementor-widget {
  margin: 0 !important;
  width: auto !important;
}

/* Mobile (≤600px): NOW stack the row vertically — both buttons get
   their own row. Same overrides, but flex-direction flips. */
@media (max-width: 600px) {
  .elementor-section.wb-hh--hero .wb-hh-hero-ctas-row > .elementor-container {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }
  .elementor-section.wb-hh--hero .wb-hh-hero-ctas-row .elementor-column.wb-hh-hero-ctas-col,
  .elementor-section.wb-hh--hero .wb-hh-hero-ctas-row .elementor-column.elementor-col-50.wb-hh-hero-ctas-col {
    width: 100% !important;
  }
}

/* (2b) Button widget — Become a Member (gold glow-shimmer) */
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-cta-primary-el .elementor-widget-container {
  padding: 0;
}
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-cta-primary-el .elementor-button-wrapper {
  display: inline-flex;
}
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-cta-primary-el a.elementor-button,
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-cta-primary-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.05rem 2rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer;
}
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-cta-primary-el a.elementor-button:hover,
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-cta-primary-el .elementor-button-link:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-cta-primary-el .elementor-button-icon:empty {
  display: none;
}
/* The button text inside Elementor's button widget — keep the same
   letter-spacing as the rest of our .wb-btn--gold treatment. */
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-cta-primary-el .elementor-button-text {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}

/* (2c) Heading widget — h1 italic-serif */
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-title-el .elementor-widget-container {
  padding: 0;
}
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.85rem, 4vw, 3.6rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.008em !important;
  color: var(--color-cream) !important;
  max-width: 26ch;
  margin: 0 auto !important;
  text-align: center;
}
.elementor-section.wb-hh--hero .elementor-widget.wb-hh-hero-title-el .elementor-heading-title em {
  font-style: italic !important;
  font-weight: 100 !important;
}

/* ==========================================================================
   TESTIMONIALS — NATIVE-WIDGET BRIDGES (preserves original split layout)

   The section is built in Elementor as:
     outer section (.wb-hh--testimonials)
       outer column (100%)
         inner section (.wb-hh-tm__elem-layout)  ← the split-grid host
           left column (.wb-hh-tm__side)         ← header text + CTAs + nav
             heading widget (eyebrow)
             heading widget (title)
             text-editor widget (lede)
             shortcode (testimonials-side-body — CTAs + nav)
           right column (.wb-hh-tm__stage-col)   ← rotating cards
             shortcode (testimonials-stage — 12 cards)

   The rules below:
     (A) Outer column lets the inner section span the full content width
     (B) Inner section's .elementor-container becomes our split grid
     (C) Left/right columns auto-shrink to content (no width quirks)
     (D) Heading + text-editor widget bridges map to .wb-hh-tm__title /
         .wb-hh__eyebrow / .wb-hh-tm__lede tokens
   ========================================================================== */

/* (A) Constrain the outer column's widget-wrap to our standard 1280px
       max-width, centered. */
.elementor-section.wb-hh--testimonials > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* (B) Make the inner section's .elementor-container behave as our split
       grid (single column on mobile, 40/60 on desktop). */
.elementor-section.wb-hh-tm__elem-layout {
  width: 100%;
}
.elementor-section.wb-hh-tm__elem-layout > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(2.5rem, 5vw, 4rem) !important;
  /* Pin both columns to the TOP — keeps the left header + nav fixed
     at the section start regardless of how tall the right review card
     becomes for long testimonials. */
  align-items: start !important;
  max-width: 100% !important;
  padding: 0 !important;
}
@media (min-width: 1024px) {
  .elementor-section.wb-hh-tm__elem-layout > .elementor-container {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    gap: clamp(3rem, 6vw, 5rem) !important;
  }
}

/* (C) Columns inside the split — auto-width within grid cell. */
.elementor-section.wb-hh-tm__elem-layout .elementor-column {
  width: 100% !important;
  min-width: 0;
}
/* Left column inherits the legacy .wb-hh-tm__side flex column. */
.elementor-section.wb-hh-tm__elem-layout .elementor-column.wb-hh-tm__side > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  text-align: left;
}
@media (max-width: 1023px) {
  .elementor-section.wb-hh-tm__elem-layout .elementor-column.wb-hh-tm__side > .elementor-widget-wrap {
    align-items: center !important;
    text-align: center;
  }
}
.elementor-section.wb-hh-tm__elem-layout .elementor-column.wb-hh-tm__side .elementor-widget {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}
/* Exception — the "Become a Member" CTA button widget hugs its text
   instead of stretching to the column width. This overrides the
   width:100% rule above for just that one button widget. */
.elementor-section.wb-hh-tm__elem-layout .elementor-column.wb-hh-tm__side .elementor-widget.wb-hh-tm-cta-el {
  width: auto !important;
  max-width: max-content !important;
}
/* Right column: shortcode-rendered .wb-hh-tm__stage already has its own
   grid/positioning CSS — just kill Elementor's column padding. */
.elementor-section.wb-hh-tm__elem-layout .elementor-column.wb-hh-tm__stage-col > .elementor-widget-wrap {
  padding: 0 !important;
}

/* (D) Heading + text-editor bridges — match the original .wb-hh-tm__*
       typography exactly. */

/* Eyebrow "Member reviews" — brand cream-gold at full opacity */
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-eyebrow-el .elementor-widget-container {
  padding: 0;
}
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: #F3E8AF !important;
  margin: 0 !important;
  text-align: inherit;
}

/* Title "Real Stories from our Members" — cream-gold on green stage. */
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-title-el .elementor-widget-container {
  padding: 0;
}
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.012em !important;
  color: #F3E8AF !important;
  margin: 0 !important;
  text-align: inherit;
}
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-title-el .elementor-heading-title em {
  font-style: italic !important;
  font-weight: 100 !important;
  color: #F3E8AF !important;
}

/* Lede paragraph — cream-gold to match eyebrow + title on the green stage. */
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-lede-el .elementor-widget-container {
  padding: 0;
  max-width: 32rem;
  color: #F3E8AF !important;
}
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-lede-el,
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-lede-el .elementor-widget-container,
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-lede-el p,
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-lede-el .elementor-text-editor,
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-lede-el .elementor-text-editor p {
  color: #F3E8AF !important;
}
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-lede-el p {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  text-align: inherit;
}

/* "Become a Member" CTA — bridges the native Elementor Button widget
   to the existing .wb-btn--gold visual treatment (gold gradient pill +
   glowShimmer animation). Width hugs the text instead of going full
   bleed — the pill auto-sizes to its content like a normal CTA. */
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-cta-el .elementor-widget-container {
  padding: 0 !important;
  text-align: left;
}
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-cta-el a.elementor-button,
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  text-decoration: none !important;
  /* Kill the default Elementor button background (the light-green
     `--e-global-color-accent` fill that paints on the inner <a>).
     The gold pill is on the OUTER widget div via .wb-btn--gold; the
     inner link should be transparent so no green ring shows through. */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  /* Size + typography — chunkier than Elementor's .elementor-size-lg
     default. Bigger font + more vertical padding for stronger
     presence to match the reference design. */
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.95rem 0.55rem !important;
}
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-cta-el .elementor-button-content-wrapper,
.elementor-section.wb-hh--testimonials .elementor-widget.wb-hh-tm-cta-el .elementor-button-text {
  background: none !important;
  color: black !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* =====a=====================================================================
   AI — NATIVE-WIDGET BRIDGES ("Wealth Being® AI")
   Section is built in Elementor with:
     - Native heading widget for eyebrow + title
     - Native text-editor widgets for lede + closing line
     - Native button widget for "Become a Member"
     - Shortcode for the 2 Voice/Text cards
     - Shortcode for the looping video
   Each bridge below maps the Elementor wrappers onto the original
   .wb-hh-ai__* tokens so the design stays pixel-identical.
   ========================================================================== */

/* Outer column constrains content to 1200px (matches .wb-hh-ai__layout). */
.elementor-section.wb-hh--ai > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* Inner section becomes the .wb-hh-ai__layout grid (70/30 on desktop). */
.elementor-section.wb-hh-ai-layout-el > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(2.5rem, 5vw, 4.5rem) !important;
  align-items: center !important;
  max-width: 100% !important;
  padding: 0 !important;
}
@media (min-width: 1024px) {
  .elementor-section.wb-hh-ai-layout-el > .elementor-container {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) !important;
    gap: clamp(3rem, 5vw, 5rem) !important;
  }
}
.elementor-section.wb-hh-ai-layout-el .elementor-column {
  width: 100% !important;
  min-width: 0;
}

/* LEFT column — copy widgets stacked, left-aligned. */
.elementor-section.wb-hh-ai-layout-el .elementor-column.wb-hh-ai__copy > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1023px) {
  .elementor-section.wb-hh-ai-layout-el .elementor-column.wb-hh-ai__copy > .elementor-widget-wrap {
    align-items: center !important;
    text-align: center;
  }
}
.elementor-section.wb-hh-ai-layout-el .elementor-column.wb-hh-ai__copy .elementor-widget {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}

/* Eyebrow "Wealth Being® AI" — black label per design */
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-eyebrow-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 0 1rem !important;
  text-align: inherit;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-eyebrow-el .elementor-heading-title sup {
  font-size: 0.55em;
  vertical-align: super;
}

/* Lede (text-editor) — black body copy per design */
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-lede-el .elementor-widget-container {
  padding: 0;
  max-width: 38rem;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-lede-el,
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-lede-el p,
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-lede-el .elementor-text-editor,
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-lede-el .elementor-text-editor p {
  color: #000 !important;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-lede-el p {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
  line-height: 1.6 !important;
  margin: 0 0 1.25rem !important;
}

/* Title h2 — matches original .wb-hh-ai__title */
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-title-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.85rem, 3.6vw, 2.85rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.008em !important;
  color: var(--color-green) !important;
  margin: 0 0 2rem !important;
  text-align: inherit;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-title-el .elementor-heading-title em {
  font-style: italic !important;
  font-weight: 100 !important;
}

/* Cards shortcode widget — full-width slot, no extra padding */
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-cards-el .elementor-widget-container {
  padding: 0;
  width: 100%;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-cards-el { width: 100% !important; }

/* Closing line (text-editor) — italic-serif footer copy. Spacing is
   done with PADDING (not margin) on the widget container, because the
   parent .elementor-widget zeroes margins and our previous margin
   clamp was being silently ignored. */
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-footline-el {
  padding-top: clamp(0.92rem, 1.84vw, 1.61rem) !important;
  margin-top: 0 !important;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-footline-el .elementor-widget-container {
  padding: 0 !important;
  max-width: 38rem;
  margin: 0 !important;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-footline-el,
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-footline-el p,
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-footline-el .elementor-text-editor,
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-footline-el .elementor-text-editor p {
  color: #000 !important;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-footline-el p {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* CTA button — inherits wb-btn--gold; bridge fights Elementor's button defaults.
   Top padding goes on the outer .elementor-widget (not the container) to match the
   proven intro-cta pattern; .elementor-widget zeroes margins so we use padding. */
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-cta-el {
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem) !important;
  margin-top: 0 !important;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-cta-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-cta-el a.elementor-button,
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.05rem 2rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-cta-el a.elementor-button:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-cta-el .elementor-button-icon:empty { display: none; }

/* RIGHT column — video shortcode, just no padding/margin tweaks. */
.elementor-section.wb-hh-ai-layout-el .elementor-column.wb-hh-ai__video-col > .elementor-widget-wrap {
  padding: 0 !important;
}
.elementor-section.wb-hh--ai .elementor-widget.wb-hh-ai-video-el .elementor-widget-container {
  padding: 0;
}

/* ==========================================================================
   INTRO — NATIVE-WIDGET BRIDGES ("A moment of honesty")
   Section is built in Elementor as: Heading + Text-Editor + HTML (OR
   divider) + Text-Editor + Button. Each bridge below maps Elementor's
   wrappers onto the legacy .wb-hh--intro tokens so the editorial italic-
   serif rhythm + OR divider styling stay identical to the PHP version.
   ========================================================================== */

/* Outer column constrained to the narrow editorial width
   (matches .wb-hh__inner--narrow = 880px). */
.elementor-section.wb-hh--intro > .elementor-container > .elementor-column > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  max-width: 880px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
}
.elementor-section.wb-hh--intro .elementor-widget-wrap > .elementor-element {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}

/* Eyebrow "A moment of honesty" — small editorial label, black on light bg. */
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-eyebrow-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 0 1.5rem !important;
  text-align: center;
}

/* Top + bottom paragraph blocks — italic IvyPresto serif, black ink */
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-top-el .elementor-widget-container,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-bottom-el .elementor-widget-container {
  padding: 0;
  max-width: 48rem;
  margin: 0 auto;
}
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-top-el,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-top-el p,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-top-el .elementor-text-editor p,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-bottom-el,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-bottom-el p,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-bottom-el .elementor-text-editor p {
  color: #000 !important;
}
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-top-el p,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-bottom-el p {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem) !important;
  line-height: 1.55 !important;
  margin: 0 0 1.5rem !important;
  text-align: center;
}
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-top-el p:last-child,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-bottom-el p:last-child {
  margin-bottom: 0 !important;
}

/* OR divider — sits in its own HTML widget, preserve original styling */
.elementor-section.wb-hh--intro .wb-hh-intro__divider-el {
  margin: clamp(2rem, 4vw, 3rem) auto !important;
}

/* CTA button — extra top breathing room above the gold pill so it
   doesn't crowd the closing paragraph. Padding is applied to BOTH the
   outer .elementor-widget AND the inner .elementor-widget-container
   so Elementor's wrapper stack can't eat it; the !important wins
   Elementor's per-page generated CSS too. */
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-cta-el {
  padding-top: clamp(3rem, 5vw, 4rem) !important;
  margin-top: 0 !important;
}
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-cta-el .elementor-widget-container {
  padding: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-cta-el a.elementor-button,
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.05rem 2rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-cta-el a.elementor-button:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-section.wb-hh--intro .elementor-widget.wb-hh-intro-cta-el .elementor-button-icon:empty { display: none; }

/* ==========================================================================
   PILLARS — NATIVE-WIDGET BRIDGES
   Built in Elementor as a single column section:
     1. Heading  — eyebrow "The four pillars"
     2. Heading  — title  "Become Rich in All Areas of Your Life"
     3. HTML     — 4-card grid (from pillars-cards partial)
     4. Button   — "Become a Member"
   Paper-texture background, dark editorial type.
   ========================================================================== */

/* Section background — paper texture over stone. !important wins Elementor
   per-page generated CSS. */
.elementor-section.wb-hh--pillars {
  background-color: var(--color-bg-stone) !important;
  background-image: url("../images/paper_texture_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* Release Elementor's column inner width so the 80rem cards grid breathes. */
.elementor-section.wb-hh--pillars > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem !important;
  width: 100%;
}

/* Eyebrow "The four pillars" — small editorial label, dark on light bg. */
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-eyebrow-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 0 1rem !important;
  text-align: center;
}

/* Title "Become Rich..." — IvyPresto display, green ink, em → italic. */
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-title-el .elementor-widget-container {
  padding: 0;
  max-width: 56rem;
  margin: 0 auto calc(clamp(3.5rem, 7vw, 5rem) + 10px);
}
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2rem, 4.6vw, 4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-title-el .elementor-heading-title em {
  font-style: italic;
  font-weight: 100;
}

/* CARDS GRID — inner section becomes a real CSS grid that wraps 2×2.
   Elementor renders 4 columns at 25% by default; we override the
   container to be a grid so cards stack 1-up on mobile and 2-up on
   tablet+. Each column is its own card frame. */
.elementor-inner-section.wb-hh-pillars-grid-el {
  margin-bottom: 0 !important;
  width: 100%;
}
.elementor-inner-section.wb-hh-pillars-grid-el > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  max-width: 80rem;
  margin: 0 auto;
  flex-wrap: nowrap !important;
}
@media (min-width: 768px) {
  .elementor-inner-section.wb-hh-pillars-grid-el > .elementor-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Each card column = the white rounded card frame. The padding lives
   on the inner .elementor-widget-wrap so all 3 widgets sit inside it
   with a consistent gutter. */
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-column.wb-hh-pillar-col {
  width: 100% !important;
  max-width: 100% !important;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-column.wb-hh-pillar-col > .elementor-element-populated,
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-column.wb-hh-pillar-col > .elementor-widget-wrap {
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.08);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  align-content: flex-start !important;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-column.wb-hh-pillar-col:hover > .elementor-element-populated,
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-column.wb-hh-pillar-col:hover > .elementor-widget-wrap {
  transform: translateY(-4px);
  border-color: rgba(243,232,175,0.6);
  box-shadow: 0 25px 50px -12px rgba(17,45,30,0.18), 0 0 0 1px rgba(243,232,175,0.35) inset;
}

/* Each widget inside the card should stretch full-width with no extra
   margin so the flex column gap controls the rhythm. */
.elementor-inner-section.wb-hh-pillars-grid-el .wb-hh-pillar-col .elementor-widget {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* HEAD ROW — numeral + brand icon, now built as a native 2-column
   inner section. Border-bottom sits on the inner section itself so it
   reads as one rule under the row, just like the original design. */
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-inner-section.wb-hh-pillar-head-el {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 1rem !important;
  border-bottom: 1px solid rgba(17,45,30,0.10);
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-inner-section.wb-hh-pillar-head-el > .elementor-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-inner-section.wb-hh-pillar-head-el .elementor-column {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-inner-section.wb-hh-pillar-head-el .elementor-column > .elementor-element-populated,
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-inner-section.wb-hh-pillar-head-el .elementor-column > .elementor-widget-wrap {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Numeral — native Heading widget, IvyPresto italic 100. */
.elementor-inner-section.wb-hh-pillar-head-el .elementor-widget.wb-hh-pillar-num-el .elementor-widget-container { padding: 0 !important; }
.elementor-inner-section.wb-hh-pillar-head-el .elementor-widget.wb-hh-pillar-num-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-style: italic !important;
  font-size: 2.5rem !important;
  line-height: 1 !important;
  color: rgba(17,45,30,0.32) !important;
  margin: 0 !important;
  display: inline-block;
}

/* Icon — native Image widget, sized to the original 52×52. */
.elementor-inner-section.wb-hh-pillar-head-el .elementor-widget.wb-hh-pillar-iconimg-el .elementor-widget-container { padding: 0 !important; }
.elementor-inner-section.wb-hh-pillar-head-el .elementor-widget.wb-hh-pillar-iconimg-el .elementor-image,
.elementor-inner-section.wb-hh-pillar-head-el .elementor-widget.wb-hh-pillar-iconimg-el .elementor-image a {
  display: inline-block;
  line-height: 0;
}
.elementor-inner-section.wb-hh-pillar-head-el .elementor-widget.wb-hh-pillar-iconimg-el img {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  object-fit: contain !important;
  display: block;
}

/* PILLAR TITLE — native Heading widget, IvyPresto serif. */
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-title-el .elementor-widget-container {
  padding: 0 !important;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  letter-spacing: 0.04em !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: left;
}

/* PILLAR BULLETS — native Icon List, styled as the original bullet column.
   Font Awesome icon is hidden, gold gradient dot comes from ::before. */
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-list-el .elementor-widget-container {
  padding: 0 !important;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-list-el .elementor-icon-list-item {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(17,45,30,0.06);
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(17,45,30,0.85);
  align-items: flex-start !important;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-list-el .elementor-icon-list-item:last-child {
  border-bottom: 0;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-list-el .elementor-icon-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #E8DB96, #F3E8AF);
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-list-el .elementor-icon-list-icon {
  display: none !important;
}
.elementor-inner-section.wb-hh-pillars-grid-el .elementor-widget.wb-hh-pillar-list-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  padding-left: 0 !important;
}

/* CTA button — gold pill. Top padding on outer .elementor-widget (proven
   pattern — .elementor-widget zeroes margins so use padding). */
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-cta-el {
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  margin-top: 0 !important;
}
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-cta-el .elementor-widget-container {
  padding: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-cta-el a.elementor-button,
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.05rem 2rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-cta-el a.elementor-button:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-section.wb-hh--pillars .elementor-widget.wb-hh-pillars-cta-el .elementor-button-icon:empty { display: none; }

/* ==========================================================================
   REASON (FIRST CARD) — NATIVE-WIDGET BRIDGES
   Section built in Elementor as a single column with:
     1. Heading  — eyebrow "The real reason"
     2. Heading  — intro headline (supports <strong> + <em>)
     3. Icon List — 8 bullets, black dots
   Background: light_background.png.
   ========================================================================== */

.elementor-section.wb-hh--reason-paper {
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* Keep the editorial column narrow + centered so the long bullet text
   never stretches to a hard-to-read width. */
.elementor-section.wb-hh--reason-paper > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
}

/* EYEBROW "The real reason" — small black editorial label. */
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 0 1rem !important;
  text-align: center;
}

/* INTRO HEADLINE — IvyPresto serif, supports inline <strong> + <em>. */
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-title-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: 52rem;
}
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.008em !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-title-el .elementor-heading-title strong { font-weight: 600; }
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-title-el .elementor-heading-title em     { font-style: italic; font-weight: 100; }

/* BULLETS — native Icon List, styled as the editorial bullet column.
   Font Awesome icon hidden; black dot via ::before. */
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-list-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-list-el .elementor-icon-list-item {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.8rem !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(17,45,30,0.08);
  font-family: "Commuters Sans", sans-serif;
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  line-height: 1.65;
  color: rgba(17,45,30,0.90);
  align-items: flex-start !important;
}
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-list-el .elementor-icon-list-item:last-child {
  border-bottom: 0;
}
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-list-el .elementor-icon-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7em;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #000;
}
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-list-el .elementor-icon-list-icon {
  display: none !important;
}
.elementor-section.wb-hh--reason-paper .elementor-widget.wb-hh-reason-paper-list-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  padding-left: 0 !important;
}

/* ==========================================================================
   REASON-SHIFT — "What must shift Now" green card on light bg
   Outer section bg: light_background.png.
   Inner card (inner-section.wb-hh-rs-card-el) has the green texture.
   ========================================================================== */

.elementor-section.wb-hh--reason-shift {
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* Constrain the outer column so the green card has the same editorial
   max-width as the legacy version. */
.elementor-section.wb-hh--reason-shift > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
}

/* GREEN CARD — inner section dressed as the rounded green container. */
.elementor-section.wb-hh--reason-shift .elementor-inner-section.wb-hh-rs-card-el {
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(243,232,175,0.20) !important;
  border-radius: 1.5rem !important;
  padding: clamp(2rem, 4vw, 3.5rem) !important;
  margin: 0 !important;
  box-shadow:
    0 0 0 1px rgba(243,232,175,0.08) inset,
    0 35px 60px -25px rgba(0,0,0,0.45);
  color: var(--color-cream);
}
.elementor-section.wb-hh--reason-shift .elementor-inner-section.wb-hh-rs-card-el > .elementor-container {
  max-width: 100%;
}
.elementor-section.wb-hh--reason-shift .elementor-inner-section.wb-hh-rs-card-el .elementor-column > .elementor-element-populated,
.elementor-section.wb-hh--reason-shift .elementor-inner-section.wb-hh-rs-card-el .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
  background: transparent !important;
}

/* EYEBROW "What must shift" — small cream editorial label. */
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(243,232,175,0.78) !important;
  margin: 0 0 0.85rem !important;
  text-align: center;
}

/* TITLE "This is what must shift Now" — cream IvyPresto, em italic. */
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-title-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
  line-height: 1.2 !important;
  color: var(--color-cream) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-title-el .elementor-heading-title em {
  font-style: italic;
  font-weight: 100;
}

/* BODY — 3 paragraphs in cream sans, centered, max-width for readability. */
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-body-el .elementor-widget-container {
  padding: 0 !important;
  max-width: 56ch;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-body-el,
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-body-el p,
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-body-el .elementor-text-editor,
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-body-el .elementor-text-editor p {
  color: rgba(243,232,175,0.92) !important;
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-body-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
  line-height: 1.7 !important;
  margin: 0 0 1.1rem !important;
  text-align: center;
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-body-el p:last-child { margin-bottom: 0 !important; }

/* CTA — gold pill, top padding on outer widget (proven pattern). */
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-cta-el {
  padding-top: clamp(1.5rem, 3vw, 2.25rem) !important;
  margin-top: 0 !important;
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-cta-el .elementor-widget-container {
  padding: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-cta-el a.elementor-button,
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.05rem 2rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-cta-el a.elementor-button:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-section.wb-hh--reason-shift .elementor-widget.wb-hh-rs-cta-el .elementor-button-icon:empty { display: none; }

/* ==========================================================================
   HELPS — "Wealth Being helps you" — NATIVE-WIDGET BRIDGES
   Section bg: green_background.png.
   Layout: 2-column split (left = copy + bullets + CTA, right = framework PNG).
   ========================================================================== */

.elementor-section.wb-hh--helps {
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-cream);
}

/* Hold the editorial column at 80rem max-width (matches legacy). */
.elementor-section.wb-hh--helps > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem !important;
  width: 100%;
}

/* SPLIT — 2-column grid: copy left, framework image right. Stacks on
   tablet/mobile. Vertical-align middle so the framework PNG sits next
   to the copy block. */
.elementor-inner-section.wb-hh-helps-split-el { width: 100% !important; margin: 0 !important; }
.elementor-inner-section.wb-hh-helps-split-el > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2.5rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
@media (min-width: 1024px) {
  .elementor-inner-section.wb-hh-helps-split-el > .elementor-container {
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 4rem !important;
  }
}
.elementor-inner-section.wb-hh-helps-split-el .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
}
.elementor-inner-section.wb-hh-helps-split-el .elementor-column > .elementor-element-populated,
.elementor-inner-section.wb-hh-helps-split-el .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
  background: transparent !important;
}

/* EYEBROW "Wealth Being helps you" — small cream label, left-aligned. */
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(243,232,175,0.78) !important;
  margin: 0 0 1rem !important;
  text-align: left;
}

/* TITLE — IvyPresto display, cream, em italic. */
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-title-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 0 0.5rem;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2rem, 4.6vw, 4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-cream) !important;
  margin: 0 !important;
  text-align: left;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-title-el .elementor-heading-title em {
  font-style: italic;
  font-weight: 100;
}

/* BENEFIT BULLETS — native Icon List styled as the cream pill rows. */
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-list-el .elementor-widget-container {
  padding: 0 !important;
  margin: 1.75rem 0 2rem;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-list-el .elementor-icon-list-item {
  position: relative;
  padding: 1rem 1rem 1rem 2.25rem !important;
  margin: 0 !important;
  background: rgba(243,232,175,0.05);
  border: 1px solid rgba(243,232,175,0.16);
  border-radius: 0.85rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(243,232,175,0.92);
  align-items: flex-start !important;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-list-el .elementor-icon-list-item::before {
  content: "→";
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--color-cream);
  font-family: "Commuters Sans", sans-serif;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-list-el .elementor-icon-list-icon {
  display: none !important;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-list-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  padding-left: 0 !important;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-list-el .elementor-icon-list-text strong {
  color: var(--color-cream);
  font-weight: 600;
}

/* CTA — gold pill, left-aligned (column is text-left), padding on outer
   widget so margin gets respected. */
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-cta-el {
  margin-top: 0 !important;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-cta-el .elementor-widget-container {
  padding: 0 !important;
  text-align: left;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-cta-el a.elementor-button,
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.05rem 2rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  background-color: transparent !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-cta-el a.elementor-button:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-cta-el .elementor-button-icon:empty { display: none; }

/* FRAMEWORK IMAGE — full-width inside its column, no padding tricks. */
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-img-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--helps .elementor-widget.wb-hh-helps-img-el img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* ==========================================================================
   JOIN — "Join Wealth Being Now to:" + "Join right now if…"
   Section bg: light_background.png. Dark editorial type.
   ========================================================================== */

.elementor-section.wb-hh--join {
  background-color: #FFFFFF !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* Keep the editorial column narrow + centered. */
.elementor-section.wb-hh--join > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
}

/* EYEBROW "An invitation" — small dark editorial label. */
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.55) !important;
  margin: 0 0 1rem !important;
  text-align: center;
}

/* TITLE 1 "Join Wealth Being Now to:" — IvyPresto serif, dark, em italic. */
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-title-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2rem, 4.6vw, 4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-title-el .elementor-heading-title em {
  font-style: italic;
  font-weight: 100;
}

/* PLUS LIST — native Icon List styled as the legacy editorial benefit
   ladder. Border-top + border-bottom rule under each row, "+" glyph as
   italic serif via ::before (FA icon hidden). */
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-list-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  border-top: 1px solid rgba(17,45,30,0.10);
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-list-el .elementor-icon-list-item {
  position: relative;
  padding: 1.4rem 0.5rem 1.4rem 3rem !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(17,45,30,0.10);
  font-family: "Commuters Sans", sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: rgba(17,45,30,0.92);
  align-items: flex-start !important;
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-list-el .elementor-icon-list-item:hover {
  background: rgba(243,232,175,0.18);
  padding-left: 3.5rem !important;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-list-el .elementor-icon-list-item::before {
  content: "+";
  position: absolute;
  left: 0.5rem;
  top: 1.05rem;
  font-family: "IvyPresto Display", Georgia, serif;
  font-style: italic;
  font-weight: 100;
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(17,45,30,0.5);
  width: 1.5rem;
  text-align: center;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-list-el .elementor-icon-list-icon {
  display: none !important;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-list-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  padding-left: 0 !important;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-list-el .elementor-icon-list-text strong {
  color: var(--color-green);
  font-weight: 600;
}

/* TITLE 2 "Join right now if…" — same display style, with breathing room
   above and below. */
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-title2-el {
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  margin-top: 0 !important;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-title2-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto 1.5rem;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-title2-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.008em !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
}

/* CLOSING COPY — 3 italic serif paragraphs, centered. */
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-copy-el .elementor-widget-container {
  padding: 0 !important;
  max-width: 48rem;
  margin: 0 auto;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-copy-el,
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-copy-el p,
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-copy-el .elementor-text-editor,
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-copy-el .elementor-text-editor p {
  color: var(--color-green) !important;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-copy-el p {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
  line-height: 1.55 !important;
  margin: 0 0 1.25rem !important;
  text-align: center;
}
.elementor-section.wb-hh--join .elementor-widget.wb-hh-join-copy-el p:last-child { margin-bottom: 0 !important; }

/* ==========================================================================
   LONGFORM — "Let's be real…" — NATIVE-WIDGET BRIDGES
   Section bg: paper_texture_background.png. Eyebrow is BLACK.
   Contains a mid-section pull-quote card (white, gold rule) and a
   closing "line in the sand" card (green texture image).
   ========================================================================== */

.elementor-section.wb-hh--long {
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/paper_texture_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* Narrow editorial column. */
.elementor-section.wb-hh--long > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
}

/* EYEBROW "Let's be real…" — BLACK per request. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 0 1rem !important;
  text-align: center;
}

/* TITLE — IvyPresto serif, em italic. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-title-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2rem, 4.6vw, 4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-title-el .elementor-heading-title em {
  font-style: italic;
  font-weight: 100;
}

/* BODY BLOCKS — Commuters Sans, narrow column, centered. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body1-el .elementor-widget-container,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body2-el .elementor-widget-container {
  padding: 0 !important;
  max-width: 44rem;
  margin: 0 auto;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body1-el,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body1-el p,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body1-el .elementor-text-editor p,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body2-el,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body2-el p,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body2-el .elementor-text-editor p {
  color: rgba(17,45,30,0.92) !important;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body1-el p,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body2-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem) !important;
  line-height: 1.8 !important;
  margin: 0 0 1.25rem !important;
  text-align: center;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body1-el p:last-child,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-body2-el p:last-child { margin-bottom: 0 !important; }

/* ---- QUOTE CARD (white, gold left rule) ---- */
.elementor-inner-section.wb-hh-long-quote-card-el {
  position: relative;
  width: 100% !important;
  max-width: 44rem !important;
  margin: 3rem auto !important;
  background: #FFFFFF !important;
  border-left: 4px solid #E8DB96 !important;
  border-radius: 1.25rem !important;
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(17,45,30,0.10);
}
.elementor-inner-section.wb-hh-long-quote-card-el > .elementor-container { max-width: 100%; }
.elementor-inner-section.wb-hh-long-quote-card-el .elementor-column > .elementor-element-populated,
.elementor-inner-section.wb-hh-long-quote-card-el .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
  background: transparent !important;
}

/* Decorative SVG glyph — sit above the card. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-glyph-el { position: relative; }
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-glyph-el .elementor-widget-container {
  padding: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--long .wb-hh-long__quote-glyph {
  position: absolute;
  top: calc(-1 * (clamp(1.75rem, 3vw, 2.5rem) + 0.5rem));
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: auto;
  color: #000;
  background: transparent;
  padding: 0;
}

/* Quote pre "You keep telling yourself:" — uppercase label. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-pre-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-pre-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.6) !important;
  margin: 0 0 1rem !important;
  text-align: center;
}

/* Pull-quote text — large italic serif. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-text-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-text-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-style: italic !important;
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
  line-height: 1.35 !important;
  color: var(--color-green) !important;
  margin: 0 0 1.5rem !important;
  text-align: center;
}

/* Chip list — uppercase pills, FA icon hidden. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-list-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-list-el .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-list-el .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0.4rem 0.85rem !important;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-green);
  border: 1px solid rgba(17,45,30,0.18);
  border-radius: 9999px;
  background: rgba(17,45,30,0.03);
  display: inline-flex !important;
  align-items: center !important;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-list-el .elementor-icon-list-icon {
  display: none !important;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-quote-list-el .elementor-icon-list-text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: 1.2 !important;
  padding-left: 0 !important;
}

/* ---- SAND CARD (green texture, cream copy, italic serif highlights) ---- */
.elementor-inner-section.wb-hh-long-sand-card-el {
  width: 100% !important;
  max-width: 56rem !important;
  margin: 3rem auto 2rem !important;
  background-color: var(--color-green) !important;
  background-image: url("../images/green_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(243,232,175,0.20) !important;
  border-radius: 1.5rem !important;
  padding: clamp(2rem, 4vw, 3.5rem) !important;
  color: var(--color-cream);
  text-align: center;
  box-shadow: 0 35px 60px -25px rgba(0,0,0,0.45);
}
.elementor-inner-section.wb-hh-long-sand-card-el > .elementor-container { max-width: 100%; }
.elementor-inner-section.wb-hh-long-sand-card-el .elementor-column > .elementor-element-populated,
.elementor-inner-section.wb-hh-long-sand-card-el .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
  background: transparent !important;
}

/* Sand body — cream sans-serif. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-intro-el .elementor-widget-container,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-mid-el .elementor-widget-container {
  padding: 0 !important;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-intro-el,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-intro-el p,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-intro-el .elementor-text-editor p,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-mid-el,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-mid-el p,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-mid-el .elementor-text-editor p {
  color: rgba(243,232,175,0.92) !important;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-intro-el p,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-mid-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin: 0 0 1rem !important;
  text-align: center;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-intro-el p:last-child,
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-mid-el p:last-child { margin-bottom: 0 !important; }

/* Sand "line in the sand" highlight — italic serif, cream, larger. */
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-line-el .elementor-widget-container {
  padding: 0 !important;
  margin: 1.5rem 0;
}
.elementor-section.wb-hh--long .elementor-widget.wb-hh-long-sand-line-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-style: italic !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  line-height: 1.3 !important;
  color: var(--color-cream) !important;
  margin: 0 !important;
  text-align: center;
}

/* ==========================================================================
   LIFESTYLE — "Live the Wealth Being Lifestyle"
   Section bg: embossed_pattern.webp (parallax fixed).
   Native widgets throughout — phones + watermark are Image widgets
   (swappable), app store buttons are inner-sections with `link`.
   ========================================================================== */

.elementor-section.wb-hh--lifestyle {
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/embossed_pattern.webp") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
  color: var(--color-green);
}
/* iOS / mobile Safari can't honor background-attachment: fixed reliably. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .elementor-section.wb-hh--lifestyle {
    background-attachment: scroll !important;
  }
}

/* Hold the editorial column centered. */
.elementor-section.wb-hh--lifestyle > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
}

/* EYEBROW "Your daily practice" */
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 0 1rem !important;
  text-align: center;
}

/* TITLE — IvyPresto italic, em italic, large hero size. */
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-title-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto;
  max-width: 56rem;
}
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-style: italic !important;
  font-size: clamp(2.5rem, 7vw, 6rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-green) !important;
  margin: 0.25rem auto 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-title-el .elementor-heading-title em { font-style: italic; }

/* Decorative gold rule under the title. */
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-rule-el .elementor-widget-container {
  padding: clamp(1rem, 2vw, 1.5rem) 0 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--lifestyle .wb-hh__rule--dark {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17,45,30,0.45), transparent);
}

/* ---- PHONE STAGE ---- */
.elementor-inner-section.wb-hh-life-stage-el {
  width: 100% !important;
  max-width: 1100px !important;
  margin: clamp(2rem, 4vw, 3.5rem) auto 2rem !important;
}
.elementor-inner-section.wb-hh-life-stage-el > .elementor-container { max-width: 100%; }
.elementor-inner-section.wb-hh-life-stage-el .elementor-column > .elementor-element-populated,
.elementor-inner-section.wb-hh-life-stage-el .elementor-column > .elementor-widget-wrap {
  position: relative !important;
  height: clamp(440px, 56vw, 620px) !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Watermark — absolute centered, low opacity. */
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-watermark-el {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: clamp(220px, 38vw, 460px) !important;
  height: auto !important;
  z-index: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-watermark-el .elementor-widget-container { padding: 0 !important; height: 100%; }
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-watermark-el img {
  width: 100% !important;
  height: auto !important;
  max-width: clamp(220px, 38vw, 460px) !important;
  opacity: 0.18;
  filter: drop-shadow(0 0 60px rgba(243,232,175,0.40));
}

/* Phones — each absolutely placed in a fan around the stage center. */
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-el {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: clamp(140px, 16vw, 240px) !important;
  margin: 0 !important;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.2,0.65,0.2,1), filter 0.5s ease;
  filter:
    drop-shadow(0 24px 36px rgba(0,0,0,0.45))
    drop-shadow(0 4px 8px rgba(0,0,0,0.30));
  animation: wb-life-float 7s ease-in-out infinite;
}
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-el .elementor-image,
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-el .elementor-image a {
  display: block;
  line-height: 0;
}
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-el img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 1.75rem;
  border: 1px solid rgba(243,232,175,0.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 1px 0 rgba(0,0,0,0.30);
}

/* Fan positions (per phone index). */
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-1 { z-index: 10; animation-delay: -0.7s;  transform: translate(-50%, -50%) translate(-78%,  4%)  rotate(-12deg) scale(0.86); }
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-2 { z-index: 20; animation-delay: -1.4s;  transform: translate(-50%, -50%) translate(-40%, -2%)  rotate(-6deg)  scale(0.94); }
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-3 { z-index: 50; animation-delay: -2.1s;  transform: translate(-50%, -50%) translate(0%,   -6%)  rotate(0deg)   scale(1.04); }
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-4 { z-index: 20; animation-delay: -2.8s;  transform: translate(-50%, -50%) translate(40%,  -2%)  rotate(6deg)   scale(0.94); }
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-5 { z-index: 10; animation-delay: -3.5s;  transform: translate(-50%, -50%) translate(78%,   4%)  rotate(12deg)  scale(0.86); }

/* HOVER EFFECT — when the stage is hovered, all phones dim slightly;
   the one being hovered brightens and pops forward (z-index lift).
   Matches the legacy .wb-hh-life__phones group hover behavior. */
.elementor-inner-section.wb-hh-life-stage-el .elementor-element-populated:hover .elementor-widget.wb-hh-life-phone-el,
.elementor-inner-section.wb-hh-life-stage-el .elementor-widget-wrap:hover .elementor-widget.wb-hh-life-phone-el {
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,0.5))
    brightness(0.85);
}
.elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-el:hover {
  filter:
    drop-shadow(0 40px 70px rgba(0,0,0,0.6))
    brightness(1.05);
  z-index: 60 !important;
}

/* Hide outermost phones on small screens. */
@media (max-width: 900px) {
  .elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-1,
  .elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-5 { display: none !important; }
}
@media (max-width: 600px) {
  .elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-2,
  .elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-4 { display: none !important; }
  .elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-3 { transform: translate(-50%, -50%) translate(0%, -4%) rotate(0deg) scale(1.1); }
  .elementor-section.wb-hh--lifestyle .elementor-widget.wb-hh-life-phone-el { width: clamp(180px, 60vw, 240px) !important; }
}

/* ---- APP STORE BUTTONS ROW ----
   Two columns of gold pills, each pill is itself a clickable inner-section
   (via Elementor's `link` setting). Black icon + label, brand-gold bg. */
.elementor-inner-section.wb-hh-life-apps-row-el {
  width: 100% !important;
  max-width: 560px !important;
  margin: clamp(1rem, 3vw, 2.5rem) auto 0 !important;
}
.elementor-inner-section.wb-hh-life-apps-row-el > .elementor-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex-wrap: nowrap !important;
}
@media (min-width: 640px) {
  .elementor-inner-section.wb-hh-life-apps-row-el > .elementor-container {
    flex-direction: row !important;
    justify-content: center !important;
  }
}
.elementor-inner-section.wb-hh-life-apps-row-el .elementor-column {
  width: 100% !important;
  max-width: 240px !important;
  flex: 0 0 auto !important;
}
.elementor-inner-section.wb-hh-life-apps-row-el .elementor-column > .elementor-element-populated,
.elementor-inner-section.wb-hh-life-apps-row-el .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
  background: transparent !important;
}

/* GOLD PILL — the app button itself. */
.elementor-inner-section.wb-hh-life-app-btn-el {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.85rem 1.25rem !important;
  background: #F3E8AF !important;
  border: 1px solid rgba(18,46,31,0.10) !important;
  border-radius: 9999px !important;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.elementor-inner-section.wb-hh-life-app-btn-el:hover {
  background: #E8DB96 !important;
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
}
.elementor-inner-section.wb-hh-life-app-btn-el > .elementor-container { max-width: 100%; }
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-column > .elementor-element-populated,
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-column > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Icon — fixed size, no flex grow. */
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-widget.wb-hh-life-app-icon-el {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-widget.wb-hh-life-app-icon-el .elementor-widget-container { padding: 0 !important; }
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-widget.wb-hh-life-app-icon-el img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

/* Label — two-line "Download on the / App Store" — BLACK text. */
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-widget.wb-hh-life-app-label-el {
  width: auto !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-widget.wb-hh-life-app-label-el .elementor-widget-container { padding: 0 !important; }
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-widget.wb-hh-life-app-label-el .elementor-heading-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  margin: 0 !important;
  color: #000 !important;
}
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-widget.wb-hh-life-app-label-el .elementor-heading-title small {
  font: 400 10px/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000 !important;
  margin-bottom: 2px;
}
.elementor-inner-section.wb-hh-life-app-btn-el .elementor-widget.wb-hh-life-app-label-el .elementor-heading-title .wb-hh-life-app-store {
  font: 400 18px/1 "Commuters Sans", sans-serif;
  letter-spacing: 0.05em;
  color: #000 !important;
}

@keyframes wb-life-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* ==========================================================================
   FAQ — "Frequently asked / The questions our members ask"
   Native Elementor Accordion widgets per group (Membership / Courses /
   Tracks). Eyebrow is BLACK per request.
   ========================================================================== */

.elementor-section.wb-hh--faq {
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* Narrow editorial column. */
.elementor-section.wb-hh--faq > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem !important;
  width: 100%;
}

/* EYEBROW "Frequently asked" — BLACK per request. */
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-eyebrow-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 0 1rem !important;
  text-align: center;
}

/* TITLE — IvyPresto serif, em italic. */
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-title-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2rem, 4.6vw, 4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-title-el .elementor-heading-title em {
  font-style: italic;
  font-weight: 100;
}

/* GROUP LABEL — Membership / Courses / Tracks. Editorial uppercase
   label sitting above each accordion. */
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-group-el {
  padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
  margin-top: 0 !important;
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-group-el .elementor-widget-container {
  padding: 0 !important;
  margin: 0 0 1rem;
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-group-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(17,45,30,0.10);
}

/* ACCORDION — native Elementor accordion styled as the editorial Q/A
   cards (white pill, italic-serif question, gold border when open). */
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-widget-container { padding: 0 !important; }
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-accordion-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(17,45,30,0.10) !important;
  border-radius: 0.9rem !important;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-accordion-item:has(.elementor-active),
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-tab-title.elementor-active {
  /* fallback — also apply to the item when its title is active */
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-accordion-item:has(.elementor-active) {
  border-color: rgba(243,232,175,0.55) !important;
  box-shadow: 0 18px 40px -25px rgba(17,45,30,0.25);
}

/* Question (tab-title) row. */
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-tab-title {
  background: transparent !important;
  border: 0 !important;
  padding: 1.15rem 1.4rem !important;
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  color: var(--color-green) !important;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-tab-title a,
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-tab-title a:hover {
  color: var(--color-green) !important;
  text-decoration: none !important;
}

/* Toggle icon (FA plus → minus via Elementor's active state). */
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-accordion-icon,
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-accordion-icon i,
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-accordion-icon svg {
  color: #000 !important;
  fill: #000 !important;
  font-size: 0.9rem;
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
}

/* Answer (tab-content) row. */
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-tab-content {
  padding: 0 1.4rem 1.15rem !important;
  border: 0 !important;
  background: transparent !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  color: rgba(17,45,30,0.85) !important;
}
.elementor-section.wb-hh--faq .elementor-widget.wb-hh-faq-accordion-el .elementor-tab-content p {
  margin: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ==========================================================================
   TRUST STRIP — NATIVE-WIDGET BRIDGES
   The section is built in Elementor as a 3-column inner section:
     LEFT    rating display (4.6 / 5, stars, caption)
     CENTER  eyebrow, pull-quote, country chips marquee
     RIGHT   vertical "TRUSTED · WORLDWIDE" rail
   Each visible text piece is a native Elementor heading widget so the
   client can edit the copy inline. Only the dynamic country chips
   marquee stays as a shortcode (data-driven from wb_testimonials).
   ========================================================================== */

/* Outer column lets the inner section span the full content width. */
.elementor-section.wb-hh--trust > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* Inner 3-column split — uses CSS grid so the auto-rhythm of the
   original .wb-hh-trust container is preserved exactly. */
.elementor-section.wb-hh-trust__elem-layout > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  align-items: center !important;
  max-width: 100% !important;
  padding: 0 !important;
}
@media (min-width: 900px) {
  .elementor-section.wb-hh-trust__elem-layout > .elementor-container {
    grid-template-columns: auto 1fr auto !important;
    gap: 3rem !important;
  }
}

.elementor-section.wb-hh-trust__elem-layout .elementor-column {
  width: 100% !important;
  min-width: 0;
}
.elementor-section.wb-hh-trust__elem-layout .elementor-column > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 !important;
}
.elementor-section.wb-hh-trust__elem-layout .elementor-widget {
  width: auto !important;
  margin: 0 !important;
}

/* All trust-strip TEXT colors flip to brand DARK GREEN because the
   section bg is now light (light_background_with_logo.webp). Same
   typographic tokens, just inverted color polarity. */

/* LEFT column — rating display */
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-rating-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-rating-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-style: italic !important;
  font-size: clamp(4rem, 7vw, 6.5rem) !important;
  line-height: 1 !important;
  color: var(--color-green) !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: baseline;
}
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-rating-el .elementor-heading-title small {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: italic !important;
  font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
  margin-left: 0.35rem;
  color: rgba(17,45,30,0.5) !important;
}

.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-stars-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-stars-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  color: #c69a2e !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.18em !important;
  margin: 0 !important;
}

.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-caption-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-caption-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.6) !important;
  margin: 0.4rem 0 0 !important;
}

/* CENTER column — eyebrow + pull-quote + marquee */
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-eyebrow-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.6) !important;
  margin: 0 !important;
}

.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-pull-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-pull-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  line-height: 1.15 !important;
  color: var(--color-green) !important;
  margin: 0.5rem 0 0.75rem !important;
}
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-pull-el .elementor-heading-title em {
  font-style: italic !important;
  font-weight: 100 !important;
}

.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-marquee-el {
  width: 100% !important;
}
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-marquee-el .elementor-widget-container {
  padding: 0;
  width: 100%;
}

/* Country chips — dark green text + outline on light cream bg */
.wb-hh--trust .wb-hh-trust__chip {
  color: var(--color-green) !important;
  background: rgba(243,232,175,0.35) !important;
  border-color: rgba(17,45,30,0.18) !important;
}

/* RIGHT column — vertical rail */
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-rail-el .elementor-widget-container { padding: 0; }
.elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-rail-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.5em !important;
  text-transform: uppercase !important;
  color: rgba(17,45,30,0.5) !important;
  margin: 0 !important;
}
@media (min-width: 900px) {
  .elementor-section.wb-hh--trust .elementor-widget.wb-hh-trust-rail-el .elementor-heading-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

/* Trust strip section background — light cream with embossed logo
   (matches the screenshot the client provided). Text color flips to
   dark brand-green to stay readable on the light field. */
.wb-hh--trust {
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background_with_logo.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
}

/* ==========================================================================
   PRICING — NATIVE-WIDGET BRIDGES ("Choose Your Path")

   Same approach as the hero: each editable text widget gets a class
   prefixed `wb-hh-path-…-el` and a bridge below maps it through
   Elementor's `.elementor-widget` + `.elementor-widget-container` divs
   onto the corresponding `.wb-hh-path__*` design tokens. The 3-card grid
   stays as an HTML widget so the existing card CSS just works.
   ========================================================================== */

/* (1) Column widget-wrap behaves like .wb-hh__inner — centers content,
   constrains to 1280px, generous vertical rhythm. */
.elementor-section.wb-hh--path > .elementor-container > .elementor-column > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(0.85rem, 1.5vw, 1.25rem) !important;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto !important;
  text-align: center;
  position: relative;
  z-index: 1;
}
.elementor-section.wb-hh--path .elementor-widget-wrap > .elementor-element {
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
}
/* Cards grid expands to full column width (no auto-shrink) */
.elementor-section.wb-hh--path .elementor-widget-wrap > .elementor-widget-html:last-of-type {
  width: 100% !important;
  max-width: 100%;
  margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* ----- BOOK A CALL CTA CARD (below the 3 pricing cards) -----
   2-column inner section dressed as a wide horizontal card: heading +
   subtext on the left, "BOOK A CALL →" pill button on the right. Stacks
   to one column on mobile. Brand tones — cream bg, soft border, dark
   editorial heading. The button uses the dark "deep green" variant so it
   stands out against the cream card and matches the brand pill family. */
.elementor-section.wb-hh--path .elementor-inner-section.wb-hh-bac-card-el {
  width: 100% !important;
  max-width: 100% !important;
  margin: clamp(2rem, 4vw, 3rem) 0 0 !important;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) !important;
  background: #F5F2EC !important;
  border: 1px solid rgba(17,45,30,0.08) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 20px 40px -25px rgba(17,45,30,0.15);
  text-align: left;
}
.elementor-section.wb-hh--path .elementor-inner-section.wb-hh-bac-card-el > .elementor-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
  flex-wrap: nowrap !important;
  max-width: 100%;
}
@media (min-width: 768px) {
  .elementor-section.wb-hh--path .elementor-inner-section.wb-hh-bac-card-el > .elementor-container {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
  }
}
.elementor-section.wb-hh--path .elementor-inner-section.wb-hh-bac-card-el .elementor-column {
  width: auto !important;
  max-width: 100% !important;
}
.elementor-section.wb-hh--path .elementor-inner-section.wb-hh-bac-card-el .elementor-column.wb-hh-bac-text-col {
  flex: 1 1 auto !important;
}
.elementor-section.wb-hh--path .elementor-inner-section.wb-hh-bac-card-el .elementor-column.wb-hh-bac-btn-col {
  flex: 0 0 auto !important;
}
.elementor-section.wb-hh--path .elementor-inner-section.wb-hh-bac-card-el .elementor-column > .elementor-element-populated,
.elementor-section.wb-hh--path .elementor-inner-section.wb-hh-bac-card-el .elementor-column > .elementor-widget-wrap {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  align-items: flex-start !important;
}

/* Heading "Not sure where to start?" — dark editorial sans. */
.elementor-widget.wb-hh-bac-heading-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-hh-bac-heading-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem) !important;
  line-height: 1.3 !important;
  color: #122E1F !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Subtext — softer body sans. */
.elementor-widget.wb-hh-bac-sub-el .elementor-widget-container { padding: 0 !important; max-width: 38rem; }
.elementor-widget.wb-hh-bac-sub-el,
.elementor-widget.wb-hh-bac-sub-el p {
  font-family: "Commuters Sans", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: rgba(17,45,30,0.7) !important;
  margin: 0 !important;
  text-align: left !important;
}

/* CTA button — dark green pill with arrow, brand-aligned (not the gold
   variant since this is a secondary low-commitment CTA). */
.elementor-widget.wb-hh-bac-cta-el .elementor-widget-container { padding: 0 !important; }
.elementor-widget.wb-hh-bac-cta-el a.elementor-button,
.elementor-widget.wb-hh-bac-cta-el .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  padding: 1rem 1.6rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background: #122E1F !important;
  color: #F3E8AF !important;
  border: 1px solid #122E1F !important;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.elementor-widget.wb-hh-bac-cta-el a.elementor-button::after,
.elementor-widget.wb-hh-bac-cta-el .elementor-button-link::after {
  content: "\2192"; /* → */
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1;
  display: inline-block;
  transition: transform 0.25s ease;
}
.elementor-widget.wb-hh-bac-cta-el a.elementor-button:hover,
.elementor-widget.wb-hh-bac-cta-el .elementor-button-link:hover {
  background: #1a3d2e !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -16px rgba(17,45,30,0.45);
}
.elementor-widget.wb-hh-bac-cta-el a.elementor-button:hover::after,
.elementor-widget.wb-hh-bac-cta-el .elementor-button-link:hover::after {
  transform: translateX(3px);
}
.elementor-widget.wb-hh-bac-cta-el .elementor-button-icon:empty { display: none; }

/* (2a) Eyebrow heading "Membership" */
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-eyebrow-el {
  margin-top: 0 !important;
}
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-eyebrow-el .elementor-widget-container {
  padding: 0;
}
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-eyebrow-el .elementor-heading-title {
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 !important;
  text-align: center;
}

/* (2b) Title heading "Choose Your Path" */
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-title-el .elementor-widget-container {
  padding: 0;
}
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-title-el .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em !important;
  color: var(--color-green) !important;
  margin: 0.25rem auto 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-title-el .elementor-heading-title em {
  font-style: italic !important;
  font-weight: 100 !important;
}

/* (2c) Divider rule */
.elementor-section.wb-hh--path .elementor-widget-html .wb-hh-path-rule-el {
  margin: 0 auto;
}

/* (2d) Lede paragraph (text-editor widget) */
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-lede-el .elementor-widget-container {
  padding: 0;
  max-width: 40rem;
  margin: 0 auto;
}
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-lede-el,
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-lede-el .elementor-widget-container,
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-lede-el p,
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-lede-el .elementor-text-editor,
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-lede-el .elementor-text-editor p {
  color: #000 !important;
}
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-lede-el p {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(1rem, 1.4vw, 1.125rem) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: center;
}
.elementor-section.wb-hh--path .elementor-widget.wb-hh-path-lede-el em {
  font-style: italic !important;
  color: #000 !important;
}

/* ==========================================================================
   ==========================================================================
   PASS 6 — Elementor bridges for native widgets (Phase 1: Hero only)

   When the hero is built from Elementor native widgets (heading, button,
   image), each widget is wrapped in `.elementor-widget` divs that Elementor
   adds automatically. Our existing CSS targets the inner element directly
   (e.g. `.wb-hh--hero__title` on the <h1>). To keep the design pixel
   identical inside Elementor, we add matching rules that target the
   `.elementor-widget-*` wrappers carrying the same class.

   Convention: any widget added in elementor-build/pages/home.php with a
   `_css_classes` value of `wb-hh--xxx wb-hh--xxx--elementor` gets these
   bridge rules. The `--elementor` modifier is only there to make these
   bridges scope cleanly without affecting the partial-rendered version
   when the template_include filter is active.
   ========================================================================== */

/* Hero — image widget bridge -------------------------------------------- */
.wb-hh--hero .elementor-widget.wb-hh--hero__art--elementor {
  width: 100%;
  margin: 0;
}
.wb-hh--hero .elementor-widget.wb-hh--hero__art--elementor .elementor-widget-container {
  text-align: center;
}
.wb-hh--hero .elementor-widget.wb-hh--hero__art--elementor img {
  width: min(100%, 960px);
  height: auto;
  display: inline-block;
  animation: wb-hero-art-rise 1.4s cubic-bezier(0.2,0.65,0.2,1) both;
}

/* Hero — heading (h1) widget bridge ------------------------------------ */
.wb-hh--hero .elementor-widget.wb-hh--hero__title--elementor {
  width: 100%;
  margin: 0;
}
.wb-hh--hero .elementor-widget.wb-hh--hero__title--elementor .elementor-widget-container,
.wb-hh--hero .elementor-widget.wb-hh--hero__title--elementor .elementor-heading-title {
  margin: 0;
  text-align: center;
}
.wb-hh--hero .elementor-widget.wb-hh--hero__title--elementor .elementor-heading-title {
  font-family: "IvyPresto Display", Georgia, serif !important;
  font-weight: 100 !important;
  font-size: clamp(1.85rem, 4vw, 3.6rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.008em !important;
  color: var(--color-cream) !important;
  max-width: 26ch;
  margin: 0 auto !important;
}
.wb-hh--hero .elementor-widget.wb-hh--hero__title--elementor .elementor-heading-title em {
  font-style: italic;
  font-weight: 100;
}

/* Hero — button widget bridge (Become a Member) ------------------------- */
.wb-hh--hero .elementor-widget.wb-hh--hero__cta-primary {
  width: auto;
  margin: 0;
}
.wb-hh--hero .elementor-widget.wb-hh--hero__cta-primary .elementor-widget-container {
  display: flex;
  justify-content: center;
}
.wb-hh--hero .elementor-widget.wb-hh--hero__cta-primary .elementor-button-wrapper {
  display: inline-flex;
}
/* Style Elementor's button so it inherits the gold glow-shimmer. */
.wb-hh--hero .elementor-widget.wb-hh--hero__cta-primary .elementor-button-link,
.wb-hh--hero .elementor-widget.wb-hh--hero__cta-primary a.elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.05rem 2rem !important;
  border-radius: 9999px !important;
  font-family: "Commuters Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: linear-gradient(135deg, #F3E8AF 0%, #E8DB96 40%, #fffbe8 60%, #F3E8AF 100%) !important;
  background-size: 200% 200% !important;
  color: #122E1F !important;
  border: 1.5px solid rgba(243,232,175,0.7) !important;
  box-shadow:
    0 0 16px 1.5px rgba(243,232,175,0.30),
    0 0 32px 3px rgba(243,232,175,0.12),
    0 4px 16px rgba(0,0,0,0.12) !important;
  animation: glowShimmer 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.wb-hh--hero .elementor-widget.wb-hh--hero__cta-primary a.elementor-button:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 28px 5px rgba(243,232,175,0.70),
    0 0 55px 6px rgba(243,232,175,0.30),
    0 6px 20px rgba(0,0,0,0.15) !important;
}
/* Hide Elementor's icon containers if empty (so they don't add gaps). */
.wb-hh--hero .elementor-widget.wb-hh--hero__cta-primary .elementor-button-icon:empty {
  display: none;
}

/* ==========================================================================
   ==========================================================================
   2026 redesign — PASS 5
   - Pillars: parallax embossed pattern + Become a Member CTA
   - Reason: stacked editorial paper + dark green shift card
   - Wealth Being® AI: new section modeled on the iOS app screen
   - Section spacing audit + brand-discipline tweaks
   Brand tokens used (only these): --color-green, --color-cream,
   --color-bg-cream, --color-bg-stone. Brand fonts only: IvyPresto Display,
   Commuters Sans, Helvetica Neue LT Pro.
   ========================================================================== */

/* ==========================================================================
   PILLARS — parallax embossed pattern
   ========================================================================== */
.wb-hh--pillars {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-stone);
}
.wb-hh-pillars__parallax {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;       /* show the pattern ONCE — no tiling */
  background-size: cover;             /* fill the section without repeating */
  background-position: center;
  background-attachment: fixed;       /* the gold pattern stays as content scrolls */
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}
/* iOS / mobile Safari can't honor background-attachment: fixed reliably,
   so fall back to a non-fixed pattern at the same opacity. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .wb-hh-pillars__parallax { background-attachment: scroll; }
}
.wb-hh-pillars__cta { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ==========================================================================
   LIFESTYLE — parallax green background + parallax embossed pattern
   Both backdrop layers (the green base image and the gold embossed
   pattern overlay) stay absolutely positioned INSIDE the section, but
   their background-image is `attachment: fixed` — anchored to the
   viewport. Result: the green stage and the gold pattern hold still
   while the phone showcase, headline and CTAs scroll over them.
   The default `background-repeat: no-repeat` on .wb-hh__bg ensures the
   green is shown ONCE (cover-sized) instead of tiling.
   ========================================================================== */
.wb-hh--lifestyle .wb-hh__bg {
  position: absolute;
  inset: 0;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -2;
}
.wb-hh--lifestyle .wb-hh__pattern {
  position: absolute;
  inset: 0;
  background-attachment: fixed;
  background-size: 680px auto;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.16;
  mix-blend-mode: screen;
  z-index: -1;
}
/* iOS / mobile Safari can't honor background-attachment: fixed reliably
   — fall back to scroll-attached on touch / narrow viewports. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .wb-hh--lifestyle .wb-hh__bg,
  .wb-hh--lifestyle .wb-hh__pattern {
    background-attachment: scroll;
  }
}

/* ==========================================================================
   REASON — stacked editorial paper + dark "must shift Now" card
   ========================================================================== */
.wb-hh--reason {
  background: var(--color-bg-cream);
  color: var(--color-green);
  padding: clamp(5rem, 10vw, 8rem) 1.25rem;
}
.wb-hh--reason .wb-hh__inner--narrow { max-width: 880px; }

.wb-hh-reason__paper {
  background: #FFFFFF;
  border: 1px solid rgba(17,45,30,0.08);
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: 0 30px 60px -40px rgba(17,45,30,0.20);
}
.wb-hh-reason__paper-head {
  text-align: center;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
.wb-hh-reason__paper-head .wb-hh__eyebrow {
  text-align: center;
  margin-bottom: 1rem;
}
.wb-hh-reason__paper-title {
  margin: 0;
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--color-green);
}
.wb-hh-reason__paper-title strong { font-weight: 600; }
.wb-hh-reason__paper-title em     { font-style: italic; font-weight: 100; }

/* Replace the old .wb-hh-reason__list (.wb-hh-reason__light etc.) — clean
   editorial list, no card-on-card. */
.wb-hh-reason__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.wb-hh-reason__list li {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.8rem;
  font-family: "Commuters Sans", sans-serif;
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  line-height: 1.65;
  color: rgba(17,45,30,0.90);
  border-bottom: 1px solid rgba(17,45,30,0.08);
}
.wb-hh-reason__list li:last-child { border-bottom: 0; }
.wb-hh-reason__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7em;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #E8DB96 0%, #F3E8AF 100%);
}

/* Whisper divider between the two blocks. */
.wb-hh-reason__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  color: rgba(17,45,30,0.35);
}
.wb-hh-reason__divider span {
  display: block;
  flex: 0 0 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17,45,30,0.35), transparent);
}
.wb-hh-reason__divider svg {
  width: 14px; height: 14px;
}

.wb-hh-reason__shift {
  background: linear-gradient(160deg, #112D1E 0%, #1a3d2e 100%);
  border: 1px solid rgba(243,232,175,0.20);
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--color-cream);
  box-shadow:
    0 0 0 1px rgba(243,232,175,0.08) inset,
    0 35px 60px -25px rgba(0,0,0,0.45);
}
.wb-hh-reason__shift-head { text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.wb-hh-reason__shift-head .wb-hh__eyebrow { text-align: center; }
.wb-hh-reason__shift-title {
  margin: 0;
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-cream);
}
.wb-hh-reason__shift-title em { font-style: italic; font-weight: 100; }
.wb-hh-reason__shift-body {
  font-family: "Commuters Sans", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.7;
  color: rgba(243,232,175,0.92);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}
.wb-hh-reason__shift-body p { margin: 0 0 1.1rem; }
.wb-hh-reason__shift-body p:last-child { margin-bottom: 0; }

/* Disable older pass-1/pass-2 reason rules that overlap. Their selectors
   target classes the new markup no longer renders, so this is a safety
   net to keep the file deterministic if anything stray remains. */
.wb-hh--reason .wb-hh-reason__light,
.wb-hh--reason .wb-hh-reason__dark { display: none; }

/* ==========================================================================
   WEALTH BEING® AI — feature showcase modeled on the in-app screen
   ========================================================================== */
.wb-hh--ai {
  position: relative;
  isolation: isolate;
  /* Section uses light_background.png as the section fabric (overrides
     Elementor's per-page generated CSS via !important — same approach
     as testimonials / trust-strip). */
  background-color: var(--color-bg-cream) !important;
  background-image: url("../images/light_background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--color-green);
  padding: clamp(5rem, 10vw, 8rem) 1.25rem;
}
/* The AI section gets the embossed pattern as a quiet textural floor —
   helps it feel premium and matches the app's gradient screen. */
.wb-hh--ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/embossed_pattern.webp");
  background-size: 540px auto;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* Split layout — copy left, looping video right (desktop). Stacks below 1024px. */
.wb-hh-ai__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .wb-hh-ai__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}

.wb-hh-ai__copy { min-width: 0; }

.wb-hh-ai__head {
  text-align: left;
  max-width: 640px;
  margin: 0 0 clamp(2rem, 3vw, 2.5rem);
}
@media (max-width: 1023px) { .wb-hh-ai__head { text-align: center; margin-left: auto; margin-right: auto; } }
.wb-hh-ai__head .wb-hh__eyebrow {
  text-align: left;
  color: rgba(17,45,30,0.55);
}
@media (max-width: 1023px) { .wb-hh-ai__head .wb-hh__eyebrow { text-align: center; } }
.wb-hh-ai__lede {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  color: rgba(17,45,30,0.78);
  margin: 1rem 0 1.25rem;
  max-width: 38rem;
}
@media (max-width: 1023px) { .wb-hh-ai__lede { margin-left: auto; margin-right: auto; } }
.wb-hh-ai__title {
  margin: 0;
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  color: var(--color-green);
}
.wb-hh-ai__title em { font-style: italic; font-weight: 100; }

.wb-hh-ai__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 640px;
  margin: 0;
}
@media (max-width: 1023px) { .wb-hh-ai__grid { margin-left: auto; margin-right: auto; } }

.wb-hh-ai__card {
  position: relative;
  display: block;
  text-decoration: none;
  background: linear-gradient(160deg, #112D1E 0%, #1a3d2e 100%);
  border: 1px solid rgba(243,232,175,0.20);
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-cream);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  box-shadow: 0 20px 40px -25px rgba(0,0,0,0.40);
}
.wb-hh-ai__card--open:hover,
.wb-hh-ai__card--upsell:hover {
  transform: translateY(-3px);
  border-color: rgba(243,232,175,0.55);
  box-shadow: 0 35px 60px -25px rgba(0,0,0,0.50);
}
.wb-hh-ai__card--open:hover .wb-hh-ai__arrow svg,
.wb-hh-ai__card--upsell:hover .wb-hh-ai__arrow svg { transform: translateX(3px); }
.wb-hh-ai__arrow svg { transition: transform 0.3s ease; }

/* Upsell card — keeps the gold halo of the locked variant from the app
   screen, but adds the right-arrow chevron and clickability so it reads
   as a path to upgrade instead of a dead end. */
.wb-hh-ai__card--upsell {
  background: linear-gradient(160deg, #0d2418 0%, #0a1a11 100%);
  border-color: rgba(243,232,175,0.40);
  box-shadow:
    0 0 0 1px rgba(243,232,175,0.10) inset,
    0 0 26px 5px rgba(243,232,175,0.22),
    0 22px 44px -25px rgba(0,0,0,0.55);
}
.wb-hh-ai__card--upsell:hover {
  box-shadow:
    0 0 0 1px rgba(243,232,175,0.18) inset,
    0 0 38px 8px rgba(243,232,175,0.32),
    0 38px 64px -25px rgba(0,0,0,0.60);
}
.wb-hh-ai__card--upsell .wb-hh-ai__arrow { color: #F3E8AF; }

/* Pill-style "Available in Signature" tag — slightly elevated so the
   upsell intent reads clearly. */
.wb-hh-ai__tags li.is-upsell-pill {
  background: rgba(243,232,175,0.16);
  border-color: rgba(243,232,175,0.45);
  color: var(--color-cream);
}
.wb-hh-ai__tags li.is-upsell-pill svg { color: var(--color-cream); }

.wb-hh-ai__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.wb-hh-ai__card-title {
  margin: 0;
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  letter-spacing: 0.002em;
  color: var(--color-cream);
}
.wb-hh-ai__card-title sup {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.5em;
  vertical-align: super;
  color: rgba(243,232,175,0.75);
  margin-left: 0.1em;
}
.wb-hh-ai__lock,
.wb-hh-ai__arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: rgba(243,232,175,0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wb-hh-ai__lock svg,
.wb-hh-ai__arrow svg { width: 100%; height: 100%; }

.wb-hh-ai__card-desc {
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(243,232,175,0.85);
  margin: 0 0 1.25rem;
}

.wb-hh-ai__tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.wb-hh-ai__tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(243,232,175,0.22);
  border-radius: 9999px;
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(243,232,175,0.85);
  background: rgba(243,232,175,0.04);
}
.wb-hh-ai__tags li svg {
  width: 12px;
  height: 12px;
  color: rgba(243,232,175,0.75);
}

.wb-hh-ai__foot {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  max-width: 640px;
  text-align: left;
}
@media (max-width: 1023px) { .wb-hh-ai__foot { text-align: center; margin-left: auto; margin-right: auto; } }
.wb-hh-ai__foot-line {
  font-family: "IvyPresto Display", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  color: rgba(17,45,30,0.78);
  margin: 0 0 1.5rem;
  max-width: 38rem;
}
@media (max-width: 1023px) { .wb-hh-ai__foot-line { margin-left: auto; margin-right: auto; } }
.wb-hh-ai__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
@media (max-width: 1023px) {
  .wb-hh-ai__ctas { align-items: center; }
}
@media (min-width: 600px) {
  .wb-hh-ai__ctas { flex-direction: row; gap: 1rem; }
}

/* ==========================================================================
   AI VIDEO — looping in-app preview on the right
   ========================================================================== */
.wb-hh-ai__video {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 19;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .wb-hh-ai__video { max-width: 320px; }
}
.wb-hh-ai__video-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid rgba(243,232,175,0.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 30px 60px -25px rgba(0,0,0,0.45),
    0 12px 28px -18px rgba(0,0,0,0.35);
  background: var(--color-green);
}
.wb-hh-ai__video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Ambient gold halo behind the video — same brand language as the
   "Available in Signature" upsell card. */
.wb-hh-ai__video-glow {
  position: absolute;
  inset: -8% -10%;
  z-index: 1;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(243,232,175,0.22), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* "Upgrade to Signature" pill — secondary outlined gold-leaf style, matches
   the screenshot's pill. */
.wb-hh-ai__upsell {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: 9999px;
  background: rgba(243,232,175,0.12);
  border: 1px solid rgba(17,45,30,0.20);
  color: var(--color-green);
  font-family: "Commuters Sans", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.wb-hh-ai__upsell:hover {
  background: rgba(243,232,175,0.28);
  border-color: rgba(17,45,30,0.40);
  transform: translateY(-1px);
}
.wb-hh-ai__upsell svg {
  width: 14px;
  height: 14px;
  color: var(--color-green);
}

/* ==========================================================================
   SECTION SPACING AUDIT — premium rhythm
   - Default vertical padding on every home section uses a single rhythm
   - Tighten gap when two same-tone sections meet (avoid double-air)
   ========================================================================== */
.wb-home--2026 .wb-hh {
  padding-top:    clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
/* Hero owns its own padding (defined above) — don't double it here.
   Bottom padding is generous so the green hero fills more of the
   initial-view space at 100% zoom; the next (cream) section starts
   farther down and the hero reads as a substantial, balanced block. */
.wb-home--2026 .wb-hh.wb-hh--hero {
  padding-top:    clamp(7.5rem, 14vh, 10rem);
  padding-bottom: clamp(10rem, 20vh, 14rem);
}
/* Trust strip is a tight band, not a full section. */
.wb-home--2026 .wb-hh.wb-hh--trust {
  padding-top:    clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* When two cream sections meet (intro → right-now, or right-now → intro,
   etc.) trim the bottom of the upper one so the boundary doesn't read as
   "two big white blocks stacked". */
.wb-hh--intro    + .wb-hh--pillars,
.wb-hh--rightnow + .wb-hh--intro,
.wb-hh--reason   + .wb-hh--helps {
  /* no-op hook for future tightening */
}

/* Promote the brand-font discipline at the page level — anything that
   gets dropped onto .wb-home--2026 inherits IvyPresto for headings and
   Commuters Sans / Helvetica Neue for body, never a system fallback by
   accident. */
.wb-home--2026 {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.wb-home--2026 h1, .wb-home--2026 h2, .wb-home--2026 h3, .wb-home--2026 h4,
.wb-home--2026 blockquote {
  font-family: "IvyPresto Display", Georgia, serif;
}
.wb-home--2026 .wb-btn,
.wb-home--2026 .wb-hh__eyebrow,
.wb-home--2026 .wb-hh-ai__tags li,
.wb-home--2026 .wb-hh-ai__upsell {
  font-family: "Commuters Sans", sans-serif;
}