/* ============================================================
   LUNURA GLOBAL STYLES
   Copy this entire <style> block to every new page.
   To update site-wide: edit the DESIGN TOKENS section only.
   ============================================================ */
/* ============================================
   LUNURA — Global Stylesheet
   Import this on every page:
      ============================================ */

/* ============================================
   RESET
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================
   DESIGN TOKENS
   To change any color, radius, or button style
   site-wide — edit only this section.
   ============================================ */
:root {
  /* Brand Colors */
  --gold:   #C9A84C;
  --gold2:  #D4A53A;
  --earth:  #17120E;
  --cream:  #FAF6EE;
  --warm:   #F7EFE0;
  --muted:  #7A6A52;
  --text:   #1A120A;
  --sand:      #EBDFC6;

  /* Spacing System */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Hero Image */
  --hero-image-min-height:        480px;
  --hero-image-min-height-mobile: 320px;
  --hero-image-arc-max-width:     320px;

  /* Compound: Section Padding */
  --section-padding:           65px var(--space-12) var(--space-20);
  --section-padding-lg:        100px var(--space-12);
  --section-padding-mobile:    45px var(--space-6) var(--space-16);
  --section-padding-lg-mobile: var(--space-20) var(--space-6);

  /* Card System */
  --card-radius: 20px;
  --footer-text:  rgba(250,246,238,0.4);
  --card-bg:     var(--cream);
  --card-border: 1px solid rgba(201,168,76,0.25);
  --card-shadow: 0 4px 20px rgba(0,0,0,0.07);

  /* Button System */
  --btn-radius:        50px;
  --btn-radius-square: 8px;
  --btn-font-size:     var(--font-15);
  --btn-padding:       18px 34px;
  --btn-min-width:     175px;
  --btn-weight:        500;
  --btn-tracking:      0.01em;

  /* Layout */
  --nav-height:           76px;

  /* Section Widths */
  --section-width-extra:  1300px;
  --section-width-wide:   1100px;
  --section-width-narrow: 800px;

  /* Font Size System (numeric scale, N pixels) */
  --font-10: 10px;
  --font-11: 11px;
  --font-12: 12px;
  --font-13: 13px;
  --font-14: 14px;
  --font-15: 15px;
  --font-16: 16px;
  --font-18: 18px;
  --font-20: 20px;
  --font-22: 22px;
  --font-30: 30px;
  --font-32: 32px;
  --font-36: 36px;

  /* Color Variants */
  --earth-dark:        #4E3C2C;
}

/* ============================================
   BASE
   ============================================ */
html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--nav-height) + var(--space-6));
  scroll-behavior: smooth;
}
body { overflow-x: clip;
  background:   var(--cream);
  color:        var(--text);
  font-family:  'Instrument Sans', sans-serif;
  overflow-x:   clip;
  padding-top:  var(--nav-height);
}

/* ============================================
   NAVIGATION
   ============================================ */
nav {
  background:    var(--cream);
  border-bottom: 1px solid rgba(201,168,76,0.28);
  height:        var(--nav-height);
  position:      fixed;
  top:           0;
  left:          0;
  right:         0;
  z-index:       200;
}
.nav-inner {
  padding:         0 var(--space-12);
  height:          100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}
.nav-logo img {
  height:  40px;
  width:   auto;
  display: block;
}
.nav-links {
  display:    flex;
  gap:        36px;
  list-style: none;
}
.nav-links a {
  color:           var(--muted);
  text-decoration: none;
  font-size:       var(--font-12);
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  font-weight:     700;
  transition:      color 0.3s;
}
.nav-links a:hover { color: var(--gold); }

