/*
Theme Name: Uplift
Theme URI: https://upliftecomworkshop.lovable.app/
Author: Uplift
Author URI: https://upliftecomworkshop.lovable.app/
Description: Uplift — Grow. Achieve. Become. A multi-product conversion theme (Formula eBooks, E-commerce Sheets, E-commerce Workshop) built entirely on the design system of the Uplift Workshop reference landing page: same colors, typography, spacing, cards, buttons, accordion and scroll animations, applied consistently across the homepage and all three product pages. Fully editable through the WordPress Customizer and two lightweight custom post types (no ACF or page builder required).
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uplift-workshop
Tags: one-page, custom-menu, featured-images, footer-widgets, theme-options, translation-ready
*/

/* =========================================================
   1. DESIGN TOKENS — extracted 1:1 from the reference site
   ========================================================= */
:root{
  --radius: 1rem;

  --background: oklch(98.5% .004 250);
  --foreground: oklch(23% .035 258);

  --surface: oklch(100% 0 0);
  --surface-2: oklch(95.5% .008 250);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(23% .035 258);

  --brand: oklch(53% .19 262);
  --brand-glow: oklch(66% .16 224);
  --brand-deep: oklch(38% .15 266);

  --primary: var(--brand);
  --primary-foreground: oklch(99% .003 250);

  --secondary: oklch(95.5% .008 250);
  --secondary-foreground: oklch(28% .035 258);

  --muted: oklch(95.5% .008 250);
  --muted-foreground: oklch(50% .024 256);

  --accent: oklch(94% .03 250);
  --accent-foreground: oklch(28% .04 258);

  --destructive: oklch(55% .2 25);
  --destructive-foreground: oklch(99% .003 250);

  --warn: oklch(68% .15 62);
  --success: oklch(58% .13 158);

  --border: oklch(23% .035 258 / .12);
  --input: oklch(23% .035 258 / .18);
  --ring: var(--brand);

  --gradient-brand: linear-gradient(100deg, var(--brand), var(--brand-glow));
  --gradient-hero:
    radial-gradient(70% 60% at 50% 0%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(50% 50% at 85% 30%, color-mix(in oklab, var(--brand-glow) 16%, transparent), transparent 70%);

  --shadow-elevated: 0 24px 50px -28px oklch(23% .035 258 / .35);
  --shadow-glow: 0 16px 34px -12px color-mix(in oklab, var(--brand) 42%, transparent);

  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --container-max: 1180px;
  --container-pad: 1.5rem;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p{ margin: 0; }

h1,h2,h3,h4,.font-display{ font-family: var(--font-display); }

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.skip-link{
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--brand); color: #fff;
  padding: .75rem 1.25rem; border-radius: .5rem;
  transition: top .2s ease;
}
.skip-link:focus{ top: 1rem; }

/* =========================================================
   3. LAYOUT PRIMITIVES
   ========================================================= */
.container-page{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section-y{ padding-block: clamp(3rem, 7vw, 5rem); }
.section-alt{ background: color-mix(in oklab, var(--surface) 40%, transparent); }

.section-head{ max-width: 48rem; margin-inline: auto; text-align: center; }
.section-head p{
  margin-top: 1rem;
  max-width: 46rem;
  margin-inline: auto;
  font-size: clamp(.98rem, 2.1vw, 1.12rem);
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* Short "reframe" statement shown under a problem-agitation grid —
   shifts blame from the visitor to a missing system/process. */
.reframe-note{
  max-width: 42rem;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--brand);
  background: color-mix(in oklab, var(--brand) 6%, transparent);
  border-radius: 0 .75rem .75rem 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--foreground);
  text-align: left;
}
.reframe-note strong{ color: var(--brand); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
  padding: .375rem 1rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}

h2.section-title{
  margin-top: 1.25rem;
  font-size: clamp(1.75rem, 5vw, 3.1rem);
  line-height: 1.08;
  font-weight: 800;
  text-wrap: balance;
}

/* =========================================================
   4. GRIDS
   ========================================================= */
.card-grid{
  margin: 3rem auto 0;
  max-width: 64rem;
  display: grid;
  gap: 1rem;
}
.card-grid.cols-2{ max-width: 64rem; }
.card-grid.cols-3{ max-width: 64rem; }
.card-grid.cols-4{ max-width: 64rem; }
@media (min-width: 640px){
  .card-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3{ grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px){
  .card-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .card-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
}

.compare-grid{
  margin: 3rem auto 0;
  max-width: 56rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px){
  .compare-grid{ grid-template-columns: repeat(2, 1fr); }
}

.list-grid{
  margin: 2.5rem auto 0;
  max-width: 48rem;
  display: grid;
  gap: .75rem;
}
@media (min-width: 640px){
  .list-grid{ grid-template-columns: repeat(2, 1fr); }
}

.stat-grid{
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 2), 1fr);
  gap: 1rem;
}
@media (max-width: 480px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   5. CARDS / SURFACES
   ========================================================= */
.surface-card{
  background: color-mix(in oklab, var(--card) 96%, transparent);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-elevated);
}
.surface-card.glow{ box-shadow: var(--shadow-glow); }

