/*
 Theme Name:   RPG Child
 Description:  A child theme for the Astra WordPress Theme, for the Referral Pro Group website.
 Author:       Referral Pro Group
 Template:     astra
 Version:      1.1.2
*/

/* ==========================================================================
   1. FONT IMPORTS
   ========================================================================== */

/* Outfit (for Body) is self-hosted below. */
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-Thin.woff2") format("woff2"),
    url("fonts/Outfit-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-ExtraLight.woff2") format("woff2"),
    url("fonts/Outfit-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-Light.woff2") format("woff2"),
    url("fonts/Outfit-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-Regular.woff2") format("woff2"),
    url("fonts/Outfit-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-Medium.woff2") format("woff2"),
    url("fonts/Outfit-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-SemiBold.woff2") format("woff2"),
    url("fonts/Outfit-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-Bold.woff2") format("woff2"),
    url("fonts/Outfit-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-ExtraBold.woff2") format("woff2"),
    url("fonts/Outfit-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src:
    url("fonts/Outfit-Black.woff2") format("woff2"),
    url("fonts/Outfit-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue Extended (for Headings) is self-hosted below. */
@font-face {
  font-family: "Helvetica Neue Extended";
  src:
    url("fonts/HelveticaNeueLTStd-LtEx.woff2") format("woff2"),
    url("fonts/HelveticaNeueLTStd-LtEx.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Extended";
  src:
    url("fonts/HelveticaNeueLTStd-Ex.woff2") format("woff2"),
    url("fonts/HelveticaNeueLTStd-Ex.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Extended";
  src:
    url("fonts/HelveticaNeueLTStd-MdEx.woff2") format("woff2"),
    url("fonts/HelveticaNeueLTStd-MdEx.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Extended";
  src:
    url("fonts/HelveticaNeueLTStd-BdEx.woff2") format("woff2"),
    url("fonts/HelveticaNeueLTStd-BdEx.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback font to prevent CLS during font loading */
@font-face {
  font-family: "Heading-Fallback";
  src: local("Arial");
  size-adjust: 120%;
  ascent-override: 90%;
}

/* ==========================================================================
   2. DESIGN TOKENS (THE SINGLE SOURCE OF TRUTH)
   ========================================================================== */

:root {
  /* RPG Color Palette (WCAG 2.1 AA Compliant) */
  --color-surface-primary: #ffffff;
  --color-surface-subtle: #f5f6f7;
  --color-surface-inverse: #061d31; /* Dark Blue */

  /* Dark raised surface for inverse themes (login/hero cards) */
  --color-surface-elevated-inverse: color-mix(
    in srgb,
    var(--color-surface-inverse),
    white 7%
  );

  --color-text-primary: #041422;
  --color-text-secondary: #5a646d;
  --color-text-inverse: #f5f6f7;
  --color-text-pure-white: #ffffff;

  --color-border-default: #dde1e4;
  /* NEW (lighter hairline for subtle panels) */
  --color-border-subtle: #e9edf0;
  --color-border-strong: #5A6B78;     /* ~5.1:1 vs #F5F6F7 → passes */
  --color-focus-ring:   #1D4ED8;      /* ~6.2:1 vs #F5F6F7 */
  --color-error-strong: #C03221;      /* ~5.2:1 vs #F5F6F7 */

  --color-accent-primary: #69aeaf; /* Teal */
  --color-accent-primary-ui: #227983; /* Accessible Teal */
  --color-accent-secondary: #c49d4d; /* Gold */
  --color-accent-secondary-ui: #a57d2a; /* Accessible Gold */

  /* Font Families */
  --font-family-body: "Outfit", sans-serif;
  --font-family-heading: "Helvetica Neue Extended", "Heading-Fallback",
    sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Fluid Type Scale (Mobile First) */
  --font-size-base: clamp(0.9375rem, 0.39vw + 0.86rem, 1.1875rem);
  --font-size-sm: clamp(0.875rem, 0.1vw + 0.85rem, 0.9375rem);
  --font-size-xs: clamp(0.8125rem, 0.1vw + 0.79rem, 0.875rem);
  --font-size-md: clamp(1.11rem, 0.43vw + 0.94rem, 1.41rem);
  --font-size-lg: clamp(1.39rem, 0.72vw + 1.19rem, 1.88rem);
  --font-size-xl: clamp(1.74rem, 1.12vw + 1.45rem, 2.5rem);
  --font-size-xxl: clamp(2.17rem, 1.84vw + 1.8rem, 3.34rem);
  --font-size-kicker: clamp(1.74rem, 1.12vw + 1.45rem, 2.5rem);

  /* Spacing Scale */
  --space-2xs: 0.375rem; /* ~6px */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-3xl: 3rem;
  --space-xxl: 4rem;

  /* Borders & Radius */
  --border-radius-sm: 3px;
  --border-radius-md: 0.5rem; /* New token for panel radius */
  --border-width: 1px;
  --border-color: var(--color-border-default);

  /* Reading measure for long-form text */
  --measure-prose: 72ch; /* default */
  --measure-prose-narrow: 60ch;
  --measure-prose-wide: 80ch;

  /* Layout */
  --container-width: 1340px;

  /* Homepage: People Strip Section */
  --graphic-network-alpha: 0.04;
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.12);
  /* NEW mid-tier elevation for hover states */
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);

  --motion-fast: 220ms;

  /* Homepage: Benefits & How It Works Sections */
  --color-accent-primary-20: color-mix(
    in srgb,
    var(--color-accent-primary) 20%,
    transparent
  );
  --section-wash-accent: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent-primary) 4%, transparent),
    transparent
  );
  --motion-medium: 300ms;

  --standard-gray-lift: linear-gradient(
    180deg,
    color-mix(in srgb, #6c757d 20%, transparent),
    /* Subtle gray-blue lift */ transparent 100%
  );
}

/* ==========================================================================
   3. GLOBAL BASE STYLES
   ========================================================================== */

body {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-wrap: balance;
  margin: 0 0 var(--space-md) 0;
}

/* REFINED: Optical tracking and rhythm for headings */
h1 {
  font-size: var(--font-size-xxl);
  letter-spacing: -0.012em;
  line-height: 1.15;
}
h2 {
  font-size: var(--font-size-xl);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h3 {
  font-size: var(--font-size-lg);
  letter-spacing: -0.006em;
  line-height: 1.25;
}
h4 {
  font-size: var(--font-size-md);
  line-height: 1.3;
}

p {
  margin: 0 0 var(--space-md) 0;
  line-height: 1.6;
}

a {
  color: var(--color-accent-primary-ui);
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
}

a:hover,
a:focus {
  text-decoration: underline;
  opacity: 0.8;
}

/* ==========================================================================
   4. GENERIC COMPONENT STYLES
   ========================================================================== */

.rpg-btn-primary,
.pmpro-btn,
.pmpro_btn,
input[type="submit"],
button.button {
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-regular);
  border-radius: var(--border-radius-sm);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 2.5rem;
  cursor: pointer;

  /* REFINED: Optical Centering & Padding */
  --btn-cap-shift: 0.12rem; /* Nudges text down for visual balance */
  padding-top: calc(0.8125rem + var(--btn-cap-shift));
  padding-bottom: calc(0.8125rem - var(--btn-cap-shift));
  padding-inline: var(--space-lg);

  /* REFINED: Enhanced transition and active state */
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    opacity 0.18s ease;
}

.rpg-btn-primary:hover,
.pmpro-btn:hover,
.pmpro_btn:hover,
input[type="submit"]:hover,
button.button:hover {
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  opacity: 0.85;
  text-decoration: none;
}

.rpg-btn-primary:active,
.pmpro-btn:active,
.pmpro_btn:active,
input[type="submit"]:active,
button.button:active {
  transform: translateY(0px);
}

@media (prefers-reduced-motion: no-preference) {
  .rpg-btn-primary:active,
  .pmpro-btn:active,
  .pmpro_btn:active,
  input[type="submit"]:active,
  button.button:active {
    transform: translateY(1px);
  }
}

/* ==========================================================================
   4.1 SPECTRA BUTTON COMPATIBILITY FIX (UPDATED)
   ========================================================================== */

/*
* When applying .pmpro-btn to a Spectra Button block, the class is added
* to a wrapper DIV, not the button's <a> tag itself. This requires
* neutralizing the wrapper and styling the inner <a> tag directly.
*/

/* Step 1: Neutralize the wrapper DIV that has the .pmpro-btn class. */
.wp-block-uagb-buttons-child.pmpro-btn {
  background: none;
  padding: 0;
  border: none;
  min-height: 0;
}

/* Step 2: Apply all intended button styles to the actual link inside. */
.wp-block-uagb-buttons-child.pmpro-btn .uagb-buttons-repeater {
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-regular);
  border-radius: var(--border-radius-sm);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 2.5rem;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    opacity 0.18s ease;
  text-decoration: none;

  /* NEW: Apply the optical centering fix from the hero section */
  --btn-cap-shift: 0.12rem;
  padding-top: calc(0.8125rem + var(--btn-cap-shift));
  padding-bottom: calc(0.8125rem - var(--btn-cap-shift));
  padding-inline: var(--space-lg); /* Explicitly set side padding */
}

/* Step 3: Ensure hover and active states target the link correctly. */
.wp-block-uagb-buttons-child.pmpro-btn .uagb-buttons-repeater:hover {
  opacity: 0.85;
  text-decoration: none;
  color: var(--color-text-inverse);
}

.wp-block-uagb-buttons-child.pmpro-btn .uagb-buttons-repeater:active {
  transform: translateY(1px);
}

/* Step 4: Add the accessible focus ring. */
.wp-block-uagb-buttons-child.pmpro-btn .uagb-buttons-repeater:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-accent-secondary-ui);
  outline-offset: 2px;
}

/* ==========================================================================
   5. THEME OVERRIDES & LAYOUT
   ========================================================================== */

.entry-header {
  display: none;
}

.u-rpg-container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-bottom: clamp(
    1.5rem,
    3vw,
    2.5rem
  ); /* Default breather; multiples of base unit */
}

.u-section-after-hero {
  padding-top: clamp(
    2rem,
    5vw,
    3rem
  ); /* Hero-specific lift; Fib-ish ratio to bottom */
}

.u-section-reversed {
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(3rem, 7.5vw, 4rem);
}

/* --- 5.1 Content & Layout Utilities --- */
/* Opt-in prose width limiter */
.u-prose {
  max-width: var(--measure-prose);
  margin-inline: auto;
}

/* Optional variants if you need them */
.u-prose--narrow {
  max-width: var(--measure-prose-narrow);
}
.u-prose--wide {
  max-width: var(--measure-prose-wide);
}

/* Keep Gutenberg/Spectra alignment behaviors intact */
.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* REFINED: Modern, accessible underlines for body links */
.entry-content a {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--color-accent-primary);
}

/* --- 5.2 Main Content Area Spacing Override --- */
/*
 * Astra adds a 60px top/bottom margin on desktop. We are resetting this
 * to zero to take full control of vertical spacing with our own
 * token-based padding on content sections.
*/
.ast-plain-container.ast-no-sidebar #primary {
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .ast-plain-container.ast-no-sidebar #primary {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */

.main-header-bar {
  background-color: var(--color-surface-inverse);
  /* REFINED: Hairline shadow for a premium edge */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.main-header-menu .menu-item > .menu-link {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease-in-out;
}
/* In Section 6: Header & Navigation */
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .menu-item:focus-visible > .menu-link, /* ADD THIS */
.main-header-menu .menu-item.current-menu-item > .menu-link,
.main-header-menu .menu-item.current-menu-ancestor > .menu-link {
  color: var(--color-accent-primary);
  background-color: transparent;
}

.main-header-menu .sub-menu {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--color-surface-primary);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: var(--space-sm) 0;
}
.main-header-menu .sub-menu .menu-item .menu-link {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: normal;
  padding: var(--space-sm) var(--space-lg);
  border: none;
  transition: all 0.2s ease-in-out;
}
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link {
  color: var(--color-text-inverse);
  background-color: var(--color-accent-primary-ui);
  opacity: 1;
}

.ast-header-cart-wrap .ast-cart-icon,
.ast-mobile-menu-trigger-minimal {
  color: var(--color-text-inverse);
  transition: color 0.2s ease-in-out;
}
.ast-header-cart-wrap:hover .ast-cart-icon,
.ast-mobile-menu-trigger-minimal:hover {
  color: var(--color-accent-secondary);
}

.header-buttons {
  display: flex;
  flex-direction: row;
  align-items: center; /* Changed from flex-end for better vertical alignment */
  gap: var(--space-sm); /* Reduced from md for a tighter group */
  justify-content: center;
  height: 100%;
}

.header-buttons .btn {
  display: inline-block;
  padding: 0.75rem var(--space-sm) 0.5rem var(--space-sm);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  border-width: var(--border-width);
  border-style: solid;
  border-radius: var(--border-radius-sm);
  line-height: 1.2;
  min-width: 130px;
  /* REFINED: Transition matches generic button */
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.header-buttons .btn.btn-primary {
  background-color: var(--color-accent-secondary-ui);
  border-color: var(--color-accent-secondary-ui);
  color: var(--color-text-primary);
}

.header-buttons .btn.btn-secondary {
  background-color: var(--color-surface-subtle);
  border-color: var(--color-accent-primary-ui);
  color: var(--color-text-primary);
}

.header-buttons .btn:hover,
.header-buttons .btn:focus {
  background-color: var(--color-accent-primary-ui);
  border-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .header-buttons .btn:hover,
  .header-buttons .btn:focus {
    transform: translateY(-1px);
  }
}

/* REFINED: Active state for tactile feedback */
.header-buttons .btn:active {
  transform: translateY(1px);
}

/* Sticky header background (if it changes when stuck) */
.main-header-bar.ast-sticky-active,
.site-header.ast-sticky-active {
  background-color: var(--color-surface-inverse);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); /* optional: match non-sticky */
}

/* Sticky menu links – base */
.ast-sticky-active .main-header-menu .menu-item > .menu-link,
.main-header-bar.ast-sticky-active .main-header-menu .menu-item > .menu-link {
  color: var(--color-text-inverse);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease-in-out;
}

