/* ============================================================
   DANCING BEARS — liitt x Grateful Dead Microflame landing page
   Theme tokens ported from the liitt Design System export
   (tokens/microflame.css) + component styles translated from the
   design system's React components. Scope: [data-theme="microflame"].
   Layout tokens (--ff-max-width, --ff-space-*, --ff-radius-pill, etc.)
   already exist in the shared css/tokens.css — only theme-specific
   color/type/background tokens are redefined here.
   Fonts: loaded via a <link> in the page's `styles:` frontmatter
   (see dancingbears.html) rather than @import here — @import forces a
   serial fetch waterfall (download this file, parse it, discover the
   import, THEN fetch the font CSS) instead of a parallel <link> fetch,
   which was delaying first paint.
   ============================================================ */

[data-theme="microflame"] {
  /* ---- Backgrounds ---- */
  --ff-bg-base: #0A0614;
  --ff-bg-section-alt: #140B22;
  --ff-bg-deep: #07040F;
  --ff-bg-well: #0D0719;
  --ff-surface: #1A1030;
  --ff-surface-raised: #251642;
  --ff-card: #170D2B;
  --ff-card-feature-a: #2E1550;
  --ff-card-feature-b: #180C2E;

  /* ---- Gold ---- */
  --ff-accent-gold: #EFC15C;
  --ff-accent-gold-bright: #FFD98A;
  --mf-gold-deep: #C8912F;
  --mf-gold-line: #D9A742;
  --mf-gold-gradient: linear-gradient(180deg, #FFE6A8, #EFC15C 45%, #C8912F);

  /* ---- Violet / lilac ---- */
  --ff-accent-indigo: #6A2FB5;
  --ff-accent-indigo-light: #9B6BE8;
  --ff-accent-violet: #7B3FC4;
  --mf-lilac: #C49BFF;
  --mf-lilac-deep: #8B5BD6;
  --mf-violet-glow: rgba(150, 80, 235, .38);

  /* ---- Rose ---- */
  --ff-accent-raspberry: #B22B3E;
  --mf-rose: #C0303A;
  --mf-rose-deep: #7E1922;
  --mf-rose-line: rgba(192, 48, 58, .55);

  /* ---- Steal Your Face lockup colours ---- */
  --mf-syf-red: #E02B20;
  --mf-syf-blue: #1E4FD8;

  /* ---- Tie-dye ramp ---- */
  --mf-tiedye: linear-gradient(90deg, #E8342B, #F5901E, #F5D423, #3FA845, #2A63D8, #8B3FC4, #E8342B);

  /* ---- Text ---- */
  --ff-text-primary: #FFFFFF;
  --ff-text-body: #D8CFE8;
  --ff-text-muted: #9A8DB8;
  --ff-text-on-accent: #160B26;
  --ff-strike: #7A6B96;

  /* ---- Borders ---- */
  --ff-border-subtle: rgba(239, 193, 92, .16);
  --ff-border-emphasis: #EFC15C;
  --ff-border-gold: rgba(239, 193, 92, .60);
  --ff-border-gold-soft: rgba(239, 193, 92, .26);
  --mf-border-hairline: rgba(239, 193, 92, .28);

  /* ---- Semantic ---- */
  --ff-positive: #5CC28A;
  --ff-positive-bright: #9BE8B2;
  --ff-negative: #E0544A;
  --ff-negative-soft: #EE8A82;

  /* ---- Gold tints ---- */
  --ff-gold-tint-06: rgba(239, 193, 92, .06);
  --ff-gold-tint-08: rgba(239, 193, 92, .09);
  --ff-gold-tint-12: rgba(239, 193, 92, .13);
  --ff-gold-tint-14: rgba(239, 193, 92, .15);
  --ff-gold-tint-40: rgba(239, 193, 92, .42);

  /* ---- Type ---- */
  --ff-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ff-font-body: 'Poppins', system-ui, sans-serif;
  --ff-font-ui: 'Poppins', system-ui, sans-serif;
  --mf-font-poster: 'Bricolage Grotesque', system-ui, sans-serif;
  --mf-track-caps: .06em;
  --mf-track-subhead: .10em;
  --mf-track-eyebrow: .22em;

  /* ---- Radius ---- */
  --ff-radius-md: 12px;
  --ff-radius-lg: 18px;
  --ff-radius-xl: 22px;
  --ff-radius-2xl: 26px;
  --ff-radius-panel: 28px;

  /* ---- Shadow & glow ---- */
  --ff-shadow-card: 0 14px 44px rgba(6, 2, 16, .6);
  --ff-shadow-raised: 0 26px 76px rgba(6, 2, 16, .72);
  --ff-shadow-review: 0 18px 52px rgba(6, 2, 16, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  --ff-shadow-selected: 0 0 0 1px rgba(239, 193, 92, .30), 0 14px 38px rgba(6, 2, 16, .6);
  --ff-glow-gold: 0 8px 34px rgba(239, 193, 92, .48);
  --ff-glow-gold-soft: 0 8px 30px rgba(239, 193, 92, .24);
  --ff-glow-cta: 0 0 38px rgba(239, 193, 92, .40);
  --ff-glow-violet: 0 0 72px rgba(150, 80, 235, .34);
  --mf-glow-art: 0 0 90px rgba(150, 80, 235, .30);
  --mf-glow-rose: 0 0 40px rgba(192, 48, 58, .28);

  /* ---- Background recipes ---- */
  --mf-ink-void: #07040F;
  --mf-bg-starfield:
    radial-gradient(120% 90% at 50% 0%, rgba(123, 63, 196, .30), rgba(10, 6, 20, 0) 58%),
    radial-gradient(90% 70% at 80% 100%, rgba(192, 48, 58, .14), rgba(10, 6, 20, 0) 60%),
    linear-gradient(180deg, #0A0614, #07040F);
  --mf-bg-dusk: linear-gradient(180deg, #2A1245 0%, #160B28 46%, #0A0614 100%);
  --mf-bg-art-well: radial-gradient(120% 120% at 50% 18%, #33174F, #0B0618 76%);
}

[data-theme="microflame"] {
  background: var(--ff-bg-base);
  color: var(--ff-text-body);
  font-family: var(--ff-font-body);
}

/* Smooth-scroll in-page CTAs (e.g. "Try MicroFlame" → #pricing bundles) */
html { scroll-behavior: smooth; }
#pricing { scroll-margin-top: 16px; }

/* Keep the Gorgias chat launcher above the mobile sticky buy-bar so it never
   covers the ADD TO CART button (launcher = iframe#chat-button, fixed bottom:20px). */
@media (max-width: 767px) {
  #chat-button,
  #mount-floating-engagement-widget {
    bottom: 90px !important;
  }
}

/* ---- Video testimonials ---- */
.mf-vtestis {
  display: flex; flex-wrap: wrap; gap: 18px;
  justify-content: center; align-items: flex-start;
  margin: 30px 0 4px;
}
.mf-vtesti {
  position: relative; margin: 0;
  /* Height is uniform across the row; width follows each clip's aspect ratio
     (--vt-ar) so 4:5 and 9:16 sources both show uncropped. */
  height: 380px; width: auto; aspect-ratio: var(--vt-ar, 4 / 5);
  max-width: 92vw;
  border-radius: var(--ff-radius-lg); overflow: hidden;
  background: var(--mf-ink-void);
  border: 1.5px solid var(--mf-border-hairline);
  box-shadow: var(--ff-glow-gold-soft);
}
.mf-vtesti__name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 12px 11px; display: flex; flex-direction: column; gap: 1px;
  font-family: var(--ff-font-ui); color: #fff;
  background: linear-gradient(to top, rgba(10, 6, 20, .9), transparent);
  transition: opacity .2s ease;
}
.mf-vtesti__who { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; line-height: 1.15; }
.mf-vtesti__who img { width: 15px; height: 15px; flex-shrink: 0; }
.mf-vtesti__name small { font-weight: 600; opacity: .8; font-size: 11.5px; letter-spacing: .02em; }
.mf-vtesti.is-playing .mf-vtesti__name { opacity: 0; pointer-events: none; }
.mf-vtesti__vid {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--mf-ink-void);
}
.mf-vtesti__play {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; display: grid; place-items: center;
  border: none; border-radius: 50%; cursor: pointer;
  color: var(--mf-ink-void, #140a24);
  background: linear-gradient(95deg, var(--ff-accent-gold-bright, #ffd874), var(--ff-accent-gold, #e6b64c));
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  transition: transform .2s ease, opacity .2s ease;
}
.mf-vtesti__play svg { margin-left: 3px; }
.mf-vtesti__play:hover { transform: scale(1.06); }
.mf-vtesti.is-playing .mf-vtesti__play { opacity: 0; pointer-events: none; }
.mf-vtesti__badge {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  font-family: var(--ff-font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .03em; color: var(--ff-text-primary);
  background: rgba(10, 6, 20, .62); backdrop-filter: blur(4px);
  transition: opacity .2s ease;
}
.mf-vtesti__badge img { width: 13px; height: 13px; }
.mf-vtesti.is-playing .mf-vtesti__badge { opacity: 0; }

/* ---- Keyframes ---- */
@keyframes mfAuraSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mfAuraDrift {
  0% { transform: translate3d(-7%, -5%, 0) rotate(0deg); }
  50% { transform: translate3d(7%, 6%, 0) rotate(180deg); }
  100% { transform: translate3d(-7%, -5%, 0) rotate(360deg); }
}
@keyframes mfSpiralSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mfTieDyeSlide { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }

@media (prefers-reduced-motion: reduce) {
  [data-theme="microflame"] [data-mf-anim],
  [data-theme="microflame"] .mf-tiedye-text,
  [data-theme="microflame"] .mf-marquee-track {
    animation: none !important;
  }
}

/* ============================================================
   Announcement bar + nav
   ============================================================ */
.mf-announce {
  background: var(--mf-gold-gradient);
  color: var(--ff-text-on-accent);
  text-align: center;
  padding: 9px 16px;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mf-tiedye-rule {
  height: 3px;
  width: 100%;
  background: var(--mf-tiedye);
}

.mf-nav {
  position: relative;
  z-index: 30;
  background: var(--mf-ink-void);
  border-bottom: 1px solid var(--mf-border-hairline);
  padding: 14px 0;
}
.mf-nav__inner {
  max-width: var(--ff-max-width-wide, 1440px);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mf-nav__links {
  display: none;
  align-items: center;
  gap: 32px;
}
.mf-nav__link {
  font-family: var(--ff-font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ff-text-body);
  text-decoration: none;
  transition: color .2s ease;
}
.mf-nav__link:hover { color: var(--ff-accent-gold); }
.mf-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--mf-gold-gradient);
  color: var(--ff-text-on-accent);
  font-family: var(--ff-font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--ff-glow-gold-soft);
  transition: filter .15s ease, box-shadow .15s ease;
}
.mf-nav__cta:hover { filter: brightness(1.06); box-shadow: var(--ff-glow-gold); }
.mf-nav__toggle {
  display: flex;
  width: 34px;
  height: 20px;
  align-items: center;
  justify-content: center;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}
.mf-nav__toggle span {
  position: absolute;
  left: 0;
  display: block;
  width: 28px;
  height: 2.5px;
  border-radius: 20px;
  background: var(--ff-accent-gold);
  transition: transform .2s ease, opacity .15s ease;
}
.mf-nav__toggle span:nth-child(1) { transform: translateY(-7px); }
.mf-nav__toggle span:nth-child(3) { transform: translateY(7px); }
.mf-nav__toggle.is-open span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.mf-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.mf-nav__toggle.is-open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
.mf-nav__drawer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .28s ease, opacity .2s ease;
}
.mf-nav__drawer.is-open { max-height: 260px; opacity: 1; }
.mf-nav__drawer nav {
  display: flex;
  flex-direction: column;
  padding: 8px 40px 4px;
}
.mf-nav__drawer .mf-nav__link {
  padding: 12px 0;
  border-top: 1px solid var(--mf-border-hairline);
}

@media (min-width: 768px) {
  .mf-nav__links { display: flex; }
  .mf-nav__toggle { display: none; }
}

/* ============================================================
   CollabLockup
   ============================================================ */
.mf-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mf-lockup--stacked { flex-direction: column; gap: 10px; }
.mf-lockup__marks {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mf-lockup__marks img { display: block; width: auto; object-fit: contain; }
.mf-lockup__x {
  font-family: var(--ff-font-ui);
  font-size: 18px;
  color: var(--ff-accent-gold);
  opacity: .8;
  line-height: 1;
}
.mf-lockup__word {
  font-family: var(--mf-font-poster);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ff-accent-gold);
  white-space: nowrap;
}
.mf-lockup__word sup { font-size: .6em; }

/* ============================================================
   PosterTitle
   ============================================================ */
.mf-poster {
  text-align: center;
  margin: 0 0 0;
}
.mf-poster--left { text-align: left; }
.mf-poster__h {
  margin: 0;
  font-family: var(--mf-font-poster);
  font-weight: 900;
  line-height: .95;
  letter-spacing: var(--mf-track-caps);
  text-transform: uppercase;
  color: var(--ff-accent-gold);
  text-shadow: 0 1px 0 rgba(200, 145, 47, .45), 0 0 34px rgba(239, 193, 92, .20);
  text-wrap: balance;
}
.mf-poster__h--xl { font-size: 44px; }
.mf-poster__h--lg { font-size: 38px; }
.mf-poster__h--md { font-size: 30px; }
.mf-poster__h--sm { font-size: 24px; }
.mf-poster__h.mf-poster__h--tiedye {
  background: var(--mf-tiedye);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mfTieDyeSlide 11s linear infinite;
  filter: saturate(1.25) drop-shadow(0 0 26px rgba(150, 80, 235, .45));
  text-shadow: none;
}
.mf-poster__sub {
  margin: 14px 0 0;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: var(--mf-track-subhead);
  text-transform: uppercase;
  color: var(--mf-lilac);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .mf-poster__h--xl { font-size: 60px; }
  .mf-poster__h--lg { font-size: 44px; }
  .mf-poster__h--md { font-size: 34px; }
  .mf-poster__h--sm { font-size: 26px; }
}

/* ============================================================
   ArtBleed — unframed art that dissolves into the section ground
   ============================================================ */
.mf-artbleed {
  position: relative;
  margin: 0 auto;
  line-height: 0;
}
.mf-artbleed img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.mf-artbleed--aspect img { height: 100%; object-fit: cover; }
.mf-artbleed__bloom {
  position: absolute;
  inset: -11% -13%;
  pointer-events: none;
}
.mf-artbleed__bloom--violet { background: radial-gradient(58% 48% at 50% 50%, rgba(126, 58, 214, .34), transparent 74%); }
.mf-artbleed__bloom--rose { background: radial-gradient(60% 50% at 50% 55%, rgba(192, 48, 58, .30), transparent 72%); }
.mf-artbleed__fade { position: absolute; pointer-events: none; }
.mf-artbleed__fade--top { top: 0; left: 0; right: 0; background: linear-gradient(to bottom, var(--mf-ink-void) 0%, var(--mf-ink-void) 7%, transparent 100%); }
.mf-artbleed__fade--bottom { bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--mf-ink-void) 0%, var(--mf-ink-void) 7%, transparent 100%); }
.mf-artbleed__fade--left { top: 0; bottom: 0; left: 0; background: linear-gradient(to right, var(--mf-ink-void) 0%, var(--mf-ink-void) 7%, transparent 100%); }
.mf-artbleed__fade--right { top: 0; bottom: 0; right: 0; background: linear-gradient(to left, var(--mf-ink-void) 0%, var(--mf-ink-void) 7%, transparent 100%); }

/* ============================================================
   PsychFrame — bordered art panel for thumbnails/inset media
   ============================================================ */
.mf-psychframe {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ff-radius-xl);
  border: 1px solid var(--mf-border-hairline);
  background: var(--mf-bg-art-well);
}
.mf-psychframe--violet { box-shadow: var(--mf-glow-art); }
.mf-psychframe--rose { box-shadow: var(--mf-glow-rose); }
.mf-psychframe img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mf-psychframe::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(239, 193, 92, .12), inset 0 -70px 80px -50px rgba(10, 6, 20, .9);
  border-radius: inherit;
}

/* ============================================================
   IconGrid — cross-ruled glyph grid (JOIN THE JOURNEY)
   ============================================================ */
.mf-icongrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.mf-icongrid__item {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 26px 18px;
  border-right: 1px solid var(--mf-border-hairline);
  border-bottom: 1px solid var(--mf-border-hairline);
}
.mf-icongrid__item:nth-child(2n) { border-right: none; }
.mf-icongrid__item:nth-last-child(-n+2) { border-bottom: none; }
.mf-icongrid__icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(239, 193, 92, .28));
}
.mf-icongrid__label {
  display: block;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ff-text-primary);
  text-align: center;
}
.mf-icongrid__sublabel {
  display: block;
  margin-top: 5px;
  font-family: var(--ff-font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ff-text-muted);
  text-align: center;
}

