/* ============================================================
   Seed to Body Care
   Brand Overrides for Kajabi "Reach" Theme
   Palette derived from the despacho (Andean offering mandala)

   COLOR SOURCE OF TRUTH: Kajabi Theme Settings.
   global_custom_css.liquid emits the :root variables from
   Theme Settings > Style Guide + Brand Palette, AFTER this file,
   so the values below are import-time fallbacks only.
   This file must not introduce new hardcoded brand hex values.
   ============================================================ */

/* --- Fallback Custom Properties (overridden by theme settings) */
:root {
  --c-primary: #7C4A55;   /* Mulberry — primary, links, prices */
  --c-rose:    #A4706C;   /* Dusty Rose — secondary accent */
  --c-forest:  #2E3A1C;   /* dark sections, footer */
  --c-heading: #2E3A1C;   /* heading text */
  --c-cream:   #FBF7F0;   /* page field */
  --c-cream-2: #F2EDE3;   /* alternate section field */
  --c-sand:    #C9A47B;
  --c-marigold:#E3A52B;   /* the one jewel */
  --c-olive-deep: #5E6B33; /* eyebrow labels on cream — passes AA */
  --c-text:    #1C2410;
  --c-text-2:  #4A5038;
  --c-text-3:  #857A6A;
  --c-btn-bg:  #7C4A55;
  --c-btn-text:#ffffff;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;

  /* Derived tints — change the base color in Kajabi and these follow */
  --tint-hairline:  color-mix(in srgb, var(--c-forest) 12%, transparent);
  --tint-hairline-2:color-mix(in srgb, var(--c-forest) 18%, transparent);
  --tint-shadow:    color-mix(in srgb, var(--c-forest) 9%, transparent);
  --c-btn-bg-hover: color-mix(in srgb, var(--c-btn-bg) 86%, #000);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- Base Typography -------------------------------------- */
body,
.kjb-commerce-item__title,
p, li, label, input, textarea, select {
  font-family: var(--font-sans) !important;
  font-weight: 300;
  color: var(--c-text);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: color-mix(in srgb, var(--c-rose) 28%, transparent);
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  color: var(--c-heading) !important;
  line-height: 1.15;
}

/* Display-size tracking: large serif wants to sit tighter */
h1, .h1 { letter-spacing: -0.02em; }
h2, .h2 { letter-spacing: -0.01em; }
h3, .h3, h4, .h4, h5, .h5 { letter-spacing: 0.01em; }

/* Italic accent inside big headings — the despacho moment.
   Large text, so Dusty Rose passes AA at this size. */
h1 em, h2 em, .h1 em, .h2 em {
  font-style: italic;
  color: var(--c-rose);
  letter-spacing: 0;
}

/* h6 = an editable small-caps label, usable straight from the
   Kajabi text editor for kickers/eyebrows above headings */
h6, .h6 {
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-olive-deep) !important;
  line-height: 1.4;
}

/* Rhythm inside rich-text blocks: air above headings, less below,
   so heading + following paragraph read as one unit */
.block-type--text h1, .block-type--text h2, .block-type--text h3 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
.block-type--text h4, .block-type--text h5 {
  margin-top: 1.4em;
  margin-bottom: 0.45em;
}
.block-type--text h6 { margin-top: 1.8em; margin-bottom: 0.9em; }
.block-type--text h1:first-child, .block-type--text h2:first-child,
.block-type--text h3:first-child, .block-type--text h4:first-child,
.block-type--text h5:first-child, .block-type--text h6:first-child { margin-top: 0; }
.block-type--text p { margin: 0 0 1.15em; }
.block-type--text p:last-child { margin-bottom: 0; }

/* Native blockquote = serif pull-quote with a dusty-rose hairline */
.section blockquote {
  border-left: 2px solid var(--c-rose);
  margin: 2em 0;
  padding: 0.2em 0 0.2em 1.5rem;
}
.section blockquote p,
.section blockquote h4, .section blockquote h5 {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-weight: 300 !important;
  font-size: 1.35rem;
  line-height: 1.5;
}

/* Eyebrow utility — deep olive passes AA on cream; flower-bead from the despacho */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-olive-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-marigold);
}

/* --- Page Background -------------------------------------- */
body { background-color: var(--c-cream) !important; }

/* --- Header ----------------------------------------------- */
/* Header background + text colors are intentionally NOT overridden here, so the
   Kajabi theme editor controls them. We keep only brand typography below. */

