/* Happy GLP — one-page layout styles.
   Design tokens (color/type/spacing/radius) come from theme.json and are
   referenced here as WP preset CSS custom properties rather than hardcoded
   values, so the palette stays the single source of truth. */

* { box-sizing: border-box; }
img { max-width: 100%; display: block; }
.wp-site-blocks a { text-decoration: none; }

/* Buttons (wp:buttons/wp:button already get color/radius from theme.json
   styles.elements.button; this covers layout).
   Padding/font-size match happyglp.com's live `.btn--primary` exactly
   (verified via computed styles): 11.2px/40px padding, 17px font. */
.wp-block-button__link { white-space: nowrap; }
.happyglp-btn-block { display: flex; gap: 16px; }
.happyglp-btn-block .wp-block-button { width: auto; }

/* "Meet the brand" (key brand pillars) right-aligns its "Save my spot"
   button against the text column above — every other section keeps buttons
   left-aligned. */
.happyglp-btn-block--stack-right {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

/* Primary hover glow — matches happyglp.com's `.btn:hover` exactly (pulled
   from their live CSS): a soft shadow tinted with the button's own rust/orange
   color plus a slight brightness lift, eased with their cubic-bezier timing.
   Applies to every "Save my spot" button and the modal's Forminator submit
   button. */
.wp-block-button .wp-block-button__link,
.happyglp-modal-form .forminator-button-submit {
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wp-block-button .wp-block-button__link:hover,
.happyglp-modal-form .forminator-button-submit:hover {
  filter: brightness(1.07);
  box-shadow: 0 8px 20px rgba(189, 91, 18, 0.28);
}
.wp-block-button .wp-block-button__link:active,
.happyglp-modal-form .forminator-button-submit:active {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  /* Mobile buttons run full-width and stack, matching happyglp.com (measured:
     button width = viewport width minus the same page gutter used everywhere
     else, not a narrower hug-content pill). */
  .happyglp-btn-block {
    flex-direction: column;
  }
  .happyglp-btn-block .wp-block-button,
  .happyglp-btn-block .wp-block-button__link {
    width: 100%;
  }
}

.eyebrow {
  font-family: var(--wp--preset--font-family--42dot-sans);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tags {
  display: flex;
  gap: var(--wp--preset--spacing--space-40);
  flex-wrap: wrap;
  justify-content: center;
}
.tag {
  background: var(--wp--preset--color--light-yellow);
  color: var(--wp--preset--color--brown);
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: 0.07em;
  padding: 8px 24px;
  border-radius: var(--wp--custom--radius--pill);
  white-space: nowrap;
}

/* Header bar — plain brand-color band, nav/banner content removed (dev notes 9/28). */
.happyglp-header-bar {
  background: var(--wp--preset--color--dark-green);
  height: 64px;
}

/* Hero */
.happyglp-hero {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--space-80);
  margin-top: var(--wp--preset--spacing--space-110);
  padding: 0 max(40px, calc((100% - 1200px) / 2));
}
.happyglp-hero-content { flex: 1; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--space-60); align-items: flex-start; }
.happyglp-hero-content h1 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--wp--preset--color--dark-gray);
}
.happyglp-hero-content h1 .accent { color: var(--wp--preset--color--dark-green); }
.happyglp-hero-copy { font-size: var(--wp--preset--font-size--body-large); line-height: 1.5; max-width: 540px; margin: 0; }
.happyglp-hero-copy strong { color: var(--wp--preset--color--dark-orange); font-weight: 600; }
.happyglp-hero-image { flex-shrink: 0; width: 469px; height: 431px; border-radius: var(--wp--custom--radius--md); overflow: hidden; }
.happyglp-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.happyglp-hero-rule { padding: 0 max(40px, calc((100% - 1200px) / 2)); }
.happyglp-hero-rule hr { width: 100%; height: 1px; background: var(--wp--preset--color--medium-green); border: none; margin: 0; }

.happyglp-section-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.happyglp-section-head h2 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--heading-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.happyglp-section-head .accent { color: var(--wp--preset--color--dark-orange); }
.happyglp-section-head--dark .eyebrow { color: var(--wp--preset--color--agenda-eyebrow); }
.happyglp-section-head--dark h2 { color: var(--wp--preset--color--white); }

