/* ======================================================================================================
   File:    mamadex.css
   Path:    /assets/css/mamadex/mamadex.css
   Version: v4.7.0
   Issued:  2026-03-28
   Author:  Buktika Webdesk (Binka)
   Purpose: MamaDEX pillar page stylesheet — token consumer only.
            Community-led social upliftment. Dignity, skill, shelter, and care.
            MamaDEX is both soul and structure: grounded depth, earth strength,
            and ceremonial warmth.
   Colour Map:    v3.0.0 Section 5.4 (LOCKED)
   Design System: v2.7.0
   Umbrella:      v1.1.0
   License: © Buktika, 2026. All rights reserved.
   ISO Reference: ISO 27001, ISO 9241-110
   Source Naming Standard: Buktika v7.1 (ISO Aligned)

   ChangeLog:
   - v4.7.0 (2026-06-30): READABILITY AUDIT. Substantive trigger, corridor,
             pillar tagline, and checklist copy now uses the 1rem body floor.
             Pillar taglines use --fg to avoid low-contrast accent text.
   - v4.6.0 (2026-03-28): MAMAS SLIDER HEADING TOOLTIP.
             ADDED     - .mamas-bar-heading wrapper and .mamas-bar-tip button styles.
                         Help copy now lives in a Tippy trigger beside the title.
             REMOVED   - .page-mamadex .mamas-bar .intro from the visible intro rule
                         chain. The slider helper is no longer rendered as a paragraph.
   - v4.5.1 (2026-03-27): HEADING COLOUR FIX — DOC-02 §4.1.4 compliance.
             FIXED     - §4 typography block: color: var(--page-primary) → var(--fg).
                         DOC-02 §4.1.4 HARD RULE: page CSS MUST NOT override color on
                         the canonical heading rule. When --page-primary was earth-brown
                         the violation was subtle. After violet migration it became visible.
             FIXED     - §4 typography block: .section-title and .sdx-section > h2 removed
                         from selector list — global.css v3.16.0 owns those canonically.
                         Per-page override of those selectors violates the HARD RULE.
             ADDED     - §4 typography block: padding-bottom: 0.75rem and
                         border-bottom: 2px solid var(--page-primary) added to non-canonical
                         selectors (.mamas-bar h2, .products-header h2, etc.) to provide
                         the canonical underline that global.css cannot reach via its
                         .sdx-card-section > h2 selector.
             ADDED     - §4 dark mode block: border-bottom-color reduced opacity rule for
                         non-canonical selectors.
             REMOVED   - §10 dark mode: heading color: var(--sdx-color-mama-amber) override
                         deleted. var(--fg) resolves correctly in dark mode without branching.
   - v4.5.0 (2026-03-27): MAMADEX VIOLET MIGRATION — owner instruction.
             CHANGED   - --page-primary: var(--sdx-color-mama-earth) (#8b3a1a brown/terracotta)
                         → var(--sdx-color-mama-violet) (#8b5cf6).
                         Rationale: brown as the primary signal colour for a platform centred
                         on African women and communities carries unintended racial coding.
                         Violet has no earth or racial association. Used globally by social
                         impact organisations. Reads as human, community, forward.
             CHANGED   - All button gradients: earth→depth → violet→depth.
                         Gradient: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%,
                         var(--sdx-color-mama-depth) 100%). Both stops are dark — #ffffff text
                         still mandatory per DOC-03 §5.1.
             CHANGED   - All hardcoded rgba(139,58,26,N) references → rgba(139,92,246,N).
             CHANGED   - --hero-vignette-from/to: earth rgba → violet rgba.
             CHANGED   - .pillar-mamadex tagline, checkmarks, hover border: mama-earth → mama-violet.
             UNCHANGED - --page-accent (amber), --page-secondary (mama-depth), --page-depth (stem-olive).
                         The amber accent remains the universal action/CTA signal.
   - v4.4.0 (2026-03-06): DOC-02 §7.1 + §7.2.1 + §15 unit compliance.
             FIXED     - .page-mamadex .hero min-height: 720px → var(--hero-min). §7.1 HARD RULE:
                         .hero must match .hero-wrap. hero-wrap carries var(--hero-min) (1000px);
                         .hero was hardcoded 720px — mismatch defeated centering.
             ADDED     - .page-mamadex .headline font-size: clamp(2.75rem, 6vw, 4.5rem). §7.2.1
                         canonical pillar override. Applies when hero text is present.
                         NOTE: mamadex.html hero-wrap currently contains no .hero / .headline /
                         .tagline / .hero-actions — portal+orb is the visual centrepiece.
                         Hero text HTML is a stub comment. CSS rule added now; HTML structure
                         requires owner decision before implementation.
             FIXED     - .hero-body padding: 24px 10px → 1.5rem 0.625rem. §15 HARD RULE:
                         px forbidden in padding. Converted to rem.
   - v4.3.0 (2026-03-02): Button gradient compliance (§8.1), static token sweep, main padding-top.
             FIXED     - All MamaDEX primary CTA buttons: amber→earth gradient (wrong direction,
                         wrong start) corrected to canonical violet→depth (#8b5cf6→#220f27).
                         §8.1: MamaDEX = linear-gradient(135deg, #8b5cf6 0%, #220f27 100%).
             FIXED     - All MamaDEX primary button text: var(--sdx-color-slate-dark) → #ffffff.
                         §8.3 gradient text rule: #8b5cf6 and #220f27 both qualify as dark stops.
                         Dark text on dark gradient end = illegible. White required.
             FIXED     - .product-badge text: slate-dark → #ffffff. Same dark-stop rule.
             FIXED     - .btn-pillar-mamadex: amber→earth → earth→depth, color: #ffffff.
             FIXED     - .btn-pillar-reporters: wrong end colour and dark text.
                         Canonical: linear-gradient(145deg, #f5b014 0%, #d94328 100%), #ffffff.
             FIXED     - .btn-pillar-edutower: green-soft→teal-deep → canonical #2f5c68→#464820.
             FIXED     - Static token sweep: all var(--sdx-color-slate) → var(--muted),
                         all var(--sdx-color-slate-dark) on body text → var(--fg).
                         §3.5.7 HARD RULE: slate tokens are static primitives — invisible on
                         dark backgrounds. var(--fg)/var(--muted) required for themed surfaces.
             FIXED     - .page-mamadex main: padding-top: 2rem added. Hero closes flush against
                         first sdx-card-section (margin-top: 0 in global.css). Matches
                         .page-about .container { padding: 3rem 2rem } pattern from about.css.
   - v4.2.0 (2026-02-28): trigger-badge restyled as label, not button.
             FIXED     - .trigger-badge was using the primary CTA gradient (amber→earth),
                         0.5rem padding, and box-shadow — identical appearance to a
                         CTA button. "Social Upliftment" is a category label.
                         Replaced with: amber tint fill at 15% opacity, earth text colour,
                         0.75rem font-size, 0.2rem/0.625rem padding, uppercase, no shadow.
                         Pattern matches .trigger-corridor (earth tint, small, uppercase)
                         while using amber tint to visually distinguish category from
                         jurisdiction.
   - v4.1.0 (2026-02-28): Design System v4.0.0 section architecture compliance.
             REMOVED   - .portal-cta-link heritage rule (button-style: white fill,
                         border-radius 16px, portal-pulse animation). This rule
                         overrode portal.css's transparent circular orb-link with a
                         solid white oval. Root cause: equal CSS specificity, mamadex.css
                         load order wins. portal.css owns all portal-cta-link styling.
             REMOVED   - .sdx-section / .section alternating background rules.
             REMOVED   - .mamadex-promise / .mamadex-sample / .mamadex-corridors tint rules.
             REMOVED   - Dark mode alternating section background rules.
             REASON    - Design System v4.0.0 Section 4.4: .sdx-card-section is the ONLY
                         approved section pattern. No alternating tint bands.
             HTML      - All sections in mamadex.html migrated to sdx-card-section.
   - v4.0.0 (2026-02-24): V3.0.0 WHITEPAPER COMPLIANCE — full heritage migration.
             REMOVED   - :root token block (tokens belong in global.css only)
             REMOVED   - All !important declarations (71 instances)
             REMOVED   - Deprecated tokens: coral-soft, coral-brown, golden-auburn,
                         reporters-text and all direct hex equivalents
             REWIRED   - coral-soft/brown → var(--page-primary) (now mama-violet)
             REWIRED   - coral (#d64a35) accents → var(--page-primary)
             REWIRED   - golden-auburn accents → var(--page-accent) (mama-amber)
             REWIRED   - #ffffff hardcoded → var(--card)
             REWIRED   - #111827/#1a1a1a → var(--sdx-color-slate-dark)
             REWIRED   - #374151/#4a4a4a → var(--sdx-color-slate)
             REWIRED   - #6b7280 → var(--sdx-color-slate)
             REWIRED   - #f9fafb/#f8f9fa alternating → rgba(139,58,26,0.08)
             SCOPED    - All selectors under .page-mamadex (heritage structure intact)
             PRESERVED - Portal/orb system verbatim (positioning only, no colour tokens)
             PRESERVED - Responsive hero height scale (450–850px)
             PRESERVED - All section structures: promise, products, sample, triggers,
                         corridors, mamas, videos, pillars, pillar buttons
             EXCEPTION - Portal animation rgba values are visual effects, not theme
                         colours. Confirmed permanent exceptions per v3.0.0 §7.
   - v3.5.1 (2026-02-21): Last pre-migration version. See mamadex-old.css.
   ====================================================================================================== */

