/** Shopify CDN: Minification failed

Line 67:0 All "@import" rules must come first

**/
/* =========================================================
   ResetRX Brand Layer — v2 (custom sections)
   Lives at: assets/resetrx-brand.css
   Loaded from: layout/theme.liquid (just before </head>)

   ARCHITECTURE:
   - All custom-section classes use rx- prefix to avoid colliding
     with Motion's existing classes (.btn, .hero, .section, etc.)
   - Tokens defined in :root at the top — change once, propagates.
   - Section blocks below in same order they appear on the homepage.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand palette */
  --rx-blue: #007FFF;
  --rx-blue-deep: #0066CC;
  --rx-blue-darker: #004C99;
  --rx-blue-tint: #E6F2FF;
  --rx-blue-wash: rgba(0, 127, 255, 0.06);
  --rx-ivory: #F5F0E8;
  --rx-gold: #C9A96E;
  --rx-gold-soft: #D4B985;
  --rx-bg: #FAFAF8;
  --rx-ink: #2C2C2C;
  --rx-text: #5A5A5A;
  --rx-text-light: #8A8A8A;
  --rx-line: #E8E4DC;
  --rx-overlay: rgba(10, 31, 61, 0.35);

  /* Type stack */
  --rx-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --rx-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --rx-space-section: clamp(80px, 10vw, 140px);
  --rx-space-section-tight: clamp(60px, 7vw, 96px);
  --rx-container: 1200px;
  --rx-container-narrow: 920px;
  --rx-gutter: clamp(20px, 4vw, 48px);

  /* Type scale */
  --rx-h1: clamp(40px, 6vw, 72px);
  --rx-h2: clamp(32px, 4.5vw, 52px);
  --rx-h3: clamp(24px, 3vw, 32px);
  --rx-eyebrow: 13px;
  --rx-body-lg: 19px;
  --rx-body: 17px;
  --rx-small: 14px;

  /* Effects */
  --rx-radius: 8px;
  --rx-radius-card: 16px;
  --rx-shadow-card: 0 1px 2px rgba(44, 44, 44, 0.04), 0 8px 32px rgba(44, 44, 44, 0.06);
  --rx-shadow-card-hover: 0 4px 8px rgba(44, 44, 44, 0.06), 0 16px 48px rgba(44, 44, 44, 0.10);
  --rx-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. FONT IMPORTS ---------- */
/* Loaded via @import here so we don't need to touch theme.liquid again.
   Subset to display+italic+body weights only — keep payload small. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ---------- 3. PRIMITIVES ---------- */
.rx-container {
  max-width: var(--rx-container);
  margin: 0 auto;
  padding: 0 var(--rx-gutter);
}
.rx-container--narrow {
  max-width: var(--rx-container-narrow);
}

/* Eyebrow label — gold, uppercase, tracked */
.rx-eyebrow {
  font-family: var(--rx-font-body);
  font-size: var(--rx-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rx-gold);
  margin-bottom: 20px;
  display: inline-block;
}

/* Buttons (rx- prefixed to NOT collide with Motion's .btn) */
.rx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rx-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--rx-radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--rx-transition);
  white-space: nowrap;
}
.rx-btn--primary {
  background: var(--rx-blue-deep);
  color: #FFFFFF;
  border-color: var(--rx-blue-deep);
}
.rx-btn--primary:hover {
  background: var(--rx-blue-darker);
  border-color: var(--rx-blue-darker);
  color: #FFFFFF;
}
/* Secondary button — light-scheme default
   White bg, brand-blue stroke, ink text. WCAG: ink on white is 21:1 (AAA);
   stroke is decorative. Hover deepens to blue-tint fill (still passes AA). */
.rx-btn--secondary {
  background: #FFFFFF;
  color: var(--rx-ink);
  border-color: var(--rx-blue-deep);
}
.rx-btn--secondary:hover {
  background: var(--rx-blue-tint);
  color: var(--rx-ink);
  border-color: var(--rx-blue-deep);
}

/* Secondary button — dark-scheme override (editorial ghost button)
   On deep-blue and near-black sections: transparent fill + soft white
   stroke + white text. Hover promotes the stroke to full white and adds
   a faint white wash. Pattern matches "calm authority" voice. */
.rx-section[data-scheme="deep-blue"] .rx-btn--secondary,
.rx-section[data-scheme="near-black"] .rx-btn--secondary {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}
.rx-section[data-scheme="deep-blue"] .rx-btn--secondary:hover,
.rx-section[data-scheme="near-black"] .rx-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.rx-btn--lg {
  padding: 18px 32px;
  font-size: 16px;
}
.rx-btn--sm {
  padding: 9px 16px;
  font-size: 13px;
  border-width: 1px;
}

/* Header actions — Log in + Join buttons replacing Motion's icon trio.
   Inherit button visuals from .rx-btn; this only handles spacing + layout
   inside the existing Motion .site-nav__icons container. */
.rx-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rx-header-actions .rx-btn {
  /* Override .rx-btn's transition on transform — header buttons stay still */
  transform: none !important;
}
/* Cascade guard for header buttons. Motion injects nav text colors via
   {% style %} blocks driven by Theme Editor settings, which beat external
   stylesheets even at high specificity. !important is the documented
   pattern for this scenario (build notes Lesson 2). Scoped narrowly to
   .rx-header-actions so we don't pollute the global button system.
   Background + border on primary are also locked here for the same reason. */
.rx-header-actions .rx-btn--primary,
.rx-header-actions .rx-btn--primary:hover,
.rx-header-actions .rx-btn--primary:focus {
  color: #FFFFFF !important;
}
.rx-header-actions .rx-btn--primary {
  background: var(--rx-blue-deep) !important;
  border-color: var(--rx-blue-deep) !important;
}
.rx-header-actions .rx-btn--primary:hover {
  background: var(--rx-blue-darker) !important;
  border-color: var(--rx-blue-darker) !important;
}
.rx-header-actions .rx-btn--secondary,
.rx-header-actions .rx-btn--secondary:hover,
.rx-header-actions .rx-btn--secondary:focus {
  color: var(--rx-ink) !important;
}
.rx-header-actions .rx-btn--secondary {
  background: #FFFFFF !important;
  border-color: var(--rx-blue-deep) !important;
}
.rx-header-actions .rx-btn--secondary:hover {
  background: var(--rx-blue-tint) !important;
  border-color: var(--rx-blue-deep) !important;
}
@media (max-width: 540px) {
  .rx-header-actions { gap: 6px; }
  .rx-header-actions .rx-btn { padding: 8px 12px; font-size: 12px; }
}

/* Image placeholders — only show when no image uploaded */
.rx-placeholder {
  position: relative;
  background: var(--rx-ivory);
  border-radius: var(--rx-radius-card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rx-text);
  width: 100%;
  height: 100%;
  min-height: 240px;
}
.rx-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(201, 169, 110, 0.08) 12px, rgba(201, 169, 110, 0.08) 13px);
  pointer-events: none;
}
.rx-placeholder::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--rx-gold);
}
.rx-placeholder__label {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px;
  max-width: 80%;
}
.rx-placeholder__label-tag {
  display: block;
  font-family: var(--rx-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rx-gold);
  margin-bottom: 12px;
}
.rx-placeholder__label-text {
  font-family: var(--rx-font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--rx-ink);
  line-height: 1.4;
}

/* Section wrapper class (applied via schema "class") */
.rx-section-hero,
.rx-section-positioning,
.rx-section-how,
.rx-section-proof,
.rx-section-science,
.rx-section-founders,
.rx-section-loop,
.rx-section-system,
.rx-section-pricing,
.rx-section-closing {
  font-family: var(--rx-font-body);
  color: var(--rx-text);
  -webkit-font-smoothing: antialiased;
}