.nav-cta {
  background:     var(--gold);
  color:          white;
  padding:        var(--space-3) var(--space-6);
  border:         none;
  font-family:    'Instrument Sans', sans-serif;
  font-size:      var(--font-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight:    600;
  cursor:         pointer;
  border-radius:  var(--btn-radius);
  transition:     all 0.3s;
}
.nav-cta:hover { background: var(--gold2); }

/* ============================================
   BUTTONS
   Use .btn-primary for filled gold buttons.
   Use .btn-outline for transparent gold buttons.
   All pages get the same size, rounding, font.
   ============================================ */
.btn-primary {
  background:     var(--gold);
  color:          var(--earth);
  padding:        var(--btn-padding);
  border:         none;
  font-family:    'Instrument Sans', sans-serif;
  font-size:      var(--btn-font-size);
  font-weight:    var(--btn-weight);
  cursor:         pointer;
  border-radius:  var(--btn-radius);
  transition:     all 0.3s;
  letter-spacing: var(--btn-tracking);
  min-width:      var(--btn-min-width);
  justify-content: center;
  display:        inline-flex;
  align-items:    center;
}
.btn-primary:hover { background: var(--gold2); transform: translateY(-1px); }

.btn-outline {
  background:     transparent;
  color:          var(--gold);
  padding:        var(--btn-padding);
  border:         1.5px solid rgba(201,168,76,0.5);
  font-family:    'Instrument Sans', sans-serif;
  font-size:      var(--btn-font-size);
  font-weight:    400;
  cursor:         pointer;
  border-radius:  var(--btn-radius);
  transition:     all 0.3s;
  text-decoration: none;
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  letter-spacing: var(--btn-tracking);
  min-width:      var(--btn-min-width);
  justify-content: center;
}
.btn-outline:hover { border-color: var(--gold); background: rgba(201,168,76,0.15); color: var(--earth); }

/* Rectangular CTA buttons (used inside the warm-sand CTA section).
   Pair .btn-cta-primary (filled gold) with .btn-cta-outline (transparent ghost). */
.btn-cta-primary {
  background:      var(--gold);
  color:           var(--earth);
  padding:         var(--space-4) 36px;
  border:          none;
  font-family:     'Instrument Sans', sans-serif;
  font-size:       var(--font-14);
  font-weight:     600;
  cursor:          pointer;
  border-radius:   var(--btn-radius-square);
  transition:      all 0.3s;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
}
.btn-cta-primary:hover { background: var(--gold2); }

.btn-cta-outline {
  background:      transparent;
  color:           var(--gold);
  padding:         var(--space-4) 36px;
  border:          1px solid rgba(201,168,76,0.5);
  font-family:     'Instrument Sans', sans-serif;
  font-size:       var(--font-14);
  font-weight:     400;
  cursor:          pointer;
  border-radius:   var(--btn-radius-square);
  transition:      all 0.3s;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
}
.btn-cta-outline:hover { border-color: var(--gold); background: rgba(201,168,76,0.15); color: var(--earth); }

/* ============================================
   CARD SYSTEM
   Any new card: add class="card" to get
   the shared border, background, radius, shadow.
   ============================================ */
.card,
.test-card {
  background:    var(--card-bg);
  border-radius: var(--card-radius);
  border:        var(--card-border);
  box-shadow:    var(--card-shadow);
  padding:       30px;
}
.test-card { padding: var(--space-8); }
.test-stars  { color: var(--gold); font-size: var(--font-14); letter-spacing: 3px; margin-bottom: var(--space-4); }
.test-quote  { font-family: 'Playfair Display', serif; font-size: var(--font-16); font-style: italic; line-height: 1.7; color: var(--text); margin-bottom: var(--space-4); font-weight: 400; }
.test-author { font-size: var(--font-11); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* Cards are bounded containers with their own internal spacing system.
   Override the global p { margin-top: 16px } so card titles sit flush
   (margin-top: 0). Secondary paragraphs (description after title) get
   a tight 8px top margin via the sibling rule — title-to-description
   gap lives on margin-top of the description, single-direction
   principle. The sibling selector wins over .card p by specificity. */
.card p { margin-top: 0; }
.card > p ~ p { margin-top: var(--space-2); }

/* ============================================
   CALLOUT
   Generic bounded block: gold left border,
   warm tint background, padded interior.
   ============================================ */
.callout{border-left:3px solid var(--gold);padding:var(--space-6) var(--space-8);background:rgba(201,168,76,0.05);margin:var(--space-8) auto;max-width:600px}
.callout p{font-size:var(--font-16);color:var(--muted);font-weight:300;margin-bottom:var(--space-4)}.callout p:last-child{margin-bottom:0}

/* ============================================
   DATA TABLE
   Generic flex-grid table primitive. A vertical stack
   of rows, each row a grid with configurable columns.
   Page-specific table classes supply grid-template-columns
   via a chained selector (e.g., .gs-kumbhak-row).
   Pattern:
     <div class="data-table">
       <div class="data-table-row data-table-row-header gs-kumbhak-row">[header cells]</div>
       <div class="data-table-row gs-kumbhak-row">[body cells]</div>
       <div class="data-table-row gs-kumbhak-row has-subtitle">[body cells + subtitle]</div>
     </div>
   The page-specific class (.gs-kumbhak-row) defines the columns;
   the structural classes (.data-table-row, .data-table-row-header,
   .has-subtitle, .data-table-subtitle) provide layout primitives.
   Header convention: header row cells automatically get h3-style
   typography (gold uppercase tracked-out) and center-align via the
   .data-table-row-header > * rule. No need to add .label-h3 to
   header cells — plain <span> tags work. To override the default
   header treatment, target .your-row-class.data-table-row-header > *
   in the page-specific section.
   ============================================ */
.data-table { display: flex; flex-direction: column; margin-top: var(--space-8); border-top: 1px solid rgba(201,168,76,0.2); }
.data-table-row { display: grid; align-items: center; padding: var(--space-4) var(--space-4); border-bottom: 1px solid rgba(201,168,76,0.2); gap: var(--space-4); }
.data-table-row.has-subtitle { grid-template-rows: auto auto; row-gap: var(--space-1); padding-bottom: var(--space-4); }
.data-table-row-header > * { justify-self: center; }
.data-table-row .description { margin-top: 0; line-height: 1.4; color: var(--text); }
.data-table-subtitle { font-size: var(--font-11); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-style: italic; text-align: right; }

/* ============================================
   TRUST BAR
   ============================================ */
.trust       { border-top: 1px solid rgba(201,168,76,0.15); border-bottom: 1px solid rgba(201,168,76,0.15); background: var(--warm); }
.trust-inner { padding: var(--space-4) var(--space-12); display: flex; gap: 0; }
.trust-item  { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; font-size: var(--font-11); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); padding: 0 var(--space-4); border-right: 1px solid rgba(201,168,76,0.2); }
.trust-item:last-child { border-right: none; }

/* ============================================
   SECTION TYPOGRAPHY UTILITIES
   ============================================ */
.section-eyebrow { font-size: var(--font-11); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: block; }
.section-eyebrow + h2,
.section-eyebrow + h3 { margin-top: var(--space-2); }
h1                { font-family: 'Instrument Sans', sans-serif; font-size: clamp(36px, 4vw, 52px); font-weight: 800; line-height: 1.1; color: var(--earth); letter-spacing: -0.02em; }
.home-hero-h1     { font-size: clamp(48px, 5.5vw, 72px); }
h2                { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-30); font-weight: 700; color: var(--gold); margin-top: var(--space-16); line-height: 1.2; }
h3, .label-h3, .data-table-row-header > * { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-13); color: var(--gold); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-top: var(--space-10); }
.label-h3, .data-table-row-header > * { margin-top: 0; }
h4                { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-14); color: var(--gold); font-weight: 700; line-height: 1.4; margin-top: var(--space-10); }
.h2-subtle        { font-size: var(--font-18); color: var(--earth); font-weight: 600; }
.description     { font-size: var(--font-15); color: var(--muted); margin-top: var(--space-4); line-height: 1.8; font-weight: 300; max-width: 600px; }
p                { margin-top: var(--space-4); line-height: 1.8; }