/* 0) Dependencies
   - /assets/css/global.css            (canonical tokens + shared components)
   - /assets/css/themes.css            ([data-theme] alias layer + pillar dark overrides)
   - /assets/css/partials/header.css   (header partial)
   - /assets/css/partials/footer.css   (footer partial)

   Hard rules (Colour Map v3.0.0 Section 5.4):
   - coral-soft and coral-brown MUST NOT be used. Replaced by mama-violet.
   - Action buttons MUST use the violet-to-depth gradient.
   - Cyan MUST remain a micro-accent only. Never a dominant field colour.
   - Page background MUST remain warm parchment (--sdx-color-mama-bg).
*/

/* ======================================================================================================
   1) Page variable binding
   Colour Map v3.0.0 Section 5.4 — LOCKED
   ====================================================================================================== */

.page-mamadex {
  --page-bg:            var(--sdx-color-mama-bg);            /* #fdf6ee — warm parchment          */
  --page-primary:       var(--sdx-color-mama-violet);        /* #8b5cf6 — social upliftment signal */
  --page-secondary:     var(--sdx-color-mama-depth);         /* #220f27 — soul and depth          */
  --page-accent:        var(--sdx-color-mama-amber);         /* #f5b014 — action gradient start   */
  --page-depth:         var(--sdx-color-stem-olive);         /* #464820 — grounding               */
  --page-dark-base:     var(--sdx-color-mama-dark-base);     /* #150a18 — night ceremony          */
  --page-dark-surface:  var(--sdx-color-mama-dark-surface);  /* #220f27 — card face               */

  --hero-image:         url("/assets/images/mamadex/mamadex-hero.webp");
  --hero-vignette-from: rgba(139, 92, 246, 0.20);  /* mama-violet, bottom only, max 0.25 */
  --hero-vignette-to:   rgba(139, 92, 246, 0);

  /* Portal rectangle geometry — desktop defaults */
  --portal-top:    55%;
  --portal-w:      clamp(540px, 62vw, 980px);
  --portal-h:      clamp(140px, 34.5vw, 400px);
  --portal-radius: 18px;

  /* Orb mobile geometry */
  --orb-mobile-size: 240px;
  --orb-mobile-top:  10px;
  --orb-mobile-gap:  -30px;
}