/* Sticky menu links – hover/current */
.ast-sticky-active .main-header-menu .menu-item:hover > .menu-link,
.ast-sticky-active .main-header-menu .menu-item.current-menu-item > .menu-link,
.ast-sticky-active
  .main-header-menu
  .menu-item.current-menu-ancestor
  > .menu-link,
.main-header-bar.ast-sticky-active
  .main-header-menu
  .menu-item:hover
  > .menu-link,
.main-header-bar.ast-sticky-active
  .main-header-menu
  .menu-item.current-menu-item
  > .menu-link,
.main-header-bar.ast-sticky-active
  .main-header-menu
  .menu-item.current-menu-ancestor
  > .menu-link {
  color: var(--color-accent-primary);
  background: transparent;
}

/* Sticky state for the cart/trigger icons (if present) */
.ast-sticky-active .ast-header-cart-wrap .ast-cart-icon,
.ast-sticky-active .ast-mobile-menu-trigger-minimal {
  color: var(--color-text-inverse);
}
.ast-sticky-active .ast-header-cart-wrap:hover .ast-cart-icon,
.ast-sticky-active .ast-mobile-menu-trigger-minimal:hover {
  color: var(--color-accent-secondary);
}

/* ==========================================================================
   7. MOBILE & OFF-CANVAS MENU 
   ========================================================================== */

#ast-mobile-popup .ast-mobile-popup-inner,
#ast-mobile-popup .ast-mobile-popup-content {
  background-color: var(--color-surface-inverse) !important;
}

/* REFINED: Safe-area padding for iOS notch/home bar */
#ast-mobile-popup .ast-mobile-popup-header {
  padding-top: max(var(--space-xs), env(safe-area-inset-top));
  padding-left: max(var(--space-xs), env(safe-area-inset-left));
  padding-right: max(var(--space-xs), env(safe-area-inset-right));
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  background: var(--color-surface-inverse);
}

#ast-mobile-popup #menu-toggle-close {
  color: var(--color-text-inverse);
  border-radius: var(--border-radius-sm);
}
#ast-mobile-popup #menu-toggle-close:hover {
  color: var(--color-accent-secondary);
}
#ast-mobile-popup #menu-toggle-close:focus-visible {
  outline: 2px solid var(--color-accent-primary-ui);
  outline-offset: 2px;
}

#ast-mobile-popup .main-header-menu {
  background: var(--color-surface-inverse);
  margin: 0;
  padding: 0;
}

#ast-mobile-popup .main-header-menu > .menu-item {
  background: var(--color-surface-inverse);
}

#ast-mobile-popup .main-header-menu .menu-link {
  display: block;
  width: 100%;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 0;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

#ast-mobile-popup .main-header-menu .menu-item > .menu-link:hover,
#ast-mobile-popup .main-header-menu .current-menu-item > .menu-link,
#ast-mobile-popup .main-header-menu .current-menu-ancestor > .menu-link {
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
}

#ast-mobile-popup .main-header-menu .menu-link:focus-visible {
  outline: 2px solid var(--color-accent-secondary-ui);
  outline-offset: 2px;
}

#ast-mobile-popup .header-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-lg);
  padding: var(--space-lg);
  margin-top: var(--space-sm);
}
#ast-mobile-popup .header-buttons br {
  display: none;
}

#ast-mobile-popup .header-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding-block: var(--space-sm);
  line-height: 1.2;
  font-size: var(--font-size-base);
  border-width: var(--border-width);
  border-radius: var(--border-radius-sm);
}

#ast-mobile-popup .header-buttons .btn:hover,
#ast-mobile-popup .header-buttons .btn:focus {
  background-color: var(--color-accent-primary-ui);
  border-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  text-decoration: none;
}

div.ast-header-html.inner-link-style- {
  width: 100%;
}

div.ast-builder-layout-element.ast-flex.site-header-focus-item.ast-header-html-1 {
  padding: 0;
}

/* Adjust close button size */
.ahfb-svg-iconset svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 921px) {
  .ast-flyout-menu .main-header-menu,
  .ast-flyout-menu .main-header-menu .sub-menu {
    background-color: transparent !important;
  }
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

/* CORRECTED: Use specific rules for each footer row to control padding. */
.site-above-footer-wrap[data-section="section-above-footer-builder"] {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  padding-top: var(--space-xl);
  padding-bottom: 0; /* Removes space below the logo row */
}

.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  padding-top: 0; /* Removes space above the content row */
  padding-bottom: var(--space-xl);
}

/* Remove default padding from the inner container to use our own. */
.site-above-footer-wrap .ast-builder-grid-row-container-inner,
.site-primary-footer-wrap .ast-builder-grid-row-container-inner {
  padding: 0 !important;
}

/* General styles for all content within the footer widgets. */
.ast-footer-widget-area-inner {
  line-height: 1.7;
}

/* General link styles for the footer. */
.ast-footer-widget-area-inner a,
.ast-footer-widget-area-inner a:visited {
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.ast-footer-widget-area-inner a:hover,
.ast-footer-widget-area-inner a:focus-visible {
  color: var(--color-accent-primary-ui);
  text-decoration: underline;
}

/* Accessibility: Add a clear focus state for all footer links. */
.ast-footer-widget-area-inner a:focus-visible {
  outline: 2px solid var(--color-accent-secondary-ui);
  outline-offset: 2px;
}

/* --- 8.2 Above Footer: Brand Logo --- */
.site-above-footer-wrap {
  padding-bottom: 0;
}
.footer-brand__logo,
.footer-brand--logo {
  max-width: 200px;
  height: auto;
  display: block;
}

/* --- 8.3 Primary Footer: Contact & Links --- */
.footer-contact__address,
.footer-contact--address {
  opacity: 0.9;
  color: var(--color-accent-primary) !important;
}
.footer-contact__comms,
.footer-contact--comms {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--color-accent-primary) !important;
}

.footer-contact__comms a,
.footer-contact--comms a {
  color: var(--color-accent-primary) !important;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--color-accent-primary) !important;
}

/* NEW: Make only the legal links uppercase for a refined look. */
.footer-links a {
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Improves readability of uppercase text */
  color: var(--color-accent-primary) !important;
}

/* --- 8.4 Responsive Adjustments --- */
@media (max-width: 768px) {
  /* NEW: Add horizontal padding to match the site's container on mobile. */
  .site-above-footer-wrap,
  .site-primary-footer-wrap {
    padding-inline: var(--space-lg);
  }

  /* CORRECTED: Stack columns and align all content to the left. */
  .site-primary-footer-wrap .ast-builder-grid-row {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: left; /* UPDATED */
  }

  /* CORRECTED: Align logo and links to the left. */
  .footer-brand__logo,
  .footer-brand--logo,
  .footer-links {
    margin-inline: 0; /* UPDATED */
  }
  .footer-contact__comms,
  .footer-contact--comms {
    align-items: flex-start; /* UPDATED */
  }
}
@media (max-width: 544px) {
  .site-primary-footer-wrap .ast-builder-grid-row {
    gap: var(--space-lg);
  }
}

/* --- 8.5 Responsive Gutter Adjustments --- */
/*
 * Adds horizontal padding to the footer on viewports smaller than the
 * site's max-width but larger than the mobile breakpoint. This ensures
 * content doesn't touch the screen edges and aligns with the header/body.
*/
@media (min-width: 768px) and (max-width: 1339.98px) {
  /* Targets Astra's primary and above-footer sections */
  .site-primary-footer-wrap .ast-builder-grid-row,
  .site-above-footer-wrap .ast-builder-grid-row {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}

/* ==========================================================================
   9. PMPro COMPONENTS (V11 - Final and Cleaned)
   ========================================================================== */

/* UPDATED: Prevent full-width bleeding when used with Spectra containers */
.pmpro-account-wrap {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure proper containment within Spectra full-width containers */
.entry-content .alignfull .pmpro-account-wrap,
.entry-content .alignwide .pmpro-account-wrap {
  max-width: var(--content-width, 1200px);
  margin-inline: auto;
}

.rpg-page-header {
  padding-block: var(--space-lg);
  border-bottom: var(--border-width) solid var(--border-color);
  margin-bottom: var(--space-xl);
}
.rpg-page-header__title,
.rpg-page-header--title {
  font-size: var(--font-size-xxl);
  margin: 0;
}

.rpg-account-component-wrapper {
  margin-bottom: var(--space-xl);
}

.rpg-account-nav__list,
.rpg-account-nav--list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.rpg-account-nav__item,
.rpg-account-nav--item {
  flex: 1 1 0;
  min-width: 100px;
  display: flex;
}
.rpg-account-nav__link,
.rpg-account-nav--link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-lg) var(--space-xs);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.rpg-account-nav__icon svg,
.rpg-account-nav--icon svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
}
.rpg-account-nav__label,
.rpg-account-nav--label {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  flex-shrink: 0;
}
.rpg-account-nav__link:hover,
.rpg-account-nav__link:focus-visible,
.rpg-account-nav__link--active,
.rpg-account-nav--link:hover,
.rpg-account-nav--link:focus-visible,
.rpg-account-nav--link--active {
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  text-decoration: none;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .rpg-account-nav__link:hover,
  .rpg-account-nav__link:focus-visible,
  .rpg-account-nav__link--active,
  .rpg-account-nav--link:hover,
  .rpg-account-nav--link:focus-visible,
  .rpg-account-nav--link--active {
    transform: translateY(-2px);
  }
}

/* --- 9.7 PMPro Stock Component Styling --- */
.pmpro-account-wrap .pmpro_section_title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  border-bottom: var(--border-width) solid var(--border-color);
  padding-bottom: var(--space-sm);
  margin: 0 0 var(--space-lg) 0;
}
.pmpro-account-wrap .pmpro_card {
  background-color: var(--color-surface-primary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  box-shadow: none;
  border-collapse: separate;
}
.pmpro_card {
  border: none !important;
  box-shadow: none !important;
  margin: 0;
}

/* ==========================================================================
   10. STYLING REFINEMENTS (FINAL & QA-APPROVED)
   ========================================================================== */

/* --- 10.1 Spacing Adjustments --- */
/* More specific selector to reduce vertical page spacing. */
.entry-content .pmpro-account-wrap {
  padding-block: var(--space-md);
}

@media (min-width: 993px) {
  .ast-separate-container #primary,
  .ast-separate-container.ast-left-sidebar #primary,
  .ast-separate-container.ast-right-sidebar #primary {
    margin: var(--space-xl) 0;
    padding: 0;
  }
}
@media (min-width: 1201px) {
  .ast-separate-container .ast-article-post,
  .ast-separate-container .ast-article-single,
  .ast-separate-container .ast-author-box,
  .ast-separate-container .ast-404-layout-1,
  .ast-separate-container .no-results {
    padding: var(--space-md);
  }
}

.pmpro-account-wrap > * + * {
  margin-top: var(--space-xl);
}
.pmpro .pmpro_section {
  margin: 0;
}
.rpg-account-component-wrapper {
  margin-bottom: 0; /* Stacking rule handles this */
}

/* --- 10.2 Consistent Container & Header Styling --- */
/* Unified style for ALL white panels. */
.rpg-account-panel,
.pmpro-account-wrap .pmpro_section {
  background-color: var(--color-surface-primary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Remove default PMPro card styling as our section now handles it. */
.pmpro-account-wrap .pmpro_section .pmpro_card {
  border: none;
  padding: 0;
  margin: 0;
}

/* Unified style for ALL panel titles. */
.rpg-account-panel__title,
.rpg-account-panel--title,
.pmpro-account-wrap .pmpro_section_title,
h2.pmpro_form_heading.pmpro_font-large {
  font-size: var(--font-size-lg);
  display: inline-block;
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width) solid var(--border-color);
  margin: 0 0 var(--space-md) 0;
}

/* REFINED: More specific selector to override theme's bold font weight without !important. */
.entry-content .rpg-account-panel__title,
.entry-content .rpg-account-panel--title,
.entry-content .pmpro-account-wrap .pmpro_section_title,
h2.pmpro_form_heading.pmpro_font-large,
h2.pmpro_card_title.pmpro_font-large {
  font-weight: var(--font-weight-medium);
}

/* Reset inner panel wrappers as the parent now controls padding. */
.rpg-account-panel__header,
.rpg-account-panel--header,
.rpg-account-panel__content,
.rpg-account-panel--content {
  padding: 0;
  border: none;
  margin-bottom: var(--space-md);
}
.rpg-account-panel__content,
.rpg-account-panel--content {
  margin-bottom: 0;
}

/* --- 10.3 Avatar Removal & Font Override --- */
.pmpro-account-wrap .pmpro_heading-with-avatar img.avatar {
  display: none;
}
.pmpro-account-wrap .pmpro_card_title.pmpro_heading-with-avatar {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-lg);
  line-height: 1.4;
}
.pmpro-account-wrap .pmpro_card_content {
  padding-top: var(--space-md);
}

.pmpro-account-wrap .pmpro_card_actions {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.pmpro-account-wrap .pmpro_card_actions .pmpro_card_action_separator {
  display: none;
}
.pmpro-account-wrap .pmpro_card_actions .pmpro_card_action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-md);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
}
.pmpro-account-wrap .pmpro_card_actions .pmpro_card_action a:hover,
.pmpro-account-wrap .pmpro_card_actions .pmpro_card_action a:focus {
  opacity: 0.8;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .pmpro-account-wrap .pmpro_card_actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .pmpro-account-wrap .pmpro_card_actions .pmpro_card_action a {
    justify-content: flex-start;
    padding: var(--space-sm) 0;
  }
}

/* --- 10.4 Navigation Button Sizing & Icons --- */
.rpg-account-nav__item,
.rpg-account-nav--item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(16.666% - 10px);
}
.rpg-account-nav__link:focus,
.rpg-account-nav__link:focus-visible,
.rpg-account-nav--link:focus,
.rpg-account-nav--link:focus-visible {
  outline: 2px solid var(--color-accent-secondary-ui);
  outline-offset: 2px;
}

