/* ============================================================
   Somavere, design tokens
   Colors, type, spacing, radii, shadows, motion.
   Import this once per surface. All values here are canonical.
   ============================================================ */

/* ---------- Fonts ---------- */

/* Savoire, LOGO-ONLY font. Used exclusively inside the wordmark lockup
   (and raster logo assets). Do NOT use for headlines, hero type, body,
   UI, or anywhere else. Reserve the 'Savoire' font-family token strictly
   for rebuilding the wordmark in live text if ever needed. */
@font-face {
  font-family: 'Savoire';
  src: url('fonts/Savoire-Regular.otf') format('opentype'),
       url('fonts/Savoire-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Savoire';
  src: url('fonts/Savoire-Bold.otf') format('opentype'),
       url('fonts/Savoire-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Plus Jakarta Sans, the supporting sans. Used for body, UI, labels, buttons.
   Pair: Savoire (display, lowercase) + Plus Jakarta Sans (body, sentence case,
   with widely-spaced uppercase for eyebrows + buttons). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-ExtraLight.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */

:root {
  /* ========== Colors, primary palette ==========
     The brand is warm, grounded, editorial, close-to-nature.
     Think: morning sun on limewashed plaster + ink on handmade paper. */

  /* Ink, deep teal near-black. The primary text + dark-mode background. */
  --ink:          #072530;
  --ink-80:       #253C46;
  --ink-60:       #4E6168;
  --ink-40:       #768E90;   /* named in the kit as "mid teal" */

  /* Teal, the brand's deep accent, used for dark surfaces. */
  --teal-deep:    #0E2C37;
  --teal:         #233F46;
  --teal-mid:     #768E90;
  --teal-soft:    #A9BABC;

  /* Gold, the signature accent. A warm, muted, olive-gold.
     The "sun" mark is traditionally rendered in this color. */
  --gold:         #C7B15E;
  --gold-deep:    #A8913F;
  --gold-soft:    #DAC98B;

  /* Sand, warm tan neutral, pairs with cream + gold. */
  --sand:         #C8BDA9;
  --sand-deep:    #A89A80;
  --sand-soft:    #DCD3BE;

  /* Cream, the paper/canvas of the brand. Most long-form surfaces
     sit on cream, not pure white. */
  --cream:        #F7F4EB;
  --cream-soft:   #F0ECE6;
  --cream-warm:   #EAE4D6;

  /* Plum, deep berry, used sparingly for editorial accent. */
  --plum:         #4F2E3C;
  --plum-soft:    #6C4253;

  /* True white, used ONLY for medical/clinical UI surfaces and
     over imagery. Avoid in editorial contexts; prefer --cream. */
  --paper:        #FFFFFF;

  /* ========== Semantic color roles ========== */

  /* Surfaces */
  --bg-default:     var(--cream);        /* the brand's default surface */
  --bg-raised:      var(--cream-soft);
  --bg-sunken:      var(--cream-warm);
  --bg-inverse:     var(--ink);
  --bg-inverse-raised: var(--teal-deep);
  --bg-clinical:    var(--paper);        /* for app/portal/medical */

  /* Foreground */
  --fg-1:           var(--ink);          /* primary text on light */
  --fg-2:           var(--ink-80);       /* secondary text */
  --fg-3:           var(--ink-60);       /* tertiary / captions */
  --fg-4:           var(--ink-40);       /* disabled / meta */
  --fg-on-inverse:  var(--cream);        /* text on dark ink */
  --fg-on-inverse-2:var(--teal-soft);

  /* Lines */
  --line:           color-mix(in oklab, var(--ink) 12%, transparent);
  --line-strong:    color-mix(in oklab, var(--ink) 24%, transparent);
  --line-inverse:   color-mix(in oklab, var(--cream) 18%, transparent);

  /* Accent + status */
  --accent:         var(--gold);
  --accent-deep:    var(--gold-deep);
  --accent-soft:    var(--gold-soft);

  --success:        #6E8E5A;             /* moss, not kelly */
  --warning:        #C38A3A;             /* amber, not orange */
  --danger:         #9A3B3B;              /* brick, not red-red */
  --info:           var(--teal);

  /* ========== Type scale ==========
     Desktop-first. Scale shrinks 0.9x on small screens via media query
     at the bottom.

     Type system:
       --font-logo    Savoire. RESERVED for the wordmark lockup only, 
                      never headlines, body, or UI.
       --font-sans    Plus Jakarta Sans. The entire working type system:
                      headlines, body, italics, bold, eyebrows, buttons.
                      Use weight + size + casing for hierarchy, not a
                      second typeface.

     --font-display / --font-serif are aliased to Plus Jakarta for backwards
     compat with existing HTML; do NOT point them at Savoire or any serif. */

  --font-logo:      'Savoire', Georgia, serif;
  --font-sans:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display:   var(--font-sans);
  --font-serif:     var(--font-sans);
  --font-mono:      ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Scale, editorial, generous */
  --t-display-xl:   clamp(4.5rem, 9vw, 9rem);     /* 72-144, hero */
  --t-display-lg:   clamp(3.5rem, 6vw, 6rem);     /* 56-96 , section openers */
  --t-display-md:   clamp(2.75rem, 4.5vw, 4.25rem); /* 44-68 */
  --t-display-sm:   clamp(2rem, 3vw, 3rem);       /* 32-48 */

  --t-h1:           2.5rem;    /* 40 */
  --t-h2:           2rem;      /* 32 */
  --t-h3:           1.5rem;    /* 24 */
  --t-h4:           1.25rem;   /* 20 */
  --t-h5:           1rem;      /* 16 */

  --t-body-lg:      1.1875rem; /* 19 */
  --t-body:         1rem;      /* 16 */
  --t-body-sm:      0.875rem;  /* 14 */
  --t-caption:      0.75rem;   /* 12 */
  --t-eyebrow:      0.6875rem; /* 11, always uppercase + tracked */

  /* Weights */
  --fw-extralight:  200;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* Leading */
  --lh-tight:       1.02;      /* display */
  --lh-snug:        1.18;      /* h1-h3 */
  --lh-normal:      1.5;       /* body */
  --lh-relaxed:     1.65;      /* long-form editorial */

  /* Tracking */
  --ls-tight:       -0.02em;   /* display (Savoire is already loose optically) */
  --ls-normal:      0;
  --ls-wide:        0.04em;    /* button labels */
  --ls-eyebrow:     0.22em;    /* uppercase eyebrows */

  /* ========== Spacing (4pt base) ========== */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;
  --s-40:  160px;

  /* ========== Radii ==========
     Somavere avoids playful pill-shapes. Radii are small or full-round,
     never in-between. Cards are mostly square-cornered or slightly softened. */
  --r-none:   0;
  --r-xs:     2px;
  --r-sm:     4px;
  --r-md:     8px;
  --r-lg:     12px;
  --r-xl:     20px;
  --r-2xl:    28px;
  --r-full:   9999px;

  /* ========== Shadows ==========
     Shadows are nearly invisible, soft, warm, diffused. Never drop-shadows.
     All shadows use a warm ink tint, not pure black. */
  --shadow-xs:  0 1px 2px rgba(7,37,48,0.04);
  --shadow-sm:  0 2px 6px rgba(7,37,48,0.05), 0 1px 2px rgba(7,37,48,0.03);
  --shadow-md:  0 8px 24px rgba(7,37,48,0.06), 0 2px 6px rgba(7,37,48,0.04);
  --shadow-lg:  0 18px 48px rgba(7,37,48,0.08), 0 4px 12px rgba(7,37,48,0.05);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* ========== Motion ==========
     Calm and deliberate. No bounces. Fades and quiet slides only. */
  --dur-fast:     140ms;
  --dur-base:     240ms;
  --dur-slow:     420ms;
  --dur-xslow:    700ms;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);    /* smooth out */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:    cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ========== Layout ========== */
  --container:        1240px;
  --container-wide:   1440px;
  --container-reading: 680px;
  --gutter:           clamp(20px, 4vw, 64px);
}

/* ---------- Semantic element defaults ---------- */
/* Apply by adding class `soma` to a container. Do NOT drop these on bare
   html, they're meant to be scoped so Somavere pages cohabit with other
   UIs (e.g. in a component sandbox). */

.soma {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--bg-default);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Everything is Plus Jakarta Sans. Savoire is strictly logo-only.
   Hierarchy is built from weight + size + casing, not a second typeface. */

.soma .display,
.soma h1.display { font-family: var(--font-sans); font-weight: var(--fw-bold);
                   line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }

.soma h1 { font-family: var(--font-sans); font-weight: var(--fw-bold);
           font-size: var(--t-h1); line-height: var(--lh-snug);
           letter-spacing: var(--ls-tight); }
.soma h2 { font-family: var(--font-sans); font-weight: var(--fw-bold);
           font-size: var(--t-h2); line-height: var(--lh-snug);
           letter-spacing: var(--ls-tight); }
.soma h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold);
           font-size: var(--t-h3); line-height: var(--lh-snug); }