/* ======================================================================================================
   2) Base page surfaces
   ====================================================================================================== */

.page-mamadex {
  background: var(--page-bg);
  color: var(--fg);
}

.page-mamadex .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ======================================================================================================
   3) Hero
   No overlay. Bottom vignette only. Opacity 0.20 (max 0.25). Fade at 32% (max 35%).
   Portal and orb are MamaDEX-specific. Positioning and z-index preserved exactly.
   ====================================================================================================== */

.page-mamadex .hero-wrap {
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 40%;
  min-height: var(--hero-min);
  position: relative;
  isolation: isolate;
}

.page-mamadex .hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--hero-vignette-from) 0%,
    var(--hero-vignette-to)   32%
  );
}

/* Hero inner grid */
.page-mamadex .hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--hero-min);  /* FIXED v4.4.0: was 720px — mismatch with hero-wrap var(--hero-min). §7.1 HARD RULE. */
}

.page-mamadex .hero-grid {
  width: min(1160px, 92vw);
  margin-inline: auto;
}

.page-mamadex .hero-body {
  text-align: center;
  padding: 1.5rem 0.625rem;  /* FIXED v4.4.0: was 24px 10px — §15 unit violation. rem conversion. */
  position: relative;
  z-index: 5;
}

/* DOC-02 §7.2.1 canonical pillar headline override.
   NOTE: hero text (headline/tagline/hero-actions) is absent from mamadex.html hero-wrap.
   Portal+orb is the visual centrepiece. Rule present for when HTML structure is implemented. */
.page-mamadex .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

/* Responsive hero heights — premium scale for MamaDEX portal experience */
@media (min-width: 2560px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 850px; }
}
@media (min-width: 1920px) and (max-width: 2559px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 800px; }
}
@media (min-width: 1680px) and (max-width: 1919px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 750px; }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 720px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 680px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 600px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 550px; }
}
@media (min-width: 481px) and (max-width: 767px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 500px; }
}
@media (max-width: 480px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 450px; }
}