.card{
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  transition: transform .3s ease;
}
.card:hover{ transform: translateY(-4px); }
.card.card-lg{ padding: 1.75rem; }

.card-icon{
  margin-inline: auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-size: 1.15rem;
}
.card-icon.square{ width: 3rem; height: 3rem; border-radius: 1rem; font-size: 1.25rem; }
.card-icon.square-lg{ width: 3.5rem; height: 3.5rem; border-radius: 1rem; font-size: 1.5rem; }

.card-icon.icon-neutral{ background: var(--surface-2); color: var(--foreground); }
.card-icon.icon-negative{ background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent); }
.card-icon.icon-brand{ background-image: var(--gradient-brand); color: var(--primary-foreground); }

.card h3{
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.card p{
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.card .card-number{
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 900;
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Comparison cards */
.compare-card{
  height: 100%;
  padding: 1.75rem;
  text-align: center;
  border-radius: 1.5rem;
}
.compare-card.is-old{
  border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent);
  background: color-mix(in oklab, var(--destructive) 5%, transparent);
}
.compare-card.is-new{
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
}
.compare-card h3{
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.compare-card.is-old h3{ color: var(--destructive); }
.compare-card.is-new h3{ color: var(--brand); }
.compare-card ul{
  margin-top: 1.25rem;
  display: grid;
  gap: .75rem;
  font-size: .875rem;
}
.compare-card.is-old ul{ color: var(--muted-foreground); }
.compare-card .mark{ margin-right: .35rem; }
.compare-card.is-old .mark{ color: var(--destructive); }
.compare-card.is-new .mark{ color: var(--brand); }

/* Simple pill list items (who this isn't for) */
.pill-item{
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  padding: 1.25rem;
  text-align: center;
  font-size: .875rem;
  color: var(--muted-foreground);
}

/* Inline feature pills (hero) */
.pill-row{
  margin: 2rem auto 0;
  display: flex;
  max-width: 48rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem;
  font-size: .875rem;
}
.pill-row li{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  padding: .5rem 1rem;
  color: var(--muted-foreground);
}
.pill-row li b{ color: var(--foreground); }

/* =========================================================
   6. BUTTONS / BADGES
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  background-image: var(--gradient-brand);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-glow);
  min-height: 3.5rem;
  padding: 0 1.75rem;
  font-size: clamp(.95rem, 2.4vw, 1.06rem);
  transition: transform .2s ease;
}
.btn:hover{ transform: scale(1.03); }
.btn:active{ transform: scale(.99); }
.btn.btn-full{ width: 100%; }
.btn.btn-nav{
  min-height: 0;
  padding: .625rem 1.25rem;
  font-size: 13px;
  box-shadow: none;
}
.btn.btn-hero{ width: min(100%, 26rem); }

.btn.btn-outline{
  background-image: none;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color: var(--brand);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  box-shadow: none;
}
.btn.btn-outline:hover{ background: color-mix(in oklab, var(--brand) 8%, transparent); }
.btn.btn-sm{ min-height: 0; padding: .625rem 1.25rem; font-size: 13px; box-shadow: none; }
.btn.btn-white{
  background-image: none;
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-elevated);
}
.btn:disabled{ opacity: .6; pointer-events: none; }

.badge-live{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  padding: .375rem 1rem;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.badge-live .dot{
  width: .375rem; height: .375rem;
  border-radius: 999px;
  background: var(--brand);
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.badge-quote{
  display: inline-flex;
  margin-top: 1.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  padding: .375rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand);
}
@keyframes pulse{ 50%{ opacity: .4; } }

/* =========================================================
   7. TEXT / GRADIENT HELPERS
   ========================================================= */
.text-gradient{
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-brand{ color: var(--brand); }
.text-muted{ color: var(--muted-foreground); }
.text-balance{ text-wrap: balance; }

/* =========================================================
   8. HERO / DECORATIVE BACKGROUNDS
   ========================================================= */
.hero-aura{
  position: relative;
  overflow: hidden;
  background-image: var(--gradient-hero);
}
.grid-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(23% .035 258 / .06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(23% .035 258 / .06) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero-inner{
  position: relative;
  padding-top: clamp(2.5rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  text-align: center;
}
.hero-inner h1{
  margin: 1.5rem auto 0;
  max-width: 16ch;
  font-size: clamp(2.15rem, 7vw, 4.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero-inner .lede{
  margin: 1.25rem auto 0;
  max-width: 46rem;
  font-size: clamp(1rem, 2.4vw, 1.22rem);
  line-height: 1.7;
  color: var(--muted-foreground);
}
.hero-cta-wrap{ margin-top: 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.hero-cta-wrap .btn:not(.btn-hero){ width: auto; min-width: min(100%, 15rem); }
.hero-cta-note{ margin-top: .75rem; font-size: .75rem; color: var(--muted-foreground); }

.hero-figure{ margin: 3.5rem auto 0; max-width: 56rem; }
.hero-figure .frame{ padding: .5rem; overflow: hidden; }
.hero-figure img{ border-radius: 1rem; width: 100%; object-fit: cover; }
.hero-figure figcaption{ margin-top: .75rem; font-size: .75rem; color: var(--muted-foreground); }

/* =========================================================
   9. HEADER / ANNOUNCEMENT / NAV
   ========================================================= */
.announcement-bar{
  background-image: var(--gradient-brand);
  color: var(--primary-foreground);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: .5rem 1rem;
}
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
/* The frosted-glass background lives on a pseudo-element rather than
   directly on .site-header. backdrop-filter on the header itself would
   create a new CSS containing block for any position:fixed descendant
   (the mobile nav panel, .primary-nav-list, lives inside this header) —
   that traps the fixed panel to the header's own small box instead of
   the full viewport. Moving it to ::before keeps the identical visual
   result while leaving the header transparent to fixed-position layout. */
.site-header::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--background) 80%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header .container-page{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: .75rem;
}
.site-header .container-page:has(.primary-nav){
  grid-template-columns: auto 1fr auto;
}
.site-branding{
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1;
}
.site-branding .logo-text{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.site-branding .logo-mark{
  margin-top: .25rem;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-branding img.custom-logo{ max-height: 40px; width: auto; }
/* .primary-nav-list base rules live in §15b (multi-product components) below,
   since this theme always has a real nav (Home/eBooks/Sheets/Workshop). */

/* =========================================================
   10. FAQ ACCORDION
   ========================================================= */
.faq-list{ margin: 2.5rem auto 0; max-width: 46rem; display: grid; gap: .75rem; }
.faq-item .surface-card{ overflow: hidden; }
.faq-question{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  text-align: left;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
}
.faq-question .icon{
  flex-shrink: 0;
  color: var(--brand);
  transition: transform .3s ease;
}
.faq-question[aria-expanded="true"] .icon{ transform: rotate(45deg); }
.faq-answer-wrap{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-item.is-open .faq-answer-wrap{ grid-template-rows: 1fr; }
.faq-answer-inner{ overflow: hidden; }
.faq-answer{ padding: 0 1.25rem 1.25rem; font-size: .875rem; line-height: 1.7; color: var(--muted-foreground); }

/* =========================================================
   11. SUPPORT / TESTIMONIAL / STATS BLOCKS
   ========================================================= */
.support-card{
  margin-inline: auto;
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}
@media (min-width: 640px){ .support-card{ padding: 2.5rem; } }
.support-badge{
  display: grid;
  place-items: center;
  width: 6rem; height: 6rem;
  border-radius: 999px;
  background-image: var(--gradient-brand);
  color: var(--primary-foreground);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
.support-card h3{ font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 800; }
.support-card p{ margin-top: .75rem; color: var(--muted-foreground); line-height: 1.7; }

.instructor-card{ margin: 2.5rem auto 0; max-width: 48rem; padding: 2rem; text-align: center; }
@media (min-width: 640px){ .instructor-card{ padding: 2.5rem; } }
.instructor-card .quote{
  margin: 1.25rem auto 0;
  max-width: 42rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* --- Founder story as a full-width narrative feature (product pages) ---
   Deliberately NOT a small centered quote card: left-aligned, wider,
   tinted band — this section carries real narrative weight since it now
   runs early in the funnel, right after problem agitation. */
.story-feature{
  background: var(--surface-2);
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  border-block: 1px solid var(--border);
}
.story-feature .story-inner{ max-width: 54rem; margin-inline: auto; text-align: center; }
.story-feature h2{
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 800;
  line-height: 1.25;
}
.story-feature .quote{
  margin-top: 1.25rem;
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--foreground);
}
.story-feature .quote strong{ color: var(--brand); }
.story-feature .stat-grid{ margin-top: 2.25rem; max-width: 26rem; margin-inline: auto; }
.story-feature .stat-tile{ background: var(--surface); }
@media (max-width: 640px){
  .story-feature .stat-grid{ max-width: 100%; }
}
.stat-tile{
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
  padding: 1.25rem;
}
.stat-tile .stat-num{
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 900;
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-tile .stat-label{
  margin-top: .25rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* =========================================================
   12. PRICING
   ========================================================= */
.pricing-card{
  margin: 2.5rem auto 0;
  max-width: 34rem;
  overflow: hidden;
  text-align: center;
}
.pricing-ribbon{
  background-image: var(--gradient-brand);
  color: var(--primary-foreground);
  padding: .625rem 1.5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.pricing-body{ padding: 1.75rem; }
@media (min-width: 640px){ .pricing-body{ padding: 2.25rem; } }
.pricing-amount{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 3.6rem);
  line-height: 1;
  font-weight: 900;
}
.pricing-sub{ margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.pricing-features{ margin-top: 1.75rem; display: grid; gap: .75rem; text-align: center; font-size: .9375rem; max-width: 22rem; margin-inline: auto; }
.pricing-features li{ display: flex; justify-content: center; gap: .625rem; }
.pricing-features .check{ color: var(--brand); flex-shrink: 0; }
.pricing-cta-wrap{ margin-top: 2rem; display: flex; justify-content: center; }
.pricing-note{ margin-top: 1rem; font-size: .75rem; color: var(--muted-foreground); }

/* =========================================================
   13. FOOTER
   ========================================================= */
.site-footer{
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 50%, transparent);
  text-align: center;
  padding-top: 3rem;
  padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}
@media (min-width: 768px){ .site-footer{ padding-bottom: 3rem; } }
.site-footer .footer-logo{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; }
.site-footer .footer-tag{ margin: .75rem auto 0; max-width: 32rem; font-size: .875rem; color: var(--muted-foreground); }
.footer-nav{ margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem .5rem; font-size: .875rem; color: var(--muted-foreground); }
.footer-nav a{ transition: color .2s ease; }
.footer-nav a:hover{ color: var(--foreground); }
.site-footer .footer-copy{ margin-top: 2rem; font-size: .75rem; color: var(--muted-foreground); }

/* Mobile sticky CTA */
.sticky-cta{
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 95%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .3s ease;
}
.sticky-cta .p{ font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--foreground); min-width: 0; }
.sticky-cta .p small{ display: block; font-family: var(--font-body); font-size: .6875rem; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn{ flex-shrink: 0; }
.sticky-cta.is-visible{ transform: translateY(0); }
@media (min-width: 768px){ .sticky-cta{ display: none; } }

/* =========================================================
   14. SCROLL REVEAL ANIMATION
   ========================================================= */
.js .reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  .btn, .card{ transition: none; }
}

/* =========================================================
   15b. MULTI-PRODUCT COMPONENTS (homepage products grid, mobile
   nav, trust row, enroll modal) — same tokens/shadows/radii as
   everything above, just new shapes for the multi-page site.
   ========================================================= */

/* Homepage "Products" card — feature card + price + outline link */
.product-card{ display: flex; flex-direction: column; }
.product-card .card-icon{ margin-inline: 0; }
.product-card h3{ text-align: left; }
.product-card p{ text-align: left; flex-grow: 1; }
.product-card .product-price{
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--foreground);
}
.product-card .btn{ margin-top: 1rem; align-self: flex-start; }

/* Mobile nav */
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: .625rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: .5rem;
}
.nav-toggle span{ width: 20px; height: 2px; border-radius: 2px; background: var(--foreground); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.primary-nav-list{
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.primary-nav-list a.is-current{ color: var(--brand); }
.primary-nav-list a:hover{ color: var(--brand); }
@media (max-width: 860px){
  .site-header .container-page{ padding-block: .875rem; gap: .75rem; }
  .nav-toggle{ display: flex; }
  .primary-nav-list{
    position: fixed;
    inset-inline: 0;
    top: 0;
    bottom: 0;
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--surface);
    padding: 5.5rem 1.5rem 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-100%);
    transition: transform .3s ease;
    box-shadow: var(--shadow-elevated);
  }
  .primary-nav-list.is-open{ transform: translateY(0); }
  .primary-nav-list a{
    width: 100%;
    padding: 1.125rem .25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--border);
  }
  .primary-nav-list .mobile-cta{ margin-top: 1.75rem; width: 100%; }
}
.primary-nav-list .mobile-cta{ display: none; }
@media (max-width: 860px){ .primary-nav-list .mobile-cta{ display: inline-flex; } }
@media (max-width: 860px){ .desktop-only{ display: none; } }

/* Shared form-field / upload / success styling (reused by the enrol wizard) */
.modal-field{ margin-top: 1rem; }
.modal-field label{ display: block; font-size: .8125rem; font-weight: 700; margin-bottom: .375rem; }
.modal-field input{
  width: 100%;
  padding: .8125rem .875rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--foreground);
  background: var(--surface);
}
.modal-field input:focus{ outline: none; border-color: var(--brand); }
.modal-field input.has-error{ border-color: var(--destructive); }
.modal-field .field-error{
  display: none;
  margin-top: .375rem;
  font-size: .78125rem;
  font-weight: 600;
  color: var(--destructive);
}
.modal-field .field-error.is-visible{ display: block; }
.upload-box{
  margin-top: 1rem;
  border: 1px dashed var(--border);
  border-radius: .75rem;
  padding: 1.5rem;
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.upload-box:hover{ border-color: var(--brand); }
.upload-box.has-file{ border-color: var(--success); color: var(--success); background: color-mix(in oklab, var(--success) 8%, transparent); }
.upload-box.has-error{ border-color: var(--destructive); }
.upload-box #uploadPreview{
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: .625rem;
  margin: 0 auto .625rem;
  border: 1px solid var(--border);
}
.modal-success{ text-align: center; padding: .5rem 0; }
.modal-success .icon{
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
  border-radius: 999px;
  background: var(--success);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}
.modal-success h3{ font-size: 1.25rem; font-weight: 800; margin-bottom: .5rem; }
.modal-success p{ font-size: .9375rem; color: var(--muted-foreground); line-height: 1.6; }

/* =========================================================
   15c. ENROL PAGE (3-step wizard) + FOMO POPUP + WHATSAPP FLOAT
   ========================================================= */

/* --- minimal chrome for the distraction-free enrol pages --- */
body.enroll-page{ background: var(--surface-2); }
.enroll-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.enroll-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: .875rem;
}
.enroll-main{ padding-block: clamp(2rem, 5vw, 3.5rem) 3rem; }
.enroll-footer{
  padding-block: 1.5rem 2.5rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--muted-foreground);
}

/* --- the wizard card --- */
.enroll-wrap{ display: flex; justify-content: center; }
.enroll-card{
  width: 100%;
  max-width: 30rem;
  padding: 1.75rem;
}
@media (min-width: 640px){ .enroll-card{ padding: 2.25rem; } }

.enroll-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78125rem;
  font-weight: 700;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}
.enroll-live{ display: inline-flex; align-items: center; gap: .375rem; color: var(--success); }
.enroll-live .dot{ width: .4375rem; height: .4375rem; border-radius: 999px; background: var(--success); }

.enroll-stepper{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.enroll-step{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  font-size: .71875rem;
  font-weight: 700;
  color: var(--muted-foreground);
  border-bottom: 3px solid var(--border);
  padding-bottom: .625rem;
}
.enroll-step .dot{
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
}
.enroll-step .label{ display: none; }
@media (min-width: 480px){ .enroll-step .label{ display: inline; } }
.enroll-step.is-active{ color: var(--brand); border-color: var(--brand); }
.enroll-step.is-active .dot{ background-image: var(--gradient-brand); color: #fff; }
.enroll-step.is-done{ color: var(--success); border-color: var(--success); }
.enroll-step.is-done .dot{ background: var(--success); color: #fff; }
.enroll-step.is-done .dot::before{ content: '✓'; }

.enroll-step-chip{
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border-radius: 999px;
  padding: .3125rem .75rem;
  margin-bottom: .875rem;
}
.enroll-panel h1{
  font-size: clamp(1.375rem, 4vw, 1.625rem);
  font-weight: 800;
  color: var(--brand);
}
.enroll-panel > .hint{ margin-top: .5rem; margin-bottom: 1.25rem; font-size: .8125rem; color: var(--muted-foreground); }
.enroll-trust{ text-align: center; margin-top: 1rem; font-size: .75rem; color: var(--muted-foreground); }
.enroll-panel #enrollNext:disabled{ opacity: .5; cursor: not-allowed; }
.enroll-panel .btn{ margin-top: 1.25rem; }
.enroll-panel .btn + .btn{ margin-top: .625rem; }

/* --- payment method tabs (step 2) --- */
.pay-tabs{
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}
.pay-tab{
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: .8125rem;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}
.pay-tab.is-active{ background-image: var(--gradient-brand); border-color: transparent; color: #fff; }
.pay-panel{
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.125rem;
  background: var(--surface);
}
.pay-panel + .pay-panel{ margin-top: 0; }
.pay-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: .625rem;
  font-size: .875rem;
}
.pay-row + .pay-row{ border-top: 1px dashed var(--border); }
.pay-row .k{ color: var(--muted-foreground); font-weight: 600; flex-shrink: 0; }
.pay-row .v{ display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--foreground); text-align: right; }
.verified-badge{
  font-size: .6875rem;
  font-weight: 700;
  color: var(--success);
  background: color-mix(in oklab, var(--success) 12%, transparent);
  border-radius: 999px;
  padding: .1875rem .5rem;
}
.copy-btn{
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--brand);
  font-size: .6875rem;
  font-weight: 700;
  padding: .1875rem .5rem;
  border-radius: .375rem;
  cursor: pointer;
}
.copy-btn:hover{ background: var(--surface); }
.copy-toast{
  text-align: center;
  color: var(--success);
  font-weight: 700;
  font-size: .8125rem;
  margin-top: .75rem;
}

/* --- upload box icon (step 3 reuses .upload-box from the components block) --- */
.upload-icon{ font-size: 1.75rem; }

/* --- FAQ block reused below the wizard --- */
.enroll-faq-wrap{ max-width: 34rem; margin-inline: auto; padding-top: 3rem; }
.enroll-faq-title{
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
}

/* --- FOMO / urgency popup --- */
.fomo-overlay{
  position: fixed;
  inset: 0;
  z-index: 110;
  background: color-mix(in oklab, var(--foreground) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.fomo-overlay[hidden]{ display: none; }
.fomo-popup{
  width: 100%;
  max-width: 24rem;
  padding: 0;
  overflow: hidden;
}
.fomo-head{
  background-image: var(--gradient-brand);
  color: #fff;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.fomo-head h3{ font-size: 1.0625rem; font-weight: 800; line-height: 1.35; }
.fomo-close{
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: color-mix(in oklab, #fff 25%, transparent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .8125rem;
  cursor: pointer;
}
.fomo-body{ padding: 1.25rem; }
.fomo-body > p{ font-size: .875rem; line-height: 1.7; color: var(--muted-foreground); white-space: pre-line; }
.fomo-price-row{
  margin-top: 1rem;
  background: var(--surface-2);
  border-radius: .75rem;
  padding: 1rem;
  text-align: center;
}
.fomo-price-row .now{ font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; color: var(--success); }
.fomo-price-row .was{ margin-left: .5rem; font-size: 1rem; color: var(--muted-foreground); text-decoration: line-through; }
.fomo-price-row .deadline{ display: block; margin-top: .375rem; font-size: .78125rem; font-weight: 700; color: var(--warn); }
.fomo-cta{ margin-top: 1.125rem; }

/* --- floating WhatsApp button --- */
.whatsapp-float{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-elevated);
  text-decoration: none;
}
.whatsapp-float:hover{ filter: brightness(1.05); }

/* =========================================================
   15d. LONG-FORM FUNNEL SECTIONS (proof strip, desire, breakdown,
   bonuses, value stack, testimonials, comparison, urgency band) —
   template-parts/funnel/*.php, shared by all 3 product pages.
   ========================================================= */
.section-y-sm{ padding-block: 1.5rem clamp(2rem, 5vw, 3rem); }

/* --- proof strip (under hero) --- */
.proof-strip{
  margin: 0 auto;
  max-width: 64rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 700px){ .proof-strip{ grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.proof-tile{
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
}
.proof-tile .icon{ font-size: 1.375rem; }
.proof-tile .num{
  margin-top: .5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--foreground);
}
.proof-tile .label{ margin-top: .25rem; font-size: .75rem; line-height: 1.4; color: var(--muted-foreground); }

/* --- deep-dive breakdown rows --- */
.breakdown-list{ margin: 3rem auto 0; max-width: 52rem; display: grid; gap: 1rem; }
.breakdown-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
}
@media (min-width: 640px){ .breakdown-row{ padding: 1.75rem 2rem; } }
.breakdown-icon{
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  background-image: var(--gradient-brand);
  color: var(--primary-foreground);
  font-size: 1.375rem;
}
.breakdown-body{ min-width: 0; }
.breakdown-meta{
  display: inline-block;
  margin-bottom: .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.breakdown-body h3{ font-size: 1.0625rem; font-weight: 700; }
.breakdown-body p{ margin-top: .5rem; font-size: .875rem; line-height: 1.7; color: var(--muted-foreground); }
.breakdown-body p strong{ color: var(--foreground); }

/* --- bonus value tag --- */
.bonus-value{
  display: inline-block;
  margin-top: .875rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--success) 12%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in oklab, var(--success) 35%, transparent);
  padding: .3125rem .875rem;
  font-size: .75rem;
  font-weight: 700;
}

/* --- value stack card --- */
.stack-card{ margin: 2.5rem auto 0; max-width: 36rem; padding: 1.75rem; }
@media (min-width: 640px){ .stack-card{ padding: 2.25rem; } }
.stack-list{ display: grid; gap: .875rem; }
.stack-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.stack-row .item{ display: flex; align-items: baseline; gap: .625rem; color: var(--foreground); }
.stack-row .item .check{ color: var(--brand); flex-shrink: 0; }
.stack-row .value{ flex-shrink: 0; color: var(--muted-foreground); text-decoration: line-through; }
.stack-total-row, .stack-price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-display);
  font-weight: 700;
}
.stack-total-row .total-value{ text-decoration: line-through; color: var(--muted-foreground); }
.stack-price-row{ border-top: 0; margin-top: .5rem; padding-top: 0; font-size: 1.0625rem; }
.stack-price-row .today-price{ font-size: 1.75rem; font-weight: 900; }

/* --- testimonial cards --- */
.testimonial-card{ height: 100%; padding: 1.75rem; text-align: center; }
.testimonial-card .stars{ font-size: .9375rem; letter-spacing: .1em; color: var(--warn); }
.testimonial-card .quote{ margin-top: .875rem; font-size: .9375rem; line-height: 1.7; color: var(--foreground); }
.testimonial-card .attribution{ margin-top: 1.25rem; }
.testimonial-card .name{ display: block; font-family: var(--font-display); font-weight: 700; font-size: .875rem; }
.testimonial-card .role{ display: block; margin-top: .125rem; font-size: .75rem; color: var(--muted-foreground); }

/* --- old-way vs new-way comparison table --- */
.vs-table{ margin: 3rem auto 0; max-width: 52rem; display: grid; gap: .625rem; }
.vs-head{
  display: none;
  justify-content: space-between;
  padding-inline: 1.25rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vs-head .vs-old{ color: var(--destructive); }
.vs-head .vs-new{ color: var(--brand); }
@media (min-width: 640px){ .vs-head{ display: flex; } }
.vs-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  align-items: center;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  padding: 1rem 1.25rem;
  font-size: .875rem;
}
@media (min-width: 640px){
  .vs-row{ grid-template-columns: 1fr auto 1fr; gap: 1rem; }
}
.vs-row .vs-old{ color: var(--muted-foreground); }
.vs-row .vs-new{ color: var(--foreground); font-weight: 600; }
.vs-row .mark{ margin-right: .5rem; }
.vs-row .vs-old .mark{ color: var(--destructive); }
.vs-row .vs-new .mark{ color: var(--brand); }
.vs-arrow{ display: none; color: var(--muted-foreground); }
@media (min-width: 640px){ .vs-arrow{ display: inline; text-align: center; } }

/* --- inline urgency/scarcity band, sits above pricing --- */
.urgency-band{
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 42rem;
  margin: clamp(2rem, 5vw, 3rem) auto clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent);
  background: color-mix(in oklab, var(--warn) 10%, transparent);
  padding: .875rem 1.25rem;
  font-size: .8125rem;
  line-height: 1.5;
}
.urgency-band .icon{ flex-shrink: 0; font-size: 1.125rem; }
.urgency-band .text{ color: var(--foreground); }
.urgency-band .text strong{ color: var(--warn); }

/* =========================================================
   15. GENERIC PAGE / SINGLE / ARCHIVE CONTENT (fallback templates)
   ========================================================= */
.page-hero{
  padding-block: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.page-hero h1{
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
}
.entry-content{
  max-width: 46rem;
  margin-inline: auto;
  padding-bottom: 4rem;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.entry-content h2{ font-size: 1.75rem; font-weight: 800; margin-top: 2rem; }
.entry-content h3{ font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; }
.entry-content p{ margin-top: 1rem; color: var(--foreground); }
.entry-content ul, .entry-content ol{ margin-top: 1rem; padding-left: 1.5rem; list-style: revert; }
.entry-content img{ border-radius: 1rem; margin-block: 1.5rem; }
.entry-content a{ color: var(--brand); text-decoration: underline; }

.archive-grid{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-bottom: 4rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px){ .archive-grid{ grid-template-columns: repeat(2, 1fr); } }
.archive-card{ padding: 1.75rem; }
.archive-card h2{ font-size: 1.25rem; font-weight: 700; }
.archive-card h2 a:hover{ color: var(--brand); }
.archive-card .entry-meta{ margin-top: .5rem; font-size: .8125rem; color: var(--muted-foreground); }
.archive-card .entry-excerpt{ margin-top: .75rem; font-size: .9375rem; color: var(--muted-foreground); line-height: 1.7; }

.pagination{ display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.pagination a, .pagination span{
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .5rem .875rem;
  font-size: .875rem;
}
.pagination .current{ background: var(--brand); color: #fff; border-color: var(--brand); }

.not-found{ text-align: center; padding-block: 6rem; }
.not-found .code{ font-family: var(--font-display); font-size: clamp(4rem,12vw,7rem); font-weight: 900; }

.comment-list{ list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.comment-body{ padding: 1.25rem; }

/* =========================================================
   16. MOBILE-ONLY QA FIXES
   Everything below is scoped inside a max-width media query and
   only changes narrow-viewport rendering. Nothing here alters
   desktop layout, color, or structure — it only fixes reflow
   issues found on real mobile widths (320–430px). Fixes for
   .primary-nav-list itself (full-height coverage) live in place,
   in §9, inside the theme's existing 860px mobile-nav breakpoint.
   ========================================================= */

/* Lock background scroll while the full-screen mobile nav is open, and
   hide the floating WhatsApp button / sticky mobile CTA bar so nothing
   floats on top of the open menu panel. */
@media (max-width: 860px){
  body.nav-open{ overflow: hidden; }
  body.nav-open .whatsapp-float,
  body.nav-open .sticky-cta{ display: none; }
}

/* --- Enrol page: payment method rows (Method / Account Title /
   Account Number / Amount) — the label+value pair is forced onto
   one line by the base .pay-row rule, which is fine on desktop's
   wider column but wraps the value awkwardly (and squeezes the
   Copy button) inside the narrow enrol card on any phone screen.
   Stack label above value so both always read cleanly. --- */
@media (max-width: 640px){
  .pay-row{
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
  }
  .pay-row .v{
    text-align: left;
    flex-wrap: wrap;
    width: 100%;
  }
  /* Horizontally-scrollable payment tabs (Bank Transfer / EasyPaisa /
     JazzCash) don't fully fit a narrow screen by design — fade the
     trailing edge so it reads as "scroll for more" instead of a
     hard, broken-looking cut-off. */
  .pay-tabs{
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}

/* --- Value-stack card ("Here's Everything You're Actually Getting"):
   below ~375px the item text is long enough that it wraps 3-4 lines
   while the struck-through price floats disconnected at the top, and
   the big "You Pay Today" price itself wraps mid-number. Stack each
   row vertically only at this narrow width — 375px and up already
   fit the inline layout cleanly. --- */
@media (max-width: 374px){
  .stack-row{
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
  .stack-row .value{ margin-inline-start: 1.5rem; }
  .stack-total-row,
  .stack-price-row{
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
  }
}

/* =========================================================
   17. DARK BAND SECTIONS — long-form funnel rhythm
   High-contrast full-bleed bands that punctuate the Workshop/eBooks/
   Sheets funnels (isolated reframe, curriculum, before/after proof,
   "not for everyone", final push), alternating with the normal light
   sections for visual rhythm. Built entirely on existing tokens —
   --brand-deep was already defined and unused, so no new colors are
   introduced and nothing here touches the home page or the header.
   ========================================================= */
.dark-band{
  background: color-mix(in oklab, var(--brand-deep) 78%, black);
  color: oklch(96% .01 250);
}
.dark-band .eyebrow{
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: oklch(90% .03 250);
}
.dark-band .section-title{ color: #fff; }
.dark-band .section-head p{ color: rgba(255,255,255,.7); }

/* Cards/rows placed inside a dark band need a lighter card surface
   to stay legible — scoped so nothing outside .dark-band changes. */
.dark-band .surface-card{
  background: color-mix(in oklab, white 8%, transparent);
  border-color: rgba(255,255,255,.14);
}
.dark-band .breakdown-meta{ color: oklch(78% .07 250); }
.dark-band .breakdown-body h3{ color: #fff; }
.dark-band .breakdown-body p{ color: rgba(255,255,255,.72); }
.dark-band .breakdown-body p strong{ color: #fff; }
.dark-band .breakdown-icon{ background: rgba(255,255,255,.1); color: #fff; }

/* vs-row keeps a near-opaque light card background here (set below)
   so its own light-on-light text colors stay legible without an
   override — only the head labels and connecting arrow, which sit
   directly on the dark background, need lightening. */
.dark-band .vs-head .vs-old{ color: rgba(255,255,255,.55); }
.dark-band .vs-head .vs-new{ color: var(--brand-glow); }
.dark-band .vs-row{ border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.94); }
.dark-band .vs-arrow{ color: rgba(255,255,255,.45); }

/* --- Isolated reframe statement: its own full-bleed band, sitting
   alone between the hero and the problem-agitation grid so it lands
   as one clean line rather than being folded into a card. --- */
.reframe-band{ padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.reframe-band-inner{
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.55;
}
.reframe-band-inner strong{
  background-image: linear-gradient(100deg, var(--brand-glow), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- ICP icon grid ("who this is built for") — light section, sits
   right before the darker, starker "not for everyone" band. --- */
.icp-grid .card-icon{ margin-inline: auto; }
.icp-grid article{ text-align: center; }
.icp-grid h3{ margin-top: 1rem; font-size: .9375rem; font-weight: 700; }

/* --- "Not for everyone" — a starker, single-column exclusion list on
   a dark band, deliberately separate from the positive ICP grid. --- */
.not-for-list{
  max-width: 40rem;
  margin: 2.5rem auto 0;
  display: grid;
  gap: .75rem;
}
.not-for-list li{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .9375rem;
  color: rgba(255,255,255,.85);
}
.not-for-list .mark{ color: oklch(72% .17 25); flex-shrink: 0; font-weight: 700; }

/* --- Final CTA as a dark close (same section .hero-aura already
   used for hero, kept light there — only the final-cta instance also
   gets .dark-band, so the hero itself is untouched). --- */
.hero-aura.dark-band{ background-image: none; }
.hero-aura.dark-band .grid-overlay{
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
}
.hero-aura.dark-band .hero-cta-wrap .btn-outline{
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.finalcta-sub{ color: var(--muted-foreground); }
.dark-band .finalcta-sub{ color: rgba(255,255,255,.72); }

/* --- Belief statement band (light, sits right after hero) --- */
.belief-band{ padding-block: clamp(2.75rem, 6vw, 4rem); text-align: center; }
.belief-band-inner{
  max-width: 42rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  line-height: 1.5;
  color: var(--foreground);
}
.belief-band-inner strong{ color: var(--brand); }

/* --- Future-pacing "act now vs keep waiting" contrast, final CTA --- */
.future-pace{
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin: 2.5rem auto 0;
  text-align: center;
}
@media (min-width: 640px){
  .future-pace{ grid-template-columns: 1fr 1fr; }
}
.future-pace-card{ padding: 1.5rem; border-radius: 1.25rem; }
.future-pace-card h4{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
}
.future-pace-card p{ font-size: .9375rem; line-height: 1.65; margin: 0; }
.future-pace-card.is-wait{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.future-pace-card.is-wait h4{ color: rgba(255,255,255,.5); }
.future-pace-card.is-wait p{ color: rgba(255,255,255,.55); }
.future-pace-card.is-now{ background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); }
.future-pace-card.is-now h4{ color: var(--brand-glow); }
.future-pace-card.is-now p{ color: rgba(255,255,255,.85); }

/* --- Every long-form funnel section (product pages only — never the
   homepage, which shares some of these component classes) closes with
   its own centered CTA, and its FAQ/objections answers read centered
   like the rest of the section instead of defaulting to left. --- */
.funnel-section .faq-answer{ text-align: center; }
.section-cta{ margin-top: 2.5rem; display: flex; justify-content: center; }
.section-cta .btn{ width: auto; min-width: min(100%, 16rem); }