.header a,
.header a.link-list__link,
.header a.link-list__link:hover,
.header .dropdown__trigger,
.header .user__login a,
.header .dropdown__item a {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  transition: color 0.3s var(--ease) !important;
}

/* Logo text */
.header .logo__text,
.header .logo__text a {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
}

/* Hamburger bars + sticky header background are left to the Kajabi editor too.
   We keep only the scroll shadow. */
.header.header--fixed {
  box-shadow: 0 2px 24px rgba(0,0,0,0.14) !important;
}

/* Header call-to-action button — keep it compact (was rendering oversized) */
.header__block--cta .btn,
.header .header__block--cta a.btn { font-size: 14px !important; }

/* Dropdown menus */
.header .dropdown__menu,
.header .dropdown {
  background-color: var(--c-cream) !important;
  border: 0.5px solid var(--tint-hairline) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}

.header .dropdown__item a {
  color: var(--c-text) !important;
  font-family: var(--font-sans) !important;
}

.header .dropdown__item a:hover {
  color: var(--c-heading) !important;
  background: color-mix(in srgb, var(--c-forest) 6%, transparent) !important;
}


/* --- Buttons (quiet luxury: no glow, no bounce) ------------ */
.btn,
.button,
[class*="btn--primary"],
[class*="button--primary"] {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease) !important;
}

.btn--primary,
.button--primary,
.kjb-commerce-checkout-btn,
.cta-button {
  background-color: var(--c-btn-bg) !important;
  color: var(--c-btn-text) !important;
  border: none !important;
}

.btn--primary:hover,
.button--primary:hover,
.kjb-commerce-checkout-btn:hover {
  background-color: var(--c-btn-bg-hover) !important;
}

.btn--secondary,
.button--secondary {
  background-color: transparent !important;
  color: var(--c-heading) !important;
  border: 1px solid var(--c-heading) !important;
}

.btn--secondary:hover,
.button--secondary:hover {
  background-color: var(--c-forest) !important;
  color: var(--c-cream) !important;
}

/* --- Links ------------------------------------------------ */
a { color: var(--c-primary); text-underline-offset: 3px; transition: color 0.3s var(--ease); }
a:hover { color: var(--c-rose); }

/* --- Footer ----------------------------------------------- */
/* Footer BACKGROUND is intentionally NOT set here — Kajabi's Footer
   section has its own Background Color field (Pages > Footer > Background),
   so David controls it natively. Default forest ships in settings_data.
   We keep only brand typography + text colors that read on a dark footer. */
.footer {
  color: color-mix(in srgb, var(--c-cream) 60%, transparent) !important;
}

.footer a,
.footer a.link-list__link,
.footer .footer__block a {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  color: color-mix(in srgb, var(--c-cream) 60%, transparent) !important;
  transition: color 0.3s var(--ease) !important;
}

.footer a:hover,
.footer a.link-list__link:hover {
  color: var(--c-sand) !important;
}

.footer .logo__text {
  font-family: var(--font-serif) !important;
  color: var(--c-sand) !important;
  letter-spacing: 0.12em !important;
}

.footer h1, .footer h2, .footer h3,
.footer h4, .footer h5, .footer h6 {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--c-sand) !important;
}

.copyright,
.footer .copyright,
.powered-by {
  color: color-mix(in srgb, var(--c-cream) 35%, transparent) !important;
  font-family: var(--font-sans) !important;
  border-top: 0.5px solid rgba(255,255,255,0.08) !important;
}

/* --- Sections / Page Content ------------------------------ */
.section-heading,
.section__heading,
[class*="section"] h1,
[class*="section"] h2 {
  font-family: var(--font-serif) !important;
}

/* Page hero area (system pages) */
.page-header,
.page__header {
  background-color: var(--c-forest) !important;
}

.page-header h1,
.page__header h1 {
  color: var(--c-cream) !important;
}

/* --- Forms ------------------------------------------------ */
input[type="email"],
input[type="text"],
input[type="password"],
textarea,
select {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  border-radius: 100px !important;
  border-color: var(--tint-hairline-2) !important;
  background: #fff !important;
  color: var(--c-text) !important;
}

input:focus,
textarea:focus {
  border-color: var(--c-forest) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--tint-hairline) !important;
}