.rx-section-hero h1, .rx-section-hero h2, .rx-section-hero h3,
.rx-section-positioning h1, .rx-section-positioning h2, .rx-section-positioning h3,
.rx-section-how h1, .rx-section-how h2, .rx-section-how h3,
.rx-section-proof h1, .rx-section-proof h2, .rx-section-proof h3,
.rx-section-science h1, .rx-section-science h2, .rx-section-science h3,
.rx-section-founders h1, .rx-section-founders h2, .rx-section-founders h3,
.rx-section-loop h1, .rx-section-loop h2, .rx-section-loop h3,
.rx-section-system h1, .rx-section-system h2, .rx-section-system h3,
.rx-section-pricing h1, .rx-section-pricing h2, .rx-section-pricing h3,
.rx-section-closing h1, .rx-section-closing h2, .rx-section-closing h3 {
  font-family: var(--rx-font-display);
  color: var(--rx-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

/* ============================================================
   HEADER / NAV
   Forces solid cream background + dark text on Motion's header,
   regardless of what hero/section sits below it. Eliminates the
   white-on-white invisibility problem when hero is a light section.
   ============================================================ */

.shopify-section-header,
.shopify-section-group-header-group,
.site-header,
.header-wrapper {
  background: var(--rx-bg) !important;
  border-bottom: 1px solid var(--rx-line);
}

/* All header text (nav links, account icon labels, etc.) — dark */
.shopify-section-header a,
.shopify-section-header .header__menu-item,
.shopify-section-header .list-menu__item,
.site-header a,
.site-header__link,
.header__menu-item {
  color: var(--rx-ink) !important;
}

.shopify-section-header a:hover,
.site-header a:hover,
.header__menu-item:hover {
  color: var(--rx-blue-deep) !important;
}

/* Header icons (account, search, cart) — dark */
.shopify-section-header svg,
.site-header svg,
.header__icon svg {
  fill: var(--rx-ink) !important;
  color: var(--rx-ink) !important;
}

/* ============================================================
   HERO
   ============================================================ */
.rx-hero {
  padding: clamp(80px, 12vw, 140px) 0 var(--rx-space-section);
  background: var(--rx-bg);
}
.rx-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.rx-hero__title {
  font-size: var(--rx-h1) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--rx-ink);
  margin: 0 0 28px !important;
}
.rx-hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--rx-blue-deep);
}
/* Richtext field wraps content in <p> — force inheritance so headline renders correctly */
.rx-hero__title p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  color: inherit;
}
.rx-hero__title p { margin: 0; }
.rx-hero__lead {
  font-size: var(--rx-body-lg);
  line-height: 1.6;
  color: var(--rx-text);
  margin: 0 0 36px;
  max-width: 520px;
}
.rx-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.rx-hero__trust {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--rx-small);
  color: var(--rx-text-light);
}
.rx-hero__trust-line { width: 32px; height: 1px; background: var(--rx-line); }
.rx-hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--rx-radius-card);
  overflow: hidden;
}
.rx-hero__visual img,
.rx-hero__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rx-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .rx-hero__grid { grid-template-columns: 1fr; }
  .rx-hero__visual { aspect-ratio: 1 / 1; max-height: 480px; }
}

/* ============================================================
   POSITIONING
   ============================================================ */
.rx-positioning {
  background: var(--rx-ink);
  color: #FFFFFF;
  position: relative;
  padding: var(--rx-space-section) 0;
}
.rx-positioning::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(0, 127, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(201, 169, 110, 0.06), transparent 60%);
  pointer-events: none;
}
.rx-positioning__inner {
  position: relative;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.rx-positioning .rx-eyebrow { color: var(--rx-gold-soft); }
.rx-positioning__statement {
  font-family: var(--rx-font-display) !important;
  font-size: clamp(32px, 3.8vw, 54px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0 0 32px !important;
  max-width: 880px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.rx-positioning__statement strong {
  font-weight: 500;
  color: #FFFFFF;
  font-style: italic;
  display: block;
  margin-top: 0.2em;
}
.rx-positioning__statement p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  color: inherit;
}
.rx-positioning__support {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 680px;
  margin: 0 auto;
  font-weight: 400;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
/* .rx-how__* styles moved into sections/rx-how-it-works.liquid as
   section-scoped #rx-how-{{ section.id }} rules when the section was
   redesigned to a 2-column condensed layout (session 5+). Per Lesson
   12, single-section styles default to scoping in the section file. */

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
/* .rx-proof* styles moved into sections/rx-member-story.liquid as
   section-scoped #rx-stories-{{ section.id }} rules when the section
   was refactored to a block-based carousel (session 5+). */

/* ============================================================
   SCIENCE / EXPERTS
   ============================================================ */
.rx-science {
  background: var(--rx-bg);
  padding: var(--rx-space-section) 0;
}
.rx-science__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.rx-science__title {
  font-size: var(--rx-h2);
  margin-bottom: 20px;
}
.rx-science__subtitle {
  font-size: var(--rx-body-lg);
  color: var(--rx-text);
  line-height: 1.6;
  margin: 0;
}
.rx-science__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rx-expert {
  background: #FFFFFF;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-card);
  padding: 32px;
  transition: all var(--rx-transition);
}
.rx-expert:hover {
  box-shadow: var(--rx-shadow-card-hover);
  border-color: transparent;
  transform: translateY(-2px);
}
.rx-expert__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--rx-radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.rx-expert__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rx-expert__name {
  font-size: 22px !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em !important;
}
.rx-expert__role {
  font-family: var(--rx-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rx-gold);
  margin-bottom: 16px;
}
.rx-expert__bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--rx-text);
  margin: 0;
}
@media (max-width: 900px) {
  .rx-science__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRICING
   ============================================================ */
.rx-pricing {
  background: linear-gradient(180deg, var(--rx-bg) 0%, var(--rx-blue-wash) 100%);
  padding: var(--rx-space-section) 0;
}
.rx-pricing__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.rx-pricing__title {
  font-size: var(--rx-h2);
  margin-bottom: 20px;
}
.rx-pricing__subtitle {
  font-size: var(--rx-body-lg);
  color: var(--rx-text);
  margin: 0;
}
.rx-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.rx-plan {
  background: #FFFFFF;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-card);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--rx-transition);
}
.rx-plan:hover {
  box-shadow: var(--rx-shadow-card-hover);
}
.rx-plan--featured {
  border: 2px solid var(--rx-blue-deep);
  box-shadow: var(--rx-shadow-card);
  transform: translateY(-8px);
}
.rx-plan--featured:hover {
  transform: translateY(-12px);
}
.rx-plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rx-blue-deep);
  color: #FFFFFF;
  font-family: var(--rx-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
}
.rx-plan__name {
  font-size: 26px !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.015em !important;
}
.rx-plan__tagline {
  font-size: 14px;
  color: var(--rx-text-light);
  margin: 0 0 24px;
  line-height: 1.5;
  min-height: 42px;
}
.rx-plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rx-line);
  margin-bottom: 24px;
}
.rx-plan__price-amount {
  font-family: var(--rx-font-display);
  font-size: 48px;
  font-weight: 500;
  color: var(--rx-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.rx-plan__price-period {
  font-family: var(--rx-font-body);
  font-size: 14px;
  color: var(--rx-text);
}
.rx-plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  flex-grow: 1;
}
.rx-plan__features li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--rx-text);
  padding: 10px 0 10px 28px;
  position: relative;
}
.rx-plan__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 14px;
  height: 8px;
  border-left: 1.5px solid var(--rx-blue-deep);
  border-bottom: 1.5px solid var(--rx-blue-deep);
  transform: rotate(-45deg);
}
.rx-plan__cta { width: 100%; }

/* Featured card — color scheme picker (session 5+)
   Section setting `featured_color_scheme` outputs data-featured-scheme on
   the featured <article>. CSS below paints the bg, flips text, adjusts
   the badge / CTA / divider / checkmark for the dark variants. All
   color combinations meet WCAG AA for normal text. */
.rx-plan[data-featured-scheme="blue-deep"]  { background: var(--rx-blue-deep);  border-color: var(--rx-blue-deep); }
.rx-plan[data-featured-scheme="near-black"] { background: var(--rx-near-black); border-color: var(--rx-near-black); }
.rx-plan[data-featured-scheme="ink"]        { background: var(--rx-ink);        border-color: var(--rx-ink); }
.rx-plan[data-featured-scheme="page"]       { background: var(--rx-page); }
.rx-plan[data-featured-scheme="cream"]      { background: var(--rx-ivory); }
.rx-plan[data-featured-scheme="blue-tint"]  { background: var(--rx-blue-tint); }