.soma h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold);
           font-size: var(--t-h4); line-height: var(--lh-snug); }
.soma h5 { font-family: var(--font-sans); font-weight: var(--fw-semibold);
           font-size: var(--t-h5); line-height: var(--lh-snug); }

.soma p  { font-size: var(--t-body); line-height: var(--lh-relaxed);
           color: var(--fg-2); text-wrap: pretty; }
.soma .body-lg { font-size: var(--t-body-lg); line-height: var(--lh-relaxed); }
.soma .body-sm { font-size: var(--t-body-sm); }
.soma .caption { font-size: var(--t-caption); color: var(--fg-3); }

.soma .eyebrow,
.soma .kicker {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-3);
}

.soma a { color: var(--ink); text-decoration: underline;
          text-decoration-thickness: 1px;
          text-underline-offset: 3px;
          text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent);
          transition: color var(--dur-fast) var(--ease-out),
                      text-decoration-color var(--dur-fast) var(--ease-out); }
.soma a:hover { color: var(--gold-deep);
                text-decoration-color: var(--gold-deep); }

.soma code, .soma pre { font-family: var(--font-mono); font-size: 0.875em; }

/* Small-screen type scaling */
@media (max-width: 640px) {
  :root {
    --t-h1: 2rem;
    --t-h2: 1.625rem;
    --t-h3: 1.25rem;
  }
}