/* --- 10.5 Responsive Adjustments --- */
@media (max-width: 1180px) {
  .rpg-account-nav__item,
  .rpg-account-nav--item {
    flex-basis: calc(25% - 9px);
  }
}
@media (max-width: 768px) {
  /* Reduce outer container padding on mobile. */
  .rpg-account-panel,
  .pmpro-account-wrap .pmpro_section {
    padding: var(--space-lg);
  }

  .entry-content .pmpro-account-wrap .pmpro_section .pmpro_card_content {
    padding-inline: var(--space-md);
  }

  .entry-content .pmpro-account-wrap .pmpro_section h3 {
    padding-inline: var(--space-md);
  }

  .rpg-account-nav__item,
  .rpg-account-nav--item {
    flex-basis: calc(50% - 6px);
  }
}
@media (max-width: 544px) {
  /* On small mobile, stack to a single column. */
  .rpg-account-nav__item,
  .rpg-account-nav--item {
    flex-basis: 100%;
  }

  .entry-content .rpg-account-nav__list,
  .entry-content .rpg-account-nav--list {
    padding-left: 0;
    justify-content: center;
  }
  .rpg-account-nav__item,
  .rpg-account-nav--item {
    flex-basis: auto;
    max-width: 200px;
  }
}

/* ==========================================================================
   11. RPG MEMBERSHIP LEVELS CARDS (WCAG 2.1 AA COMPLIANT)
   ========================================================================== */

/* --- 11.1 Levels List Container --- */
.rpg-levels {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none; /* Remove bullets */
}

/* --- 11.2 Individual Level Card --- */
.rpg-level-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  max-width: 600px; /* Constrain card width */
  
  /* Gradient background matching site design system */
  background: linear-gradient(
      180deg,
      color-mix(
          in srgb,
          var(--color-accent-primary-ui),
          var(--color-surface-subtle) 88%
        )
        0%,
      color-mix(in srgb, var(--color-surface-subtle), transparent 100%) 60%
    ),
    var(--color-surface-subtle);
  
  border: 2px solid var(--color-border-default);
  border-radius: var(--border-radius-md);
  transition: 
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

/* Hover state for interactive cards (with action URLs) */
.rpg-level-card:has(.rpg-level-card__cta a[href]:not([href=""])):hover {
  border-color: var(--color-accent-primary-ui);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .rpg-level-card:has(.rpg-level-card__cta a[href]:not([href=""])):hover {
    transform: translateY(-2px);
  }
}

/* --- 11.3 Current Plan State (Active Level) --- */
.rpg-level-card:has(.rpg-level-card__cta a[href=""]),
.rpg-level-card--current {
  /* Enhanced gradient for active state */
  background: linear-gradient(
      180deg,
      color-mix(
          in srgb,
          var(--color-accent-primary-ui),
          var(--color-surface-subtle) 82%
        )
        0%,
      color-mix(in srgb, var(--color-surface-subtle), transparent 100%) 60%
    ),
    var(--color-surface-subtle);
  border-color: var(--color-accent-primary);
  border-width: 2px;
}

/* Visual indicator badge for current plan */
.rpg-level-card:has(.rpg-level-card__cta a[href=""])::before,
.rpg-level-card--current::before {
  content: "Active";
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--border-radius-sm);
  line-height: 1;
}

/* --- 11.4 Pending State --- */
.rpg-level-card:has(.rpg-level-card__title:contains("Pending")),
.rpg-level-card--pending {
  /* Gold-tinted gradient for pending state */
  background: linear-gradient(
      180deg,
      color-mix(
          in srgb,
          var(--color-accent-secondary-ui),
          var(--color-surface-subtle) 90%
        )
        0%,
      color-mix(in srgb, var(--color-surface-subtle), transparent 100%) 60%
    ),
    var(--color-surface-subtle);
  border-color: var(--color-accent-secondary-ui);
  border-style: dashed;
}

/* --- 11.5 Card Typography --- */
.rpg-level-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  padding-right: var(--space-xxl); /* Space for badge */
  line-height: 1.3;
}

.rpg-level-card__desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* --- 11.6 Call-to-Action Buttons --- */
.rpg-level-card__cta {
  margin-top: auto; /* Push to bottom of card */
  padding-top: var(--space-sm);
}

/* Primary action button */
.rpg-level-card__cta .btn,
.rpg-level-card__cta a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* WCAG touch target */
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    transform var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
  cursor: pointer;
}

.rpg-level-card__cta .btn:hover,
.rpg-level-card__cta a.btn:hover {
  background-color: color-mix(in srgb, var(--color-accent-primary-ui), black 10%);
  opacity: 0.95;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .rpg-level-card__cta .btn:hover,
  .rpg-level-card__cta a.btn:hover {
    transform: translateY(-1px);
  }
}

.rpg-level-card__cta .btn:active,
.rpg-level-card__cta a.btn:active {
  transform: translateY(0);
}

/* WCAG 2.1 AA Focus State */
.rpg-level-card__cta .btn:focus-visible,
.rpg-level-card__cta a.btn:focus-visible {
  outline: 3px solid var(--color-accent-secondary-ui);
  outline-offset: 3px;
  border-color: var(--color-accent-secondary-ui);
}

/* Current plan button (disabled state) */
.rpg-level-card__cta a[href=""],
.rpg-level-card__cta .btn--disabled {
  background-color: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}

/* Secondary action button variant (for pending/edit profile) */
.rpg-level-card__cta .btn--secondary {
  background-color: transparent;
  color: var(--color-accent-primary-ui);
  border-color: var(--color-accent-primary-ui);
}

.rpg-level-card__cta .btn--secondary:hover {
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  opacity: 1;
}

/* --- 11.7 Responsive Adjustments --- */
@media (max-width: 768px) {
  .rpg-level-card {
    padding: var(--space-lg);
  }
  
  .rpg-level-card__title {
    font-size: var(--font-size-md);
    padding-right: var(--space-xl);
  }
  
  .rpg-level-card:has(.rpg-level-card__cta a[href=""])::before,
  .rpg-level-card--current::before {
    top: var(--space-sm);
    right: var(--space-sm);
    font-size: 0.6875rem; /* Slightly smaller on mobile */
  }
}

@media (max-width: 544px) {
  .rpg-levels {
    gap: var(--space-md);
  }
  
  .rpg-level-card__cta .btn,
  .rpg-level-card__cta a.btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- 11.8 Utility Classes for Manual State Control --- */
/* Switch state for upgrade/downgrade scenarios */
.rpg-level-card--switch {
  border-color: var(--color-accent-secondary-ui);
}

.rpg-level-card--switch:hover {
  border-color: var(--color-accent-secondary);
  box-shadow: 
    0 0 0 1px var(--color-accent-secondary),
    var(--shadow-md);
}

/* --- 11.9 High Contrast Mode Support --- */
@media (prefers-contrast: high) {
  .rpg-level-card {
    border-width: 3px;
  }
  
  .rpg-level-card:has(.rpg-level-card__cta a[href=""]),
  .rpg-level-card--current {
    border-width: 4px;
  }
  
  .rpg-level-card__cta .btn:focus-visible,
  .rpg-level-card__cta a.btn:focus-visible {
    outline-width: 4px;
  }
}

/* --- 11.10 Print Styles --- */
@media print {
  .rpg-level-card {
    border: 2px solid #000;
    page-break-inside: avoid;
  }
  
  .rpg-level-card__cta {
    display: none;
  }
}

/* ==========================================================================
   12. AUTH SCREENS (FINAL REFACTOR)
   ========================================================================== */

/* --- 12.1 General Layout & Scaffolding --- */

/* Page-scoped baseline */
body.rpg-auth-page {
  background: var(--color-surface-inverse);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-inverse), black 6%) 0%,
    var(--color-surface-inverse) 24%,
    color-mix(in srgb, var(--color-surface-inverse), white 4%) 52%,
    var(--color-surface-inverse) 78%,
    color-mix(in srgb, var(--color-surface-inverse), black 8%) 100%
  );
  background-attachment: fixed;
}
body.rpg-auth-page .site-content {
  background: transparent;
}

/* Optional: Faint center glow behind the card */
body.rpg-auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    800px 500px at 50% 28%,
    color-mix(in srgb, var(--color-surface-inverse), white 6%),
    transparent 70%
  );
  z-index: 0;
}

/* Main auth container */
.rpg-auth {
  position: relative;
  z-index: 1;
  padding-block: var(--space-3xl);
}

/* Intro text above the form */
.rpg-auth__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.rpg-auth__intro h2,
.rpg-auth__intro p {
  color: var(--color-text-inverse);
}
.rpg-auth__intro h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--space-sm);
}

/* --- 12.2 Dark Login Form Container --- */

.rpg-auth--dark .pmpro_login_wrap {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-xl);
  background: var(--color-surface-elevated-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--border-radius-md);
  border: none;
  box-shadow:
    0 0 0 1px
      color-mix(in srgb, var(--color-accent-primary-ui), transparent 50%),
    0 8px 24px rgba(0, 0, 0, 0.25);
}

.rpg-auth--dark #loginform {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* --- 12.3 Form Fields & Labels --- */

body.rpg-auth-page .rpg-auth--dark #loginform label {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-regular);
  opacity: 0.92;
}

body.rpg-auth-page .rpg-auth--dark #loginform .input {
  background: color-mix(in srgb, var(--color-surface-inverse), white 6%);
  color: var(--color-text-inverse);
  border: var(--border-width) solid rgba(255, 255, 255, 0.14);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease; /* Add transition for smoothness */
}

/* UPDATED: This is the rule that fixes the issue */
body.rpg-auth-page .rpg-auth--dark #loginform .input:focus {
  /* FIX: Keep the background and text color dark on focus */
  background-color: color-mix(in srgb, var(--color-surface-inverse), white 6%);
  color: var(--color-text-inverse);

  /* Keep the enhanced teal border */
  outline: none;
  border-color: var(--color-accent-primary-ui);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--color-accent-primary-ui), transparent 70%);
}

/* --- 12.4 Action Buttons & Links --- */

/* UPDATED: "Log In" button styling to match design system */
body.rpg-auth-page .rpg-auth--dark #loginform #wp-submit {
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  border-color: transparent;
  width: 100%;
  font-weight: var(--font-weight-light); /* FIX: Set correct font weight */
  text-transform: uppercase; /* FIX: Set uppercase text */
  letter-spacing: 0.08em; /* Match other primary buttons */
  border-radius: var(
    --border-radius-sm
  ); /* FIX: Use correct border-radius token */
}
body.rpg-auth-page .rpg-auth--dark #loginform #wp-submit:hover,
body.rpg-auth-page .rpg-auth--dark #loginform #wp-submit:focus {
  background-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
  opacity: 0.9;
}

/* "Show Password" button styling */
.rpg-auth--dark .pmpro_form_field-password-toggle .pmpro_btn {
  color: var(--color-accent-primary-ui);
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: var(--space-xs); /* Explicitly set padding */
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
/* UPDATED: "Show Password" hover state */
.rpg-auth--dark .pmpro_form_field-password-toggle .pmpro_btn:hover {
  color: var(
    --color-accent-secondary-ui
  ); /* FIX: Use high-contrast gold for hover */
  background: transparent; /* FIX: Ensure background doesn't change and cause a jump */
  padding: var(
    --space-xs
  ); /* FIX: Ensure padding doesn't change and cause a jump */
}

/* "Lost Password?" link styling */
.rpg-auth--dark .pmpro_actions_nav a {
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary-ui);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.rpg-auth--dark .pmpro_actions_nav a:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.rpg-auth--dark .pmpro_actions_nav a:focus-visible {
  outline: 2px solid var(--color-accent-secondary-ui);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* --- 12.5 Responsive Adjustments --- */
@media (max-width: 544px) {
  .rpg-auth--dark .pmpro_login_wrap {
    padding: var(--space-lg);
  }
}

/* ==========================================================================
   COMPAT: Underscore → Hyphen aliases for Spectra/Gutenberg
   Policy: New work uses hyphens in editor. Underscore kept as legacy alias.
   Removal target: v1.2
   ========================================================================== */

/* ==========================================================================
   13. HOMEPAGE STYLES
   ========================================================================== */

/* --- 13.1 Homepage Theme Overrides --- */

/* Remove top margin from the first block on the homepage to connect hero to the header. */
body.home .entry-content > .alignfull:first-child {
  margin-top: 0 !important;
}

/* Remove Astra’s default block spacing on mobile to prevent unwanted gaps. */
@media (max-width: 768px) {
  body.home .entry-content {
    --ast-block-spacing: 0 !important;
  }
}

/* ==========================================================================
   13.2 HERO COMPONENT (REFACTORED STANDARD)
   ========================================================================== */

/* A) Main container and layout */
.page-home--hero {
  position: relative;
  display: grid; /* Use grid to layer background image and content */
  overflow: hidden; /* Crops background image */
  color: var(--color-text-pure-white);
  background-color: #061D31;
  isolation: isolate;
}

/* Force all direct children (image, content) to stack in the same grid cell */
.page-home--hero > * {
  grid-area: 1 / 1;
}

/* B) Background image and overlays */
.page-home--hero > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-home--hero picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default focal point, good for landscape desktop images */
  object-position: center 40%;
}

/* Gradient overlay for text readability */
.page-home--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(6, 29, 49, 0.82) 0%,
    rgba(6, 29, 49, 0.6) 46%,
    rgba(6, 29, 49, 0.22) 100%
  );
}

/* Avoid transparency quirks on some auditors */
@media (prefers-reduced-transparency: reduce) {
  .page-home--hero::before {
    background: rgba(6,29,49,0.85);
  }
}

/* C) Content styling */
.page-home--hero .u-rpg-container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  /* Generous padding for desktop */
  padding-block: clamp(var(--space-xl), 8vh, var(--space-xxl));
}

.page-home--hero-content {
  max-width: 680px;
  margin-left: 0;
  margin-right: auto;
}

.page-home--hero-content h1,
.page-home--hero-content p {
  color: var(--color-text-pure-white);
}

/* D) Actions: Buttons & Logos */
.page-home--hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.page-home--hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Custom hero button styles (No changes needed here) */
.entry-content .page-home--hero a.rpg-btn-primary,
.entry-content .page-home--hero a.btn-ghost-white {
  font-family: var(--font-family-heading);
  text-decoration: none !important;
  text-decoration-thickness: 0;
  text-underline-offset: 0;
  --btn-cap-shift: 0.12rem;
  padding-top: calc(0.8125rem + var(--btn-cap-shift));
  padding-bottom: calc(0.8125rem - var(--btn-cap-shift));
}