/* --- Product / Course Cards ------------------------------- */
.kjb-commerce-item,
.product-card,
.offer-card {
  border-radius: 8px !important;
  border: 0.5px solid var(--tint-hairline) !important;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease) !important;
  overflow: hidden;
}

.kjb-commerce-item:hover,
.product-card:hover {
  border-color: var(--tint-hairline-2) !important;
  box-shadow: 0 12px 32px var(--tint-shadow) !important;
}

.kjb-commerce-item__title {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  color: var(--c-heading) !important;
}

/* --- Card blocks: uniform image size so cards line up ----- */
/* Card images render at their native aspect ratio, which makes the
   homepage offering cards uneven. Lock every card image to one ratio
   + cover-crop so the grid is consistent regardless of source photo. */
.card__image {
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- Native accordion blocks (converted curriculum / FAQ) -----
   Serif forest headings, dusty-rose +/- icon, hairline divider,
   centered narrow column. */
.block-type--accordion { flex:0 0 100% !important; max-width:840px; margin-left:auto !important; margin-right:auto !important; }
.accordion { border-bottom:0.5px solid var(--tint-hairline-2); }
.accordion-title { padding:1.15rem 0 !important; cursor:pointer; }
.accordion-title .media__body,
.accordion-title h5 {
  font-family:var(--font-serif) !important; font-size:1.2rem !important; font-weight:400 !important;
  color:var(--c-heading) !important; margin:0 !important; line-height:1.35 !important; }
.accordion-title:after { color:var(--c-rose) !important; font-size:1.05rem !important; }
.accordion-body { font-family:var(--font-sans); color:var(--c-text-2); line-height:1.75; padding:0.2rem 0 1.2rem !important; }
.accordion-body p { margin:0; }

/* --- Native feature blocks wrapping bespoke stb-card / stb-tcard ----
   Each card / testimonial / curriculum module is its own editable feature
   block; we strip Kajabi's feature shell so the stb- card is the visible unit,
   and stretch the chain so cards in a row share height. */
.block-type--feature { margin-bottom:1.5rem !important; display:flex; }
.block-type--feature .block { background:transparent !important; box-shadow:none !important; padding:0 !important; width:100%; }
.block-type--feature .feature { background:transparent !important; padding:0 !important; box-shadow:none !important; height:100%; }
.block-type--feature .feature__text { height:100%; }
.block-type--feature .feature__text > .stb { height:100%; }
.block-type--feature .stb-card,
.block-type--feature .stb-tcard { height:100%; margin:0; }

/* --- Native pricing blocks (Womb tuition) — styled like stb-tier --- */
.block-type--pricing { display:flex; margin-bottom:1.5rem; }
.block-type--pricing .block { background:#fff !important; border:0.5px solid var(--tint-hairline) !important;
  border-radius:12px !important; box-shadow:0 12px 34px var(--tint-shadow) !important;
  padding:2.6rem 2rem !important; text-align:center; width:100%; }
.pricing__name { font-family:var(--font-serif) !important; font-weight:400 !important; font-size:1.5rem !important; color:var(--c-heading) !important; margin:0 0 0.4rem; }
.pricing__price { font-family:var(--font-serif) !important; font-weight:300 !important; font-size:2.6rem !important; color:var(--c-primary) !important; margin:0; }
.pricing__heading { font-family:var(--font-sans) !important; font-size:0.62rem !important; font-weight:500 !important; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-primary) !important; margin:0.4rem 0 1rem; }
.pricing__content { color:var(--c-text-3); line-height:1.7; font-size:0.92rem; margin-bottom:1.5rem; }

/* --- Blog ------------------------------------------------- */
.blog-listing__title,
.post-card__title {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  color: var(--c-heading) !important;
}

/* --- Scroll Reveal Animation ------------------------------ */
@keyframes ayaora-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.section__content,
.hero__content,
.kjb-commerce-item {
  animation: ayaora-fade-up 0.7s var(--ease) forwards;
}

/* --- Despacho accent: a single marigold thread -------------
   One hairline of the one jewel, blooming on hover. Quieter and
   more confident than the old three-color gradient. */
.kjb-commerce-item,
.product-card,
.offer-card { position: relative; }