/* --- Brand orb (lowest layer) --- */
.page-mamadex .hero-orb {
  --orb-x:    max(20px, calc(50% - 820px));
  --orb-y:    clamp(24px, 6vw, 90px);
  --orb-size: clamp(260px, 28vw, 420px);

  position: absolute;
  z-index: 1;
  left: var(--orb-x);
  top: var(--orb-y);
  width: var(--orb-size);
  height: var(--orb-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
}

.page-mamadex .hero-orb .orb-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 205, 95, 0.78)  0%,
      rgba(240, 188, 95, 0.47) 32%,
      rgba(255, 170, 40, 0.18) 58%,
      rgba(14,  0,  111, 0.05) 72%);
  filter: blur(8px);
  mix-blend-mode: soft-light;
  box-shadow:
    0 14px 38px rgba(255, 170, 40, 0.26),
    0 3px 14px rgba(0, 0, 0, 0.10) inset;
  animation: sdx-orb-glow 7.5s ease-in-out infinite;
  will-change: filter, opacity;
}

.page-mamadex .hero-orb .orb-logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72%;
  height: 72%;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

@keyframes sdx-orb-glow {
  0%   { filter: blur(8px) brightness(0.92); opacity: 0.78; }
  35%  { filter: blur(8px) brightness(1.22); opacity: 1;    }
  65%  { filter: blur(8px) brightness(0.90); opacity: 0.74; }
  100% { filter: blur(8px) brightness(0.92); opacity: 0.78; }
}

/* --- Portal rectangle (middle layer, above orb) --- */
.page-mamadex .hero-portal-rect {
  position: absolute;
  left: 50%;
  top: var(--portal-top);
  transform: translate(-50%, -50%);
  width: var(--portal-w);
  height: var(--portal-h);
  z-index: 2;
  pointer-events: auto;
  border-radius: var(--portal-radius);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Sparkle container fills rectangle */
.page-mamadex .hero-portal-rect #sparkle-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.page-mamadex .hero-portal-rect #sparkle-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Canvas z-order — must match portal-full.html */
.page-mamadex .hero-portal-rect #mist-canvas       { z-index: 5;  }
.page-mamadex .hero-portal-rect #midground-canvas  { z-index: 7;  }
.page-mamadex .hero-portal-rect #sparkle-canvas    { z-index: 10; }

/* Portal text layer — between midground and sparkle */
.page-mamadex .hero-portal-rect #sparkle-container .portal-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  pointer-events: none;
}

.page-mamadex .hero-portal-rect #sparkle-container .portal-text-line {
  font-family: var(--headline-font);
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);   /* EXCEPTION: portal text always white over canvas */
  text-align: center;
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(255, 255, 255, 0.70);
  max-width: 70%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.page-mamadex .hero-portal-rect #sparkle-container .portal-text-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Portal CTA link ---
   REMOVED: heritage button-style .portal-cta-link rule deleted v4.1.0.
   portal.css governs all .portal-cta-link and .portal-invite styling.
   The heritage rule (white fill, border-radius: 16px, portal-pulse animation)
   was overwriting portal.css's transparent circular orb-link with a solid
   white oval. Root cause: specificity tie (.page-mamadex .portal-cta-link
   vs .hero-portal-rect .portal-cta-link — equal weight), mamadex.css load
   order wins. Fix: remove the rule. portal.css owns this component. */

/* Mobile portal layout */
@media (max-width: 860px) {
  .page-mamadex {
    --portal-top:    46%;
    --portal-w:      clamp(280px, 88vw, 720px);
    --portal-h:      clamp(140px, 32vw, 240px);
    --portal-radius: 16px;
  }

  .page-mamadex .hero-wrap {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .page-mamadex .hero-orb {
    position: relative;
    left: auto;
    top: auto;
    width: var(--orb-mobile-size);
    height: var(--orb-mobile-size);
    margin: var(--orb-mobile-top) auto var(--orb-mobile-gap);
    z-index: 1;
  }

  .page-mamadex .hero {
    min-height: unset;
    padding-top: 0;
    width: 100%;
  }

  .page-mamadex .hero-grid,
  .page-mamadex .hero-body {
    position: relative;
    z-index: 3;
    text-align: center;
  }
}

/* ======================================================================================================
   4) Typography overrides
   ====================================================================================================== */

/* Section h2s — canonical heading system.
   DOC-02 §4.1.4 HARD RULE: page CSS MUST NOT override color or border-bottom
   on .section-title / .sdx-card-section > h2 (those are owned by global.css v3.16.0).
   The selectors below that fall OUTSIDE the global.css canonical chain
   (.products-header h2, .videos-header h2, .mamas-bar h2, etc.) require
   their own border-bottom and padding-bottom to match the canonical appearance.
   color MUST be var(--fg) — not var(--page-primary). */
.page-mamadex .products-header h2,
.page-mamadex .videos-header h2,
.page-mamadex .section-lead h2,
.page-mamadex .corridors-header h2,
.page-mamadex .pillars-header h2,
.page-mamadex .mamas-bar h2 {
  font-family: var(--headline-font);
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  color: var(--fg);                                       /* HARD RULE: var(--fg) only — not page-primary */
  margin: 0 0 1rem 0;
  display: block;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--page-primary);           /* matches global.css canonical underline */
}