.btn-ghost-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem var(--space-lg);
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: var(--color-text-inverse);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  min-height: 2.5rem;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease;
}

.btn-ghost-white:hover,
.btn-ghost-white:focus-visible {
  background-color: var(--color-accent-secondary-ui);
  border-color: var(--color-accent-secondary-ui);
  color: var(--color-text-primary);
  outline: 2px solid var(--color-accent-secondary-ui);
  outline-offset: 2px;
  text-decoration: none;
}

/* Logos container (No changes needed here) */
.page-home--hero-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  color: rgba(255, 255, 255, 0.92);
}

.page-home--hero .logo-img {
  display: inline-block;
  height: 20px;
  aspect-ratio: var(--ar, 3/1);
  background-color: currentColor;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  -webkit-mask-image: var(--logo);
  mask-image: var(--logo);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.page-home--hero .logo-img:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  /* Adjust padding for mobile to give content space */
  .page-home--hero .u-rpg-container {
    padding-block: var(--space-xxl) var(--space-xl);
  }

  .page-home--hero-content {
    max-width: 100%;
  }

  /* Darker overlay on mobile for better text contrast */
  .page-home--hero::before {
    background: linear-gradient(
        90deg,
        rgba(6, 29, 49, 0.92) 0%,
        rgba(6, 29, 49, 0.78) 48%,
        rgba(6, 29, 49, 0.5) 100%
      ),
      linear-gradient(180deg, rgba(6, 29, 49, 0.3) 0%, rgba(6, 29, 49, 0) 50%);
    backdrop-filter: brightness(0.9) saturate(0.95);
  }

  /* Adjust image focal point for portrait mobile images */
  .page-home--hero picture img {
    /* With a full-screen container, focusing on the top 25% is a good start */
    object-position: 50% 25%;
  }

  /* Stack buttons and make them full-width on mobile */
  .page-home--hero-buttons {
    gap: var(--space-md);
  }
  .page-home--hero-buttons a {
    width: 100%;
    justify-content: center;
  }
  .page-home--hero-logos {
    gap: var(--space-md);
  }
}

/* === Dual-class COMPAT header (already in file) ===
   /* COMPAT: Underscore → Hyphen aliases for Spectra/Gutenberg
      Policy: Use hyphens in editor. Underscore kept as legacy alias.
      Removal target: None */

/* ==========================================================================
   13. PEOPLE STRIP GRID (HOME PAGE) - ONE-ROW VARIANT
   ========================================================================== */

/* Section Container (updated padding per spec) */
.page-home__people_strip,
.page-home--people-strip {
  background-color: var(--color-bg-default);
  padding-block: var(--space-xl);
  text-align: center;
}
@media (max-width: 1024px) {
  .page-home__people_strip,
  .page-home--people-strip {
    padding-block: var(--space-xl);
  }
}
@media (max-width: 640px) {
  .page-home__people_strip,
  .page-home--people-strip {
    padding-block: var(--space-lg);
  }
}

/* Header Block (centered; max-width 60ch) */

.page-home__people_strip .c-people-header,
.page-home--people-strip .c-people-header {
  max-width: 60ch;
  margin-inline: auto;
}
.page-home__people_strip .c-people-subline,
.page-home--people-strip .c-people-subline {
  margin-block-start: var(--space-sm);
  margin-block-end: var(--space-3xl);
}

/* Grid */
.page-home__people_strip .c-people-grid,
.page-home--people-strip .c-people-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(6, 1fr); /* desktop: single row of six */
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1024px) {
  .page-home__people_strip .c-people-grid,
  .page-home--people-strip .c-people-grid {
    grid-template-columns: repeat(3, 1fr); /* 3x2 */
  }
}
@media (max-width: 640px) {
  .page-home__people_strip .c-people-grid,
  .page-home--people-strip .c-people-grid {
    grid-template-columns: repeat(2, 1fr); /* 2x3 */
  }
}

/* Cards & Media */
.page-home__people_strip .c-people-card,
.page-home--people-strip .c-people-card {
  opacity: 0;
}
.page-home__people_strip .c-people-card.is-visible,
.page-home--people-strip .c-people-card.is-visible {
  opacity: 1;
  transition: opacity var(--motion-fast) ease-out;
}
.page-home__people_strip .c-media-frame,
.page-home--people-strip .c-media-frame {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: var(--color-surface-muted);
}
.page-home__people_strip .c-media-frame img,
.page-home--people-strip .c-media-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .page-home__people_strip .c-people-card,
  .page-home--people-strip .c-people-card {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Optional Network Motif (behind header only; lightened per spec) */
.page-home__people_strip::before,
.page-home--people-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="network" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="50" cy="50" r="1" fill="currentColor" opacity="0.04"/></pattern></defs><rect width="100" height="100" fill="url(%23network)"/></svg>');
  opacity: var(--graphic-network-alpha);
  pointer-events: none;
  z-index: 0;
}

.page-home__people_strip .c-kicker h2,
.page-home--people-strip .c-kicker h2 {
  font-size: var(--font-size-kicker);
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   14. BENEFITS / FOR AGENTS (HOME PAGE)
   ========================================================================== */

/* Section Container */
.page-home__benefits,
.page-home--benefits {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, #6c757d 20%, transparent),
    /* Subtle gray-blue lift */ transparent 100%
  );
  padding-block: var(--space-xl);
  text-align: center;
}
@media (max-width: 1024px) {
  .page-home__benefits,
  .page-home--benefits {
    padding-block: var(--space-xl);
  }
}
@media (max-width: 640px) {
  .page-home__benefits,
  .page-home--benefits {
    padding-block: var(--space-lg);
  }
}

/* Header Block */
.page-home__benefits .c-kicker h2,
.page-home--benefits .c-kicker h2 {
  font-size: var(--font-size-kicker);
  margin-bottom: var(--space-sm);
}
.page-home__benefits .c-benefits-subline,
.page-home--benefits .c-benefits-subline {
  max-width: 60ch;
  margin-inline: auto;
  text-wrap: balance;
  margin-block-end: var(--space-xxl);
}

/* Benefits Grid */
.page-home__benefits .c-benefits-grid,
.page-home--benefits .c-benefits-grid,
.page-home__benefits .c-benefits_grid,
.page-home--benefits .c-benefits_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
@media (max-width: 1024px) and (min-width: 641px) {
  .page-home__benefits .c-benefits-grid,
  .page-home--benefits .c-benefits-grid,
  .page-home__benefits .c-benefits_grid,
  .page-home--benefits .c-benefits_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}
@media (max-width: 640px) {
  .page-home__benefits .c-benefits-grid,
  .page-home--benefits .c-benefits-grid,
  .page-home__benefits .c-benefits_grid,
  .page-home--benefits .c-benefits_grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Cards */
.page-home__benefits .c-card--benefit,
.page-home--benefits .c-card--benefit,
.page-home__benefits .c-card-benefit,
.page-home--benefits .c-card-benefit {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  opacity: 0;
  transition: opacity var(--motion-fast) ease-out;
}
.page-home__benefits .c-card--benefit.is-visible,
.page-home--benefits .c-card--benefit.is-visible,
.page-home__benefits .c-card-benefit.is-visible,
.page-home--benefits .c-card-benefit.is-visible {
  opacity: 1;
  transition: opacity var(--motion-fast) ease-out;
}
.page-home__benefits .c-card--benefit:nth-child(1),
.page-home--benefits .c-card--benefit:nth-child(1),
.page-home__benefits .c-card-benefit:nth-child(1),
.page-home--benefits .c-card-benefit:nth-child(1) {
  transition-delay: 0ms;
}

.page-home__benefits .c-card--benefit:nth-child(2),
.page-home--benefits .c-card--benefit:nth-child(2),
.page-home__benefits .c-card-benefit:nth-child(2),
.page-home--benefits .c-card-benefit:nth-child(2) {
  transition-delay: 120ms;
}

.page-home__benefits .c-card--benefit:nth-child(3),
.page-home--benefits .c-card--benefit:nth-child(3),
.page-home__benefits .c-card-benefit:nth-child(3),
.page-home--benefits .c-card-benefit:nth-child(3) {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-home__benefits .c-card--benefit,
  .page-home--benefits .c-card--benefit,
  .page-home__benefits .c-card-benefit,
  .page-home--benefits .c-card-benefit {
    opacity: 1 !important;
    transition: none !important;
  }
}

.page-home__benefits .c-card--benefit:hover,
.page-home--benefits .c-card--benefit:hover,
.page-home__benefits .c-card-benefit:hover,
.page-home--benefits .c-card-benefit:hover,
.page-home__benefits .c-card--benefit:focus-within,
.page-home--benefits .c-card--benefit:focus-within,
.page-home__benefits .c-card-benefit:focus-within,
.page-home--benefits .c-card-benefit:focus-within {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-accent-primary-20);
  transform: translateY(-2px);
  transition:
    box-shadow var(--motion-medium) ease-out,
    border-color var(--motion-medium) ease-out,
    transform var(--motion-medium) ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .page-home__benefits .c-card--benefit:hover,
  .page-home--benefits .c-card--benefit:hover,
  .page-home__benefits .c-card-benefit:hover,
  .page-home--benefits .c-card-benefit:hover,
  .page-home__benefits .c-card--benefit:focus-within,
  .page-home--benefits .c-card--benefit:focus-within,
  .page-home__benefits .c-card-benefit:focus-within,
  .page-home--benefits .c-card-benefit:focus-within {
    transform: none;
  }
}

.page-home__benefits .c-card--benefit:focus-within,
.page-home--benefits .c-card--benefit:focus-within,
.page-home__benefits .c-card-benefit:focus-within,
.page-home--benefits .c-card-benefit:focus-within {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Card Icon */
.page-home__benefits .c-card-icon,
.page-home--benefits .c-card-icon,
.page-home__benefits .c-card_icon,
.page-home--benefits .c-card_icon {
  width: 48px;
  height: 48px;
  color: currentColor;
  margin-bottom: var(--space-md);
  opacity: 0;
  transition: opacity var(--motion-fast) ease-out;
}
.page-home__benefits .c-card--benefit.is-visible .c-card-icon,
.page-home--benefits .c-card--benefit.is-visible .c-card-icon,
.page-home__benefits .c-card-benefit.is-visible .c-card-icon,
.page-home--benefits .c-card-benefit.is-visible .c-card-icon,
.page-home__benefits .c-card--benefit.is-visible .c-card_icon,
.page-home--benefits .c-card--benefit.is-visible .c-card_icon,
.page-home__benefits .c-card-benefit.is-visible .c-card_icon,
.page-home--benefits .c-card-benefit.is-visible .c-card_icon {
  opacity: 1;
  transition-delay: 80ms;
}

/* Card Title & Body */
.page-home__benefits .c-card-title h3,
.page-home--benefits .c-card-title h3,
.page-home__benefits .c-card_title h3,
.page-home--benefits .c-card_title h3 {
  font-size: var(--font-size-md);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
  line-height: 1.2;
  color: var(--color-accent-primary-ui);
}
.page-home__benefits .c-card-body,
.page-home--benefits .c-card-body,
.page-home__benefits .c-card_body,
.page-home--benefits .c-card_body {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  margin: 0;
}

/* CTA Row */
.page-home__benefits .u-actions,
.page-home--benefits .u-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* ==========================================================================
   15. HOW IT WORKS REVERSE TEAL (HOME PAGE)
   ========================================================================== */

/* Section Container */
.page-home__how_it_works,
.page-home--how-it-works {
  background-color: var(--color-accent-primary-ui);
  background-image: none;
  color: var(--color-text-inverse);
  padding-block: var(--space-xl);
  text-align: center;
}
@media (max-width: 1024px) {
  .page-home__how_it_works,
  .page-home--how-it-works {
    padding-block: var(--space-xl);
  }
}
@media (max-width: 640px) {
  .page-home__how_it_works,
  .page-home--how-it-works {
    padding-block: var(--space-lg);
  }
}

/* Header Block */
.page-home__how_it_works h2,
.page-home--how-it-works h2 {
  font-size: var(--font-size-kicker);
  margin-bottom: var(--space-sm);
  color: var(--color-text-inverse);
}

.page-home__how_it_works .c-how_subline,
.page-home--how-it-works .c-how_subline,
.page-home__how_it_works .c-how-subline,
.page-home--how-it-works .c-how-subline {
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: var(--space-xl);
  color: var(--color-text-inverse);
}

/* Steps Grid */
.page-home__how_it_works .c-steps_grid,
.page-home--how-it-works .c-steps_grid,
.page-home__how_it_works .c-steps-grid,
.page-home--how-it-works .c-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1024px) and (min-width: 641px) {
  .page-home__how_it_works .c-steps_grid,
  .page-home--how-it-works .c-steps_grid,
  .page-home__how_it_works .c-steps-grid,
  .page-home--how-it-works .c-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-left: 0 !important;
  }
}
@media (max-width: 640px) {
  .page-home__how_it_works .c-steps_grid,
  .page-home--how-it-works .c-steps_grid,
  .page-home__how_it_works .c-steps-grid,
  .page-home--how-it-works .c-steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-left: 0 !important;
  }
}

/* Step Cards */
.page-home__how_it_works .c-step,
.page-home--how-it-works .c-step {
  position: relative;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  opacity: 0;
  transition:
    opacity var(--motion-fast) ease-out,
    box-shadow var(--motion-fast) ease-out,
    transform var(--motion-fast) ease-out,
    border-color var(--motion-fast) ease-out;
  color: var(--color-text-inverse);
}
.page-home__how_it_works .c-step.is-visible,
.page-home--how-it-works .c-step.is-visible {
  opacity: 1;
}
.page-home__how_it_works .c-step:nth-child(1),
.page-home--how-it-works .c-step:nth-child(1) {
  transition-delay: 0ms;
}
.page-home__how_it_works .c-step:nth-child(2),
.page-home--how-it-works .c-step:nth-child(2) {
  transition-delay: 120ms;
}
.page-home__how_it_works .c-step:nth-child(3),
.page-home--how-it-works .c-step:nth-child(3) {
  transition-delay: 240ms;
}
.page-home__how_it_works .c-step:nth-child(4),
.page-home--how-it-works .c-step:nth-child(4) {
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-home__how_it_works .c-step,
  .page-home--how-it-works .c-step {
    opacity: 1 !important;
    transition: none !important;
  }
}