/* Dark featured-scheme — invert text + supporting elements */
.rx-plan[data-featured-scheme="blue-deep"],
.rx-plan[data-featured-scheme="near-black"],
.rx-plan[data-featured-scheme="ink"] {
  color: #FFFFFF;
}
.rx-plan[data-featured-scheme="blue-deep"] .rx-plan__name,
.rx-plan[data-featured-scheme="near-black"] .rx-plan__name,
.rx-plan[data-featured-scheme="ink"] .rx-plan__name,
.rx-plan[data-featured-scheme="blue-deep"] .rx-plan__price-amount,
.rx-plan[data-featured-scheme="near-black"] .rx-plan__price-amount,
.rx-plan[data-featured-scheme="ink"] .rx-plan__price-amount {
  color: #FFFFFF !important;
}
.rx-plan[data-featured-scheme="blue-deep"] .rx-plan__tagline,
.rx-plan[data-featured-scheme="near-black"] .rx-plan__tagline,
.rx-plan[data-featured-scheme="ink"] .rx-plan__tagline,
.rx-plan[data-featured-scheme="blue-deep"] .rx-plan__price-period,
.rx-plan[data-featured-scheme="near-black"] .rx-plan__price-period,
.rx-plan[data-featured-scheme="ink"] .rx-plan__price-period,
.rx-plan[data-featured-scheme="blue-deep"] .rx-plan__features li,
.rx-plan[data-featured-scheme="near-black"] .rx-plan__features li,
.rx-plan[data-featured-scheme="ink"] .rx-plan__features li {
  color: rgba(255, 255, 255, 0.85);
}
.rx-plan[data-featured-scheme="blue-deep"] .rx-plan__price,
.rx-plan[data-featured-scheme="near-black"] .rx-plan__price,
.rx-plan[data-featured-scheme="ink"] .rx-plan__price {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
/* Feature checkmarks: gold on dark for warmth */
.rx-plan[data-featured-scheme="blue-deep"] .rx-plan__features li::before,
.rx-plan[data-featured-scheme="near-black"] .rx-plan__features li::before,
.rx-plan[data-featured-scheme="ink"] .rx-plan__features li::before {
  border-left-color: var(--rx-gold);
  border-bottom-color: var(--rx-gold);
}
/* Badge — color-flips so it stands out from the card AND from the
   surrounding section bg (which is usually light). Near-black bg gives
   the strongest contrast against light section bgs and reads cleanly
   over dark cards. For the near-black card itself, gold (brand accent)
   contrasts against near-black while staying on-brand. */
.rx-plan[data-featured-scheme="blue-deep"] .rx-plan__badge,
.rx-plan[data-featured-scheme="ink"] .rx-plan__badge {
  background: var(--rx-near-black);
  color: #FFFFFF;
}
.rx-plan[data-featured-scheme="near-black"] .rx-plan__badge {
  background: var(--rx-gold);
  color: var(--rx-near-black);
}
/* CTA on dark featured card: invert primary so it reads */
.rx-plan[data-featured-scheme="blue-deep"] .rx-btn--primary,
.rx-plan[data-featured-scheme="near-black"] .rx-btn--primary,
.rx-plan[data-featured-scheme="ink"] .rx-btn--primary {
  background: #FFFFFF;
  color: var(--rx-ink);
  border-color: #FFFFFF;
}
.rx-plan[data-featured-scheme="blue-deep"] .rx-btn--primary:hover,
.rx-plan[data-featured-scheme="near-black"] .rx-btn--primary:hover,
.rx-plan[data-featured-scheme="ink"] .rx-btn--primary:hover {
  background: var(--rx-blue-tint);
  color: var(--rx-ink);
  border-color: var(--rx-blue-tint);
}

@media (max-width: 900px) {
  .rx-pricing__grid { grid-template-columns: 1fr; }
  .rx-plan--featured { transform: none; }
  .rx-plan--featured:hover { transform: translateY(-4px); }
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.rx-closing {
  background: var(--rx-ink);
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: var(--rx-space-section) 0;
}
.rx-closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0, 127, 255, 0.10), transparent 70%);
  pointer-events: none;
}
.rx-closing__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.rx-closing .rx-eyebrow { color: var(--rx-gold-soft); }
.rx-closing__title {
  font-size: clamp(36px, 5vw, 60px) !important;
  color: #FFFFFF !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 24px !important;
  line-height: 1.1 !important;
}
.rx-closing__title em {
  font-style: italic;
  font-weight: 500;
}
.rx-closing__title p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  color: inherit;
}
.rx-closing__title p { margin: 0; }
.rx-closing__lead {
  font-size: var(--rx-body-lg);
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 40px;
  line-height: 1.6;
}
.rx-closing .rx-btn--primary {
  background: #FFFFFF;
  color: var(--rx-ink);
  border-color: #FFFFFF;
}
.rx-closing .rx-btn--primary:hover {
  background: var(--rx-blue-tint);
  border-color: var(--rx-blue-tint);
  color: var(--rx-ink);
}

/* =========================================================================
   ResetRX — Section background system
   ADD THIS BLOCK TO resetrx-brand.css
   Recommended location: directly after the :root token block,
   before any individual rx-section-* component rules.
   ========================================================================= */

/* Base section — every rx- section gets this class via the shared snippet.
   Provides a positioning context and consistent block padding (sections
   already have their own padding; rx-section just establishes the
   relative-positioned canvas a background image can attach to).            */
.rx-section {
  position: relative;
  background-color: var(--rx-bg);
  color: var(--rx-ink);
  /* Default text color flips per scheme below. Components inside a section
     should use 'currentColor' or the rx-* tokens, not hardcoded colors,
     so dark schemes display correctly.                                     */
}

/* -----------------------------------------------------------------------
   Color schemes — five locked palettes mapped to brand tokens.
   Each scheme sets background AND default text color. Section components
   can still override (e.g., a button is always rx-blue-deep regardless).
   ----------------------------------------------------------------------- */

.rx-section[data-scheme="page"] {
  background-color: var(--rx-bg);
  color: var(--rx-ink);
}

.rx-section[data-scheme="cream"] {
  background-color: var(--rx-ivory);
  color: var(--rx-ink);
}

.rx-section[data-scheme="blue-tint"] {
  background-color: var(--rx-blue-tint);
  color: var(--rx-ink);
}

.rx-section[data-scheme="deep-blue"] {
  background-color: var(--rx-blue-deep);
  color: #ffffff;
}

.rx-section[data-scheme="near-black"] {
  background-color: #0A1F3D;
  color: #ffffff;
}

/* -----------------------------------------------------------------------
   Dark scheme typography overrides — when text color flips to white,
   make sure any element relying on var(--rx-ink) or var(--rx-text) follows.
   ----------------------------------------------------------------------- */

.rx-section[data-scheme="deep-blue"] :where(h1, h2, h3, h4, h5, h6, p, li, a:not(.rx-btn)),
.rx-section[data-scheme="near-black"] :where(h1, h2, h3, h4, h5, h6, p, li, a:not(.rx-btn)) {
  color: inherit;
}

/* Eyebrow labels on dark schemes use the soft gold variant for warmth */
.rx-section[data-scheme="deep-blue"] .rx-eyebrow,
.rx-section[data-scheme="near-black"] .rx-eyebrow {
  color: var(--rx-gold-soft);
}

/* -----------------------------------------------------------------------
   Background image layer
   The image is applied as background-image via inline style on the section.
   Optional CSS overlay (color + opacity) is rendered as a `::after` pseudo-
   element, consuming custom properties set inline by the snippet:
     --rx-section-overlay-color
     --rx-section-overlay-opacity
   When no overlay is set, the pseudo-element falls back to opacity:0 (no paint).
   ----------------------------------------------------------------------- */

.rx-section--has-bg-image {
  position: relative;
  background-repeat: no-repeat;
  /* background-image, background-position, background-size set inline
     by the snippet — these defaults are fallbacks only.                  */
  background-position: center;
  background-size: cover;
}
.rx-section--has-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rx-section-overlay-color, transparent);
  opacity: var(--rx-section-overlay-opacity, 0);
  pointer-events: none;
  z-index: 0;
}

/* Mobile: anchor large bg images to keep faces/focal points on screen.
   If a section editor sets position to 'top' or 'bottom', that wins.    */
@media (max-width: 749px) {
  .rx-section--has-bg-image {
    background-attachment: scroll; /* never fixed on mobile — Safari quirk */
  }
}

/* -----------------------------------------------------------------------
   Background video layer (added session 6)
   The <video> element is rendered as the section's first child by
   rx-section-bg-media.liquid. The section forms its own stacking context
   (position: relative + z-index: 0) so the video sits at z-index: -1 inside
   it without escaping behind the page/parent. Overlay reuses the same
   ::after pattern as has-bg-image so the design controls are unified.
   ----------------------------------------------------------------------- */

.rx-section--has-bg-video {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.rx-section__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.rx-section--has-bg-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rx-section-overlay-color, transparent);
  opacity: var(--rx-section-overlay-opacity, 0);
  pointer-events: none;
  z-index: 0;
}

/* Reduced-motion: hide the video and rely on the poster image (if set)
   or the section's color scheme as the static background.               */
@media (prefers-reduced-motion: reduce) {
  .rx-section__bg-video { display: none; }
}

/* -----------------------------------------------------------------------
   Print: drop background images and dark schemes for ink savings
   ----------------------------------------------------------------------- */