.page-mamadex .mamas-bar-heading {
  position: relative;
}

.page-mamadex .mamas-bar-tip {
  position: absolute;
  top: 0.125rem;
  right: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.125rem solid rgba(from var(--page-primary) r g b / 0.32);
  border-radius: 50%;
  background: rgba(from var(--page-primary) r g b / 0.08);
  color: var(--page-primary);
  font-family: var(--text-font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.page-mamadex .mamas-bar-tip:hover,
.page-mamadex .mamas-bar-tip:focus-visible {
  background: rgba(from var(--page-primary) r g b / 0.14);
  border-color: var(--page-primary);
  transform: translateY(-0.0625rem);
}

.page-mamadex .mamas-bar-tip:focus-visible {
  outline: 0.125rem solid var(--page-primary);
  outline-offset: 0.125rem;
}

[data-theme="dark"] .page-mamadex .products-header h2,
[data-theme="dark"] .page-mamadex .videos-header h2,
[data-theme="dark"] .page-mamadex .section-lead h2,
[data-theme="dark"] .page-mamadex .corridors-header h2,
[data-theme="dark"] .page-mamadex .pillars-header h2,
[data-theme="dark"] .page-mamadex .mamas-bar h2 {
  border-bottom-color: rgba(from var(--page-primary) r g b / 0.40); /* matches global.css dark rule */
}

@media (max-width: 768px) {
  .page-mamadex .products-header h2,
  .page-mamadex .videos-header h2,
  .page-mamadex .section-lead h2,
  .page-mamadex .corridors-header h2,
  .page-mamadex .pillars-header h2,
  .page-mamadex .mamas-bar h2 {
    font-size: 1.75rem;
  }

  .page-mamadex .mamas-bar-tip {
    top: 0;
    right: 0.25rem;
  }
}

/* Section intro paragraphs — remove any pill styling from old CSS */
.page-mamadex .products-header .intro,
.page-mamadex .videos-header .intro,
.page-mamadex .section-lead .intro,
.page-mamadex .corridors-header .intro,
.page-mamadex .pillars-header .intro {
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: left;
  max-width: 65ch;
  margin: 0 auto 3rem;
  color: var(--muted);
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  display: block;
}

/* Section header containers — no pill styling */
.page-mamadex .products-header,
.page-mamadex .videos-header,
.page-mamadex .section-lead,
.page-mamadex .corridors-header,
.page-mamadex .pillars-header,
.page-mamadex .mamas-bar {
  display: block;
  margin-bottom: 3rem;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}

/* ======================================================================================================
   5) Sections and alternation
   Design System v4.0.0 Section 4.4 — .sdx-card-section is the ONLY approved pattern.
   White card on page-bg canvas. The card edge IS the section boundary.
   No alternating tint bands. global.css defines .sdx-card-section.

   REMOVED v4.1.0: .sdx-section / .section alternating background rules deleted.
   REMOVED v4.1.0: .mamadex-promise / .mamadex-sample / .mamadex-corridors tint rules deleted.
   All sections in mamadex.html now use class="sdx-card-section <module-class>".
   ====================================================================================================== */

/* Width and layout for module classes that float inside sdx-card-section */
.page-mamadex .mamadex-videos,
.page-mamadex .mamadex-pillars,
.page-mamadex .mamas-block,
.page-mamadex .mamadex-products,
.page-mamadex .mamadex-triggers {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.page-mamadex .mamadex-corridors .corridors-header {
  max-width: 1200px;
  margin: 0 auto 3rem;
}

.page-mamadex .mamadex-corridors {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.page-mamadex .mamas-bar {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ======================================================================================================
   6) Cards and tiles
   ====================================================================================================== */

.page-mamadex .card {
  border-color: var(--page-primary);
  margin-top: 4px;
}

.page-mamadex .card:hover {
  border-color: var(--page-primary);
  transform: translateY(-2px);
}

.page-mamadex .card h3 {
  color: var(--page-primary);
}

/* Card accent stripe */
.page-mamadex .card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--page-primary) 0%, var(--page-accent) 100%);
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -2rem -2rem 1rem;
}

/* Cyan micro-accent — badge dots only */
.page-mamadex .badge-dot {
  background: var(--sdx-color-mama-cyan);
}

/* ======================================================================================================
   7) Buttons and CTAs
   ====================================================================================================== */

/* CTA band primary — standalone, lift permitted (global.css rule).
   §8.1 canonical MamaDEX gradient: earth→depth, white text.
   global.css fallback (flat var(--page-primary)) is never the finished state. */
.page-mamadex .sdx-cta-band .sdx-btn-primary {
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.40),
              inset 0 0 0 1px rgba(255, 255, 255, 0.20);
}