/* ============================================================
   IconStat — ringed/unringed icon + two-line label (trust rows, seal)
   ============================================================ */
.mf-iconstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.mf-iconstat--left { align-items: flex-start; text-align: left; }
.mf-iconstat__art {
  display: grid;
  place-items: center;
  color: var(--mf-gold-line);
  flex-shrink: 0;
}
.mf-iconstat__art--ringed {
  border-radius: 50%;
  border: 1.5px solid var(--mf-border-hairline);
}
.mf-iconstat__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mf-iconstat__label {
  display: block;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ff-text-primary);
}
.mf-iconstat__sublabel {
  display: block;
  margin-top: 4px;
  font-family: var(--ff-font-ui);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ff-text-muted);
}

/* ============================================================
   RitualStep — numbered ritual / benefit row
   ============================================================ */
.mf-ritualstep {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  list-style: none;
}
.mf-ritualstep__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--mf-gold-line);
}
.mf-ritualstep__icon--ringed {
  border: 1.5px solid var(--mf-border-hairline);
  background: var(--ff-gold-tint-06);
}
.mf-ritualstep__icon img { width: 100%; height: 100%; object-fit: contain; }
.mf-ritualstep__icon--ringed img { width: 26px; height: 26px; }
.mf-ritualstep__title {
  display: block;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ff-accent-gold);
}
.mf-ritualstep__body {
  display: block;
  margin-top: 6px;
  font-family: var(--ff-font-ui);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ff-text-body);
}