@media print {
  .rx-section--has-bg-image { background-image: none !important; }
  .rx-section--has-bg-video .rx-section__bg-video { display: none !important; }
  .rx-section[data-scheme="deep-blue"],
  .rx-section[data-scheme="near-black"] {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
}

/* ============================================================
   ====== TOKEN BRIDGE — How It Works page support ============
   ============================================================
   APPEND THIS BLOCK to resetrx-brand.css IMMEDIATELY ABOVE
   the "HOW IT WORKS PAGE STYLES" block.
 
   Why this exists: the How It Works page styles (added below)
   reference token names that didn't exist in the original :root
   block. This file adds those tokens — most as aliases to existing
   tokens, some as genuinely new values.
 
   Result: the existing :root tokens still work as before.
   Homepage is untouched. New tokens are now available for
   How It Works AND for future pages (About Us, Membership).
 
   To remove the How It Works page later, you can leave this
   block in place — the new tokens are harmless additions.
 
   See build notes Lesson 14 for the verification methodology
   (token resolution scan against actual page CSS).
   ============================================================ */
 
:root {
 
  /* --------------------------------------------------------
     COLOR ALIASES + ADDITIONS
     - Most map to existing tokens under semantic names.
     - --rx-near-black is locked to #1A1A1A per brand notes.
       Note: the section-bg system's data-scheme="near-black"
       uses #0A1F3D (deep navy) — these are intentionally
       different, see Lesson 15 in build notes for context.
     -------------------------------------------------------- */
  --rx-page:                var(--rx-bg);
  --rx-white:               #FFFFFF;
  --rx-near-black:          #1A1A1A;
  --rx-text-muted:          var(--rx-text-light);
  --rx-line-soft:           #F0EDE6;
  --rx-surface-page:        var(--rx-bg);
  --rx-surface-cream:       var(--rx-ivory);
  --rx-surface-blue-tint:   var(--rx-blue-tint);
  --rx-surface-deep:        var(--rx-blue-deep);
  --rx-surface-near-black:  #1A1A1A;
 
  /* --------------------------------------------------------
     TYPE SIZE ALIASES
     - Most map to existing --rx-h*, --rx-body* tokens.
     - --rx-fs-display is NEW: a larger size used for hero
       and Eva headlines (bigger than h1 per design intent).
     - --rx-fs-body-sm is NEW: 15px slot between body and small.
     -------------------------------------------------------- */
  --rx-fs-display:  clamp(48px, 7vw, 96px);
  --rx-fs-h1:       var(--rx-h1);
  --rx-fs-h2:       var(--rx-h2);
  --rx-fs-h3:       var(--rx-h3);
  --rx-fs-body-lg:  var(--rx-body-lg);
  --rx-fs-body:     var(--rx-body);
  --rx-fs-body-sm:  15px;
  --rx-fs-eyebrow:  var(--rx-eyebrow);
 
  /* --------------------------------------------------------
     FONTS
     - Mono added for eyebrow labels and timestamps.
       Falls back gracefully on systems without JetBrains Mono.
     -------------------------------------------------------- */
  --rx-font-mono:  'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
 
  /* --------------------------------------------------------
     SPACING SCALE
     Granular ramp on a 4px base (4, 8, 12, 16, 24, 32, 48, 64).
     Existing --rx-space-section and --rx-gutter are preserved.
     Use granular tokens (--rx-space-2 etc.) for component-level
     spacing; use --rx-space-section for between-section padding.
     -------------------------------------------------------- */
  --rx-space-2:        8px;
  --rx-space-3:        12px;
  --rx-space-4:        16px;
  --rx-space-5:        24px;
  --rx-space-6:        32px;
  --rx-space-7:        48px;
  --rx-space-8:        64px;
  --rx-section-pad-x:  var(--rx-gutter);
  --rx-section-pad-y:  var(--rx-space-section);
 
  /* --------------------------------------------------------
     LAYOUT MAXES
     - --rx-container-max aliases existing --rx-container.
     - --rx-prose-max is the reading-comfort max for long-form
       text (centered editorial paragraphs, FAQ answers, etc.).
     -------------------------------------------------------- */
  --rx-container-max:  var(--rx-container);
  --rx-prose-max:      720px;
 
  /* --------------------------------------------------------
     RADIUS SCALE
     - --rx-radius-md aliases the existing --rx-radius (8px).
     - --rx-radius-xl aliases --rx-radius-card (16px).
     - sm and lg are new sizes filling the ramp.
     -------------------------------------------------------- */
  --rx-radius-sm:  4px;
  --rx-radius-md:  var(--rx-radius);
  --rx-radius-lg:  12px;
  --rx-radius-xl:  var(--rx-radius-card);
 
  /* --------------------------------------------------------
     MOTION TOKENS
     - --rx-dur and --rx-ease for component micro-interactions
       (extracted from the existing --rx-transition value so
       they stay consistent with homepage feel).
     - --rx-reveal-* are the slower, gentler curve used for
       scroll-triggered fade-up animations on the page.
     -------------------------------------------------------- */
  --rx-dur:              0.25s;
  --rx-ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --rx-reveal-distance:  12px;
  --rx-reveal-dur:       600ms;
  --rx-reveal-ease:      cubic-bezier(0.16, 1, 0.3, 1);
 
  /* --------------------------------------------------------
     TYPOGRAPHY DETAILS
     -------------------------------------------------------- */
  --rx-tracking-eyebrow:  0.12em;
 
  /* --------------------------------------------------------
     BACKGROUND IMAGE FALLBACKS
     These are overridden inline by sections that have a bg
     image uploaded — these defaults exist so the var() calls
     resolve cleanly when no image is set.
     -------------------------------------------------------- */
  --rx-bg-image:     none;
  --rx-bg-opacity:   0.18;
  --rx-bg-position:  center;
}

/* ============================================
   RESETRX — How It Works page styles
   Direction A "Grounded Authority"
   ============================================ */


/* ============================================
   2. RESET / BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--rx-font-body);
  font-size: var(--rx-fs-body);
  line-height: 1.6;
  color: var(--rx-text);
  background: var(--rx-page);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; height: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--rx-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   3. SECTION-BG SYSTEM (theme editor controls)
   Every section uses .rx-section + data-scheme + optional bg image.
   ============================================ */

.rx-section {
  padding: var(--rx-section-pad-y) var(--rx-section-pad-x);
  position: relative;
  isolation: isolate;
  color: var(--rx-text);
}

.rx-section[data-scheme="page"]       { background-color: var(--rx-surface-page); }
.rx-section[data-scheme="cream"]      { background-color: var(--rx-surface-cream); }
.rx-section[data-scheme="blue-tint"]  { background-color: var(--rx-surface-blue-tint); }
.rx-section[data-scheme="deep-blue"]  {
  background-color: var(--rx-surface-deep);
  color: rgba(255, 255, 255, 0.78);
}
.rx-section[data-scheme="near-black"] {
  background-color: var(--rx-surface-near-black);
  color: rgba(255, 255, 255, 0.78);
}

.rx-section[data-scheme="deep-blue"] h1,
.rx-section[data-scheme="deep-blue"] h2,
.rx-section[data-scheme="deep-blue"] h3,
.rx-section[data-scheme="near-black"] h1,
.rx-section[data-scheme="near-black"] h2,
.rx-section[data-scheme="near-black"] h3 {
  color: var(--rx-white);
}

.rx-section[data-scheme="deep-blue"] .rx-eyebrow,
.rx-section[data-scheme="near-black"] .rx-eyebrow {
  color: var(--rx-gold-soft);
}

/* HIW page bg-image system (session 4): sections set data-bg-image="true"
   inline along with --rx-bg-image / --rx-bg-position / --rx-bg-opacity.
   Consumed by 8 rx-hiw-* sections. Distinct from the section-bg snippet
   used by homepage sections — do not unify without porting both consumers. */
.rx-section[data-bg-image="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--rx-bg-image);
  background-size: cover;
  background-position: var(--rx-bg-position, center);
  background-repeat: no-repeat;
  opacity: var(--rx-bg-opacity, 0.18);
  z-index: -1;
  pointer-events: none;
}

.rx-container {
  width: 100%;
  max-width: var(--rx-container-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.rx-prose { max-width: var(--rx-prose-max); }

/* ============================================
   4. SHARED PRIMITIVES
   ============================================ */

.rx-eyebrow {
  font-family: var(--rx-font-mono);
  font-size: var(--rx-fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--rx-tracking-eyebrow);
  color: var(--rx-text-muted);
  margin-bottom: var(--rx-space-4);
  display: block;
}

.rx-h1 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-fs-h1);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rx-ink);
}
.rx-h2 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--rx-ink);
}
.rx-h3 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-fs-h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--rx-ink);
}
.rx-italic {
  font-family: var(--rx-font-display);
  font-style: italic;
  font-weight: 400;
}

.rx-lede {
  font-size: var(--rx-fs-body-lg);
  line-height: 1.7;
  color: var(--rx-text);
}
.rx-body { font-size: var(--rx-fs-body); line-height: 1.7; }
.rx-body-sm { font-size: var(--rx-fs-body-sm); line-height: 1.6; }

/* ============================================
   4a. RICHTEXT SUPPORT
   Headlines and body copy will be Shopify richtext fields
   in production. The richtext editor injects <p>, <strong>,
   <em>, <a>, and <span style="color:..."> elements. These
   styles ensure injected markup inherits typography cleanly
   and respects user-applied formatting.
   ============================================ */

/* HEADLINE RICHTEXT — applies to every .rx-h*, .rx-hero__h1, .rx-eva__h2, .rx-closing__h2, .rx-step__title */
.rx-headline-rt strong,
.rx-headline-rt b {
  font-weight: 600;
  /* Inherit everything else from the headline */
}
.rx-headline-rt em,
.rx-headline-rt i {
  font-style: italic;
  font-weight: inherit;
}
.rx-headline-rt a {
  color: var(--rx-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--rx-dur) var(--rx-ease);
}
.rx-headline-rt a:hover { color: var(--rx-blue-deep); }
/* User-injected <span style="color: ..."> wins; we don't override */

/* BODY RICHTEXT — applies to ledes, paragraphs, sub-bodies, etc.
   Wrapping <p> tags get injected automatically by Shopify;
   target both the wrapper and inner <p> so single-paragraph
   AND multi-paragraph fields render correctly. */
.rx-body-rt > p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.rx-body-rt > p + p {
  margin-top: 1em;
}
.rx-body-rt strong,
.rx-body-rt b { font-weight: 600; color: var(--rx-ink); }
.rx-body-rt em,
.rx-body-rt i { font-style: italic; }
.rx-body-rt a {
  color: var(--rx-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--rx-dur) var(--rx-ease);
}
.rx-body-rt a:hover { color: var(--rx-blue-deep); }