/* Marquee, used by the hero video row */
@keyframes somamarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.soma-marquee-track:hover { animation-play-state: paused; }

/* Inverse surfaces */
.soma.on-ink,
.soma .on-ink {
  background: var(--ink);
  color: var(--fg-on-inverse);
}
.soma.on-ink p,
.soma .on-ink p { color: var(--fg-on-inverse-2); }
.soma.on-ink .eyebrow,
.soma .on-ink .eyebrow { color: var(--gold); }

/* ============================================================
   MOBILE RESPONSIVE LAYER
   The site is built with React inline styles, so these rules must
   use !important on class hooks to win against inline specificity.
   Tablet: <= 1024px. Phone: <= 640px.
   ============================================================ */

/* Prevent horizontal scroll from large decorative suns that bleed
   past the viewport edge. */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
}

/* Mobile toggle / panel defaults, hidden on desktop. */
.soma-mobile-toggle { display: none; }
.soma-mobile-panel  { display: none; }

/* Mobile nav panel, full-screen overlay when .open */
.soma-mobile-panel {
  position: fixed; inset: 0; top: 0;
  background: var(--teal-deep); color: var(--cream);
  z-index: 90; padding: 24px 20px 48px;
  overflow-y: auto;
}
.soma-mobile-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(247,244,235,0.14);
  margin-bottom: 8px;
}
.soma-mobile-panel a {
  display: block; padding: 18px 0;
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 500;
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid rgba(247,244,235,0.12);
  letter-spacing: -0.01em;
}
.soma-mobile-panel a:hover { color: var(--gold); }
.soma-mobile-panel .soma-mobile-cta {
  display: inline-block; margin-top: 28px;
  padding: 14px 22px; border-radius: 8px;
  background: var(--gold); color: var(--ink) !important;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; border-bottom: none;
}