/* First-child margin reset, scoped to direct children of <section>
   plus the common one-level-wrapper case (section > .container > h2).
   Prevents a heading's margin-top from adding space at the very top
   of a section (the section's own padding handles that). Doesn't
   reach into deeper typography wrappers like .foundational-intro, so
   those headings keep their natural top margin. */
section > h1:first-child,
section > h2:first-child,
section > h3:first-child,
section > h4:first-child,
section > p:first-child,
section > .description:first-child,
section > .italics-description:first-child,
section > .bullet-pt:first-child,
section > .two-col:first-child,
section > .three-col:first-child,
section > :first-child > h1:first-child,
section > :first-child > h3:first-child,
section > :first-child > h4:first-child {
  margin-top: 0;
}

/* First h2 in a section anchors to the top regardless of nesting depth.
   Uses descendant + :first-of-type so it reaches h2s buried in layout
   grids or behind absolutely-positioned background SVGs (e.g.,
   .wisdom-grid > .wisdom-content > .wisdom-inner > h2). Every section
   has at most one h2, so this one rule replaces what used to require
   per-section overrides.
   :not(.section-eyebrow + h2) excludes h2s that are immediately
   preceded by an eyebrow — the sibling rule (8px) handles those, and
   the eyebrow-to-h2 gap is intentional design.
   h3 is intentionally NOT included — h3s inside typography wrappers
   (.foundational-intro) are sub-headings that should keep their
   natural top margin. */