/* Session callout */
.happyglp-callout-wrap { margin-top: var(--wp--preset--spacing--space-110); padding: 0 max(40px, calc((100% - 1200px) / 2)); }
.happyglp-callout {
  background: var(--wp--preset--color--light-green);
  border-radius: var(--wp--custom--radius--lg);
  padding: 48px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--space-60);
  text-align: center;
}
.happyglp-callout h2 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--heading-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--wp--preset--color--dark-gray);
}
.happyglp-callout h2 .accent { color: var(--wp--preset--color--dark-green); }
.happyglp-bullets { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.happyglp-bullet { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--wp--preset--font-size--label); }
.happyglp-bullet svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Agenda */
.happyglp-agenda {
  background: var(--wp--preset--color--dark-gray);
  margin-top: var(--wp--preset--spacing--space-110);
  padding: var(--wp--preset--spacing--space-90) max(40px, calc((100% - 1200px) / 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--space-80);
}
.happyglp-agenda .happyglp-section-head { max-width: 700px; }
.happyglp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--space-70);
  max-width: 1200px;
  width: 100%;
}
.happyglp-step { border-top: 2px solid var(--wp--preset--color--dark-green); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.happyglp-step-number { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 0.8125rem; letter-spacing: 0.07em; color: var(--wp--preset--color--step-orange); margin: 0; }
.happyglp-step h3 { font-family: var(--wp--preset--font-family--fraunces); font-weight: 400; font-size: var(--wp--preset--font-size--heading-md); line-height: 1.15; color: var(--wp--preset--color--white); margin: 0; }
.happyglp-step p { font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--wp--preset--color--agenda-body); margin: 0; }

/* Who is this for */
.happyglp-who-for {
  margin: var(--wp--preset--spacing--space-110) 0;
  padding: 0 max(40px, calc((100% - 1200px) / 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--space-80);
}
.happyglp-who-for .happyglp-section-head { max-width: 792px; }
.happyglp-who-for .happyglp-section-head .eyebrow { color: var(--wp--preset--color--dark-green); }
.happyglp-who-for-intro { font-size: var(--wp--preset--font-size--body-large); line-height: 1.5; font-weight: 500; max-width: 846px; margin: 0; }
.happyglp-who-for-group { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--space-60); width: 100%; }
.happyglp-who-for-group .eyebrow { text-align: center; }
.happyglp-who-for-group.negative .eyebrow { color: var(--wp--preset--color--dark-orange); text-decoration: underline; text-underline-offset: 3px; }
.happyglp-who-for-group.positive .eyebrow { color: var(--wp--preset--color--dark-green); }
.happyglp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--space-70); width: 100%; }
.happyglp-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--light-green);
  border-radius: var(--wp--custom--radius--sm);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-40);
}
.happyglp-card-icon { width: 44px; height: 44px; border-radius: var(--wp--custom--radius--xs); display: flex; align-items: center; justify-content: center; }
.happyglp-card-icon svg { width: 24px; height: 24px; }
.happyglp-card-icon--positive { background: var(--wp--preset--color--light-green); }
.happyglp-card-icon--negative { background: var(--wp--preset--color--light-yellow); }
.happyglp-card h3 { font-family: var(--wp--preset--font-family--fraunces); font-weight: 400; font-size: var(--wp--preset--font-size--heading-sm); line-height: 1.18; margin: 0; }
.happyglp-card p { font-size: var(--wp--preset--font-size--small); line-height: 1.45; color: var(--wp--preset--color--card-body); margin: 0; }

/* How partners earn */
.happyglp-how-earn-wrap { padding: 0 max(40px, calc((100% - 1200px) / 2)); }
.happyglp-how-earn {
  background: var(--wp--preset--color--light-green);
  border-radius: var(--wp--custom--radius--md);
  padding: 52px 80px 56px;
  display: flex;
  gap: var(--wp--preset--spacing--space-60);
  align-items: center;
}
.happyglp-how-earn-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--space-40); flex-shrink: 0; width: 386px; }
.happyglp-how-earn-left h2 { font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: var(--wp--preset--font-size--heading-lg); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.happyglp-how-earn-left h2 .accent { color: var(--wp--preset--color--dark-orange); }
.happyglp-how-earn-left .eyebrow { color: var(--wp--preset--color--dark-green); }
.happyglp-crit-list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--space-40); width: 100%; margin: 0; padding: 0; list-style: none; }
.happyglp-crit-item { display: flex; gap: 16px; align-items: flex-start; }
.happyglp-crit-item svg { width: 28px; height: 28px; flex-shrink: 0; }
.happyglp-crit-item p { font-size: var(--wp--preset--font-size--base); line-height: 1.5; margin: 0; }
.happyglp-crit-item strong { font-weight: 700; }