.page-mamadex .sdx-cta-band .sdx-btn-primary:hover {
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Primary CTA — violet to depth (v4.5.0 canonical MamaDEX gradient) */
.page-mamadex .btn-primary,
.page-mamadex .cta-btn {
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--text-font);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.page-mamadex .btn-primary:hover,
.page-mamadex .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.50);
}

/* ======================================================================================================
   8) Page modules
   ====================================================================================================== */

/* --- PROMISE BOX --- */
.page-mamadex .promise-box {
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem;
  background: var(--card);
  border-radius: 8px;
  border-left: 4px solid var(--page-primary);
  box-shadow: var(--card-shadow);
}

.page-mamadex .promise-statement {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

/* --- PRODUCT CARDS --- */
.page-mamadex .product-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 900px) {
  .page-mamadex .product-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-mamadex .product-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow: var(--card-shadow);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.page-mamadex .product-card > *:last-child {
  margin-top: auto;
}

.page-mamadex .product-card:hover {
  border-color: var(--page-primary);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.page-mamadex .product-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, var(--page-accent) 0%, var(--page-primary) 100%);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.page-mamadex .product-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.page-mamadex .product-deliverables {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem 0;
}

.page-mamadex .product-deliverables li {
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  position: relative;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
}

.page-mamadex .product-deliverables li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--page-primary);
  font-weight: 700;
}

.page-mamadex .btn-product {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
  border: none;
}

.page-mamadex .btn-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.50);
}

/* --- SAMPLE ARTEFACT --- */
.page-mamadex .sample-box {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem;
  background: var(--card);
  border-radius: 8px;
  border: 2px solid var(--border);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .page-mamadex .sample-box {
    grid-template-columns: 280px 1fr;
  }
}

.page-mamadex .sample-thumbnail {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
}

.page-mamadex .sample-content {
  text-align: left;
}

.page-mamadex .sample-icon {
  color: var(--page-primary);
  margin-bottom: 1rem;
}

.page-mamadex .sample-icon svg {
  width: 40px;
  height: 40px;
}

.page-mamadex .sample-content p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.page-mamadex .btn-sample {
  display: inline-block;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.page-mamadex .btn-sample:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.50);
}

.page-mamadex .sample-note {
  font-size: 0.875rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 1rem;
}

/* --- TRIGGER CARDS --- */
.page-mamadex .trigger-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .page-mamadex .trigger-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .page-mamadex .trigger-cards {
    gap: 2.5rem;
  }
}

.page-mamadex .trigger-card {
  padding: 2rem;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  border: 1px solid var(--border);
}

.page-mamadex .trigger-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.page-mamadex .trigger-social {
  border-left: 4px solid var(--page-primary);
}

.page-mamadex .trigger-corridor {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  background: rgba(139, 92, 246, 0.08);
  color: var(--page-primary);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-mamadex .trigger-badge {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  background: rgba(245, 176, 20, 0.15);  /* amber tint — badge, not button */
  color: var(--page-primary);             /* earth: legible, not action-amber */
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 4px;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.page-mamadex .trigger-card h3 {
  font-family: var(--headline-font);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 1.5rem 0;
  line-height: 1.3;
}

.page-mamadex .trigger-details {
  margin: 0;
}

.page-mamadex .trigger-details dt {
  font-weight: 600;
  color: var(--fg);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}

.page-mamadex .trigger-details dt:first-child {
  margin-top: 0;
}

.page-mamadex .trigger-details dd {
  color: var(--muted);
  margin: 0 0 1rem 0;
  line-height: 1.6;
  font-size: var(--body);
}

.page-mamadex .trigger-details dd:last-child {
  margin-bottom: 0;
}

/* Trigger CTA buttons */
.page-mamadex .trigger-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.page-mamadex .trigger-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-family: var(--text-font);
  min-height: 48px;
}

.page-mamadex .trigger-actions .btn-lg {
  padding: 1rem 2rem;
  font-size: 1.0625rem;
}

.page-mamadex .trigger-actions .btn-hero {
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.page-mamadex .trigger-actions .btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.50);
}

.page-mamadex .trigger-actions .btn-secondary {
  background: rgba(139, 92, 246, 0.08);
  color: var(--page-primary);
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.page-mamadex .trigger-actions .btn-secondary:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-2px);
}

/* --- CORRIDOR CARDS --- */
.page-mamadex .corridor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.page-mamadex .corridors-kicker {
  margin: 0 0 0.75rem;
  color: var(--fg);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.page-mamadex .corridors-helper {
  margin: 0 auto;
  max-width: 48rem;
  padding: 0.875rem 1rem;
  background: rgba(120, 113, 108, 0.08);
  border: 1px solid rgba(120, 113, 108, 0.18);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.6;
  text-align: center;
}

.page-mamadex .corridor-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 0.25rem solid var(--page-primary);
  border-radius: var(--radius);
  text-decoration: none;
  text-align: left;
  transition: all 0.2s ease;
  color: var(--fg);
  box-shadow: var(--card-shadow);
}