@media (min-width: 1024px) {
  .page-home__how_it_works .c-step:not(:last-child)::after,
  .page-home--how-it-works .c-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    right: -12px;
    left: calc(100% + var(--space-xl) * -1);
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.25),
      transparent 80%
    );
    pointer-events: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .page-home__how_it_works .c-step:hover,
  .page-home--how-it-works .c-step:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-accent-primary-20);
  }
}

.page-home__how_it_works .c-step:focus-within,
.page-home--how-it-works .c-step:focus-within {
  outline: 2px solid var(--color-accent-secondary-ui);
  outline-offset: 2px;
}

.page-home__how_it_works .c-step_badge,
.page-home--how-it-works .c-step_badge,
.page-home__how_it_works .c-step-badge,
.page-home--how-it-works .c-step-badge {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin-block-end: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  background: transparent;
}

.page-home__how_it_works .c-step_badge:hover,
.page-home--how-it-works .c-step_badge:hover,
.page-home__how_it_works .c-step-badge:hover,
.page-home--how-it-works .c-step-badge:hover,
.page-home__how_it_works .c-step_badge:focus-visible,
.page-home--how-it-works .c-step_badge:focus-visible,
.page-home__how_it_works .c-step-badge:focus-visible,
.page-home--how-it-works .c-step-badge:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--color-accent-primary-20);
}

.page-home__how_it_works .c-step_icon,
.page-home--how-it-works .c-step_icon,
.page-home__how_it_works .c-step-icon,
.page-home--how-it-works .c-step-icon {
  inline-size: 48px;
  block-size: 48px;
  color: var(--color-text-inverse);
  margin-block-end: var(--space-sm);
}

.page-home__how_it_works .c-step_title,
.page-home--how-it-works .c-step_title,
.page-home__how_it_works .c-step-title,
.page-home--how-it-works .c-step-title {
  font-size: var(--font-size-md);
  margin-block-end: var(--space-xs);
  line-height: 1.2;
  color: var(--color-text-inverse);
}

.page-home__how_it_works .c-step_body,
.page-home--how-it-works .c-step_body,
.page-home__how_it_works .c-step-body,
.page-home--how-it-works .c-step-body {
  font-size: var(--font-size-sm);
  margin: 0;
  line-height: 1.55;
  text-wrap: balance;
  color: var(--color-text-inverse);
}

/* ==========================================================================
   16. STANDARDS & CODE (HOME PAGE)
   ========================================================================== */

/* Section Container */
.page-home__standards,
.page-home--standards {
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
  padding-block: var(--space-xl);
  text-align: center;
}
@media (max-width: 1024px) {
  .page-home__standards,
  .page-home--standards {
    padding-block: var(--space-xl);
  }
}
@media (max-width: 640px) {
  .page-home__standards,
  .page-home--standards {
    padding-block: var(--space-lg);
  }
}

/* Header Block */
.page-home__standards .c-kicker h2,
.page-home--standards .c-kicker h2 {
  font-size: var(--font-size-kicker);
  margin-bottom: var(--space-sm);
}

.page-home__standards .c-standards_lead,
.page-home--standards .c-standards_lead,
.page-home__standards .c-standards-lead,
.page-home--standards .c-standards-lead {
  max-width: 60ch;
  margin: var(--space-sm) auto var(--space-xl) auto;
}

/* Bulleted Checks */
.page-home__standards .c-standards_list,
.page-home--standards .c-standards_list,
.page-home__standards .c-standards-list,
.page-home--standards .c-standards-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 70ch;
  display: grid;
  gap: var(--space-lg);
}

.page-home__standards ul.c-standards_list,
.page-home--standards ul.c-standards_list,
.page-home__standards ul.c-standards-list,
.page-home--standards ul.c-standards-list {
  margin-left: 0 !important;
}

.page-home__standards .c-standards_list li,
.page-home--standards .c-standards_list li,
.page-home__standards .c-standards-list li,
.page-home--standards .c-standards-list li {
  background-image: linear-gradient(
    27deg,
    color-mix(in srgb, var(--color-accent-primary-ui) 25%, transparent),
    transparent 100%
  );
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--border-radius-md);
  transition:
    transform var(--motion-fast) ease-out,
    border-color var(--motion-fast) ease-out,
    box-shadow var(--motion-fast) ease-out;
  opacity: 0;
}
.page-home__standards .c-standards_list li.is-visible,
.page-home--standards .c-standards_list li.is-visible,
.page-home__standards .c-standards-list li.is-visible,
.page-home--standards .c-standards-list li.is-visible {
  opacity: 1;
  transition: opacity var(--motion-fast) ease-out;
}
.page-home__standards .c-standards_list li:nth-child(1),
.page-home--standards .c-standards_list li:nth-child(1),
.page-home__standards .c-standards-list li:nth-child(1),
.page-home--standards .c-standards-list li:nth-child(1) {
  transition-delay: 0ms;
}

.page-home__standards .c-standards_list li:nth-child(2),
.page-home--standards .c-standards_list li:nth-child(2),
.page-home__standards .c-standards-list li:nth-child(2),
.page-home--standards .c-standards-list li:nth-child(2) {
  transition-delay: 120ms;
}

.page-home__standards .c-standards_list li:nth-child(3),
.page-home--standards .c-standards_list li:nth-child(3),
.page-home__standards .c-standards-list li:nth-child(3),
.page-home--standards .c-standards-list li:nth-child(3) {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-home__standards .c-standards_list li,
  .page-home--standards .c-standards_list li,
  .page-home__standards .c-standards-list li,
  .page-home--standards .c-standards-list li {
    opacity: 1 !important;
    transition: none !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .page-home__standards .c-standards_list li:hover,
  .page-home--standards .c-standards_list li:hover,
  .page-home__standards .c-standards-list li:hover,
  .page-home--standards .c-standards-list li:hover {
    transform: translateY(-1px);
    border-color: var(--color-accent-primary-20);
    box-shadow: var(--shadow-sm);
  }
}

.page-home__standards .c-standards_list li:focus-within,
.page-home--standards .c-standards_list li:focus-within,
.page-home__standards .c-standards-list li:focus-within,
.page-home--standards .c-standards-list li:focus-within {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.page-home__standards .c-standards_list svg,
.page-home--standards .c-standards_list svg,
.page-home__standards .c-standards-list svg,
.page-home--standards .c-standards-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary-ui);
  margin-top: 0.25em;
}

.page-home__standards .c-standards_list strong,
.page-home--standards .c-standards_list strong,
.page-home__standards .c-standards-list strong,
.page-home--standards .c-standards-list strong {
  color: var(--color-accent-primary-ui);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  display: block;
  margin-bottom: var(--space-xs);
}

.page-home__standards .c-standards_list span,
.page-home--standards .c-standards_list span,
.page-home__standards .c-standards-list span,
.page-home--standards .c-standards-list span {
  grid-column: 2;
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   17. JOIN HERO / ORIENTATION (JOIN PAGE)
   ========================================================================== */
.page-join__hero,
.page-join--hero {
  background: var(--color-surface-subtle); /* base surface */
  /* Optional ultra-light wash for polish; controlled via custom property */
  background-image: var(
    --gradient-hero-join,
    linear-gradient(180deg, #ffffff 0%, rgba(6, 29, 49, 0.02) 100%)
  );
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  padding-block: var(--space-xl);
}

.c-hero__title,
.c-hero--title {
  font-size: var(--font-size-xxl);
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0;
  color: var(--color-text-primary);
}

.c-hero__sub,
.c-hero--sub {
  margin-block-start: var(--space-sm);
  margin-block-end: var(--space-md);
  color: var(--color-text-secondary);
}

.c-hero__micro,
.c-hero--micro {
  margin: 0;
  margin-block-end: var(--space-xl);
  color: var(--color-text-secondary);
}

.c-hero__cta_row,
.c-hero--cta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 992px) {
  .c-hero__cta_row,
  .c-hero--cta-row {
    display: none;
  }
  .page-join__hero,
  .page-join--hero {
    padding-block: clamp(3rem, 6vw, 5.5rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .c-hero__title,
  .c-hero--title {
    opacity: 0;
    transform: translateY(12px);
    animation: joinHeroIn var(--motion-fast) ease-out 0ms forwards;
  }
  .c-hero__sub,
  .c-hero--sub {
    opacity: 0;
    transform: translateY(12px);
    animation: joinHeroIn var(--motion-fast) ease-out 120ms forwards;
  }
  .c-hero__micro,
  .c-hero--micro {
    opacity: 0;
    transform: translateY(8px);
    animation: joinHeroIn var(--motion-fast) ease-out 240ms forwards;
  }
}

@keyframes joinHeroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.c-hero__title::after,
.c-hero--title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent-primary-ui);
  opacity: 0.25;
  margin-top: var(--space-sm);
}

.page-join__hero .c-hero__sub,
.page-join--hero .c-hero--sub,
.page-join__hero .c-hero__micro,
.page-join--hero .c-hero--micro {
  color: var(--color-text-secondary);
}

/* ==========================================================================
      17. JOIN HERO / ORIENTATION (JOIN PAGE)
   ========================================================================== */
.page-join__hero,
.page-join--hero {
  background: var(--color-surface-subtle);
  background-image: var(
    --gradient-hero-join,
    linear-gradient(180deg, #ffffff 0%, rgba(6, 29, 49, 0.02) 100%)
  );
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-block: var(--space-xl);
}

.c-hero__title,
.c-hero--title {
  font-size: var(--font-size-xxl);
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0;
  color: var(--color-text-primary);
}

.c-hero__sub,
.c-hero--sub {
  margin-block-start: var(--space-sm);
  margin-block-end: var(--space-md);
  color: var(--color-text-secondary);
}

.c-hero__micro,
.c-hero--micro {
  margin: 0;
  margin-block-end: var(--space-xl);
  color: var(--color-text-secondary);
}

/* FIX: selector name normalized to __cta-row */
.c-hero__cta-row,
.c-hero--cta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

/* Tablet/Desktop: hide duplicated CTAs */
@media (min-width: 992px) {
  .c-hero__cta-row,
  .c-hero--cta-row {
    display: none;
  }
  .page-join__hero,
  .page-join--hero {
    padding-block: clamp(4rem, 5vw, 4rem);
  }
}

.page-join--hero .u-rpg-container,
.page-join__hero .u-rpg-container {
  padding-top: var(--space-lg);
  padding-bottom: 0;
}

/* Micro-interactions */
@media (prefers-reduced-motion: no-preference) {
  .c-hero__title,
  .c-hero--title {
    opacity: 0;
    transform: translateY(12px);
    animation: joinHeroIn var(--motion-fast) ease-out 0ms forwards;
  }
  .c-hero__sub,
  .c-hero--sub {
    opacity: 0;
    transform: translateY(12px);
    animation: joinHeroIn var(--motion-fast) ease-out 120ms forwards;
  }
  .c-hero__micro,
  .c-hero--micro {
    opacity: 0;
    transform: translateY(8px);
    animation: joinHeroIn var(--motion-fast) ease-out 240ms forwards;
  }
}

@keyframes joinHeroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional keyline underline */
.c-hero__title::after,
.c-hero--title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent-primary-ui);
  opacity: 0.25;
  margin-top: var(--space-sm);
}

/* Accessibility: readable secondary text on subtle surface */
.page-join__hero .c-hero__sub,
.page-join--hero .c-hero--sub,
.page-join__hero .c-hero__micro,
.page-join--hero .c-hero--micro {
  color: var(--color-text-secondary);
}

/* NEW: CTA hover elevation within the hero */
/* Plain links styled as buttons (.pmpro-btn, .rpg-btn-primary, etc.) */
.page-join__hero .rpg-btn-primary:hover,
.page-join--hero .rpg-btn-primary:hover,
.page-join__hero .pmpro-btn:hover,
.page-join--hero .pmpro-btn:hover,
.page-join__hero .pmpro_btn:hover,
.page-join--hero .pmpro_btn:hover,
.page-join__hero input[type="submit"]:hover,
.page-join--hero input[type="submit"]:hover,
.page-join__hero button.button:hover,
.page-join--hero button.button:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Spectra case: .pmpro-btn on wrapper → style inner <a> */
.page-join__hero
  .wp-block-uagb-buttons-child.pmpro-btn
  .uagb-buttons-repeater:hover,
.page-join--hero
  .wp-block-uagb-buttons-child.pmpro-btn
  .uagb-buttons-repeater:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ==========================================================================
   18. BUTTON-LINK NORMALIZATION (GLOBAL)
   ========================================================================== */
/* Never underline button-like anchors (PMPro, Gutenberg Button, Spectra Buttons, custom hero btns) */
.entry-content a.pmpro-btn,
.entry-content a.rpg-btn-primary,
.entry-content a.btn-ghost-white,
.entry-content .wp-block-button__link,
.entry-content .wp-block-uagb-buttons .uagb-buttons-repeater a {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  text-decoration-thickness: 0 !important;
}

/* Also ensure hover/focus don’t reintroduce the underline */
.entry-content a.pmpro-btn:hover,
.entry-content a.pmpro-btn:focus,
.entry-content a.rpg-btn-primary:hover,
.entry-content a.rpg-btn-primary:focus,
.entry-content a.btn-ghost-white:hover,
.entry-content a.btn-ghost-white:focus,
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus,
.entry-content .wp-block-uagb-buttons .uagb-buttons-repeater a:hover,
.entry-content .wp-block-uagb-buttons .uagb-buttons-repeater a:focus {
  text-decoration: none !important;
}

/* ==========================================================================
   19. UTILITY CLASSES (GLOBAL)
   ========================================================================== */

/* --- FONT SIZES --- */
.u-font-size-xxl {
  font-size: var(--font-size-xxl);
}
.u-font-size-xl {
  font-size: var(--font-size-xl);
}
.u-font-size-lg {
  font-size: var(--font-size-lg);
}
.u-font-size-md {
  font-size: var(--font-size-md);
}
.u-font-size-base {
  font-size: var(--font-size-base);
}
.u-font-size-sm {
  font-size: var(--font-size-sm);
}
.u-font-size-xs {
  font-size: var(--font-size-xs);
}