/* Pillars */
.happyglp-pillars {
  margin: var(--wp--preset--spacing--space-110) 0;
  padding: 0 max(40px, calc((100% - 1200px) / 2));
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-70);
}
.happyglp-pillars-top { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--space-110); }
.happyglp-pillars-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--space-40); }
.happyglp-pillars-text .eyebrow { color: var(--wp--preset--color--pillar-eyebrow); }
.happyglp-pillars-text h2 { font-family: var(--wp--preset--font-family--fraunces); font-weight: 400; font-size: var(--wp--preset--font-size--heading-lg); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.happyglp-pillars-text p { font-size: var(--wp--preset--font-size--body-large); line-height: 1.5; font-weight: 500; max-width: 700px; margin: 0; }
.happyglp-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--space-50); align-items: end; }
.happyglp-outcome-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--medium-green);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-40);
  height: 413px;
}
.happyglp-outcome-image { flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: #415d8c; }
.happyglp-outcome-image img { width: 100%; height: 100%; object-fit: cover; }
.happyglp-outcome-card-text { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.happyglp-outcome-card-text h3 { font-family: var(--wp--preset--font-family--42dot-sans); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--wp--preset--color--dark-orange); margin: 0; }
.happyglp-outcome-card-text p { font-family: var(--wp--preset--font-family--42dot-sans); font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--wp--preset--color--dark-gray); margin: 0; }

/* Carousel dot pagination — hidden on desktop (cards/outcomes render as a
   static grid there); shown on mobile where these rows become swipeable. */
.happyglp-carousel-dots {
  display: none;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.happyglp-carousel-dots button {
  width: 13px;
  height: 13px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--dark-gray);
  background: var(--wp--preset--color--light-green);
  cursor: pointer;
  flex-shrink: 0;
}
.happyglp-carousel-dots--positive button.is-active { background: var(--wp--preset--color--dark-green); }
.happyglp-carousel-dots--negative button { background: var(--wp--preset--color--light-yellow); }
.happyglp-carousel-dots--negative button.is-active { background: var(--wp--preset--color--dark-orange); }
.happyglp-carousel-dots--pillars button.is-active { background: var(--wp--preset--color--dark-green); }

/* CTA */
.happyglp-cta-wrap { margin-top: var(--wp--preset--spacing--space-110); padding: 0 max(40px, calc((100% - 1200px) / 2)); }
.happyglp-cta {
  padding: 64px 80px;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--gradient--green-gradient, linear-gradient(148deg, #2f6f5e 0%, #1f5548 71%));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--space-60);
  text-align: center;
}
.happyglp-cta h2 { font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: var(--wp--preset--font-size--heading-xl); line-height: 1.1; letter-spacing: -0.01em; color: var(--wp--preset--color--white); margin: 0; max-width: 900px; }
.happyglp-cta p { font-size: var(--wp--preset--font-size--body-large); line-height: 1.5; color: var(--wp--preset--color--light-green); max-width: 600px; margin: 0; }

/* Footer */
.happyglp-footer { background: var(--wp--preset--color--dark-gray); margin-top: var(--wp--preset--spacing--space-110); padding: 24px max(40px, calc((100% - 1200px) / 2)); display: flex; align-items: center; justify-content: center; }
.happyglp-footer-wrap { max-width: 1200px; margin: 0 auto; }
.happyglp-footer-copyright { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--background-green); opacity: 0.75; margin: 0; text-align: center; }