/* On dark backgrounds, bold body copy inherits the section's color (white-ish) */
.rx-section[data-scheme="deep-blue"] .rx-body-rt strong,
.rx-section[data-scheme="deep-blue"] .rx-body-rt b,
.rx-section[data-scheme="near-black"] .rx-body-rt strong,
.rx-section[data-scheme="near-black"] .rx-body-rt b,
.rx-eva .rx-body-rt strong,
.rx-eva .rx-body-rt b,
.rx-closing .rx-body-rt strong,
.rx-closing .rx-body-rt b {
  color: var(--rx-white);
}

/* DELETED: duplicate .rx-btn / :hover / :active block from the session 4
   HIW token-bridge append. It was redefining background to --rx-blue
   (#007FFF, fails WCAG AA with white text) and clobbering the variant
   color rules (primary, secondary) because of cascade-by-source-order.
   Original .rx-btn at line ~87 handles layout; variants handle colors. */
.rx-btn:active { transform: translateY(1px); }
.rx-btn--ghost {
  background: transparent;
  border-color: var(--rx-line);
  color: var(--rx-ink);
}
.rx-btn--ghost:hover { background: var(--rx-page); border-color: var(--rx-ink); }
.rx-btn--on-dark {
  background: var(--rx-white);
  color: var(--rx-near-black);
}
.rx-btn--on-dark:hover { background: var(--rx-ivory); }

.rx-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--rx-space-2);
  font-family: var(--rx-font-body);
  font-weight: 500;
  font-size: var(--rx-fs-body-sm);
  color: var(--rx-blue);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--rx-dur) var(--rx-ease);
}
.rx-link-arrow:hover { color: var(--rx-blue-deep); }

.rx-placeholder {
  background: var(--rx-line-soft);
  border: 1px dashed var(--rx-line);
  border-radius: var(--rx-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--rx-space-5);
  color: var(--rx-text-muted);
  font-family: var(--rx-font-mono);
  font-size: var(--rx-fs-eyebrow);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rx-placeholder--photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--rx-line-soft) 0%, var(--rx-ivory) 100%);
}
.rx-placeholder--illustration {
  aspect-ratio: 5 / 4;
  background: var(--rx-white);
}
.rx-placeholder--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 9px;
  flex-shrink: 0;
  border-radius: var(--rx-radius-sm);
}
.rx-placeholder--icon-lg {
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 9px;
  flex-shrink: 0;
}

/* ============================================
   5. SCROLL-REVEAL ANIMATION
   Subtle, on-brand. Honors prefers-reduced-motion.
   ============================================ */

.rx-reveal {
  opacity: 0;
  transform: translateY(var(--rx-reveal-distance));
  transition: opacity var(--rx-reveal-dur) var(--rx-reveal-ease),
              transform var(--rx-reveal-dur) var(--rx-reveal-ease);
  will-change: opacity, transform;
}
.rx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rx-reveal-stagger > * {
  opacity: 0;
  transform: translateY(var(--rx-reveal-distance));
  transition: opacity var(--rx-reveal-dur) var(--rx-reveal-ease),
              transform var(--rx-reveal-dur) var(--rx-reveal-ease);
}
.rx-reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms;   }
.rx-reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 80ms;  }
.rx-reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.rx-reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.rx-reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.rx-reveal-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .rx-reveal,
  .rx-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================
   6. SECTION 01 — HERO
   ============================================ */
.rx-hero {
  padding-top: calc(var(--rx-section-pad-y) + 32px);
  padding-bottom: var(--rx-section-pad-y);
}
.rx-hero__inner { max-width: 920px; }
.rx-hero__h1 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-fs-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--rx-ink);
  margin-bottom: var(--rx-space-5);
}
.rx-hero__h1 em {
  font-style: italic;
  color: var(--rx-blue);
}
.rx-hero__sub {
  font-size: var(--rx-fs-body-lg);
  line-height: 1.6;
  color: var(--rx-text);
  max-width: 560px;
}

/* ============================================
   7. SECTION 02 — PREMISE
   ============================================ */
.rx-premise__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.rx-premise__h2 { margin-bottom: var(--rx-space-5); }
.rx-premise__body {
  font-size: var(--rx-fs-body-lg);
  line-height: 1.75;
  color: var(--rx-text);
}

/* ============================================
   8. ACT BANDS
   ============================================ */
.rx-act-band {
  background: var(--rx-blue-tint);
  padding: var(--rx-space-6) var(--rx-section-pad-x);
  text-align: center;
}
.rx-act-band__label {
  font-family: var(--rx-font-mono);
  font-size: var(--rx-fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rx-blue-deep);
  margin: 0;
}
.rx-act-band__label::before { content: "—  "; opacity: 0.4; }
.rx-act-band__label::after  { content: "  —"; opacity: 0.4; }

/* ============================================
   9. PILLAR SECTIONS (1 + 3)
   ============================================ */
.rx-pillar__grid {
  display: grid;
  gap: var(--rx-space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .rx-pillar__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--rx-space-8);
    align-items: center;
  }
  .rx-pillar--reversed .rx-pillar__media { order: -1; }
}

.rx-pillar__copy { max-width: 560px; }
.rx-pillar__h2 { margin-bottom: var(--rx-space-4); }
.rx-pillar__lede { margin-bottom: var(--rx-space-6); }

.rx-pillar__media .rx-placeholder--illustration { width: 100%; }

.rx-subpoints {
  margin-top: var(--rx-space-7);
  display: grid;
  gap: var(--rx-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .rx-subpoints { grid-template-columns: repeat(3, 1fr); gap: var(--rx-space-5); }
}

.rx-subpoint {
  padding: var(--rx-space-5) 0;
  border-top: 1px solid var(--rx-line);
}
.rx-subpoint__icon { margin-bottom: var(--rx-space-3); }
.rx-subpoint__title {
  font-family: var(--rx-font-body);
  font-weight: 600;
  font-size: var(--rx-fs-body);
  color: var(--rx-ink);
  margin-bottom: var(--rx-space-2);
}
.rx-subpoint__body {
  font-size: var(--rx-fs-body-sm);
  line-height: 1.6;
  color: var(--rx-text);
}

/* ============================================
   10. SECTION 04 — WELLNESS PLAN (PILLAR 2)
   ============================================ */
.rx-wellness__head { max-width: 720px; margin: 0 auto var(--rx-space-7); text-align: center; }
.rx-wellness__h2 { margin-bottom: var(--rx-space-4); }
.rx-wellness__lede { color: var(--rx-text); }

.rx-pillars-strip {
  display: grid;
  gap: var(--rx-space-3);
  grid-template-columns: repeat(2, 1fr);
  margin: var(--rx-space-7) 0;
}
@media (min-width: 700px) {
  .rx-pillars-strip { grid-template-columns: repeat(5, 1fr); gap: var(--rx-space-4); }
}

.rx-pillar-card {
  background: var(--rx-white);
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-lg);
  padding: var(--rx-space-5) var(--rx-space-4);
  text-align: center;
  transition: border-color var(--rx-dur) var(--rx-ease), transform var(--rx-dur) var(--rx-ease);
}
.rx-pillar-card:hover {
  border-color: var(--rx-gold);
  transform: translateY(-2px);
}
.rx-pillar-card__icon {
  width: 36px;
  height: 36px;
  margin: 0 auto var(--rx-space-3);
}
.rx-pillar-card__name {
  font-family: var(--rx-font-display);
  font-weight: 500;
  font-size: var(--rx-fs-body-lg);
  color: var(--rx-ink);
  letter-spacing: -0.005em;
}

.rx-wellness__footer {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* ============================================
   11. SECTION 05 — EVA (the centerpiece)
   LOCKED to near-black; theme-editor scheme picker
   not exposed for this section.
   ============================================ */
.rx-eva {
  background: var(--rx-near-black);
  color: var(--rx-white);
  padding: calc(var(--rx-section-pad-y) + 32px) var(--rx-section-pad-x);
  position: relative;
  overflow: hidden;
}
.rx-eva::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 127, 255, 0.08), transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(201, 169, 110, 0.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.rx-eva__inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.rx-eva__head { text-align: center; margin-bottom: var(--rx-space-8); }
.rx-eva__eyebrow { color: var(--rx-gold-soft); }
.rx-eva__h2 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-fs-display);
  font-weight: 400;
  line-height: 1;
  color: var(--rx-white);
  margin-bottom: var(--rx-space-5);
  letter-spacing: -0.025em;
}
.rx-eva__h2 em { font-style: italic; color: var(--rx-gold-soft); }
.rx-eva__lede {
  font-size: var(--rx-fs-body-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 auto;
}

.rx-eva__visual {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(201, 169, 110, 0.4);
  border-radius: var(--rx-radius-xl);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--rx-space-7);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--rx-font-mono);
  font-size: var(--rx-fs-eyebrow);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--rx-space-5);
}
@media (min-width: 768px) {
  .rx-eva__visual { aspect-ratio: 21 / 9; }
}