section > :first-child h2:first-of-type:not(.section-eyebrow + h2) { margin-top: 0; }

/* When an h2 or h3 is the first content inside a .two-col or .three-col
   cell (direct or one level deep), zero its margin-top. The layout's
   own 48px top margin already provides breathing room from the content
   above; without this reset the heading's own margin-top stacks with
   the layout's, doubling the gap. */
.two-col > h2:first-child,
.two-col > h3:first-child,
.two-col > * > h2:first-child,
.two-col > * > h3:first-child,
.three-col > h2:first-child,
.three-col > h3:first-child,
.three-col > * > h2:first-child,
.three-col > * > h3:first-child {
  margin-top: 0;
}
.link            { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--gold); font-size: var(--font-13); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin-top: var(--space-4); cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.3); padding-bottom: 2px; }
.link-inline     { color: var(--gold); text-decoration: underline; }
.link-inline:hover { opacity: 0.8; }

/* ============================================
   INNER PAGE HERO
   Standard pattern for the first <section> of any
   inner page (all pages except the homepage and
   legal pages). Add class="page-hero" to the
   <section>; inside it, use <div class="page-hero-inner">
   for the standard 2-column layout (text left at
   1.2fr, visual right at 1fr).
   The page-specific class should set horizontal padding
   via padding-left / padding-right (longhand) so it
   does not override the top/bottom padding here.
   ============================================ */
.page-hero { min-height: 40vh; padding: 50px var(--space-6) var(--space-20); }
.page-hero-inner {
  max-width:             1100px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1.2fr 1fr;
  gap:                   var(--space-20);
  align-items:           start;
}

/* Stub page layout (used by short pages: about, blog, contact, faq,
   getting-started, gift, press, reviews, science). */
.stub-section { display: flex; align-items: flex-start; justify-content: center; text-align: center; padding-left: var(--space-12); padding-right: var(--space-12); }

/* Shared hero image visual: gradient panel inside the inner-page hero's right column.
   Used by getting-started (.gs-hero-arc SVG inside) and how-it-works (illustration inside). */
.hero-image {
  border-radius:    20px;
  overflow:         hidden;
  background:       linear-gradient(135deg, var(--warm), rgba(201,168,76,0.1));
  min-height:       var(--hero-image-min-height);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  border:           1px solid rgba(201,168,76,0.2);
  padding:          var(--space-12) var(--space-8);
}

/* ============================================
   FOOTER
   ============================================ */
footer        { background: var(--earth); border-top: 1px solid rgba(201,168,76,0.1); padding: var(--space-12); }
.footer-top   { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-16); padding-bottom: var(--space-10); border-bottom: 1px solid rgba(201,168,76,0.08); }
.footer-logo  { font-size: var(--font-20); letter-spacing: 0.08em; color: rgba(201,168,76,0.8); font-weight: 700; text-transform: uppercase; margin-bottom: var(--space-3); }
.footer-tagline { font-size: var(--font-12); color: var(--footer-text); line-height: 1.6; max-width: 220px; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) 28px; align-content: flex-start; }
.footer-links a { font-size: var(--font-11); letter-spacing: 0.1em; text-transform: uppercase; color: var(--footer-text); text-decoration: none; cursor: pointer; transition: color 0.3s; }
.footer-links a:hover { color: rgba(201,168,76,0.7); }
.footer-bottom { margin-top: var(--space-6); display: flex; justify-content: space-between; align-items: center; }
.footer-copy   { font-size: var(--font-11); color: var(--footer-text); }
.footer-breath { font-size: var(--font-11); color: rgba(250,246,238,0.15); font-style: italic; }

/* ============================================
   SCROLL REVEAL ANIMATION
   ============================================ */