/* Save my spot — modal popup (Figma: desktop node 1594:262, mobile node 1594:944) */
.happyglp-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.happyglp-modal.is-open { display: flex; }
.happyglp-modal-panel {
  position: relative;
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--md);
  width: min(820px, 100%);
  /* No max-height/overflow here: Forminator's select dropdown renders as an
     absolutely-positioned child of this panel (not portaled to <body>), so
     any overflow clipping here would cut the open dropdown off. The outer
     .happyglp-modal already scrolls the whole panel on short viewports. */
}
.happyglp-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--wp--preset--color--dark-gray);
}
.happyglp-modal-close svg { width: 24px; height: 24px; }
.happyglp-modal-form {
  padding: 36px 44px 44px;
}
.happyglp-modal-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.happyglp-modal-head h2 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: 28px;
  line-height: 32px;
  color: var(--wp--preset--color--dark-gray);
  margin: 0;
}
.happyglp-modal-head p {
  font-size: 15px;
  line-height: 22px;
  color: var(--wp--preset--color--card-body);
  margin: 0;
}
.happyglp-modal-head p strong { color: var(--wp--preset--color--dark-orange); font-weight: 600; }

/* Forminator field styling to match the Figma inputs exactly */
.happyglp-modal-form .forminator-row { margin: 0 0 20px; }
.happyglp-modal-form .forminator-row:last-of-type { margin-bottom: 0; }
.happyglp-modal-form .forminator-row-inside.forminator-row-with-confirmation-email,
.happyglp-modal-form .forminator-row[data-multiple] .forminator-row { gap: 18px; }
.happyglp-modal-form .forminator-col-md-6,
.happyglp-modal-form .forminator-col-6 { gap: 18px; }
.happyglp-modal-form .forminator-label {
  display: block;
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  font-size: 13px;
  color: var(--wp--preset--color--dark-gray);
  margin-bottom: 7px;
}
.happyglp-modal-form .forminator-required { color: var(--wp--preset--color--dark-orange); }
.happyglp-modal-form .forminator-input,
.happyglp-modal-form select.forminator-select--field {
  width: 100%;
  background: var(--wp--preset--color--background-green);
  border: 1px solid var(--wp--preset--color--medium-green);
  border-radius: var(--wp--custom--radius--xs);
  padding: 13px 15px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 15px;
  color: var(--wp--preset--color--dark-gray);
  height: auto;
}
.happyglp-modal-form .forminator-input::placeholder { color: #8a9a93; }

/* Forminator's own select2 stylesheet ships a very high-specificity selector
   chain (e.g. `.forminator-ui.forminator-custom-form[data-design="default"]
   select.forminator-select2+.forminator-select .selection span[role="combobox"]
   .select2-selection--single`) that beats a normal-specificity override, which
   is what caused the dropdown to render much shorter than the text inputs
   above it. `!important` here isn't optional styling polish — it's the only
   way to reliably win against that chain regardless of markup nesting. */
.happyglp-modal-form .select2-container {
  width: 100% !important;
}
.happyglp-modal-form .select2-selection--single {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background: var(--wp--preset--color--background-green) !important;
  border: 1px solid var(--wp--preset--color--medium-green) !important;
  border-radius: var(--wp--custom--radius--xs) !important;
  padding: 9px 40px 9px 15px !important;
}
.happyglp-modal-form .select2-selection__rendered {
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 15px !important;
  line-height: 19.5px !important;
  color: var(--wp--preset--color--dark-gray) !important;
}
.happyglp-modal-form .select2-selection__placeholder { color: #8a9a93 !important; }
.happyglp-modal-form .select2-selection__arrow {
  width: 24px !important;
  height: 24px !important;
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
}

/* The open dropdown/options list — also needs !important for the same reason. */
.happyglp-modal-form .forminator-select-dropdown {
  border: 1px solid var(--wp--preset--color--medium-green) !important;
  border-radius: var(--wp--custom--radius--xs) !important;
  background: var(--wp--preset--color--white) !important;
  box-shadow: 0 8px 24px rgba(20, 46, 41, 0.12) !important;
}
.happyglp-modal-form .select2-results__option {
  padding: 10px 15px !important;
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 15px !important;
  line-height: normal !important;
  color: var(--wp--preset--color--dark-gray) !important;
}
.happyglp-modal-form .select2-results__option--highlighted {
  background: var(--wp--preset--color--light-green) !important;
  color: var(--wp--preset--color--dark-gray) !important;
}
.happyglp-modal-form .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--wp--preset--color--dark-orange);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: var(--wp--custom--radius--pill);
  padding: 16px 32px;
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.happyglp-modal-form .forminator-response-message:empty { display: none; }

body.happyglp-modal-open { overflow: hidden; }

/* ---------- Mobile (768px breakpoint — default choice, see design notes) ---------- */
@media (max-width: 768px) {
  .happyglp-header-bar { height: 58px; }

  .happyglp-hero { flex-direction: column; margin: var(--wp--preset--spacing--space-70) auto; padding: 0 20px; gap: var(--wp--preset--spacing--space-70); }
  .happyglp-hero-content { gap: var(--wp--preset--spacing--space-60); width: 100%; }
  .happyglp-hero-content h1 { font-size: 2.5rem; }
  .happyglp-hero-copy { max-width: none; font-size: var(--wp--preset--font-size--base); }
  .happyglp-hero-image { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .happyglp-hero-rule { padding: 0 20px; }

  .happyglp-callout-wrap { margin-top: var(--wp--preset--spacing--space-70); padding: 0 20px; }
  .happyglp-callout { padding: 24px 20px; }
  .happyglp-callout h2 { font-size: 2rem; }
  .tags { flex-direction: column; align-items: center; }
  .happyglp-bullets { flex-direction: column; align-items: flex-start; gap: 16px; }

  .happyglp-agenda { margin-top: var(--wp--preset--spacing--space-70); padding: var(--wp--preset--spacing--space-90) 20px; }
  .happyglp-steps { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--space-70); }
  .happyglp-section-head h2 { font-size: 2rem; }

  .happyglp-who-for { margin: var(--wp--preset--spacing--space-70) 0; padding: 0 20px; }
  .happyglp-who-for-intro { font-size: var(--wp--preset--font-size--base); }

  .happyglp-how-earn-wrap { padding: 0 20px; }
  .happyglp-how-earn { flex-direction: column; padding: 24px; align-items: stretch; gap: var(--wp--preset--spacing--space-60); }
  .happyglp-how-earn-left { width: 100%; }
  .happyglp-how-earn-left h2 { font-size: 2rem; }

  .happyglp-pillars { margin: var(--wp--preset--spacing--space-70) 0; padding: 0 20px; gap: var(--wp--preset--spacing--space-60); }
  .happyglp-pillars-top { flex-direction: column; align-items: center; text-align: center; gap: var(--wp--preset--spacing--space-60); }
  .happyglp-pillars-text { align-items: center; text-align: center; }
  .happyglp-pillars-text h2 { font-size: 2rem; text-align: center; }
  .happyglp-outcome-card { height: 320px; }

  /* Carousels — Figma's mobile frames show one card + dot pagination for these
     three card rows (what-you-need, what-you-not-need, brand pillar outcomes),
     unlike the static grids desktop uses. Real swipeable scroll-snap row. */
  .happyglp-cards,
  .happyglp-outcomes {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin: 0 -20px;
    padding: 0 20px;
    cursor: grab;
  }
  .happyglp-cards::-webkit-scrollbar,
  .happyglp-outcomes::-webkit-scrollbar { display: none; }
  /* Mouse/pen drag (see carousel.js) — touch keeps native panning and
     never gets this class, so its scroll-snap is left alone. */
  .happyglp-cards.is-dragging,
  .happyglp-outcomes.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }
  .happyglp-cards .happyglp-card,
  .happyglp-outcomes .happyglp-outcome-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin-right: 16px;
  }
  .happyglp-cards .happyglp-card:last-child,
  .happyglp-outcomes .happyglp-outcome-card:last-child { margin-right: 0; }

  .happyglp-carousel-dots { display: flex; }

  .happyglp-cta-wrap { margin-top: var(--wp--preset--spacing--space-70); padding: 0 20px; }
  .happyglp-cta { padding: 40px 20px; }
  .happyglp-cta h2 { font-size: 1.75rem; }

  .happyglp-footer { margin-top: var(--wp--preset--spacing--space-70); padding: 40px 20px; }

  /* Save my spot modal — mobile (Figma node 1594:944): fields stack, more top padding. */
  .happyglp-modal { padding: 12px; }
  .happyglp-modal-form { padding: 40px 24px 32px; }
  .happyglp-modal-form .forminator-row[data-multiple] .forminator-row,
  .happyglp-modal-form .forminator-row-inside.forminator-row-with-confirmation-email {
    flex-direction: column;
  }
  .happyglp-modal-form .forminator-col-md-6,
  .happyglp-modal-form .forminator-col-6 { width: 100%; }
}