.rx-eva__cards {
  display: grid;
  gap: var(--rx-space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--rx-space-8);
}
@media (min-width: 760px) {
  .rx-eva__cards { grid-template-columns: repeat(3, 1fr); }
}
.rx-eva-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--rx-gold);
  border-radius: var(--rx-radius-lg);
  padding: var(--rx-space-6) var(--rx-space-5);
}
.rx-eva-card__title {
  font-family: var(--rx-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--rx-fs-h3);
  color: var(--rx-gold-soft);
  margin-bottom: var(--rx-space-3);
}
.rx-eva-card__body {
  font-size: var(--rx-fs-body-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.rx-eva__chat {
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--rx-radius-xl);
  padding: var(--rx-space-6);
}
.rx-eva__chat-label {
  font-family: var(--rx-font-mono);
  font-size: var(--rx-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--rx-tracking-eyebrow);
  color: var(--rx-gold-soft);
  margin-bottom: var(--rx-space-5);
  text-align: center;
}
.rx-msg {
  margin-bottom: var(--rx-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--rx-space-2);
}
.rx-msg__author {
  font-family: var(--rx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}
.rx-msg__bubble {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--rx-radius-md);
  padding: var(--rx-space-4) var(--rx-space-5);
  font-size: var(--rx-fs-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.rx-msg--eva .rx-msg__bubble {
  background: rgba(0, 127, 255, 0.12);
  border-left: 2px solid var(--rx-blue);
  font-family: var(--rx-font-display);
  font-style: italic;
  font-size: var(--rx-fs-body);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  border-radius: 0 var(--rx-radius-md) var(--rx-radius-md) 0;
}
.rx-msg--eva .rx-msg__author { color: var(--rx-gold-soft); }
.rx-eva__chat-caption {
  margin-top: var(--rx-space-5);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  font-style: italic;
}

.rx-eva__closer {
  margin-top: var(--rx-space-8);
  font-family: var(--rx-font-display);
  font-style: italic;
  font-size: var(--rx-fs-h3);
  color: var(--rx-gold-soft);
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ============================================
   12. SECTION 07 — FIVE STEPS
   ============================================ */
.rx-steps__head {
  max-width: 720px;
  margin: 0 auto var(--rx-space-8);
  text-align: center;
}
.rx-steps__h2 { margin-bottom: var(--rx-space-4); }
.rx-steps__intro { color: var(--rx-text); }

.rx-step {
  padding: var(--rx-space-7) 0;
  border-top: 1px solid var(--rx-line);
}
.rx-step:last-child { border-bottom: 1px solid var(--rx-line); }

.rx-step__grid {
  display: grid;
  gap: var(--rx-space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .rx-step__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--rx-space-8);
  }
  .rx-step:nth-child(even) .rx-step__media { order: -1; }
}

.rx-step__num {
  font-family: var(--rx-font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: var(--rx-gold);
  margin-bottom: var(--rx-space-4);
  letter-spacing: -0.02em;
}
.rx-step__label {
  font-family: var(--rx-font-display);
  font-style: italic;
  font-size: var(--rx-fs-body);
  color: var(--rx-text-muted);
  margin-bottom: var(--rx-space-3);
}
.rx-step__title {
  font-family: var(--rx-font-display);
  font-weight: 400;
  font-size: var(--rx-fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--rx-ink);
  margin-bottom: var(--rx-space-4);
}
.rx-step__body { color: var(--rx-text); line-height: 1.7; max-width: 480px; }

/* ============================================
   13. SECTION 08 — A WEEK IN THE RESET
   7-day grid. Each day is a small card with a list
   of "moves" (chips). Move variants:
     default — light blue wash
     --accent — solid blue tint (Eva check-ins)
     --gold — gold wash (Sunday weekly review)
   ============================================ */
.rx-hiw-week {
  padding: var(--rx-space-section) 0;
}
.rx-hiw-week__head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.rx-hiw-week__title {
  font-size: var(--rx-h2);
  margin-bottom: 16px;
}
.rx-hiw-week__intro {
  font-size: var(--rx-body-lg);
  color: var(--rx-text);
  line-height: 1.6;
}
.rx-hiw-week__intro p { margin: 0; }
.rx-hiw-week__intro p + p { margin-top: 0.6em; }

.rx-week__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.rx-week__day {
  background: #FFFFFF;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius);
  padding: 18px 14px;
  min-height: 160px;
}
.rx-week__dow {
  font-family: var(--rx-font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rx-text-light);
  margin-bottom: 10px;
}
.rx-week__moves {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rx-week__move {
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--rx-blue-wash);
  color: var(--rx-ink);
}
.rx-week__move--accent { background: var(--rx-blue-tint); }
.rx-week__move--gold   { background: rgba(201, 169, 110, 0.15); color: var(--rx-ink); }

@media (max-width: 960px) {
  .rx-week__grid { grid-template-columns: repeat(2, 1fr); }
  .rx-week__day { min-height: 120px; }
}
@media (max-width: 540px) {
  .rx-week__grid { grid-template-columns: 1fr; }
  .rx-week__day { min-height: 0; }
}

/* ============================================
   14. SECTION 09 — FAQ
   Smooth height-based expand using grid trick
   ============================================ */
.rx-faq__head { max-width: 720px; margin: 0 auto var(--rx-space-7); text-align: center; }

.rx-faq__group { margin-bottom: var(--rx-space-7); max-width: 820px; margin-left: auto; margin-right: auto; }
.rx-faq__group-label {
  font-family: var(--rx-font-mono);
  font-size: var(--rx-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--rx-tracking-eyebrow);
  color: var(--rx-text-muted);
  padding-bottom: var(--rx-space-3);
  border-bottom: 1px solid var(--rx-line);
  margin-bottom: var(--rx-space-2);
}

.rx-faq-item { border-bottom: 1px solid var(--rx-line); }
.rx-faq-item__btn {
  width: 100%;
  background: none;
  border: 0;
  padding: var(--rx-space-5) 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rx-space-4);
  font-family: var(--rx-font-display);
  font-weight: 400;
  font-size: var(--rx-fs-body-lg);
  color: var(--rx-ink);
  letter-spacing: -0.01em;
  transition: color var(--rx-dur) var(--rx-ease);
}
.rx-faq-item__btn:hover { color: var(--rx-blue); }
.rx-faq-item__icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--rx-dur) var(--rx-ease);
}
.rx-faq-item__icon::before, .rx-faq-item__icon::after {
  content: ""; position: absolute; background: currentColor;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.rx-faq-item__icon::before { width: 14px; height: 1.5px; }
.rx-faq-item__icon::after { width: 1.5px; height: 14px; transition: transform var(--rx-dur) var(--rx-ease); }
.rx-faq-item__btn[aria-expanded="true"] .rx-faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Smooth height-based expand using grid-template-rows: 0fr → 1fr */
.rx-faq-item__body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--rx-reveal-ease);
}
.rx-faq-item[data-open="true"] .rx-faq-item__body-wrap {
  grid-template-rows: 1fr;
}
.rx-faq-item__body {
  overflow: hidden;
  font-size: var(--rx-fs-body-sm);
  line-height: 1.7;
  color: var(--rx-text);
  max-width: 720px;
}
.rx-faq-item__body p {
  padding: 0 0 var(--rx-space-5);
  margin: 0;
}

/* ============================================
   15. SECTION 10 — CLOSING CTA
   ============================================ */
.rx-closing {
  background: var(--rx-near-black);
  color: var(--rx-white);
  padding: calc(var(--rx-section-pad-y) + 16px) var(--rx-section-pad-x);
  text-align: center;
}
.rx-closing__inner { max-width: 720px; margin: 0 auto; }
.rx-closing__h2 {
  font-family: var(--rx-font-display);
  font-weight: 400;
  font-size: var(--rx-fs-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rx-white);
  margin-bottom: var(--rx-space-4);
}
.rx-closing__h2 em { font-style: italic; color: var(--rx-gold-soft); }
.rx-closing__sub {
  font-size: var(--rx-fs-body-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  max-width: 520px;
  margin: 0 auto var(--rx-space-7);
}
.rx-closing__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rx-space-4);
}
@media (min-width: 600px) {
  .rx-closing__actions { flex-direction: row; justify-content: center; }
}
.rx-closing .rx-link-arrow { color: rgba(255, 255, 255, 0.7); }
.rx-closing .rx-link-arrow:hover { color: var(--rx-gold-soft); }

/* ============================================
   16. SHELL CHROME (prototype only)
   ============================================ */