/* --- FONT WEIGHTS --- */
.u-font-weight-light {
  font-weight: var(--font-weight-light);
}
.u-font-weight-regular {
  font-weight: var(--font-weight-regular);
}
.u-font-weight-medium {
  font-weight: var(--font-weight-medium);
}
.u-font-weight-bold {
  font-weight: var(--font-weight-bold);
}

/* --- TEXT COLORS --- */
.u-color-text-primary {
  color: var(--color-text-primary);
}
.u-color-text-secondary {
  color: var(--color-text-secondary);
}
.u-color-text-inverse {
  color: var(--color-text-inverse);
}
.u-color-accent-primary {
  color: var(--color-accent-primary-ui);
}
.u-color-accent-secondary {
  color: var(--color-accent-secondary-ui);
}

/* --- LAYOUT & SPACING --- */
.u-text-center {
  text-align: center;
}
.u-margin-top-xl {
  margin-top: var(--space-xl);
}
.u-margin-bottom-lg {
  margin-bottom: var(--space-lg);
}
/* ... you can expand this as needed ... */

/* --- GRIDS --- */
.u-grid {
  display: grid;
}
.u-grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.u-grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.u-grid-cols-1 {
  grid-template-columns: 1fr;
}
.u-gap-lg {
  gap: var(--space-lg);
}
.u-gap-md {
  gap: var(--space-md);
}

/* ==========================================================================
   20. JOIN HERO (JOIN PAGE)
   ========================================================================== */

/* Utility: readable measure with optical centering */
.u-measure-70ch {
  max-width: 70ch;
  margin-inline: auto;
}

/* Utility: subtle light gradient wash for hero backgrounds */
.u-bg-gradient-soft {
  /* Light-on-light wash that plays nicely with the light theme */
  background: linear-gradient(
      180deg,
      var(--color-surface-subtle) 0%,
      rgba(0, 0, 0, 0) 60%
    ),
    linear-gradient(
      0deg,
      var(--color-surface-subtle),
      var(--color-surface-subtle)
    );
}

/* Animation helpers – gated by user motion preferences */
@media (prefers-reduced-motion: no-preference) {
  .u-animate-in {
    opacity: 0;
    transform: translateY(8px);
    animation: u-fade-slide-in 300ms ease-out forwards;
  }
  .u-animate-delay-1 {
    animation-delay: 120ms;
  }
  .u-animate-delay-2 {
    animation-delay: 240ms;
  }

  @keyframes u-fade-slide-in {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Reduced-motion: ensure elements are visible without animation */
@media (prefers-reduced-motion: reduce) {
  .u-animate-in {
    opacity: 1;
    transform: none;
  }
}

.u-bg-gradient-soft--plus {
  background: linear-gradient(
      180deg,
      color-mix(
          in srgb,
          var(--color-accent-primary-ui),
          var(--color-surface-subtle) 88%
        )
        0%,
      color-mix(in srgb, var(--color-surface-subtle), transparent 100%) 60%
    ),
    var(--color-surface-subtle);
}

/* ==========================================================================
   21. HOW IT WORKS MICRO RIBBON (JOIN PAGE)
   ========================================================================== */

/* 0) Scope fix: remove the container's vertical padding for this section only */
.page-join--how-it-works .u-rpg-container {
  padding-block: 0; /* eliminate the excess top/bottom space from the container */
}

/* 1) Component wrapper (BEM underscore + hyphen alias) */
.c-steps_ribbon,
.c-steps-ribbon {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2) Utilities required by this section (defined here to satisfy class mandate) */
.u-section-padding-sm {
  padding-block: var(--space-md);
} /* thin & even strip */

.u-bg-accent-primary {
  background-color: var(--color-accent-primary-ui);
}
.u-text-inverse {
  color: var(--color-text-inverse);
}

.u-flex {
  display: flex;
}
.u-inline-flex {
  display: inline-flex;
}
.u-flex-wrap {
  flex-wrap: wrap;
}
.u-justify-center {
  justify-content: center;
}
.u-items-center {
  align-items: center;
}
.u-text-center {
  text-align: center;
}

.u-gap-md {
  gap: var(--space-md);
}
.u-gap-xl {
  gap: var(--space-xl);
}

.u-font-size-md {
  font-size: var(--font-size-md);
}

/* Icons fixed at 36×36 */
.u-icon-36 svg,
.u-icon-36 img {
  width: 36px;
  height: 36px;
  display: inline-block;
}

/* Typographic arrow spacer */
.u-sep-arrow {
  display: inline-block;
  margin-inline: var(--space-lg);
  opacity: 0.9;
}

/* SR-only heading */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 1px 1px);
  white-space: nowrap;
  border: 0;
}

/* Single, subtle fade-in (respects reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .u-fade-in {
    opacity: 0;
    animation: fadeIn 280ms ease-out forwards;
  }
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
}

/* 3) Mobile spec (≤640px): stack left, hide arrows */
@media (max-width: 640px) {
  .page-join--how-it-works .c-steps-ribbon,
  .page-join--how-it-works .c-steps_ribbon {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-md); /* vertical rhythm between items */
  }

  /* Hide decorative arrows on mobile */
  .page-join--how-it-works .c-steps-ribbon > li[aria-hidden="true"],
  .page-join--how-it-works .c-steps_ribbon > li[aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   22. JOIN – MEMBERSHIP LEVELS SNAPSHOT (SECTION)
   Components: .c-plans, .c-plan-card (+ elements/modifiers)
   Notes (v4):
     • Pro band can display gradient via utility (no background override here).
     • Enforce equal-height cards; CTAs align bottom.
     • Structure: Title → PriceBand → List → (Fineprint on Elite).
   ========================================================================== */

/* Section spacing safeguard */
.page_join--levels,
.page-join--levels {
  padding-block: var(--space-xl);
}

/* Grid wrapper */
.c_plans,
.c-plans {
  display: grid;
  gap: var(--space-xl);
}

/* Equal-height children so CTAs can align bottom */
.c_plans > .c_plan_card,
.c-plans > .c-plan-card {
  height: 100%;
}

/* Two columns at md and up (fallback if responsive utility absent) */
@media (min-width: 768px) {
  .c_plans,
  .c-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .c_plans.c_plans--single,
  .c-plans.c-plans--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Temporary single-plan layout (center one card without changing width) */
@media (min-width: 768px) {
  .c_plans > .c_plan_card:only-child,
  .c-plans > .c-plan-card:only-child {
    justify-self: center;
    width: 100%;
    max-width: clamp(20rem, 42vw, 36rem);
  }
}

/* Meta block beneath cards (with explicit top spacing) */
.c_plans__meta,
.c-plans__meta {
  display: block;
  margin-top: var(--space-lg);
}

/* Card scaffold */
.c_plan_card,
.c-plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  transition:
    transform 160ms ease-out,
    box-shadow 160ms ease-out,
    border-color 160ms ease-out;
}

/* Hover/focus micro-interactions (focus ring on the card) */
.c_plan_card:hover,
.c-plan-card:hover,
.c_plan_card:focus-within,
.c-plan-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  outline: 2px solid var(--color-accent-primary-ui);
  outline-offset: 2px;
}

/* Optional: reinforce focus ring on inner anchors */
.c_plan_card:focus-within a,
.c-plan-card:focus-within a {
  outline: 2px solid var(--color-accent-primary-ui);
  outline-offset: 2px;
}

/* Unified body layout */
.c_plan_card__body,
.c-plan-card__body {
  display: grid;
  gap: var(--space-md);
  padding-top: 0; /* headings align across cards */
}

/* Titles */
.c_plan_card__title,
.c-plan-card__title {
  margin: 0;
}

/* Price band (shared sizing) */
.c_plan_card__priceband,
.c-plan-card__priceband {
  position: relative;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  padding: var(--space-md) var(--space-xl);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: var(--space-md); /* consistent spacing to list */
}

/* Elite: reversed teal band */
.c_plan_card--elite .c_plan_card__priceband,
.c-plan-card--elite .c-plan-card__priceband {
  background: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
}

/* Pro: ghost band now allows gradient utility to show
   (do NOT set background here so .u-bg-gradient-soft--plus can apply) */
.c_plan_card__priceband--ghost,
.c-plan-card__priceband--ghost {
  /* no background here; preserve geometry for alignment */
  color: var(--color-text-primary);
  box-shadow: none;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

/* Price line within any band */
.c_plan_card__price,
.c-plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  margin: 0;
}

.c_price_figure,
.c-price-figure {
  line-height: 1;
}

.c_price_suffix,
.c-price-suffix {
  opacity: 0.85;
}

/* Banded price line should not add extra spacing */
.c_plan_card__price--band,
.c-plan-card__price--band {
  margin: 0;
}

/* Lists & fine print */
.c_plan_card__list,
.c-plan-card__list {
  margin: 0;
  padding-left: 1.1em;
}

.c_plan_card__fineprint,
.c-plan-card__fineprint {
  margin-top: var(--space-sm);
}

/* CTA pinned to bottom via auto margin; ensure space above button if needed */
.c_plan_card__cta,
.c-plan-card__cta {
  margin-top: auto;
}

/* ==========================================================================
   23. FOR AGENTS HERO (MOBILE ASPECT RATIO OVERRIDE)
   ========================================================================== */

@media (max-width: 768px) {
  .page-agents--hero {
    /* Override the homepage hero's min-height */
    min-height: auto;
    /* Set the aspect ratio to match the mobile image (810x1080) */
    aspect-ratio: 810 / 1080;
  }
}

/* ==========================================================================
   24. FOR AGENTS - PILLARS SECTION & NEW UTILITIES (FINAL V3)
   ========================================================================== */

/* --- 24.1 Section Scaffolding --- */
.page-for-agents--pillars {
  /* This class is for semantic identification and future targeting */
}

/* --- 24.2 New & Updated Utility Classes --- */
.u-theme-light {
  background-color: var(--color-surface-subtle);
}
.u-section-padding-sm {
  padding-block: var(--space-lg);
}
.u-icon-36 {
  width: 48px;
  height: 48px;
  display: inline-block;
}
.u-icon-36 img,
.u-icon-36 svg {
  width: 36px;
  height: 36px;
}
.u-color-text-muted {
  color: var(--color-text-muted);
}
.u-weight-600 {
  font-weight: 600;
}
.u-margin-bottom-sm {
  margin-bottom: var(--space-sm);
}

/* Responsive Grid Utilities */
@media (min-width: 768px) {
  .sm\:u-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .lg\:u-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- 24.3 Component Styles --- */
.c-pillars,
.c_pillars {
  /* Grid container, layout handled by utilities */
}

.c-pillar,
.c_pillar {
  transition: transform 0.14s ease-out;
}

.c-pillar:hover,
.c-pillar:focus-within,
.c_pillar:hover,
.c_pillar:focus-within {
  transform: translateY(-1px);
}

.c-pillar:hover p,
.c-pillar:focus-within p,
.c_pillar:hover p,
.c_pillar:focus-within p {
  color: var(--color-text-primary);
}

/* REFINED: Pillar content spacing and alignment */
/* Sets tight spacing for all screen sizes */
.entry-content .c-pillar__heading,
.entry-content .c_pillar__heading {
  margin-block-end: var(--space-2xs);
}

.entry-content .c-pillar__description,
.entry-content .c_pillar__description {
  margin-block-end: 0;
}

/* Apply min-height only on tablet and up to ensure horizontal alignment in multi-column layouts */
@media (min-width: 768px) {
  .entry-content .c-pillar__heading,
  .entry-content .c_pillar__heading {
    min-height: 2em;
  }
}

/* ==========================================================================
   25 & 26. FOR AGENTS - ALIGNED CONTENT SECTIONS (REVISED V2)
   ========================================================================== */

/* --- 25.1 Section Scaffolding --- */
.page-for-agents--real-markets,
.page_for-agents--real-markets {
  background: var(--color-surface);
}

/* --- 25.2 Utility Classes --- */
.u-section-padding {
  padding-block: var(--space-xl);
}
.u-measure-65ch {
  max-width: 65ch;
}
.u-measure-70ch {
  max-width: 70ch;
  margin-inline: auto;
}
.u-link,
.u_link,
a.u_link,
a.u-link {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--color-accent-primary-ui) !important;
}
.u-visually-hidden,
.u_visually_hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 1px 1px);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 1024px) {
  .lg\:u-items-center {
    align-items: center;
  }
  .lg\:u-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 25.3 "Real Markets" Component Styles --- */
.c-real__media,
.c_real__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  margin: 0;
  aspect-ratio: auto;
  max-height: none;
}
.c-real__img,
.c_real__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
@media (min-width: 1024px) {
  .c-real__media,
  .c_real__media {
    aspect-ratio: 4 / 3;
    max-height: clamp(420px, 52vh, 560px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  }
  .c-real__img,
  .c_real__img {
    object-position: center 45%;
  }
}
@media (min-aspect-ratio: 21/9) {
  .c-real__media,
  .c_real__media {
    max-height: 500px;
  }
}
.c-real__duotone,
.c_real__duotone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      rgba(6, 34, 54, 0.28) 0%,
      rgba(6, 34, 54, 0.16) 60%,
      rgba(6, 34, 54, 0) 100%
    ),
    linear-gradient(90deg, rgba(13, 96, 112, 0.12) 0%, rgba(13, 96, 112, 0) 55%);
  mix-blend-mode: multiply;
}

/* --- 26.2 "Compact Benefits" Component Styles --- */
.entry-content .c-compact-benefits__list,
.entry-content .c_compact_benefits__list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding-left: 1rem;
  list-style-position: outside;
}
@media (min-width: 1024px) {
  .entry-content .c-compact-benefits__list,
  .entry-content .c_compact_benefits__list {
    gap: calc(var(--space-sm) - 2px);
  }
}

/* CORRECTED: Removes top padding on the benefits section for mobile/tablet to prevent "double padding" when stacked */
@media (max-width: 1023.98px) {
  .page-for-agents--benefits {
    padding-top: 0;
  }
}

/* ==========================================================================
   27. FOR AGENTS - CLOSING SECTIONS & NEW UTILITIES (FINAL V4)
   ========================================================================== */

/* --- 27.1 Utility Classes --- */
.u-margin-bottom-md {
  margin-bottom: var(--space-md);
}
.u-section-padding-sm,
.u_section_padding_sm {
  padding-block: var(--space-lg);
}
.u-section-padding-xs {
  padding-block: var(--space-sm);
}
.u-bg-accent-primary,
.u_bg_accent_primary {
  background-color: var(--color-accent-primary-ui);
}
.u-text-inverse,
.u_text_inverse {
  color: var(--color-text-inverse);
}