.reveal         { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Footer social icons */
.footer-social { display: flex; gap: var(--space-4); align-items: center; }
.footer-social a { color: rgba(250,246,238,0.35); text-decoration: none; transition: color 0.3s; display: flex; }
.footer-social a:hover { color: rgba(201,168,76,0.7); }

/* Reusable bullet point text */
.bullet-pt { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-15); color: var(--muted); line-height: 1.6; font-weight: 300; margin-top: var(--space-4); }
.italics-description + .bullet-pt { margin-top: var(--space-8); }

/* Coming soon note */
.coming-soon-note { display: inline-block; margin-top: var(--space-6); font-family: 'Instrument Sans', sans-serif; font-size: var(--font-11); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,168,76,0.3); padding: var(--space-2) var(--space-4); border-radius: 50px; }

/* Shared italic subtext (Playfair) */
.italics-description { font-family: 'Playfair Display', serif; font-style: italic; font-size: var(--font-18); color: var(--muted); line-height: 1.6; font-weight: 400; max-width: 580px; margin: var(--space-4) auto 0; }

/* Gold bullet dot */
.bullet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* Card text system */
.regular-card-title { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-16); line-height: 1.2; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.small-card-title { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-13); font-weight: 600; color: var(--earth); letter-spacing: 0.02em; margin-bottom: var(--space-1); }
.small-card-description { font-size: var(--font-11); color: var(--muted); fill: var(--muted); font-weight: 300; line-height: 1.5; }

/* Blog card title */
.blog-title { font-family: 'Playfair Display', serif; font-size: var(--font-16); color: var(--earth); font-weight: 500; line-height: 1.4; margin: 0; }

/* Card description — used on all cards across all pages */
.regular-card-description { font-size: var(--font-13); color: var(--muted); line-height: 1.6; font-weight: 300; margin: 0; }

/* ============================================
   TWO-COLUMN LAYOUT
   Layout primitive for two-column sections. Provides grid
   display, column ratio, gap, and top margin only. Does NOT
   provide horizontal padding or width constraint — the parent
   .section (or .section-lg) handles padding, the wrapper
   (.section-wide, .section-narrow, etc.) handles width.
   Always nest inside a width wrapper.
   Variants:
     .cols-3-2 / .cols-2-3 — asymmetric column splits
     .align-stretch        — columns reach equal height
     .align-top            — columns explicitly top-align
   ============================================ */
.two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-16);
  align-items:           center;
  margin-top:            var(--space-12);
}
.two-col.cols-3-2      { grid-template-columns: 3fr 2fr; }
.two-col.cols-2-3      { grid-template-columns: 2fr 3fr; }
.two-col.align-stretch { align-items: stretch; }
.two-col.align-top     { align-items: start; }

/* ============================================
   THREE-COLUMN LAYOUT
   Layout primitive for three-column sections. Provides
   grid display, column ratio, gap, and top margin only.
   Does NOT provide horizontal padding or width constraint
   — the parent .section handles padding, the wrapper
   (.section-wide, .section-narrow, etc.) handles width.
   Always nest inside a width wrapper.
   Variants:
     .align-stretch — columns/cards reach equal height
                      (common for card grids)
     .align-top     — columns explicitly top-align
   Collapses to two columns at ≤1024px (tablet) and one
   column at ≤768px (mobile).
   ============================================ */
.three-col {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   var(--space-6);
  align-items:           center;
  margin-top:            var(--space-12);
}
.three-col.align-stretch { align-items: stretch; }
.three-col.align-top     { align-items: start; }

/* ============================================
   SECTION SPACING
   Standard vertical and horizontal padding for any <section>.
   Defaults: .section (80/48), .section-sm (60/48), .section-lg
   (100/48). Mobile sizes scale down. Sections should not define
   their own padding — use these classes. Hero sections (.home-hero,
   .hiw-hero) are an exception with custom layout requirements.
   ============================================ */
.section    { padding: var(--section-padding); }
.section-lg { padding: var(--section-padding-lg); }

/* ============================================
   SECTION WIDTH CONSTRAINTS
   Inner-wrapper classes for constraining content width inside a
   full-width section. The section provides padding (and optionally
   background); the wrapper handles centering and max-width.
     .section-full       — no max-width, spans full width
     .section-extrawide  — 1300px (nav, trust bar, footer)
     .section-wide       — 1100px (two-col / three-col content)
     .section-narrow     —  800px (single-column reading content)
   Apply ONE wrapper as a <div> inside a <section>. Pages may add
   their own narrower local overrides (e.g., .gs-foundation-table-wrap
   at 700px) when needed.
   ============================================ */