/* ============================================================
   QuoteFrame — corner-dotted mantra frame
   ============================================================ */
.mf-quoteframe {
  position: relative;
  border: 1px solid var(--mf-rose-line);
  border-radius: 4px;
  padding: 22px 28px;
  max-width: 420px;
  margin: 0 auto;
}
.mf-quoteframe--gold { border-color: var(--mf-border-hairline); }
.mf-quoteframe__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--mf-rose-line);
  background: var(--ff-bg-base);
}
.mf-quoteframe--gold .mf-quoteframe__dot { border-color: var(--mf-border-hairline); }
.mf-quoteframe__dot--tl { top: -4px; left: -4px; }
.mf-quoteframe__dot--tr { top: -4px; right: -4px; }
.mf-quoteframe__dot--bl { bottom: -4px; left: -4px; }
.mf-quoteframe__dot--br { bottom: -4px; right: -4px; }
.mf-quoteframe p {
  margin: 0;
  text-align: center;
  font-family: var(--ff-font-ui);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--mf-lilac);
  text-wrap: balance;
}
.mf-quoteframe--gold p { color: var(--ff-accent-gold); }

/* ============================================================
   Mantra lines (plain centred mantra text used between sections)
   ============================================================ */
.mf-mantra {
  margin: 0;
  text-align: center;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mf-lilac);
}
.mf-mantra--gold { color: var(--ff-accent-gold); }