.page-mamadex .corridor-card:hover {
  border-color: var(--page-primary);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.page-mamadex .corridor-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.page-mamadex .corridor-card-body {
  display: block;
}

.page-mamadex .corridor-flag {
  width: 3rem;
  height: auto;
  display: block;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.page-mamadex .corridor-launch-label {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999rem;
  background: rgba(from var(--page-primary) r g b / 0.08);
  color: var(--page-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-mamadex .corridor-card h3 {
  font-family: var(--headline-font);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.625rem;
}

.page-mamadex .corridor-card .muted {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.5;
}

.page-mamadex .corridor-card-action {
  margin-top: auto;
  color: var(--page-primary);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* --- PILLAR CARDS (Living Tower canonical pattern) --- */
.page-mamadex .mamadex-pillars .pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .page-mamadex .mamadex-pillars .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-mamadex .pillar-card {
  background: var(--card);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.page-mamadex .pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  padding-left: calc(2rem - 3px);
}

/* Main Brand Icon */
.page-mamadex .pillar-brand-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  display: block;
  object-fit: contain;
}

@media (max-width: 640px) {
  .page-mamadex .pillar-brand-icon {
    width: 80px;
    height: 80px;
  }
}

.page-mamadex .pillar-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: var(--fg);
  margin: 0 0 1rem 0;
}

/* Pillar taglines — pillar-specific colours */
.page-mamadex .pillar-tagline {
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

.page-mamadex .pillar-farmers  .pillar-tagline,
.page-mamadex .pillar-mamadex  .pillar-tagline,
.page-mamadex .pillar-reporters .pillar-tagline,
.page-mamadex .pillar-edutower .pillar-tagline { color: var(--fg); }

/* Checkmarked bullet points */
.page-mamadex .pillar-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex: 1;
}

.page-mamadex .pillar-points li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--muted);
}

.page-mamadex .pillar-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 600;
}

/* Checkmark colours — pillar specific */
.page-mamadex .pillar-farmers  .pillar-points li::before { color: var(--sdx-color-green-deep); }
.page-mamadex .pillar-mamadex  .pillar-points li::before { color: var(--sdx-color-mama-violet); }
.page-mamadex .pillar-reporters  .pillar-points li::before { color: var(--sdx-color-mama-amber); }
.page-mamadex .pillar-edutower .pillar-points li::before { color: var(--sdx-color-teal-deep);  }

/* Left border accent on hover */
.page-mamadex .pillar-farmers:hover  { border-left-color: var(--sdx-color-green-deep); border-left-width: 4px; }
.page-mamadex .pillar-mamadex:hover  { border-left-color: var(--sdx-color-mama-violet); border-left-width: 4px; }
.page-mamadex .pillar-reporters:hover  { border-left-color: var(--sdx-color-mama-amber); border-left-width: 4px; }
.page-mamadex .pillar-edutower:hover { border-left-color: var(--sdx-color-teal-deep);  border-left-width: 4px; }

/* Pillar buttons */
.page-mamadex .btn-pillar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: all 0.28s ease;
  text-align: center;
  margin-top: auto;
  border: 2px solid transparent;
  color: var(--sdx-color-white);
  font-family: var(--text-font);
  min-height: 48px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  min-width: fit-content;
}