.section-extrawide,
.section-wide,
.section-narrow    { margin: 0 auto; }

.section-full      { width: 100%; }
.section-extrawide { max-width: var(--section-width-extra); }
.section-wide      { max-width: var(--section-width-wide); }
.section-narrow    { max-width: var(--section-width-narrow); }

/* ============================================
   CTA SECTION
   Standard end-of-page call-to-action: warm sand background
   with rotating mandala behind, gold h2, subtitle paragraph,
   two buttons. Pattern:
     <section class="cta-sec section-lg">
       <svg class="cta-mandala">...</svg>
       <h2>...</h2>
       <p class="cta-sub">...</p>
       <div class="cta-btns">
         <a class="btn-cta-primary">...</a>
         <a class="btn-cta-outline">...</a>
       </div>
     </section>
   The h2, .cta-sub, and .cta-btns all use position: relative so
   they stack above the absolutely-positioned mandala.
   ============================================ */
.cta-sec     { text-align: center; background: var(--sand); position: relative; overflow: hidden; }
.cta-sec h2  { position: relative; margin-top: 0; }
.cta-mandala { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; opacity: 0.10; pointer-events: none; }
.cta-sub     { font-size: var(--font-16); color: var(--muted); font-weight: 300; position: relative; margin-top: var(--space-4); }
.cta-btns    { display: flex; gap: var(--space-3); justify-content: center; position: relative; flex-wrap: wrap; margin-top: var(--space-10); }
.preset-icon { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================
   INDEX PAGE LAYOUTS
   These section bases used to live in index.html's inline <style>
   block. Moved here so the mobile overrides in the @media block below
   win the cascade by source order alone, without !important.
   These classes appear only on the homepage.
   ============================================ */
.home-hero          { padding: 50px var(--space-12) var(--space-10); display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-10); align-items: start; max-width: 1300px; margin: 0 auto; min-height: calc(100vh - var(--nav-height)); }
.home-hero-btns     { display: flex; gap: var(--space-4); margin-top: 44px; align-items: center; }
.home-hero-right    { position: relative; display: flex; align-items: center; justify-content: center; height: 520px; }
.home-wisdom        { overflow: hidden; background: var(--cream); }
.home-wisdom-visual { display: flex; align-items: center; justify-content: center; min-height: 480px; position: relative; }
.home-science-img   { border-radius: 8px; overflow: hidden; height: 400px; background: linear-gradient(135deg, #1A120A, #3A2810); display: flex; align-items: center; justify-content: center; }
.home-blog-sec      { background: var(--warm); }


/* ============================================
   GETTING STARTED PAGE
   Page-prefixed (.gs-*) and reusable component
   classes (.data-table, .icon-row, .display-quote,
   .callout-premium) used by getting-started.html.
   ============================================ */

/* Hero */
.gs-hero { background: var(--cream); }
.hero-image .section-eyebrow { margin-bottom: var(--space-8); }
.gs-hero-axis { stroke: rgba(201,168,76,0.2); stroke-width: 1; }
.gs-hero-d1 { font-size: var(--font-11); }
.gs-hero-arc-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: gsArcDraw 2.0s ease-out 0.2s forwards; }
.gs-hero-c { opacity: 0; animation: gsArcFadeIn 0.3s ease-out forwards; }
.gs-hero-c.n1 { animation-delay: 0.3s; }
.gs-hero-c.n2 { animation-delay: 0.45s; }
.gs-hero-c.n3 { animation-delay: 0.6s; }
.gs-hero-c.n4 { animation-delay: 0.75s; }
.gs-hero-c.n5 { animation-delay: 0.9s; }
.gs-hero-c.n6 { animation-delay: 1.05s; }
.gs-hero-c.n7 { animation-delay: 1.2s; }
.gs-hero-c.n8 { animation-delay: 1.35s; }
.gs-hero-c.n9 { animation-delay: 1.5s; }
.gs-hero-c.n10 { animation-delay: 1.65s; }
.gs-hero-c.n11 { animation-delay: 1.8s; }
.gs-hero-c.n12 { animation-delay: 1.95s; }
.gs-hero-d1-ring { opacity: 0; animation: gsArcFadeIn 0.5s ease-out 2.2s forwards; }
.gs-hero-arc text.gs-hero-d1 { opacity: 0; animation: gsArcFadeIn 0.5s ease-out 2.4s forwards; }
@keyframes gsArcDraw { to { stroke-dashoffset: 0; } }
@keyframes gsArcFadeIn { to { opacity: 1; } }
.gs-hero-month-range { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-1); }
.gs-hero-month-arrow { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-10); color: rgba(122,106,82,0.5); }