/* ============================================================
   TieDyeAura / SpiralMotif — psychedelic decorative layers
   ============================================================ */
.mf-aura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.mf-aura--soft { opacity: .18; }
.mf-aura--medium { opacity: .30; }
.mf-aura--riot { opacity: .68; }
.mf-aura img {
  position: absolute;
  will-change: transform;
  transform: translateZ(0);
}

.mf-spiral {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  overflow: hidden;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.08) 46%, transparent 60%);
  mask-image: radial-gradient(circle, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.08) 46%, transparent 60%);
}
.mf-spiral img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: mfSpiralSpin 220s linear infinite;
}
.mf-spiral--reverse img { animation-direction: reverse; }

/* ============================================================
   TieDyeDivider — band variant carrying the bear-spiral art
   ============================================================ */
.mf-divider-band {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-top: 1px solid var(--mf-border-hairline);
  border-bottom: 1px solid var(--mf-border-hairline);
  background: var(--ff-bg-deep);
}
.mf-divider-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  mix-blend-mode: screen;
}
.mf-divider-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ff-bg-deep), rgba(7, 4, 15, 0) 22%, rgba(7, 4, 15, 0) 78%, var(--ff-bg-deep));
}
.mf-divider-band__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--mf-track-eyebrow);
  text-transform: uppercase;
  color: var(--ff-accent-gold);
  text-shadow: 0 2px 12px rgba(7, 4, 15, .9);
  text-align: center;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .mf-divider-band { height: 280px; }
}