/* --- Tablet: ease 4/3-col grids to 2-col, collapse hero split --- */
@media (max-width: 1024px) {
  .soma-grid-4       { grid-template-columns: repeat(2, 1fr) !important; }
  .soma-phases-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .soma-phases-rule  { display: none !important; }
  .soma-grid-3       { grid-template-columns: repeat(2, 1fr) !important; }
  .soma-worksheet-grid { grid-template-columns: repeat(4, 1fr) !important; }
  /* Interlocking results: switch to a 2-col, column-flow layout where each
     column holds 3 pairs (R + P) stacked. 12 implicit row tracks per col. */
  .soma-results-interlock {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(12, 1fr) !important;
    grid-auto-flow: column !important;
  }
  .soma-results-interlock > * { grid-area: auto !important;
                                grid-column: auto !important;
                                grid-row: auto !important; }
  .soma-results-interlock > .soma-results-result { grid-row: span 1 !important; }
  .soma-results-interlock > .soma-results-photo  { grid-row: span 3 !important; }
  .soma-hero-grid    { grid-template-columns: 1fr !important;
                       min-height: auto !important;
                       gap: clamp(32px, 6vw, 64px) !important; }
  .soma-about-grid   { grid-template-columns: 1fr !important;
                       min-height: auto !important; }
  .soma-about-grid > * { min-height: auto !important; }
  .soma-about-photo  { min-height: clamp(420px, 70vw, 620px) !important; }
  /* On stacked layouts, lift the portrait directly under the headline. */
  .soma-about-grid > *:nth-child(2) { order: -1 !important; }
  .soma-footer-grid  { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Phone: single column everywhere --- */
@media (max-width: 640px) {

  /* Nav */
  .soma-nav-links    { display: none !important; }
  .soma-nav-cta      { display: none !important; }
  .soma-mobile-toggle{ display: inline-flex !important; }
  .soma-mobile-panel.open { display: block !important; }

  /* Hero */
  .soma-hero-grid    { grid-template-columns: 1fr !important;
                       min-height: auto !important;
                       gap: 40px !important; }
  .soma-hero-cta     { flex-direction: column !important;
                       align-items: stretch !important; }
  .soma-hero-cta > * { width: 100% !important;
                       justify-content: center !important; }
  .soma-creds        { grid-template-columns: 1fr 1fr !important;
                       gap: 18px !important; max-width: none !important; }
  .soma-hero-image   { aspect-ratio: 4/5 !important;
                       max-height: none !important; }
  .soma-hero-scroll  { display: none !important; }

  /* Manifesto */
  .soma-manifesto    { grid-template-columns: 1fr !important;
                       gap: 18px !important; }

  /* Shared split-2 headers (Problem / Results / Testimonials / Program) */
  .soma-split-2      { grid-template-columns: 1fr !important;
                       align-items: start !important;
                       gap: 28px !important; }

  /* Community composite: drop the floating sidebar accent on small screens */
  .soma-hb-accent    { display: none !important; }

  /* Content grids → stacked */
  .soma-grid-4       { grid-template-columns: 1fr !important; }
  .soma-grid-3       { grid-template-columns: 1fr !important; }
  .soma-grid-2       { grid-template-columns: 1fr !important; }
  .soma-phases-grid  { grid-template-columns: 1fr !important; }
  .soma-phases-rule  { display: none !important; }

  /* Interlocking results grid → simple stack, source order keeps each
     result immediately next to its matching quote. */
  .soma-results-interlock {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
  }
  .soma-results-interlock > * { grid-area: auto !important;
                                grid-column: auto !important;
                                grid-row: auto !important; }
  /* Mobile: show only the first 3 pairs (3 results + 3 quotes), not all 6 */
  .soma-results-interlock > *:nth-child(n+7) { display: none !important; }

  /* Row-split sections (problem-bottom / program-cta) */
  .soma-row-split    { flex-direction: column !important;
                       align-items: flex-start !important;
                       gap: 20px !important; }
  .soma-row-split > * { justify-content: flex-start !important; }

  /* About */
  .soma-about-grid   { grid-template-columns: 1fr !important;
                       min-height: auto !important;
                       gap: 40px !important; }
  .soma-about-grid > * { min-height: auto !important; }
  .soma-about-photo  { min-height: 480px !important; }
  .soma-about-creds  { grid-template-columns: 1fr 1fr !important;
                       margin-top: 28px !important;
                       column-gap: 16px !important; row-gap: 4px !important; }
  .soma-about-creds > div {
    border-right: none !important;
    padding: 14px 0 14px 0 !important;
  }
  .soma-about-creds > div:nth-child(odd) {
    border-right: 1px solid rgba(7,37,48,0.12) !important;
    padding-right: 16px !important;
  }
  .soma-about-creds > div:nth-child(even) {
    padding-left: 16px !important;
  }

  /* Footer */
  .soma-footer-grid  { grid-template-columns: 1fr !important;
                       gap: 40px !important; padding-top: 40px !important; }
  .soma-footer-legal { flex-direction: column !important;
                       align-items: flex-start !important;
                       gap: 14px !important; }

  /* ResetHero collage, varied magazine mosaic on mobile (not uniform boxes).
     Two full-width feature images + mismatched-height pairs, tiled gaplessly. */
  .soma-reset-collage {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: clamp(46px, 13vw, 62px) !important;
    grid-auto-flow: row !important;
    aspect-ratio: auto !important;
  }
  .soma-reset-collage > * { grid-area: auto !important; }
  .soma-reset-collage > *:nth-child(1) { grid-column: 1 / -1 !important; grid-row: span 3 !important; }
  .soma-reset-collage > *:nth-child(2) { grid-column: 1 !important;     grid-row: span 2 !important; }
  .soma-reset-collage > *:nth-child(3) { grid-column: 2 !important;     grid-row: span 2 !important; }
  .soma-reset-collage > *:nth-child(4) { grid-column: 1 !important;     grid-row: span 3 !important; }
  .soma-reset-collage > *:nth-child(5) { grid-column: 2 !important;     grid-row: span 3 !important; }
  .soma-reset-collage > *:nth-child(6) { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
  .soma-reset-collage > *:nth-child(7) { grid-column: 1 !important;     grid-row: span 2 !important; }
  .soma-reset-collage > *:nth-child(8) { grid-column: 2 !important;     grid-row: span 2 !important; }

  /* CTA divider, stack the rule lines */
  .soma-cta-divider { flex-direction: column !important; gap: 12px !important; }
  .soma-cta-divider > div:nth-child(1),
  .soma-cta-divider > div:nth-child(3) { width: 80px !important; flex: 0 0 auto !important; }

  /* Checkout grid, stack on mobile */
  .soma-checkout-grid { grid-template-columns: 1fr !important; }

  /* Hero James trust strip, stack vertically, drop divider */
  .soma-james-trust { flex-direction: column !important; gap: 16px !important; }
  .soma-james-trust > div { text-align: center !important; }
  .soma-james-creds {
    border-left: none !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(7,37,48,0.14) !important;
    width: 100%;
  }

  /* Method worksheet grid, 2 cols on phone */
  .soma-worksheet-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Free guide page, stack 3-col grid to single col, cover above pitch */
  .soma-freeguide-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .soma-freeguide-grid > *:nth-child(1) {
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Coaching comparison table, stack to label-above-values on mobile */
  .soma-coaching-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .soma-coaching-row > div:nth-child(1) {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--gold-deep) !important;
    margin-bottom: 6px !important;
  }
  /* Hide the empty top-left cell on mobile (Reset/1:1 column headers shift to row labels) */
  .soma-coaching-table > .soma-coaching-row:first-child > div:nth-child(1) { display: none !important; }
}

/* ============================================================
   Symptoms list ("Do these sound like you?"), card-free, centered.
   4-up on desktop, 2-up on phone so it stays compact on mobile.
   ============================================================ */
.soma-symptoms-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .soma-symptoms-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Kit (ConvertKit) embedded form, keep it inside its container. */
.soma-kit-form { width: 100%; }
.soma-kit-form .formkit-form,
.soma-kit-form form { max-width: 100% !important; margin: 0 !important; }

/* Phase worksheets, fanned stack in the Method section. */
.soma-worksheet-fan { transition: transform 300ms var(--ease-out); will-change: transform; }
.soma-fan-card { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.soma-worksheet-fan:hover { transform: translateY(-3px); }

/* Global footer medical / testimonial disclaimer */
.footer-disclaimer { font-size: 12px; line-height: 1.6; max-width: 760px; margin: 22px 0 0; opacity: 0.85; }
.footer-disclaimer a { text-decoration: underline; }

/* Pulsing dot for the "enrolling now" badge. */
@keyframes somapulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(7,37,48,0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(7,37,48,0); }
}
.soma-pulse-dot { animation: somapulse 1.8s ease-in-out infinite; }