/* Foundation */
.gs-foundation { background: var(--warm); }
.gs-foundation-table-wrap { max-width: 700px; margin: var(--space-20) auto 0; }
.gs-foundation h2, .gs-foundation h3 { text-align: center; }
.gs-foundation .description { margin-left: auto; margin-right: auto; }
.gs-kumbhak-row { grid-template-columns: 80px 1fr 80px 120px; }
.gs-kumbhak-row.has-subtitle > .data-table-subtitle { grid-column: 2; justify-self: end; }
.gs-kumbhak-row .description.gs-kumbhak-level { font-size: var(--font-18); color: var(--gold); font-variant-numeric: tabular-nums; }
.gs-kumbhak-col-type { text-align: right; }
.gs-kumbhak-pill { display: inline-block; font-size: var(--font-10); letter-spacing: 0.18em; text-transform: uppercase; padding: 5px var(--space-4); border-radius: 50px; font-weight: 600; }
.gs-kumbhak-pill.preset { background: var(--gold); }
.gs-kumbhak-pill.custom { background: transparent; color: var(--gold); border: 1px solid rgba(201,168,76,0.5); }

/* Progress */
.gs-progress { background: var(--cream); }
.progress-diagram { position: relative; padding-left: 30px; }
.progress-diagram::before { content: ""; position: absolute; left: 30px; top: 30px; bottom: 30px; width: 1.5px; background: rgba(201,168,76,0.3); z-index: 0; }
.progress-node { display: grid; grid-template-columns: 60px 1fr; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-10); position: relative; z-index: 1; }
.progress-node:last-child { margin-bottom: 0; }
.progress-circle { width: 60px; height: 60px; border-radius: 50%; background: rgba(201,168,76,0.12); border: 1.5px solid rgba(201,168,76,0.4); display: flex; align-items: center; justify-content: center; font-family: 'Instrument Sans', sans-serif; font-size: var(--font-22); font-weight: 400; color: var(--gold); flex-shrink: 0; }
.progress-content { padding-top: var(--space-3); }
.progress-title { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-16); font-weight: 600; color: var(--earth); margin: 0; }
.progress-description { font-size: var(--font-13); color: var(--muted); line-height: 1.6; font-weight: 300; margin-top: var(--space-2); margin-bottom: 0; }

/* Toolkit */
.gs-toolkit { background: var(--warm); text-align: center; }
.gs-toolkit h2 { text-align: center; }
.gs-toolkit .description { margin-left: auto; margin-right: auto; }
.icon-row { display: flex; justify-content: space-between; align-items: flex-start; max-width: 800px; margin: var(--space-16) auto 0; gap: var(--space-6); }
.icon-row-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); flex: 1; }
.icon-row-halo { width: 80px; height: 80px; border-radius: 50%; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.2); display: flex; align-items: center; justify-content: center; }
.icon-row-label { font-size: var(--font-11); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.gs-toolkit .description:last-child { margin-top: var(--space-16); }

/* Timing / Callout Premium */
.gs-timing { background: var(--cream); }
.callout-premium { background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.18); border-radius: 16px; padding: var(--space-8) var(--space-10); max-width: 800px; margin: var(--space-8) auto 0; }
.callout-premium-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
.callout-premium-header h3 { margin: 0; }
.callout-premium-icon { flex-shrink: 0; }
.callout-premium p { font-size: var(--font-16); color: var(--muted); font-weight: 300; line-height: 1.7; margin-top: var(--space-3); }

/* Retention */
.gs-retention { background: var(--warm); text-align: center; }
.gs-retention h2 { text-align: center; }
.gs-retention-rule { width: 60px; height: 1px; background: var(--gold); margin: 0 auto var(--space-6); opacity: 0.6; }
.gs-retention .description { margin-left: auto; margin-right: auto; text-align: left; }
.display-quote { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; font-size: clamp(var(--font-18), 2.5vw, var(--font-22)); color: var(--gold); line-height: 1.4; max-width: 700px; margin: var(--space-16) auto; text-align: center; }
.gs-retention-cta-wrap { text-align: center; margin-top: var(--space-12); }