.kjb-commerce-item::after,
.product-card::after,
.offer-card::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; z-index: 2;
  background: var(--c-marigold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.kjb-commerce-item:hover::after,
.product-card:hover::after,
.offer-card:hover::after { transform: scaleX(1); }



/* ============================================================
   CUSTOM PAGE SYSTEM (stb- namespace) — for bespoke pages built
   as HTML inside Kajabi text blocks. Self-contained; won't collide
   with Kajabi's own classes. Full-bleed via viewport breakout.
   ============================================================ */
.stb { font-family: var(--font-sans); color: var(--c-text); }
.stb * { box-sizing: border-box; }
.stb-container { width:100%; max-width:1200px; margin:0 auto; padding:0 2rem; }
.stb-container--narrow { max-width:780px; }
.stb-section { padding: 6.5rem 0; }
.stb-bleed { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.stb-center { text-align:center; }

/* Eyebrow with despacho flower-bead */
.stb-eyebrow {
  font-family: var(--font-sans); font-size:0.7rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--c-olive-deep);
  display:inline-flex; align-items:center; gap:0.6rem; margin:0 0 1rem;
}
.stb-eyebrow::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--c-marigold); }
.stb-center .stb-eyebrow { justify-content:center; }

/* Headings inside pages (beat global heading rule where needed) */
.stb h1, .stb h2, .stb h3 { font-family:var(--font-serif) !important; font-weight:300 !important; line-height:1.12; }
.stb h1 { font-size:clamp(2.8rem,7vw,5rem); color:var(--c-heading) !important; letter-spacing:-0.02em; }
.stb h2 { font-size:clamp(2rem,4.5vw,3.2rem); color:var(--c-heading) !important; letter-spacing:-0.01em; }
.stb h3 { font-size:1.35rem; color:var(--c-heading) !important; }
.stb p { font-size:1rem; line-height:1.8; color:var(--c-text-2); }
.stb em { font-style:italic; }
.stb h1 em, .stb h2 em { color:var(--c-rose); }

/* Buttons */
.stb-btn { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-sans);
  font-size:0.8rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.85rem 2rem; border-radius:100px; cursor:pointer;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.stb-btn--primary { background:var(--c-btn-bg); color:var(--c-btn-text); }
.stb-btn--primary:hover { background:var(--c-btn-bg-hover); }
.stb-btn--ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55); }
.stb-btn--ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.stb-btn--dark { background:transparent; color:var(--c-heading); border:1px solid var(--c-heading); }
.stb-btn--dark:hover { background:var(--c-forest); color:var(--c-cream); }

/* HERO */
.stb-hero { position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; background:transparent; }
.stb-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.5; }

/* Hero images are NOT set in CSS anymore. The baked default photo is emitted by
   section_styles.liquid on #section-{id} — the SAME element Kajabi's Background
   Image picker writes to — via each hero section's `default_bg_asset` setting
   (e.g. guardians-hero.jpg). Picking an image in Kajabi cleanly replaces it.
   (CSS defaults on .section:has() used to lose to a wrapping element in Kajabi's
   DOM, which made the hero look "hardcoded" — that's why they're gone.) */
.stb-hero__overlay { position:absolute; inset:0; background:
  radial-gradient(120% 90% at 12% 18%, color-mix(in srgb, var(--c-marigold) 14%, transparent) 0%, transparent 42%),
  radial-gradient(130% 100% at 88% 92%, color-mix(in srgb, var(--c-primary) 26%, transparent) 0%, transparent 55%),
  linear-gradient(100deg,
    color-mix(in srgb, var(--c-forest) 88%, transparent) 0%,
    color-mix(in srgb, var(--c-forest) 70%, transparent) 40%,
    color-mix(in srgb, var(--c-forest) 32%, transparent) 72%,
    color-mix(in srgb, var(--c-forest) 46%, transparent) 100%); }