/* --- 27.2 Component Styles --- */
/* Inverse Button */
.pmpro-btn--inverse,
.pmpro_btn--inverse {
  background-color: #fff;
  color: var(--color-accent-primary-ui);
  border: 1px solid transparent;
}

.pmpro-btn--inverse:hover,
.pmpro-btn--inverse:focus-visible,
.pmpro_btn--inverse:hover,
.pmpro_btn--inverse:focus-visible {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* Compliance text inside CTA */
.c-cta__compliance,
.c_cta__compliance {
  color: var(--color-text-inverse);
  opacity: 0.85;
  margin-top: var(--space-xl);
}
.c-cta__compliance strong {
  color: #fff; /* Ensure bold text is also white */
}

/* --- 27.3 Section Scaffolding --- */
.page-for-agents--level-teaser {
  background-image: var(--standard-gray-lift);
}

.page-for-agents--cta {
  padding-block: var(--space-xl);
}
.page-for-agents--cta h2 {
  color: var(--color-text-inverse);
}

/* ==========================================================================
   29. PARTNERS PAGE - WHO WE PARTNER WITH (REVISED V2)
   ========================================================================== */

/* --- 29.1 Section Scaffolding --- */
.page-partners--who {
  /* This class is for semantic identification and future targeting */
}

/* --- 29.2 Utility Classes --- */
.u-visually-hidden,
.u_visually_hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 1px 1px);
  white-space: nowrap;
  border: 0;
}

/* --- 29.3 Component Styles --- */
.c-who-grid,
.c_who_grid {
  /* Grid container, layout handled by utilities */
}

/* Mobile-first: Side-by-side layout with a gap */
.c-who-grid__item,
.c_who_grid__item {
  display: flex;
  align-items: center;
  gap: var(--space-md); /* Adds requested space between icon and text */
}

/* Desktop: Stacked and centered layout */
@media (min-width: 1024px) {
  .c-who-grid__item,
  .c_who_grid__item {
    flex-direction: column;
    gap: var(--space-sm); /* Adjusts gap for vertical stacking */
  }

  .c-who-grid__text,
  .c_who_grid__text {
    text-align: center;
  }
}

/* ==========================================================================
   30. PARTNERS PAGE - PROGRAM SNAPSHOT (REVISED V2)
   ========================================================================== */

/* --- 30.1 Section Scaffolding --- */
/* CORRECTED: Added gradient background for visual separation */
.page-partners--steps {
  background-image: var(--standard-gray-lift);
}

/* --- 30.2 Utility Classes --- */
.u-section-padding-sm,
.u_section_padding_sm {
  padding-block: var(--space-lg);
}

/* --- 30.3 Component Styles --- */
.c-steps-ribbon,
.c_steps_ribbon {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Flexbox behavior is now controlled by the component stylesheet and utilities */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  align-items: center;
  justify-content: center; /* Center on desktop by default */
}

.c-steps-ribbon__item,
.c_steps_ribbon__item {
  /* Layout is handled by utility classes in the HTML */
}

.c-steps-ribbon__separator,
.c_steps_ribbon__separator {
  opacity: 0.6;
}

/* On mobile, stack items, hide arrows, and align left */
@media (max-width: 640px) {
  .c-steps-ribbon,
  .c_steps_ribbon {
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start; /* CORRECTED: Aligns items to the left */
  }

  .c-steps-ribbon__separator,
  .c_steps_ribbon__separator {
    display: none;
  }
}

/* ==========================================================================
   31. PARTNERS PAGE - IMPACT, NOT HYPE (REVISED)
   ========================================================================== */

/* --- 31.1 Section Scaffolding --- */
.page-partners--impact {
  /* This class is for semantic identification and future targeting */
}

/* --- 31.2 New Utility Classes --- */
/* CORRECTED: Added missing definition for u-measure-65ch */
.u-measure-65ch,
.u_measure_65ch {
  max-width: 65ch;
}

/* CORRECTED: Added missing definitions for responsive grid utilities */
@media (min-width: 1024px) {
  .lg\:u-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .lg\:u-items-center {
    align-items: center;
  }
}

/* --- 31.3 Component Styles --- */
.c-impact,
.c_impact {
  /* Grid container, layout handled by utilities */
}

.c-impact__media,
.c_impact__media {
  position: relative;
  margin: 0;
  border-radius: var(--border-radius-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.c-impact__img,
.c_impact__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-md);
  object-fit: cover;
}

/* Desktop sizing constraints, reusing the clamp() pattern */
@media (min-width: 1024px) {
  .c-impact__media,
  .c_impact__media {
    aspect-ratio: 4 / 3;
    max-height: clamp(420px, 52vh, 560px);
  }
}

/* Ultrawide screen guardrail */
@media (min-aspect-ratio: 21/9) {
  .c-impact__media,
  .c_impact__media {
    max-height: 500px;
  }
}

.c-impact__copy,
.c_impact__copy {
  /* Sizing is handled by the u-measure-65ch utility */
}

/* ==========================================================================
   32. PARTNERS PAGE - FOUNDING PARTNER (REVISED V2)
   ========================================================================== */

/* --- 32.1 Section Scaffolding --- */
.page-partners--nahrep,
.page_partners--nahrep {
  /* This class is for semantic identification and future targeting */
}

/* --- 32.2 Component & Utility Styles --- */
/* CORRECTED: New component class to control width without centering */
.c-partner-feature,
.c_partner_feature {
  max-width: 70ch;
}

.u-color-text-muted,
.u_color_text_muted {
  color: var(--color-text-muted);
}

.u-link,
.u_link,
a.u-link,
a.u_link {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--color-accent-primary-ui) !important;
}

/* ==========================================================================
   33. PARTNERS PAGE - LOGO GRID (REVISED V4 - FINAL)
   ========================================================================== */

/* --- 33.1 Section Scaffolding --- */
.page-partners--logos,
.page_partners--logos {
  background-image: var(--standard-gray-lift);
}

/* --- 33.2 Utility Classes --- */
.u-visually-hidden,
.u_visually_hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 1px 1px);
  white-space: nowrap;
  border: 0;
}
.u-text-center,
.u_text_center {
  text-align: center;
}
.u-margin-bottom-lg,
.u_margin_bottom_lg {
  margin-bottom: var(--space-lg);
}

/* Base and responsive grid utilities */
.u-grid-cols-2,
.u_grid_cols_2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .sm\:u-grid-cols-3,
  .sm_u_grid_cols_3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .lg\:u-grid-cols-5,
  .lg_u_grid_cols_5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --- 33.3 Component Styles --- */
.c-logo-grid,
.c_logo_grid {
  align-items: center;
}

@media (min-width: 1024px) {
  .c-logo-grid,
  .c_logo_grid {
    gap: var(--space-xxl);
  }
}

.c-logo-grid__item,
.c_logo_grid__item {
  display: block;
  height: 42px;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: var(--ar);
  background: no-repeat center / contain var(--logo);
}

/* CORRECTED: Centers the orphan item on the 2-column mobile grid */
@media (max-width: 767.98px) {
  .c-logo-grid__item:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

.c-logo-grid__note,
.c_logo_grid__note {
  opacity: 0.7;
  margin-top: var(--space-md);
  text-align: center;
}

/* ==========================================================================
   34. PARTNERS PAGE - HERO SECTION
   ========================================================================== */

/* --- 34.1 Section Scaffolding --- */
.page-partners--hero,
.page_partners--hero {
  /* This class is for semantic identification and future targeting */
}

/* ==========================================================================
   35. ABOUT PAGE - HERO SECTION (REVISED V2 - ANIMATION RESTORED)
   ========================================================================== */

/* --- 35.1 Section Scaffolding --- */
.page-about--hero,
.page_about--hero {
  /* This class is for semantic identification and future targeting */
}

/* --- 35.2 New Utility Classes --- */
.u-bg-gradient-soft--plus,
.u_bg_gradient_soft--plus {
  background: linear-gradient(
      180deg,
      color-mix(
          in srgb,
          var(--color-accent-primary-ui),
          var(--color-surface-subtle) 88%
        )
        0%,
      color-mix(in srgb, var(--color-surface-subtle), transparent 100%) 60%
    ),
    var(--color-surface-subtle);
}

.u-measure-70ch,
.u_measure__70ch {
  max-width: 70ch;
  margin-inline: auto;
}

/* Animation Utilities */
@media (prefers-reduced-motion: no-preference) {
  .u-animate-in,
  .u_animate_in {
    opacity: 0;
    transform: translateY(8px);
    animation: u-fade-slide-in 300ms ease-out forwards;
  }
  .u-animate-delay-1,
  .u_animate_delay_1 {
    animation-delay: 120ms;
  }
  .u-animate-delay-2,
  .u_animate_delay_2 {
    animation-delay: 240ms;
  }

  @keyframes u-fade-slide-in {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Accessibility: Ensure elements are visible for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .u-animate-in,
  .u_animate_in {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   36. ABOUT PAGE - WHO WE ARE (REVISED)
   ========================================================================== */

/* --- 36.1 Section Scaffolding --- */
.page-about--purpose,
.page_about--purpose {
  /* This class is for semantic identification and future targeting */
}

/* --- 36.2 New Utility Classes --- */
/* CORRECTED: Added missing definition for u-measure-65ch */
.u-measure-65ch,
.u_measure_65ch {
  max-width: 65ch;
}

/* --- 36.3 Component Styles --- */
.c-value-list,
.c_value_list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding-left: 1.1em; /* Retain standard bullets */
}

/* ==========================================================================
   37. ABOUT PAGE - WHAT WE DO (PILLARS) (REVISED)
   ========================================================================== */

/* --- 37.1 Section Scaffolding --- */
.page-about--pillars,
.page_about--pillars {
  /* This class is for semantic identification and future targeting */
}

/* --- 37.2 New Utility Classes --- */
/* CORRECTED: Added missing definition for u-visually-hidden */
.u-visually-hidden,
.u_visually_hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 1px 1px);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1024px) {
  .lg\:u-grid-cols-3,
  .lg_u_grid_cols_3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- 37.3 Component Styles --- */
.c-pillars-grid,
.c_pillars_grid {
  /* Grid container, layout handled by utilities */
}

.c-pillars-grid__item,
.c_pillars_grid__item {
  /* Structural column, no specific styles needed */
}

/* ==========================================================================
   37. ABOUT PAGE - WHAT WE DO (PILLARS) (REVISED V3)
   ========================================================================== */

/* --- 37.1 Section Scaffolding --- */
.page-about--pillars,
.page_about--pillars {
  background-image: var(--standard-gray-lift);
}

/* --- 37.2 Utility Classes --- */
.u-visually-hidden,
.u_visually_hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 1px 1px);
  white-space: nowrap;
  border: 0;
}
/* CORRECTED: Added new utility for larger margin */
.u-margin-bottom-xl,
.u_margin_bottom_xl {
  margin-bottom: var(--space-xl);
}

@media (min-width: 1024px) {
  .lg\:u-grid-cols-3,
  .lg_u_grid_cols_3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- 37.3 Component Styles --- */
.c-pillars-grid,
.c_pillars_grid {
  /* Grid container, layout handled by utilities */
}

.c-pillars-grid__item,
.c_pillars_grid__item {
  /* Structural column, no specific styles needed */
}

/* ==========================================================================
   38. ABOUT PAGE - HOW WE WORK (REVISED)
   ========================================================================== */

/* --- 38.1 Section Scaffolding --- */
.page-about--how-we-work,
.page_about--how-we-work {
  background-image: var(--standard-gray-lift);
}

/* --- 38.2 Component & Utility Styles --- */
/* This reuses the c-steps-ribbon component from the Partners page */
.c-steps-ribbon,
.c_steps_ribbon {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-steps-ribbon__separator,
.c_steps_ribbon__separator {
  opacity: 0.6;
}

/* On mobile, stack items and hide the decorative arrows */
@media (max-width: 640px) {
  /* This rule targets the flex container via its component class */
  .c-steps-ribbon {
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }

  .c-steps-ribbon__separator,
  .c_steps_ribbon__separator {
    display: none;
  }
}

/* ==========================================================================
   39. ABOUT PAGE - FOUNDING PARTNER (REVISED)
   ========================================================================== */

/* --- 39.1 Section Scaffolding --- */
.page-about--nahrep,
.page_about--nahrep {
  /* This class is for semantic identification and future targeting */
}

/* --- 39.2 New Utility & Component Styles --- */
/* CORRECTED: Added missing definition for u-color-text-muted */
.u-color-text-muted,
.u_color_text_muted {
  color: var(--color-text-muted);
}

/* Reuses the partner-feature component for a left-aligned, max-width text block */
.c-partner-feature,
.c_partner_feature {
  max-width: 70ch;
}

/* ==========================================================================
   40. ABOUT PAGE - REAL MARKETS (REVISED V3 - COMPLIANT)
   ========================================================================== */

/* --- 40.1 Section Scaffolding --- */
.page-about--real-markets,
.page_about--real-markets {
  /* This class is for semantic identification and future targeting */
}

/* --- 40.2 New Utility Classes --- */
/* CORRECTED: Added missing definition for u-measure-65ch */
.u-measure-65ch,
.u_measure_65ch {
  max-width: 65ch;
}

/* CORRECTED: Added missing definitions for responsive grid utilities */
@media (min-width: 1024px) {
  .lg\:u-grid-cols-2,
  .lg_u_grid_cols_2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .lg\:u-items-center,
  .lg_u_items_center {
    align-items: center;
  }
}

/* --- 40.3 Component Styles --- */
.c-real__media,
.c_real__media {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin: 0;
  aspect-ratio: 4 / 5; /* Enforce 4/5 aspect ratio on mobile */
}

.c-real__img,
.c_real__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Duotone overlay styles */
.c-real__duotone,
.c_real__duotone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      rgba(6, 34, 54, 0.28) 0%,
      rgba(6, 34, 54, 0.16) 60%,
      rgba(6, 34, 54, 0) 100%
    ),
    linear-gradient(90deg, rgba(13, 96, 112, 0.12) 0%, rgba(13, 96, 112, 0) 55%);
  mix-blend-mode: multiply;
}