/* ============================================================
   MantraMarquee
   ============================================================ */
.mf-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--mf-border-hairline);
  border-bottom: 1px solid var(--mf-border-hairline);
  background: var(--ff-bg-deep);
  padding: 14px 0;
}
.mf-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: mfMarquee 40s linear infinite;
}
.mf-marquee--reverse .mf-marquee-track { animation-direction: reverse; }
.mf-marquee-item {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  flex-shrink: 0;
}
.mf-marquee-item span.mf-tiedye-text {
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--mf-tiedye);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mfTieDyeSlide 9s linear infinite;
}
.mf-marquee-item img { height: 24px; width: auto; flex-shrink: 0; }
.mf-marquee__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ff-bg-deep), rgba(7, 4, 15, 0) 12%, rgba(7, 4, 15, 0) 88%, var(--ff-bg-deep));
}

/* ============================================================
   GoldStars
   ============================================================ */
.mf-stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mf-stars img {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 6px rgba(232, 184, 74, .55));
}
.mf-stars__label {
  font-family: var(--ff-font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--ff-text-body);
  margin-left: 4px;
}

/* ============================================================
   Button
   ============================================================ */
.mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--ff-font-ui);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mf-btn--pill {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  padding: 18px 28px;
  font-size: 17px;
  color: var(--ff-text-on-accent);
  /* premium gold face + a slow ember sheen sweeping across it */
  background-image:
    linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .5) 50%, transparent 66%),
    var(--mf-gold-gradient);
  background-size: 260% 100%, 100% 100%;
  background-position: -80% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: var(--ff-glow-cta);
  animation: mfCtaSheen 5.5s ease-in-out infinite;
}
/* ⚡ lightning bolt before every pill CTA label */
.mf-btn--pill::before {
  content: "\26A1";
  font-size: 1.05em;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
}
/* animated tie-dye "Steal Your Face" rainbow halo glowing behind the pill */
.mf-btn--pill::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px;
  border-radius: inherit;
  background: var(--mf-tiedye);
  background-size: 200% 100%;
  filter: blur(15px);
  opacity: .55;
  pointer-events: none;
  animation: mfCtaHalo 4.6s ease-in-out infinite, mfCtaDrift 7s linear infinite;
}
.mf-btn--pill:hover { filter: brightness(1.06); }
.mf-btn--pill:hover::after { opacity: .9; }
.mf-btn--pill:active { transform: translateY(1px); }
.mf-btn--full { width: 100%; }