.stb-hero__inner { position:relative; z-index:2; max-width:720px; padding:7rem 0; }
.stb-hero__inner .stb-eyebrow { color:var(--c-sand); }
.stb-hero h1 { color:#fff !important; margin:0 0 0.5rem; text-shadow:0 1px 22px rgba(18,24,10,0.42); }
.stb-hero h1 em { color:var(--c-sand); }
.stb-hero__tagline, .stb .stb-hero__tagline { font-family:var(--font-serif); font-style:italic; font-size:1.6rem; color:var(--c-sand); margin:0 0 1.25rem; text-shadow:0 1px 18px rgba(18,24,10,0.5); }
.stb-hero__sub, .stb .stb-hero__sub { font-size:1.05rem; color:rgba(255,255,255,0.9); max-width:560px; margin:0 0 2.25rem; text-shadow:0 1px 16px rgba(18,24,10,0.5); }
.stb-hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* Generic section backgrounds */
/* All stb bands are TRANSPARENT. The color comes from the Kajabi section itself:
   section_styles.liquid paints section.settings.background_color directly on the
   .section element (overlay forced transparent when there is no bg image), so the
   section Background Color picker always shows through these bands — including the
   editor's live preview. Band defaults ship as each section's saved Background
   Color in settings_data (#FBF7F0 cream / #F2EDE3 cream2 / #2E3A1C forest). */
.stb-cream  { background: transparent; }
.stb-cream2 { background: transparent; }
.stb-forest { background: transparent; } /* section paints its Background Color (default forest in settings_data) */
.stb-forest h2 { color:var(--c-cream) !important; }
.stb-forest h2 em { color:var(--c-sand); }
.stb-forest p { color:color-mix(in srgb, var(--c-cream) 75%, transparent); }
.stb-forest .stb-eyebrow { color:var(--c-sand); }

/* Lead (italic invitation) */
.stb-lead { font-family:var(--font-serif); font-weight:300; font-style:italic;
  font-size:clamp(1.5rem,3vw,2.2rem); color:var(--c-heading) !important; line-height:1.4; max-width:760px; margin:0 auto 1.75rem; }
.stb-section__head { margin-bottom:3.5rem; }
.stb-section__head p { max-width:600px; margin-left:auto; margin-right:auto; }

/* Card grids (movements / curriculum) */
.stb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
.stb-card { background:#fff; border:0.5px solid var(--tint-hairline); border-radius:8px; padding:2rem 1.75rem; position:relative; overflow:hidden; }
.stb-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--c-marigold);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.stb-card:hover::before { transform:scaleX(1); }
.stb-card__num { font-family:var(--font-serif); font-size:2.4rem; font-weight:300; color:var(--c-sand); line-height:1; display:block; margin-bottom:0.6rem; }
.stb-card__kicker { font-family:var(--font-sans); font-size:0.7rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-primary); display:block; margin-bottom:0.5rem; }
.stb-card h3 { margin:0 0 0.5rem; }
.stb-card p { font-size:0.88rem; color:var(--c-text-3); line-height:1.7; margin:0; }

/* Pricing tiers */
.stb-tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; align-items:stretch; }
.stb-tier { background:#fff; border:0.5px solid var(--tint-hairline); border-radius:8px; padding:2.25rem 1.75rem; text-align:center; display:flex; flex-direction:column; }
.stb-tier--featured { border:1.5px solid var(--c-rose); box-shadow:0 14px 36px var(--tint-shadow); }
.stb-tier__badge { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-primary); min-height:0.9rem; margin-bottom:0.75rem; }
.stb-tier h3 { margin:0 0 0.35rem; }
.stb-tier__price { font-family:var(--font-serif); font-size:2.4rem; font-weight:300; color:var(--c-primary); margin-bottom:1.25rem; }
.stb-tier p { font-size:0.85rem; color:var(--c-text-3); line-height:1.7; margin:0 0 1.5rem; flex:1; }
.stb-tier .stb-btn { width:100%; justify-content:center; }