/* ── Tablet (≤1024px): three-column grids drop to two columns ── */
@media (max-width: 1024px) {
  .three-col, .three-col.align-stretch, .three-col.align-top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {

  /* Nav already handled in nav.html */

  /* Reviews - tighter gap on mobile */
  .test-grid { gap: var(--space-4); }

  /* Science - stack EKG above text */
  .home-science-img { order: -1; min-height: 200px; }

  /* Blog - stack cards */
  .home-blog-cards { gap: var(--space-4); }

  /* Wisdom section */
  .home-wisdom-visual { min-height: 320px; order: -1; }

  /* Inner page hero 2-col stacks on mobile */
  .page-hero-inner { grid-template-columns: 1fr; gap: var(--space-10); }

  /* Two-column layouts collapse to single column */
  .two-col, .two-col.cols-3-2, .two-col.cols-2-3 { grid-template-columns: 1fr; gap: var(--space-10); }

  /* Three-column layouts collapse to single column */
  .three-col, .three-col.align-stretch, .three-col.align-top { grid-template-columns: 1fr; gap: var(--space-6); }

  /* Section padding scales down on mobile */
  .section    { padding: var(--section-padding-mobile); }
  .section-lg { padding: var(--section-padding-lg-mobile); }

  /* Footer */
  footer { padding: var(--space-10) var(--space-6); }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-tagline { max-width: 100%; }
  .footer-links { gap: var(--space-3) var(--space-6); }
  .footer-bottom { flex-direction: column; gap: var(--space-4); align-items: flex-start; }

  /* Trust bar */
  .trust-inner { flex-direction: column; padding: var(--space-4) var(--space-6); gap: 0; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(201,168,76,0.2); padding: var(--space-3) 0; justify-content: flex-start; }
  .trust-item:last-child { border-bottom: none; }

  /* All button variants go full-width on mobile for comfortable tap targets */
  .btn-primary, .btn-outline, .btn-cta-primary, .btn-cta-outline { width: 100%; }

  /* Hero */
  .home-hero { grid-template-columns: 1fr; padding: var(--space-10) var(--space-6); min-height: unset; gap: var(--space-10); }
  h1 { font-size: clamp(36px, 8vw, 52px); }
  .home-hero-h1 { font-size: clamp(44px, 9vw, 60px); }
  .home-hero-right { height: 380px; }
  .home-hero-btns { flex-wrap: wrap; gap: var(--space-3); }

  /* Hero image visual shorter on mobile */
  .hero-image { min-height: var(--hero-image-min-height-mobile); padding: var(--space-8) var(--space-4); }
  .gs-hero-arc { width: 100%; height: auto; max-width: var(--hero-image-arc-max-width); }

  /* Getting Started — kumbhak table reflows: level column, stacked month + hold, type at right */
  .gs-kumbhak-row { grid-template-columns: 60px 1fr auto; grid-template-areas: "level month type" "level hold type"; padding: var(--space-4) var(--space-3); gap: var(--space-2) var(--space-3); }
  .gs-kumbhak-row .gs-kumbhak-col-level { grid-area: level; align-self: center; }
  .gs-kumbhak-row .gs-kumbhak-col-month { grid-area: month; }
  .gs-kumbhak-row .gs-kumbhak-col-hold  { grid-area: hold; }
  .gs-kumbhak-row .gs-kumbhak-col-type  { grid-area: type; align-self: center; }
  .data-table-row-header { display: none; }

  /* Getting Started — toolkit icon row wraps to a centered grid */
  .icon-row { flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-4); max-width: 100%; }
  .icon-row-item { flex: 0 0 calc(33.33% - var(--space-4)); }

  /* Getting Started — callout-premium tighter padding */
  .callout-premium { padding: var(--space-6) 28px; }

}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  /* Getting Started — toolkit drops to two-up at very narrow widths */
  .icon-row-item { flex: 0 0 calc(50% - var(--space-4)); }
}

/* Highlight — Playfair italic bold gold */
.highlight { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; color: var(--gold); }

/* Gold text span */
.gold { color: var(--gold); }