@keyframes mfCtaSheen {
  0%       { background-position: -80% 0, 0 0; }
  55%, 100% { background-position: 180% 0, 0 0; }
}
@keyframes mfCtaHalo {
  0%, 100% { opacity: .5;  filter: blur(15px) hue-rotate(0deg); }
  50%      { opacity: .85; filter: blur(19px) hue-rotate(45deg); }
}
@keyframes mfCtaDrift {
  from { background-position: 0 0; }
  to   { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-btn--pill { animation: none; background-position: 200% 0, 0 0; }
  .mf-btn--pill::after { animation: none; }
}

/* ============================================================
   PromoPill
   ============================================================ */
.mf-promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px dashed var(--ff-border-gold-soft);
  background: var(--ff-gold-tint-06);
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ff-accent-gold);
  cursor: pointer;
}
.mf-promo--applied {
  border-style: solid;
  border-color: var(--ff-border-gold);
  background: var(--ff-gold-tint-12);
  color: var(--ff-positive-bright);
}

/* ============================================================
   GiftProgress
   ============================================================ */
.mf-giftprogress__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ff-font-ui);
  font-size: 13.5px;
  color: var(--ff-text-body);
}
.mf-giftprogress__timer {
  font-weight: 800;
  color: var(--ff-accent-gold);
  font-variant-numeric: tabular-nums;
}
.mf-giftprogress__bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: var(--ff-gold-tint-08);
  overflow: hidden;
}
.mf-giftprogress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mf-gold-gradient);
}

/* ============================================================
   TrustRow
   ============================================================ */