.rx-shell-header {
  padding: var(--rx-space-5) var(--rx-section-pad-x);
  border-bottom: 1px solid var(--rx-line);
  background: var(--rx-page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.rx-shell-logo {
  font-family: var(--rx-font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--rx-ink);
  letter-spacing: -0.01em;
}
.rx-shell-nav {
  display: none;
  gap: var(--rx-space-6);
}
@media (min-width: 768px) { .rx-shell-nav { display: flex; } }
.rx-shell-nav a {
  font-size: var(--rx-fs-body-sm);
  font-weight: 500;
  color: var(--rx-text);
}
.rx-shell-nav a.is-current { color: var(--rx-blue); }
.rx-shell-nav a:hover { color: var(--rx-ink); }

.rx-shell-footer {
  padding: var(--rx-space-7) var(--rx-section-pad-x);
  background: var(--rx-page);
  border-top: 1px solid var(--rx-line);
  text-align: center;
  font-family: var(--rx-font-mono);
  font-size: var(--rx-fs-eyebrow);
  color: var(--rx-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
   FOUNDERS — alternating profile rows
   Photo on one side, name/role/bio on the other; sides flip per
   block. Uses `direction: rtl` on odd rows to swap grid order
   without splitting the markup; inner content is set back to ltr.
   ============================================================ */
.rx-founders {
  padding: var(--rx-space-section) 0;
}
.rx-founders__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 96px;
}
.rx-founders__title {
  font-size: var(--rx-h2);
  margin-bottom: 20px;
}
.rx-founders__subtitle {
  font-size: var(--rx-body-lg);
  color: var(--rx-text);
  line-height: 1.6;
}
.rx-founders__subtitle p { margin: 0; }
.rx-founders__subtitle p + p { margin-top: 0.6em; }
.rx-founders__list {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 120px);
}
.rx-founder {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}
.rx-founder--reverse { direction: rtl; }
.rx-founder--reverse > * { direction: ltr; }

.rx-founder__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--rx-radius-card);
  overflow: hidden;
  background: var(--rx-blue-tint);
  position: relative;
}
.rx-founder__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(44, 44, 44, 0.04);
  pointer-events: none;
}
.rx-founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rx-founder__body { max-width: 540px; }
.rx-founder--reverse .rx-founder__body {
  margin-left: auto;
  text-align: right;
}
.rx-founder__role {
  font-family: var(--rx-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rx-gold);
  margin: 0 0 14px;
}
.rx-founder__name {
  font-size: var(--rx-h3) !important;
  margin: 0 0 24px !important;
  letter-spacing: -0.015em !important;
}
.rx-founder__rule {
  width: 48px;
  height: 2px;
  background: var(--rx-blue-deep);
  border: 0;
  margin: 0 0 24px;
}
.rx-founder--reverse .rx-founder__rule { margin-left: auto; }
.rx-founder__bio {
  font-size: var(--rx-body);
  line-height: 1.7;
  color: var(--rx-text);
}
.rx-founder__bio p { margin: 0 0 1em; }
.rx-founder__bio p:last-child { margin-bottom: 0; }

/* Dark-scheme legibility — bio text follows the section text color */
.rx-section[data-scheme="deep-blue"] .rx-founder__bio,
.rx-section[data-scheme="near-black"] .rx-founder__bio,
.rx-section[data-scheme="deep-blue"] .rx-founders__subtitle,
.rx-section[data-scheme="near-black"] .rx-founders__subtitle {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 860px) {
  .rx-founder,
  .rx-founder--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 28px;
  }
  .rx-founder__photo {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }
  .rx-founder__body,
  .rx-founder--reverse .rx-founder__body {
    max-width: none;
    margin: 0 auto;
    text-align: left;
  }
  .rx-founder--reverse .rx-founder__rule { margin-left: 0; }
  .rx-founders__header { margin-bottom: 64px; }
}

/* ============================================================
   HOW IT WORKS · LOOP
   Four-beat method: Test → Learn → Adjust → Repeat.
   ============================================================ */
.rx-hiw-loop {
  padding: var(--rx-space-section) 0;
}
.rx-hiw-loop__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 96px;
}
.rx-hiw-loop__title {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 16px;
}
.rx-hiw-loop__subtitle {
  font-size: var(--rx-body-lg);
  color: var(--rx-text);
  line-height: 1.6;
}
.rx-hiw-loop__subtitle p { margin: 0; }
.rx-hiw-loop__subtitle p + p { margin-top: 0.6em; }

.rx-hiw-loop__beats {
  display: flex;
  flex-direction: column;
}

/* Single beat */
.rx-beat {
  display: grid;
  grid-template-columns: 180px 1fr 320px;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding: 56px 0;
  position: relative;
}
.rx-beat + .rx-beat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 90px;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--rx-gold) 40%, var(--rx-gold) 60%, transparent);
  transform: translateY(-100%);
}
.rx-beat__num {
  font-family: var(--rx-font-display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 400;
  color: var(--rx-gold);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-feature-settings: "lnum";
}
.rx-beat__body { padding-top: 14px; }
.rx-beat__verb {
  font-family: var(--rx-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rx-blue-deep);
  margin: 0 0 16px;
}
.rx-beat__verb .sep {
  color: var(--rx-text-light);
  margin: 0 10px;
  font-weight: 400;
}
.rx-beat__title {
  font-size: var(--rx-h3) !important;
  margin: 0 0 20px !important;
  max-width: 22ch;
}
.rx-beat__copy {
  font-size: var(--rx-body);
  line-height: 1.7;
  color: var(--rx-text);
  max-width: 48ch;
}
.rx-beat__copy p { margin: 0 0 16px; }
.rx-beat__copy p:last-child { margin-bottom: 0; }

.rx-beat__visual { padding-top: 20px; }
.rx-beat__visual-card {
  background: #FFFFFF;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-card);
  padding: 24px;
  box-shadow: var(--rx-shadow-card);
  position: relative;
}
.rx-beat__visual-card--image { padding: 0; overflow: hidden; }
.rx-beat__visual-card--image img {
  display: block;
  width: 100%;
  height: auto;
}
.rx-beat__placeholder-tag {
  position: absolute;
  top: -10px;
  right: -8px;
  background: var(--rx-ink);
  color: #fff;
  font-family: var(--rx-font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  z-index: 1;
}

/* Visual variants — placeholder graphics */
.rx-vis-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  align-items: end;
  height: 110px;
}
.rx-vis-bars span {
  background: var(--rx-blue-tint);
  border-radius: 3px 3px 0 0;
}
.rx-vis-bars span:nth-child(1) { height: 40%; }
.rx-vis-bars span:nth-child(2) { height: 70%; background: var(--rx-blue-deep); }
.rx-vis-bars span:nth-child(3) { height: 55%; }
.rx-vis-bars span:nth-child(4) { height: 85%; background: var(--rx-blue-deep); }
.rx-vis-bars span:nth-child(5) { height: 35%; }
.rx-vis-bars span:nth-child(6) { height: 60%; }
.rx-vis-meta {
  font-family: var(--rx-font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rx-text-light);
  margin-top: 14px;
}

.rx-vis-chat { display: flex; flex-direction: column; gap: 10px; }
.rx-vis-chat__msg {
  font-family: var(--rx-font-body);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--rx-ink);
  max-width: 85%;
}
.rx-vis-chat__msg--eva { background: var(--rx-blue-tint); align-self: flex-start; border-bottom-left-radius: 4px; }
.rx-vis-chat__msg--em {
  font-style: italic;
  color: var(--rx-blue-deep);
  font-family: var(--rx-font-display);
  font-size: 14px;
}
.rx-vis-chat__msg--user {
  background: var(--rx-bg);
  align-self: flex-end;
  border: 1px solid var(--rx-line);
  border-bottom-right-radius: 4px;
}

.rx-vis-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rx-vis-pillars span {
  font-family: var(--rx-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--rx-bg);
  border: 1px solid var(--rx-line);
  color: var(--rx-ink);
  text-align: center;
}
.rx-vis-pillars span:last-child {
  grid-column: span 2;
  background: var(--rx-blue-deep);
  color: #fff;
  border-color: var(--rx-blue-deep);
}