/* Split (teacher) */
.stb-split { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.stb-split__img { width:100%; aspect-ratio:3/4; background-size:cover; background-position:center; border-radius:8px; }

/* Custom-page photos baked into theme assets. CSS url() resolves relative to
   this stylesheet (assets/), so these find the sibling images on import.
   To swap a photo later: replace the file in assets/ with the same name. */
.stb-bg-ciclo-hero        { background-image:url('ciclo-hero.jpg') !important; }
.stb-bg-ciclo-portrait    { background-image:url('ciclo-portrait.jpg') !important; }
.stb-bg-guardians-hero    { background-image:url('guardians-hero.jpg') !important; }
.stb-bg-guardians-portrait{ background-image:url('guardians-portrait.jpg') !important; }
.stb-bg-santa-hero        { background-image:url('santa-hero.jpg') !important; }
.stb-bg-womb-hero         { background-image:url('womb-hero.jpg') !important; }
.stb-bg-seed-hero         { background-image:url('seed-hero.jpg') !important; }
.stb-bg-seed-feature      { background-image:url('seed-feature.jpg') !important; }
.stb-bg-doula-hero        { background-image:url('doula-hero.jpg') !important; }
.stb-bg-doula-feature     { background-image:url('doula-feature.jpg') !important; }
.stb-quote { border-left:2px solid var(--c-rose); padding-left:1.5rem; margin:2rem 0; }
.stb-quote p { font-family:var(--font-serif); font-size:1.45rem; font-style:italic; color:var(--c-heading) !important; line-height:1.5; }

/* Philosophy / despacho mandala */
.stb-philosophy { background: transparent; text-align:center; position:relative; overflow:hidden; } /* section paints its Background Color (default forest in settings_data) */
.stb-philosophy .stb-container { position:relative; z-index:1; }
.stb-philosophy::before { content:""; position:absolute; top:50%; left:50%; width:min(780px,94vw); aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--c-marigold) 12%, transparent) 0%, transparent 58%),
    repeating-radial-gradient(circle, transparent 0 45px, color-mix(in srgb, var(--c-sand) 7%, transparent) 45px 46px);
  -webkit-mask-image:radial-gradient(circle,#000 52%,transparent 72%); mask-image:radial-gradient(circle,#000 52%,transparent 72%); }
.stb-philosophy h2 { color:var(--c-cream) !important; max-width:820px; margin:0 auto 1.25rem; }
.stb-philosophy h2 em { color:var(--c-sand); }
.stb-philosophy p { color:color-mix(in srgb, var(--c-cream) 72%, transparent); max-width:600px; margin:0 auto; }

/* Form row (waitlist / opt-in slot) */
.stb-form { display:flex; gap:0.75rem; max-width:460px; margin:0 auto; }
.stb-form input { flex:1; font-family:var(--font-sans); font-weight:300; font-size:0.9rem; padding:0.9rem 1.25rem; border:none; border-radius:100px; background:rgba(255,255,255,0.95); color:var(--c-text); outline:none; }
.stb-slot { border:1px dashed rgba(255,255,255,0.4); border-radius:8px; padding:1.25rem; color:rgba(255,255,255,0.6); font-size:0.85rem; max-width:460px; margin:0 auto; }

/* FAQ accordion */
.stb-faq { max-width:760px; margin:2.5rem auto 0; }
.stb-faq details { border-bottom:0.5px solid var(--tint-hairline-2); padding:1.25rem 0; }
.stb-faq summary { font-family:var(--font-serif); font-size:1.25rem; color:var(--c-heading); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.stb-faq summary::-webkit-details-marker { display:none; }
.stb-faq summary::after { content:"+"; font-size:1.4rem; color:var(--c-rose); transition:transform .3s var(--ease); }
.stb-faq details[open] summary::after { transform:rotate(45deg); }
.stb-faq details p { margin-top:0.85rem; }

@media (max-width:900px){ .stb-split{ grid-template-columns:1fr; gap:3rem; } }
@media (max-width:640px){ .stb-section{ padding:4.5rem 0; } .stb-hero__actions{ flex-direction:column; align-items:flex-start; } .stb-form{ flex-direction:column; } }

/* Testimonials (despacho cards) */
.stb-tgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.stb-tcard { background:#fff; border:0.5px solid var(--tint-hairline); border-radius:8px; padding:2rem; }
.stb-tcard p { font-family:var(--font-serif); font-size:1.1rem; font-style:italic; color:var(--c-heading) !important; line-height:1.6; margin:0 0 1rem; }
.stb-tcard cite { font-family:var(--font-sans); font-style:normal; font-size:0.75rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-text-3); }

/* Checklist */
.stb-list { max-width:700px; margin:0 auto; list-style:none; padding:0; }
.stb-list li { position:relative; padding:0.6rem 0 0.6rem 1.6rem; border-bottom:0.5px solid var(--tint-hairline); font-size:1rem; line-height:1.7; color:var(--c-text-2); }
.stb-list li::before { content:""; position:absolute; left:0; top:1.15rem; width:7px; height:7px; border-radius:50%; background:var(--c-rose); }
.stb-list li strong { color:var(--c-heading); font-weight:500; }
/* Stats row */
.stb-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem 3.5rem; margin-top:1rem; }
.stb-stat { text-align:center; }
.stb-stat__n { display:block; font-family:var(--font-serif); font-size:3rem; font-weight:300; color:var(--c-primary); line-height:1; }
.stb-stat__l { display:block; font-family:var(--font-sans); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-olive-deep); margin-top:0.5rem; }