.mf-trustrow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
}
.mf-trustrow__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-font-ui);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ff-text-body);
}
.mf-trustrow__item img { width: 14px; height: 14px; flex-shrink: 0; }
.mf-trustrow__stock {
  width: 100%;
  margin-top: 4px;
  font-family: var(--ff-font-ui);
  font-size: 12.5px;
  color: var(--ff-text-muted);
}

/* ============================================================
   Bundle tier selector (real SDK bundle cards, themed)
   ============================================================ */
.mf-tiers {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mf-tier {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--ff-radius-lg);
  border: 1.5px solid var(--mf-border-hairline);
  background: var(--ff-card);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  position: relative;
  text-align: left;
}
.mf-tier[data-next-selected="true"],
.mf-tier.next-selected {
  border-color: var(--ff-accent-gold);
  background: linear-gradient(180deg, rgba(239, 193, 92, .10), rgba(239, 193, 92, .02)), var(--ff-card);
  box-shadow: var(--ff-shadow-selected);
}
.mf-tier__radio {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #4A4566;
  position: relative;
}
.mf-tier[data-next-selected="true"] .mf-tier__radio,
.mf-tier.next-selected .mf-tier__radio {
  border-color: var(--ff-accent-gold);
}
.mf-tier[data-next-selected="true"] .mf-tier__radio::after,
.mf-tier.next-selected .mf-tier__radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--ff-accent-gold);
}
.mf-tier__img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.mf-tier__main { flex: 1; min-width: 0; }
.mf-tier__title-row { display: flex; align-items: center; gap: 8px; }
.mf-tier__name {
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--ff-text-primary);
}
.mf-tier__pack {
  display: block;
  margin-top: 2px;
  font-family: var(--ff-font-ui);
  font-size: 12.5px;
  color: var(--ff-text-muted);
}
.mf-tier__flag {
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.mf-tier__flag--solid { background: var(--mf-gold-gradient); color: var(--ff-text-on-accent); }
.mf-tier__flag--outline { border: 1px solid var(--ff-border-gold); color: var(--ff-accent-gold); }
.mf-tier__price { text-align: right; flex-shrink: 0; }
.mf-tier__now {
  display: block;
  font-family: var(--ff-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--ff-accent-gold);
}
.mf-tier__was {
  display: block;
  font-family: var(--ff-font-ui);
  font-size: 12px;
  color: var(--ff-strike);
  text-decoration: line-through;
}
.mf-tier__save {
  display: block;
  font-family: var(--ff-font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--ff-positive-bright);
}

/* ============================================================
   PricingCard — "Pick Your Pressing" grid
   ============================================================ */
.mf-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
  max-width: var(--ff-max-width-pricing, 1080px);
  margin-left: auto;
  margin-right: auto;
}
.mf-pricing-card {
  position: relative;
  border-radius: var(--ff-radius-2xl);
  border: 1.5px solid var(--mf-border-hairline);
  background: var(--ff-card);
  padding: 24px;
  text-align: center;
  box-shadow: var(--ff-shadow-card);
}
.mf-pricing-card--featured {
  background: linear-gradient(180deg, #241B4A, #181232);
  border-color: rgba(239, 193, 92, .55);
  box-shadow: var(--ff-shadow-raised);
}
.mf-pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--mf-gold-gradient);
  color: var(--ff-text-on-accent);
  white-space: nowrap;
}
.mf-pricing-card img.mf-pricing-card__img {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 8px auto 14px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.4));
}
.mf-pricing-card__gift {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ff-accent-gold);
}
.mf-pricing-card__name {
  margin: 10px 0 0;
  font-family: var(--ff-font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--ff-text-primary);
}
.mf-pricing-card__perunit {
  margin: 4px 0 0;
  font-family: var(--ff-font-ui);
  font-size: 12.5px;
  color: var(--ff-text-muted);
}
.mf-pricing-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.mf-pricing-card__price {
  font-family: var(--ff-font-display);
  font-weight: 900;
  font-size: 32px;
  color: var(--ff-accent-gold);
}
.mf-pricing-card__was {
  font-family: var(--ff-font-ui);
  font-size: 15px;
  color: var(--ff-strike);
  text-decoration: line-through;
}
.mf-pricing-card .mf-btn { margin-top: 18px; width: 100%; padding: 14px 20px; font-size: 14px; }