@media (min-width: 1024px) {
  .c-real__media,
  .c_real__media {
    aspect-ratio: 4 / 3;
    max-height: clamp(420px, 52vh, 560px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  }
  .c-real__img,
  .c_real__img {
    object-position: center 45%;
  }
}

@media (min-aspect-ratio: 21/9) {
  .c-real__media,
  .c_real__media {
    max-height: 500px;
  }
}

/* ==========================================================================
   41. ABOUT PAGE - DUAL CTA (REVISED)
   ========================================================================== */

/* --- 41.1 Section Scaffolding --- */
.page-about--engage,
.page_about--engage {
  /* This class is for semantic identification and future targeting */
}

/* --- 41.2 New Utility Classes --- */
/* CORRECTED: Added missing grid utility class definitions */
.u-grid-cols-1,
.u_grid_cols_1 {
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
  .sm\:u-grid-cols-2,
  .sm_u_grid_cols_2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 41.3 Component Styles --- */
.c-dual-cta,
.c_dual_cta {
  /* This is the grid container for the two buttons. */
  /* We add a max-width to prevent the buttons from becoming excessively wide on tablet viewports. */
  max-width: 600px;
  margin-inline: auto;
}

/* ==========================================================================
   42. ABOUT PAGE - COMPLIANCE MICROLINE (REVISED)
   ========================================================================== */

/* --- 42.1 Section Scaffolding --- */
.page-about--compliance,
.page_about--compliance {
  /* This class is for semantic identification and future targeting */
}

/* --- 42.2 New Utility Classes --- */
/* CORRECTED: Added missing utility class definitions */
.u-section-padding-xs,
.u_section_padding_xs {
  padding-block: var(--space-sm);
}

.u-font-size-xs,
.u_font_size_xs {
  font-size: var(--font-size-xs);
}

.u-color-text-muted,
.u_color_text_muted {
  color: var(--color-text-muted);
}

/* ==========================================================================
   43. CONTACT PAGE - HERO & NEW UTILITIES (REVISED V2 - ANIMATION ADDED)
   ========================================================================== */

/* --- 43.1 Section Scaffolding --- */
.page-contact--hero,
.page_contact--hero {
  /* This class is for semantic identification and future targeting */
}

/* --- 43.2 New Utility Classes --- */
.u-bg-gradient-soft--plus,
.u_bg_gradient_soft--plus {
  background: linear-gradient(
      180deg,
      color-mix(
          in srgb,
          var(--color-accent-primary-ui),
          var(--color-surface-subtle) 88%
        )
        0%,
      color-mix(in srgb, var(--color-surface-subtle), transparent 100%) 60%
    ),
    var(--color-surface-subtle);
}

.u-measure-70ch,
.u_measure_70ch {
  max-width: 70ch;
  margin-inline: auto;
}

/* Animation Utilities */
@media (prefers-reduced-motion: no-preference) {
  .u-animate-in,
  .u_animate_in {
    opacity: 0;
    transform: translateY(8px);
    animation: u-fade-slide-in 300ms ease-out forwards;
  }
  .u-animate-delay-1,
  .u_animate_delay_1 {
    animation-delay: 120ms;
  }

  @keyframes u-fade-slide-in {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-animate-in,
  .u_animate_in {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   44. CONTACT PAGE - DIRECT CONTACTS (REVISED)
   ========================================================================== */

/* --- 44.1 Section Scaffolding --- */
.page-contact--direct-contacts,
.page_contact--direct-contacts {
  /* This class is for semantic identification and future targeting */
}

/* --- 44.2 New Utility Classes --- */
/* CORRECTED: Added missing utility class definitions */
.u-grid-cols-1,
.u_grid_cols_1 {
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
  .sm\:u-grid-cols-2,
  .sm_u_grid_cols_2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.u-gap-md,
.u_gap_md {
  gap: var(--space-md);
}

.u-font-size-md,
.u_font_size_md {
  font-size: var(--font-size-md);
}

.u-link,
.u_link,
a.u-link,
a.u_link {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--color-accent-primary-ui) !important;
}

/* --- 44.3 Component Styles --- */
.c-contact-grid,
.c_contact_grid {
  /* Grid container, layout handled by utilities */
  /* Center the grid container and give it a max-width for readability */
  max-width: 80ch;
  margin-inline: auto;
}

.c-contact-grid__item,
.c_contact_grid__item {
  /* Structural item, no specific styles needed */
}

/* ==========================================================================
   45. CONTACT PAGE - CONTACT FORM 7 STYLES (REVISED)
   ========================================================================== */

/* --- 45.1 Section Scaffolding --- */
.page-contact--form,
.page_contact--form {
  background-color: var(--color-surface-subtle);
}

/* --- 45.2 New Utility Classes --- */
/* CORRECTED: Added missing utility class definitions */
.u-font-size-xl,
.u_font_size_xl {
  font-size: var(--font-size-xl);
}

.u-text-center,
.u_text_center {
  text-align: center;
}

.u-margin-bottom-lg,
.u_margin_bottom_lg {
  margin-bottom: var(--space-lg);
}

.u-section-padding,
.u_section_padding {
  padding-block: var(--space-xl);
}

/* --- 45.3 Form Wrapper & Grid --- */
.c-contact-form-wrapper,
.c_contact_form_wrapper {
  max-width: 80ch;
  margin-inline: auto;
}

.rpg-form-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr; /* Mobile first */
}
@media (min-width: 768px) {
  .rpg-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rpg-form-grid .full-width {
    grid-column: 1 / -1;
  }
}

/* --- 45.4 Field & Label Styles --- */
.wpcf7-form label {
  display: block;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-sm);
}

.wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface-primary);   /* #fff */
  border: 2px solid var(--color-border-strong);     /* was 1px + too light */
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), outline var(--motion-fast);
}

/* Hover (optional) – keep ≥3:1 vs page bg */
.wpcf7-form-control:not(.wpcf7-submit):hover {
  border-color: #4D5E6B;                           /* a hair darker */
}

/* Focus: strong visible ring; avoid relying on box-shadow only */
.wpcf7-form-control:not(.wpcf7-submit):focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: none;                                 /* predictable for auditors */
  border-color: var(--color-focus-ring);
}
.wpcf7-textarea {
  min-height: 150px;
}

/* --- 45.5 Consent Checkbox --- */
.wpcf7-acceptance .wpcf7-form-control {
  display: inline-block;
  width: auto;
  margin-right: var(--space-xs);
}

/* --- 45.6 Submit Button --- */
.wpcf7-submit {
  /* Inherits all styles from our global .pmpro-btn class */
  width: 100%;
}
@media (min-width: 768px) {
  .wpcf7-submit {
    max-width: 250px;
  }
}

/* --- 45.7 Response Messages & Notes --- */
.wpcf7-response-output {
  border-radius: var(--border-radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}

.c-form-note,
.c_form_note {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-md);
}

/* Error state (CF7 adds .wpcf7-not-valid) */
.wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--color-error-strong);
}

/* Error text */
.wpcf7-not-valid-tip { color: var(--color-error-strong); }

/* ==========================================================================
   46. CONTACT PAGE - HELPFUL LINKS (REVISED)
   ========================================================================== */

/* --- 46.1 Section Scaffolding --- */
.page-contact--links,
.page_contact--links {
  /* This class is for semantic identification and future targeting */
}

/* --- 46.2 New Utility Classes --- */
/* CORRECTED: Added missing utility class definitions */
.u-section-padding-sm,
.u_section_padding_sm {
  padding-block: var(--space-lg);
}

.u-theme-light,
.u_theme_light {
  background-color: var(--color-surface-subtle);
}

.u-text-center,
.u_text_center {
  text-align: center;
}

.u-font-size-md,
.u_font_size_md {
  font-size: var(--font-size-md);
}

.u-link,
.u_link,
a.u-link,
a.u_link {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--color-accent-primary-ui) !important;
}

/* ==========================================================================
   47. CONTACT PAGE - COMPLIANCE MICROLINE (REVISED)
   ========================================================================== */

/* --- 47.1 Section Scaffolding --- */
.page-contact--compliance,
.page_contact--compliance {
  /* This class is for semantic identification and future targeting */
}

/* --- 47.2 New Utility Classes --- */
/* CORRECTED: Added missing utility class definitions */
.u-section-padding-xs,
.u_section_padding_xs {
  padding-block: var(--space-sm);
}

.u-theme-light,
.u_theme_light {
  background-color: var(--color-surface-subtle);
}

.u-text-center,
.u_text_center {
  text-align: center;
}

.u-font-size-xs,
.u_font_size_xs {
  font-size: var(--font-size-xs);
}

.u-color-text-muted,
.u_color_text_muted {
  color: var(--color-text-muted);
}

.u-link,
.u_link,
a.u-link,
a.u_link {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--color-accent-primary-ui) !important;
}

/* --- 47.3 Component Styles --- */
.c-compliance-line,
.c_compliance_line {
  opacity: 0.75;
}

/* ==========================================================================
   21. LEGAL – GENERIC HERO (GLOBAL)
   Components: .c-legal-hero, .c-legal-hero__inner, .c-legal-hero__eyebrow
   Notes:
   - Generic, reusable across /legal/* pages. Only change the <h1> per page.
   - Text sits on a subtle branded gradient for AA contrast.
   - Uses utility classes for alignment & measure; prose applied to content.
   - Includes underscore↔hyphen aliases per CSS Alias Mandate.
   ========================================================================== */

/* Section shell with subtle gradient & divider */
.c_legal_hero,
.c-legal-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-xl);
  color: var(--color-text-primary);
  background: linear-gradient(
    180deg,
    color-mix(
        in oklab,
        var(--color-surface) 92%,
        var(--color-accent-primary-ui) 8%
      )
      0%,
    var(--color-surface) 65%
  );
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Inner container hook (content stays centered & readable) */
.c_legal_hero__inner,
.c-legal-hero__inner {
  position: relative;
  margin-inline: auto;
}

/* Optional eyebrow/micro line under the title */
.c_legal_hero__eyebrow,
.c-legal-hero__eyebrow {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  opacity: 0.82;
}

/* ==========================================================================
   PMPro STYLES (V-FINAL - VALIDATED & CORRECTED)
   ========================================================================== */

/* ==========================================================================
   ACCOUNT PAGES HERO - GENERIC FOR REUSE ON ACCOUNT PAGES
   ========================================================================== */

/* Account Hero - Base */
.account-hero {
  /* Base styles inherited from utility classes */
  /* .u-section-padding provides padding-block */
  /* .u-theme-light provides light background */
  /* .u-bg-gradient-soft--plus provides gradient overlay */
}

/* Hero Content Container */
.account-hero__content {
  /* Inherits from .u-text-center and .u-measure-70ch utilities */
}

/* Typography - inherits from utility classes but can be enhanced */
.account-hero__title {
  /* Inherits from .u-font-size-xxl and .u-margin-bottom-sm */
  color: var(--color-text-primary);
}

.account-hero__subtitle {
  /* Inherits from .u-prose, .u-font-size-md, .u-margin-bottom-md */
  color: var(--color-text-secondary);
  text-wrap: balance;
}

.account-hero__note {
  /* Inherits from .u-prose, .u-font-size-sm, .u-color-text-muted */
  /* .u-color-text-muted already provides the muted color */
}

/* --- 1. Hero & Form Section Setup --- */
/* This is working correctly and remains. */
.c-hero__title::after,
.c-hero--title::after {
  margin-inline: auto;
}
.pmpro-form-section {
  background-color: var(--color-surface-primary);
}

/* --- 2. Form Headings (YOUR FIX) --- */
/*
 * This is your correct fix. It uses a targeted selector to override
 * only the font styles, preserving the plugin's alignment.
*/
h2.pmpro_card_title.pmpro_font-large,
h2.pmpro_form_heading.pmpro_font-large,
h2.pmpro_card_title.pmpro_font-large,
h2.pmpro_card_title.pmpro_font-x-large,
h3.pmpro_card_title.pmpro_font-large {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}



/* --- 3. Form Input Field Width --- */
/*
 * Your rule to constrain the width of text inputs for better readability.
*/
input.pmpro_form_input.pmpro_form_input-text,
input.pmpro_form_input.pmpro_form_input-password {
  max-width: 600px;
}

select.pmpro_form_input,
textarea.pmpro_form_input {
  max-width: 600px;
}

/* --- 4. Button & Button Container (YOUR FIX) --- */
/*
 * Your rule to correctly style the button's container, using the plugin's
 * own padding variables for consistency and removing extra margin.
*/
.pmpro div.pmpro_form_submit {
  margin-top: 0;
  padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--large)
    var(--pmpro--base--spacing--large);
  text-align: center;
}

#pmpro_member_profile_edit-account-information {
  padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--large)
    var(--pmpro--base--spacing--large);
}

/*
 * Your corrected selector that includes the specific class needed
 * to override the plugin's default button styles.
*/
body.pmpro-page--checkout .pmpro input[type="submit"],
.pmpro_btn.pmpro_btn-submit-checkout,
.pmpro_btn.pmpro_btn-submit-update-profile,
.pmpro_btn.pmpro_btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding-top: calc(0.8125rem + var(--btn-cap-shift));
  padding-bottom: calc(0.8125rem - var(--btn-cap-shift));
  padding-inline: var(--space-lg);
  background-color: var(--color-accent-primary-ui);
  color: var(--color-text-inverse);
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: 1;
  transition:
    opacity 0.15s ease,
    transform 0.12s ease;
  cursor: pointer;
}

/* Restores the hover and active states for the button */
body.pmpro-page--checkout .pmpro input[type="submit"]:hover,
.pmpro_btn.pmpro_btn-submit-checkout:hover {
  opacity: 0.85;
}

body.pmpro-page--checkout .pmpro input[type="submit"]:active,
.pmpro_btn.pmpro_btn-submit-checkout:active {
  transform: translateY(1px);
}

/* ==========================================================================
   RECAPTCHA HIDE
   ========================================================================== */

/* Hides reCAPTCHA token fields */
input[name="g-recaptcha-response"],
input[name="_wpcf7_recaptcha_response"] {
  display: none !important;
}

.grecaptcha-badge { 
  visibility: hidden;
}