.rx-vis-loop {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rx-vis-loop svg { width: 100%; height: 100%; }

/* Loop closure flourish */
.rx-hiw-loop__close {
  margin: 80px auto 0;
  text-align: center;
  max-width: 480px;
}
.rx-hiw-loop__close svg { display: block; margin: 0 auto 14px; }
.rx-hiw-loop__close-label {
  font-family: var(--rx-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rx-gold);
}
.rx-hiw-loop__close-sub {
  font-family: var(--rx-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--rx-ink);
  margin-top: 6px;
}

@media (max-width: 960px) {
  .rx-beat {
    grid-template-columns: 90px 1fr;
    gap: 24px;
    padding: 44px 0;
  }
  .rx-beat__visual {
    grid-column: 1 / -1;
    padding-top: 8px;
  }
  .rx-beat + .rx-beat::before {
    left: 44px;
    height: 44px;
  }
}
@media (max-width: 540px) {
  .rx-beat {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .rx-beat__num { font-size: 56px; }
  .rx-beat + .rx-beat::before { display: none; }
  .rx-hiw-loop__header { margin-bottom: 64px; }
}

/* ============================================================
   HOW IT WORKS · SYSTEM (the stack)
   Bird's-eye 4-layer view. Renders either a placeholder CSS stack
   or a custom illustration uploaded to section.settings.system_image.
   ============================================================ */
.rx-hiw-system {
  padding: var(--rx-space-section) 0;
}
.rx-hiw-system__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.rx-hiw-system__title {
  font-size: var(--rx-h2);
  margin-bottom: 20px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.rx-hiw-system__subtitle {
  font-size: var(--rx-body-lg);
  color: var(--rx-text);
  line-height: 1.6;
}
.rx-hiw-system__subtitle p { margin: 0; }
.rx-hiw-system__subtitle p + p { margin-top: 0.6em; }

.rx-hiw-system__illustration {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.rx-hiw-system__illustration img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.rx-hiw-system__caption {
  text-align: center;
  margin-top: 40px;
  font-family: var(--rx-font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--rx-text);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.rx-hiw-system__caption p { margin: 0; }

/* The placeholder stack */
.rx-stack {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}
.rx-stack__placeholder-tag {
  position: absolute;
  top: -14px;
  right: -8px;
  z-index: 2;
  background: var(--rx-ink);
  color: #fff;
  font-family: var(--rx-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
}
.rx-stack__layer {
  position: relative;
  padding: 22px 28px 26px;
  border-radius: 14px;
  margin: 0 auto;
}
.rx-stack__label {
  display: block;
  font-family: var(--rx-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.75;
}
.rx-stack__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.rx-stack__item {
  font-family: var(--rx-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--rx-line);
  color: var(--rx-ink);
  flex: 0 1 auto;
}

/* Tier widths + colors */
.rx-stack__layer--1 { background: var(--rx-ivory); width: 100%; }
.rx-stack__layer--1 .rx-stack__label { color: var(--rx-text); }

.rx-stack__layer--2 { background: rgba(201, 169, 110, 0.12); width: 95%; }
.rx-stack__layer--2 .rx-stack__label { color: var(--rx-gold); }
.rx-stack__layer--2 .rx-stack__item { border-color: rgba(201, 169, 110, 0.3); }

.rx-stack__layer--3 { background: var(--rx-blue-tint); width: 78%; }
.rx-stack__layer--3 .rx-stack__label { color: var(--rx-blue-deep); }
.rx-stack__layer--3 .rx-stack__item { background: #fff; border-color: rgba(0, 102, 204, 0.18); }

.rx-stack__layer--4 {
  background: linear-gradient(135deg, #0A1F3D 0%, var(--rx-blue-deep) 100%);
  width: 56%;
  color: #fff;
}
.rx-stack__layer--4 .rx-stack__label { color: var(--rx-gold-soft); }
.rx-stack__items--single { justify-content: center; }
.rx-stack__item--eva {
  background: transparent;
  border: 1.5px solid var(--rx-gold);
  color: #fff;
  font-family: var(--rx-font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 14px 36px;
  text-transform: none;
}

.rx-stack__connector {
  width: 1px;
  height: 26px;
  margin: 6px auto;
  background: linear-gradient(180deg, var(--rx-gold) 0%, transparent 100%);
  position: relative;
}
.rx-stack__connector::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--rx-gold);
}

@media (max-width: 749px) {
  .rx-stack__layer--2,
  .rx-stack__layer--3,
  .rx-stack__layer--4 { width: 100%; }
  .rx-stack__item--eva { font-size: 19px; padding: 12px 24px; }
}

/* =========================================================================
   ===== DARK-SCHEME LEGIBILITY PATCHES (session 7) ========================
   =========================================================================
   The safety net at line ~887 sets `color: inherit` on
   :where(h1-h6, p, li, a:not(.rx-btn)) — but `inherit` reads from the
   immediate parent, so any class rule that pins `color:` on an
   intermediate <div>/<span> wrapper still wins inheritance. This block
   adds explicit dark-scheme overrides for every "body text on the section
   background" class that fails legibility on data-scheme="deep-blue" or
   "near-black".

   Pattern: rgba(255,255,255,0.82) for body / lede / caption (matches the
   existing Founders override at line ~2170). Full white reserved for
   FAQ question buttons (high-emphasis interactive copy). Eyebrows are
   already handled by the gold-soft rule near line 893.

   Scope: only classes whose elements render directly on the section
   background. Text inside cards with their own light bg is intentionally
   excluded (those cards keep dark text by design).
   ========================================================================= */

/* --- Generic lede (used by Pillar, Wellness) --------------------------- */
.rx-section[data-scheme="deep-blue"] .rx-lede,
.rx-section[data-scheme="near-black"] .rx-lede,
.rx-section[data-scheme="deep-blue"] .rx-wellness__lede,
.rx-section[data-scheme="near-black"] .rx-wellness__lede {
  color: rgba(255, 255, 255, 0.82);
}

/* --- HIW · Premise ----------------------------------------------------- */
.rx-section[data-scheme="deep-blue"] .rx-premise__body,
.rx-section[data-scheme="near-black"] .rx-premise__body {
  color: rgba(255, 255, 255, 0.82);
}

/* --- HIW · Pillar subpoints (body sits in <div> wrapper) --------------- */
.rx-section[data-scheme="deep-blue"] .rx-subpoint__body,
.rx-section[data-scheme="near-black"] .rx-subpoint__body {
  color: rgba(255, 255, 255, 0.82);
}

/* --- HIW · Steps (intro + body) ---------------------------------------- */
.rx-section[data-scheme="deep-blue"] .rx-steps__intro,
.rx-section[data-scheme="near-black"] .rx-steps__intro,
.rx-section[data-scheme="deep-blue"] .rx-step__body,
.rx-section[data-scheme="near-black"] .rx-step__body {
  color: rgba(255, 255, 255, 0.82);
}

/* --- HIW · Week (intro on section bg; cards have own light bg) --------- */
.rx-section[data-scheme="deep-blue"] .rx-hiw-week__intro,
.rx-section[data-scheme="near-black"] .rx-hiw-week__intro {
  color: rgba(255, 255, 255, 0.82);
}

/* --- HIW · FAQ --------------------------------------------------------- */
.rx-section[data-scheme="deep-blue"] .rx-faq-item__btn,
.rx-section[data-scheme="near-black"] .rx-faq-item__btn {
  color: #FFFFFF;
}
.rx-section[data-scheme="deep-blue"] .rx-faq-item__body,
.rx-section[data-scheme="near-black"] .rx-faq-item__body {
  color: rgba(255, 255, 255, 0.82);
}
.rx-section[data-scheme="deep-blue"] .rx-faq__group-label,
.rx-section[data-scheme="near-black"] .rx-faq__group-label {
  color: rgba(255, 255, 255, 0.7);
}

/* --- HIW · Loop -------------------------------------------------------- */
.rx-section[data-scheme="deep-blue"] .rx-hiw-loop__subtitle,
.rx-section[data-scheme="near-black"] .rx-hiw-loop__subtitle,
.rx-section[data-scheme="deep-blue"] .rx-beat__copy,
.rx-section[data-scheme="near-black"] .rx-beat__copy,
.rx-section[data-scheme="deep-blue"] .rx-hiw-loop__close-sub,
.rx-section[data-scheme="near-black"] .rx-hiw-loop__close-sub {
  color: rgba(255, 255, 255, 0.82);
}
.rx-section[data-scheme="deep-blue"] .rx-beat__verb .sep,
.rx-section[data-scheme="near-black"] .rx-beat__verb .sep {
  color: rgba(255, 255, 255, 0.5);
}

/* --- HIW · System (subtitle + caption on section bg) ------------------- */
.rx-section[data-scheme="deep-blue"] .rx-hiw-system__subtitle,
.rx-section[data-scheme="near-black"] .rx-hiw-system__subtitle,
.rx-section[data-scheme="deep-blue"] .rx-hiw-system__caption,
.rx-section[data-scheme="near-black"] .rx-hiw-system__caption {
  color: rgba(255, 255, 255, 0.82);
}

/* --- Hero -------------------------------------------------------------- */
.rx-section[data-scheme="deep-blue"] .rx-hero__lead,
.rx-section[data-scheme="near-black"] .rx-hero__lead,
.rx-section[data-scheme="deep-blue"] .rx-hero__sub,
.rx-section[data-scheme="near-black"] .rx-hero__sub {
  color: rgba(255, 255, 255, 0.82);
}
.rx-section[data-scheme="deep-blue"] .rx-hero__trust,
.rx-section[data-scheme="near-black"] .rx-hero__trust {
  color: rgba(255, 255, 255, 0.7);
}

/* --- Pricing (section subtitle; plan-card internals stay dark) --------- */
.rx-section[data-scheme="deep-blue"] .rx-pricing__subtitle,
.rx-section[data-scheme="near-black"] .rx-pricing__subtitle {
  color: rgba(255, 255, 255, 0.82);
}

/* --- Primary button on deep-blue (color collision with section bg) -----
   .rx-btn--primary uses background:var(--rx-blue-deep) which is the EXACT
   hex of the deep-blue scheme, so the button shape vanishes. On near-black
   the blue still pops, so we only override deep-blue. */
.rx-section[data-scheme="deep-blue"] .rx-btn--primary {
  background: #FFFFFF;
  color: var(--rx-blue-deep);
  border-color: #FFFFFF;
}
.rx-section[data-scheme="deep-blue"] .rx-btn--primary:hover {
  background: var(--rx-blue-tint);
  border-color: var(--rx-blue-tint);
  color: var(--rx-blue-deep);
}

/* --- Hero italic title accent (color collision on deep-blue) -----------
   .rx-hero__title em pins color to var(--rx-blue-deep) which is invisible
   on deep-blue and reads as low-contrast on near-black. Force white. */
.rx-section[data-scheme="deep-blue"] .rx-hero__title em,
.rx-section[data-scheme="near-black"] .rx-hero__title em {
  color: #FFFFFF;
}