@media (min-width: 768px) {
  .mf-pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ReviewCard
   ============================================================ */
.mf-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 44px;
}
.mf-review-card {
  border-radius: var(--ff-radius-xl);
  background: linear-gradient(180deg, rgba(28, 23, 54, .98), rgba(16, 12, 33, .98));
  border: 1px solid var(--mf-border-hairline);
  box-shadow: var(--ff-shadow-review);
  padding: 22px;
}
.mf-review-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--ff-radius-md);
  object-fit: cover;
  margin-bottom: 16px;
}
.mf-review-card__stars { margin-bottom: 10px; }
.mf-review-card__title {
  margin: 0 0 8px;
  font-family: var(--ff-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ff-text-primary);
}
.mf-review-card__body {
  margin: 0;
  font-family: var(--ff-font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ff-text-body);
}
.mf-review-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.mf-review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.mf-review-card__name {
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--ff-text-primary);
}
.mf-review-card__date {
  display: block;
  font-family: var(--ff-font-ui);
  font-size: 11px;
  color: var(--ff-text-muted);
}
.mf-review-card__verified {
  margin-left: auto;
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .mf-reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   FaqAccordion
   ============================================================ */
.mf-faq { display: flex; flex-direction: column; gap: 10px; }
.mf-faq__item {
  border: 1px solid var(--mf-border-hairline);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-card);
  overflow: hidden;
}
.mf-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--ff-text-primary);
}
.mf-faq__chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform .25s ease; }
.mf-faq__item.is-open .mf-faq__chevron { transform: rotate(180deg); }
.mf-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.mf-faq__item.is-open .mf-faq__a { max-height: 240px; }
.mf-faq__a p {
  margin: 0;
  padding: 0 20px 18px;
  font-family: var(--ff-font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ff-text-body);
}

/* ============================================================
   Sticky buy bar
   ============================================================ */
.mf-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--ff-surface-raised);
  border-top: 1px solid var(--ff-border-gold-soft);
  box-shadow: 0 -10px 40px rgba(5, 3, 18, .5);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.mf-sticky-bar.is-visible { transform: translateY(0); }
.mf-sticky-bar__img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; border-radius: 8px; }
.mf-sticky-bar__info { flex: 1; min-width: 0; }
.mf-sticky-bar__name { display: block; font-family: var(--ff-font-ui); font-weight: 700; font-size: 12.5px; color: var(--ff-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-sticky-bar__price { font-family: var(--ff-font-display); font-weight: 800; font-size: 14px; color: var(--ff-accent-gold); }
.mf-sticky-bar .mf-btn { padding: 12px 20px; font-size: 13px; flex-shrink: 0; }

@media (min-width: 768px) {
  .mf-sticky-bar { display: none; }
}

/* ============================================================
   Section shell + panel column
   ============================================================ */
.mf-section { position: relative; overflow: hidden; }
.mf-section__inner { position: relative; max-width: var(--ff-max-width, 1200px); margin: 0 auto; padding: 76px 40px; }
.mf-section__inner--panel { max-width: 660px; }

/* Pull the "What is Microflame?" and ritual sections closer together */
#microdosing .mf-section__inner { padding-bottom: 40px; }
#ritual .mf-section__inner { padding-top: 40px; }

/* ============================================================
   Footer
   ============================================================ */
.mf-footer {
  position: relative;
  overflow: hidden;
  background: var(--ff-bg-deep);
  border-top: 1px solid var(--mf-border-hairline);
  padding: 56px 40px 40px;
}
.mf-footer__inner {
  position: relative;
  max-width: var(--ff-max-width, 1200px);
  margin: 0 auto;
  display: grid;
  gap: 26px;
  justify-items: center;
  text-align: center;
}
.mf-footer__tagline {
  margin: 0;
  font-family: var(--ff-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--mf-lilac);
}
.mf-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.mf-footer__nav a { font-family: var(--ff-font-ui); font-size: 13px; font-weight: 500; color: var(--ff-text-body); text-decoration: none; }
.mf-footer__copy { margin: 0; font-family: var(--ff-font-ui); font-size: 12px; color: var(--ff-text-muted); }
.mf-footer__legal { margin: 0; max-width: 76ch; font-family: var(--ff-font-ui); font-size: 11.5px; line-height: 1.7; color: var(--ff-text-muted); }