.page-mamadex .btn-pillar-farmers {
  background: linear-gradient(135deg, var(--sdx-color-green-soft) 0%, var(--sdx-color-green-deep) 100%);
  box-shadow: 0 4px 16px rgba(46, 93, 58, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.page-mamadex .btn-pillar-farmers:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(46, 93, 58, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.page-mamadex .btn-pillar-mamadex {
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.page-mamadex .btn-pillar-mamadex:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(139, 92, 246, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.page-mamadex .btn-pillar-reporters {
  background: linear-gradient(145deg, #f5b014 0%, #d94328 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(245, 176, 20, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.page-mamadex .btn-pillar-reporters:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(245, 176, 20, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.page-mamadex .btn-pillar-edutower {
  background: linear-gradient(135deg, #2f5c68 0%, #464820 100%);
  box-shadow: 0 4px 16px rgba(47, 92, 104, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.page-mamadex .btn-pillar-edutower:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(47, 92, 104, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* --- GENERAL CTA BUTTONS (hero section, nav buttons) --- */
.page-mamadex .cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-mamadex .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--sdx-color-green-deep);
  font-weight: 600;
  transition: color 0.18s ease, background 0.18s ease, transform 0.06s ease;
}

.page-mamadex .btn:active {
  transform: translateY(1px);
}

/* Tooltip buttons */
.page-mamadex .btn[data-tip] {
  position: relative;
  outline: none;
}

.page-mamadex .btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 14px);
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--green);
  background: rgba(255, 255, 255, 0.92);  /* EXCEPTION: tooltip always white */
  border: 1px solid var(--green);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  max-width: min(62vw, 320px);
  overflow-wrap: anywhere;
  z-index: 1001;
}

.page-mamadex .btn[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.92);  /* EXCEPTION: tooltip arrow always white */
  border-left: 1px solid var(--green);
  border-top: 1px solid var(--green);
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  z-index: 1001;
}

.page-mamadex .btn:hover[data-tip]::after,
.page-mamadex .btn:hover[data-tip]::before,
.page-mamadex .btn:focus-visible[data-tip]::after,
.page-mamadex .btn:focus-visible[data-tip]::before {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .page-mamadex .btn[data-tip]::before,
  .page-mamadex .btn[data-tip]::after { display: none; }
}

/* ======================================================================================================
   9) Media queries
   ====================================================================================================== */

@media (max-width: 768px) {
  .page-mamadex .trigger-cards   { gap: 1.5rem; }
  .page-mamadex .trigger-card    { padding: 1.75rem; }
  .page-mamadex .trigger-card h3 { font-size: 1.125rem; }

  .page-mamadex .promise-box,
  .page-mamadex .product-card,
  .page-mamadex .sample-box      { padding: 2rem; }

  .page-mamadex .sample-content  { text-align: center; }
}

@media (max-width: 640px) {
  .page-mamadex .mamadex-triggers    { padding: 3rem 1.25rem; }

  .page-mamadex .trigger-actions {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .page-mamadex .trigger-actions .btn { width: 100%; }
  .page-mamadex .trigger-card         { padding: 1.5rem; }
  .page-mamadex .trigger-card h3      { font-size: 1rem; }

  .page-mamadex .trigger-details dt { font-size: 0.9375rem; }
  .page-mamadex .trigger-details dd { font-size: var(--body); }

  .page-mamadex .pillar-card          { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-mamadex .btn,
  .page-mamadex .btn::before,
  .page-mamadex .btn::after { transition: none; }
}

/* ======================================================================================================
   10) Dark mode
   Surface overrides (--bg, --card) handled in themes.css [data-theme="dark"] .page-mamadex.
   Page-specific dark adjustments below only.
   Mechanism: [data-theme="dark"] scoping only. @media (prefers-color-scheme) MUST NOT be used.
   ====================================================================================================== */

/* Section h2 dark mode: handled in §4 canonical block above via
   [data-theme="dark"] border-bottom-color rule. No color override needed —
   var(--fg) resolves correctly in dark mode via themes.css. */

/* REMOVED v4.1.0: dark mode .sdx-section / .section alternating background rules deleted.
   .sdx-card-section dark mode surface handled globally by global.css [data-theme="dark"] rule. */

[data-theme="dark"] .page-mamadex .card {
  border-color: rgba(245, 176, 20, 0.30);
  background: var(--card);
}

[data-theme="dark"] .page-mamadex .card h3 {
  color: var(--sdx-color-mama-amber);
}

[data-theme="dark"] .page-mamadex .trigger-corridor {
  background: rgba(245, 176, 20, 0.10);
  color: var(--sdx-color-mama-amber);
}

[data-theme="dark"] .page-mamadex .product-card,
[data-theme="dark"] .page-mamadex .trigger-card,
[data-theme="dark"] .page-mamadex .corridor-card,
[data-theme="dark"] .page-mamadex .pillar-card,
[data-theme="dark"] .page-mamadex .promise-box,
[data-theme="dark"] .page-mamadex .sample-box {
  background: var(--card);
  border-color: rgba(245, 176, 20, 0.20);
}

[data-theme="dark"] .page-mamadex .corridor-card h3,
[data-theme="dark"] .page-mamadex .pillar-card h3,
[data-theme="dark"] .page-mamadex .trigger-card h3 {
  color: var(--sdx-color-mama-amber);
}

[data-theme="dark"] .page-mamadex .corridors-helper {
  background: rgba(245, 176, 20, 0.07);
  border-color: rgba(245, 176, 20, 0.18);
}

[data-theme="dark"] .page-mamadex .corridor-launch-label,
[data-theme="dark"] .page-mamadex .corridor-card-action,
[data-theme="dark"] .page-mamadex .corridors-kicker {
  color: var(--sdx-color-mama-amber);
}

[data-theme="dark"] .page-mamadex .corridor-launch-label {
  background: rgba(245, 176, 20, 0.07);
}