/* ======================================================================================================
   File:    mamadex.css
   Path:    /assets/css/mamadex/mamadex.css
   Version: v5.21.0
   Issued:  2026-07-23
   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:
   - v5.21.0 (2026-07-23): VISITOR-DOOR CARD SEPARATION — visual defect pass
             (owner instruction, mobile door-card merge). .door-card
             restored to 1px solid var(--border) + var(--card-shadow) at
             rest and var(--card-shadow-hover) on hover/focus-within (the
             canonical card edge treatment, matching EduTower's own
             .edutower-door-card — read as reference only, not modified).
             Reverses the borderless/shadowless v5.15.0/v5.16.0 pass, whose
             flat edge made the four stacked mobile cards read as one
             continuous panel, especially since --card (#f8f5f2) and --bg
             (#f3f4f6) are close in tone. .door-grid geometry (1 column
             mobile, 2x2 from 768px, 1rem/1.25rem gap) was already correct
             and is unchanged; only the card's own edge/elevation changed.
   - v5.20.0 (2026-07-17): LIVING TOWER CLOSE REJOINED TO THE PAGE. Reduced
             the accumulated final-card margin plus container bottom padding
             to one deliberate 1rem transition, removing the detached blank
             zone above the closing band.
   - v5.19.4 (2026-07-17): DESKTOP CAPTION LINE LOCK. Legacy lightbox
             captions now explicitly remain on one line above 640px; narrow
             screens retain normal wrapping.
   - v5.19.3 (2026-07-17): CAPTION CONTENT-BOX CORRECTION. Reserved the
             pill's horizontal padding outside its maximum text measure so
             the longest capability caption remains a true single line at
             desktop widths without exceeding the viewport on mobile.
   - v5.19.2 (2026-07-17): LEGACY LIGHTBOX CAPTION WIDTH. Single-caption
             MamaDEX lightboxes may now size to their text up to 90vw/960px,
             avoiding an unnecessary second line on desktop while retaining
             viewport-safe wrapping on narrow screens. Structured title/body
             captions retain the shared component layout.
   - v5.19.1 (2026-07-17): LIGHTBOX TRIGGER RULE PARSING FIX. A legacy
             explanatory comment contained an accidental CSS comment closer
             in the text describing the lightbox class family. Browsers ended
             that comment early and discarded the trigger rule that followed,
             including cursor:zoom-in and the Firefox appearance reset. The
             comment is now safe CSS text; no selector contract changed.
   - v5.19.0 (2026-07-17): MAMADEX LIGHTBOX AFFORDANCE AND SECTION RHYTHM.
             Restored cursor:zoom-in on all ten image-lightbox triggers and
             extended the proven Firefox native-button reset to the six
             capability triggers as well as the four visitor-door triggers.
             Eyebrow-less sections on mamadex.html now reserve the same
             vertical heading slot as sections that carry an eyebrow.
   - v5.18.0 (2026-07-17): SHARED EYEBROW TONE — softened MamaDEX section
             eyebrows from the near-black depth token to a muted violet blend
             of page-primary and --muted. This preserves MamaDEX wayfinding,
             reduces competition with the section heading, and adapts through
             --muted in dark mode. Typography and spacing are unchanged.
   - v5.17.0 (2026-07-13): VISITOR-DOOR IMAGE TRIGGER — FIREFOX NATIVE
             BUTTON CHROME FIXED (real root cause) — owner instruction.
             Owner used Firefox DevTools' Layout/Box Model panel on the
             live .media-thumb button (not the card shell) and found a
             real 2px border + 1px/4px padding rendering on it, matching
             no declaration in this file (border:0/padding:0 already set
             at v5.10.0). Cause: Firefox's own <button> user-agent default
             (border:2px outset ButtonFace; padding:1px 4px) was not being
             suppressed, because this rule's appearance/-webkit-
             appearance:none pair does not reliably stop Firefox's native
             chrome on its own — -moz-appearance:none was missing. That
             leftover border+padding shrank the button below its
             .door-card-media/.capability-card-media parent's 100%/100%
             box; the image (100%/100% of the button) fell short of the
             parent too, and the parent's own background
             (var(--surface-alt)) showed through the gap — most visible at
             the card's rounded top corners (where the outer .door-card's
             border-radius/overflow:hidden clip crosses the gap) and along
             the straight sides. This, not any border/box-shadow/transform
             on .door-card itself, was the actual source of every "grey
             line"/"growing" symptom reported across this whole pass.
             Fix: added -moz-appearance:none alongside the existing
             appearance/-webkit-appearance:none on .media-thumb (both
             door-card and capability-card triggers, since both share this
             base rule and both were equally exposed). Added a second,
             door-card-scoped backstop rule restating border:0/padding:0/
             margin:0 with !important, so no future browser-default leak
             of this kind can silently reopen the same gap on the four
             visitor-door triggers specifically. v5.14.0-v5.16.0's
             .door-card border/box-shadow/transform changes are left in
             place (harmless, and .door-card's own edge treatment was
             never actually the problem) — no need to revert them.
   - v5.16.0 (2026-07-13): VISITOR-DOOR CARD SHELL — BOX-SHADOW REMOVED —
             owner instruction. Follow-up screenshot pair (rest vs. hover,
             same card, taken after a hard refresh confirmed v5.15.0 had
             loaded — cursor was already correctly changing to pointer)
             showed the border:0 fix was working and the border was not
             re-appearing on hover, but a thin grey edge was still visible
             at rest, and the card read as "growing" on hover. Re-audited
             the entire cascade (mamadex.css, global.css, themes.css,
             header.css, footer.css, media-lightbox.css, mamadex-slider
             partial, and every JS file touching this page) a second time
             for any scale()/zoom rule or mouseenter/mouseover handler:
             none exists anywhere. Root cause was --card-shadow (global.css:
             0 14px 30px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06))
             reading as a visible line at rest, escalating to
             --card-shadow-hover (larger blur, higher opacity) plus the
             translateY(-3px) lift on hover, which together read as visual
             growth even though no element's width/height/scale actually
             changes. Owner chose to remove the shadow outright: .door-card
             box-shadow changed from var(--card-shadow) to none at rest,
             and from var(--card-shadow-hover) to none on :hover/
             :focus-within. transform: translateY(-3px) on hover/focus-
             within is kept unchanged — a positional lift only, not the
             reported defect. mamadex.html stylesheet link bumped to
             ?v=5.16.0.
   - v5.15.0 (2026-07-13): VISITOR-DOOR CARD SHELL — BORDER REMOVED,
             TRANSFORM/CURSOR/FOCUS CORRECTED — owner instruction
             ("FINAL CORRECTION"), superseding the v5.14.0 assumption that
             the grey line belonged only to the image trigger. Screenshot
             review confirmed the line surrounds the whole card (image top,
             both sides, text area, bottom corners), i.e. it is
             .page-mamadex .door-card's own resting border. Four changes,
             all scoped to the four visitor-door cards only (six
             capability cards below untouched):
             1) .door-card: border changed from 1px solid var(--border) to
             0. box-shadow (var(--card-shadow) at rest, var(--card-shadow-
             hover) on hover/focus-within) and the translateY(-3px) hover
             lift are unchanged — checked global.css's --card-shadow/
             --card-shadow-hover tokens directly, both are plain offset/
             blur/rgba drop-shadows with no inset-ring segment, so no
             simulated 1px border-via-box-shadow existed to remove.
             2) Added explicit transform:none on .door-card-media
             .media-thumb and its img, at rest/hover/focus-visible, plus
             on the img specifically under .media-thumb:hover and under
             .door-card:hover. No transform:scale(...) was found anywhere
             in this file, global.css, or media-lightbox.css for these
             triggers (confirmed by direct grep) — the only transform in
             the visitor-door system is the card shell's own
             translateY(-3px) lift, which moves the card, not the image's
             size/crop. That lift is left in place as the "soft
             elevation" behaviour; this addition is a defensive guarantee
             that no scale/zoom can be introduced on the photo itself.
             3) Added cursor:pointer on .door-card-media .media-thumb
             (overrides the shared rule's cursor:zoom-in, v5.9.0/v5.10.0,
             for door-cards only — capability-card triggers keep
             cursor:zoom-in) and cursor:inherit on its img.
             4) Split the combined .media-thumb:focus-visible rule: the
             four door-card triggers now use outline: 3px solid
             var(--sdx-color-mama-cyan) (changed from
             --sdx-color-mama-violet, per this pass's explicit colour),
             offset 3px, outside the photo edge, only on keyboard focus;
             the six capability-card triggers keep the original violet
             outline, unchanged. No HTML, JS, lightbox behaviour, image
             crop, grid layout, or button styling touched.
   - v5.14.0 (2026-07-13): VISITOR-DOOR IMAGE TRIGGER — BORDER/OUTLINE
             NEUTRALISED — owner instruction, scoped explicitly to the four
             visitor-door photos only (not the six capability-card photos
             below, even though they share the base .media-thumb rule).
             Real selectors identified by inspection: each door photo is
             wrapped by .page-mamadex .door-card-media (frame) >
             .media-thumb (the clickable lightbox-trigger button) > img.
             Both already carried border:0/box-shadow:none at rest
             (v5.10.0), but neither had an explicit :hover/:active rule —
             added one, scoped to .door-card-media only, so no border,
             box-shadow, or outline can ever appear on the image trigger
             itself at rest, hover, or active, closing that gap
             defensively. Did NOT touch .door-card's own 1px solid
             var(--border) resting border or its :hover/:focus-within
             box-shadow lift (var(--card-shadow-hover)) — that is the card
             shell, confirmed by inspection to be a SEPARATE rule
             (line ~1780) already fixed in v5.3.0 to carry no border-color
             change on hover (only a shadow deepening), and explicitly
             named as "preserve if the design still requires it" per this
             pass's own scope. .media-thumb:focus-visible keeps its
             existing 3px solid var(--sdx-color-mama-violet) outline at
             3px offset (v5.10.0) — already sits outside the photo edge
             and was not reported as a defect this pass, so left unchanged
             rather than swapped to a different colour. Geometry (aspect-
             ratio 3/2, object-fit:cover, border-radius:inherit), the
             lightbox click behaviour, keyboard operability, and the
             .door-card-body button styling below the image are completely
             untouched. mamadex.html's mamadex.css link bumped to
             ?v=5.14.0.
   - v5.13.0 (2026-07-13): EYEBROW-GAP SPECIFICITY FIX — owner instruction
             (rejected-build correction; the v5.12.0 fix below did not
             visibly change the rendered gap on Door 3). §1b rewritten:
             the margin/spacing selectors changed from .page-mamadex
             .eyebrow (specificity 0,2,0) to .page-mamadex .sdx-card-
             section > .eyebrow (0,3,0 — the extra .sdx-card-section
             ancestor class), so the rule now decisively out-ranks
             global.css's canonical .eyebrow { margin-bottom: 0.75rem }
             (0,1,0) regardless of any other rule in the cascade. Owner-
             specified exact value used: margin-block-end: 2.25rem (36px
             — was 2rem/32px in v5.12.0). The eyebrow+h2 sibling rule now
             also matches .section-title as an alternate next-element
             selector (.eyebrow + h2, .eyebrow + .section-title), not
             only bare h2. Also removed a redundant, previously-missed
             margin-bottom: 1.5rem on .mamadex-join-section h2 in
             mamadex-join.css (now v1.13.0) — harmless in practice (same
             value as the shared rule) but a genuine leftover the owner's
             "search every file" instruction asked to be found and
             cleared.
   - v5.12.0 (2026-07-13): LIVING TOWER TYPOGRAPHY NORMALISATION — owner
             instruction (narrow visual normalisation pass, comparator:
             /living-tower/living-tower.html). §1b rewritten: .page-mamadex
             .eyebrow now carries the FULL Living Tower-matched typography
             (display:block, font-size:1.1rem, font-weight:600,
             letter-spacing:0.15em, text-transform:uppercase,
             margin-block-end:2rem — up from v5.11.0's spacing-only
             1.5rem) plus the reading-start alignment (text-align:start,
             width:100%) and dark-violet colour (var(--page-secondary))
             that every door page was previously setting individually.
             NEW: .page-mamadex .sdx-card-section h2 font-size/margin/
             padding-bottom also matched to Living Tower's own computed
             h2 (clamp(1.75rem,3vw,2rem), 2.5rem at min-width:768px,
             margin:0 0 1.5rem, padding-bottom:0.75rem) — text-align,
             font-family, font-weight, and border-bottom-colour are
             deliberately NOT touched (HARD RULE, global.css §4.1); the
             MamaDEX pillar underline colour is unchanged. Redundant
             per-page eyebrow rules removed from mamadex-join.css,
             mamadex-restoration-evidence.css, and mamadex-contribute.css
             this same pass — see each file's own changelog. Cache-busting
             query string on every page linking this file bumped to
             ?v=5.12.0.
   - v5.11.0 (2026-07-13): SHARED EYEBROW-TO-TITLE SPACING — owner
             instruction, MamaDEX page-family correction (not a one-page
             patch). Added .page-mamadex .eyebrow { margin-block-end: 1.5rem
             } and .page-mamadex .eyebrow + h2 { margin-block-start: 0 } —
             see the block's own header comment (§1b, immediately above
             §2 Base page surfaces) for the full rationale. This centralises
             a value that had been set inconsistently per-page: mamadex-
             join.css carried a page-local override of 2rem (too much,
             removed this pass — see mamadex-join.css v2.0.0), while
             mamadex-restoration-evidence.css and mamadex-contribute.css
             carried no override and fell through to global.css's canonical
             .eyebrow margin-bottom:0.75rem (too little — the gap flagged
             as insufficient in the owner's rendered-screenshot review).
             Every other property on .eyebrow (font-size, letter-spacing,
             colour, reading-start alignment) and on h2 (centred alignment,
             underline colour/width) is untouched. Scoped to .page-mamadex,
             not global.css, because this is a MamaDEX-pillar spacing
             decision, not a site-wide one. Cache-busting query string on
             every page linking this file (mamadex.html, mamadex-join.html,
             mamadex-restoration-evidence.html, mamadex-contribute.html,
             mamadex-opportunity.html) bumped to ?v=5.11.0.
   - v5.10.2 (2026-07-11): CAPABILITY-FRAME INTRINSIC-SIZE DEFECT — owner
             instruction. Owner reported the Learning capability image
             (source 1448x1086, 4:3 — the one outlier among six mostly-2:1
             photos) rendering taller than the other five, from its own
             intrinsic proportions instead of the shared 3:2 frame.
             Per code inspection, the sizing rules the owner specified
             (.capability-card-media { aspect-ratio: 3/2; overflow: hidden;
             }, .capability-card-media img { width/height:100%; object-fit:
             cover; }, .media-thumb trigger { width/height:100%; }) were
             already present verbatim (added v5.1.0/v5.9.0) and already
             identical across all six triggers — this could not be
             re-confirmed visually (no rendering tool in this environment)
             but static analysis found no rule giving Learning's frame
             different geometry from the other five. Applied the owner's
             requested hardening anyway, as belt-and-suspenders reinforcement
             against the one mechanism that can let an oversized intrinsic
             child override an aspect-ratio box in some browser layout
             paths — the flex/grid item's automatic min-height:auto default:
             added position:relative + min-width:0/min-height:0 to
             .capability-card-media, and min-width:0/min-height:0 to the
             .media-thumb trigger rule (shared with .door-card-media, so
             door triggers get the same explicit safeguard, at no cost —
             their geometry was not reported as broken and is unchanged).
             Note: .capability-card-media and .capability-card already carry
             overflow:hidden, which per spec already zeroes the automatic
             min-size contribution on both axes for grid/flex sizing
             purposes — so this hardening is a reinforcement of already-
             correct behaviour, not a rule fix for an identified bug in this
             file. Did NOT add a per-image object-position override for
             Learning — the owner's instruction made this conditional ("if
             one image needs composition adjustment"), and with no way to
             view the corrected render in this environment, adding an
             arbitrary crop offset without visual confirmation would risk
             making composition worse, not better; the shared rule's default
             object-position:center is left in place for all six. If the
             owner still sees Learning taller than the other five after
             this deploy (and after a hard refresh — the stylesheet's cache-
             busting ?v= query string was also bumped this round to force a
             fresh fetch), that would mean the browser is rendering from a
             stale cached copy rather than a remaining CSS defect in this
             file, since no other explanation was found on inspection.
             Selectors: wrapper .page-mamadex .capability-card-media;
             trigger .page-mamadex .capability-card-media .media-thumb
             (shared rule also covers .door-card-media .media-thumb); image
             .page-mamadex .capability-card-media img. No card is taller
             because of its source image per the rules above — all six
             wrappers compute height solely from aspect-ratio:3/2 against a
             definite 100% width, never from any child's intrinsic size.
   - v5.10.1 (2026-07-11): DOOR CTA GRADIENT MATCH — owner instruction.
             Extended the v5.10.0 "Meet all the Mamas" filled-gradient
             treatment to the four door-card CTAs. Added
             .page-mamadex .door-card-body .sdx-btn-primary { background:
             linear-gradient(135deg, var(--page-primary) 0%,
             var(--page-secondary) 100%); color:#fff; border:none;
             border-radius: var(--radius); padding: 0.75rem 1.75rem;
             box-shadow: 0 3px 12px rgba(from var(--page-primary) r g b /
             0.32); } plus a :hover rule bumping only the shadow alpha
             (0.32 -> 0.45; no transform — the page's existing hover-
             motion-cancel rule, .sdx-btn-primary:hover,:focus-visible {
             transform:none; }, already covers this selector, so no new
             rule was needed to keep it motionless). Rule is placed
             immediately AFTER the pre-existing v5.1.0/v5.2.0 rule
             (.door-card-body .sdx-btn-primary, .sdx-btn-secondary {
             align-self:center; padding:0.5rem 1.125rem; font-size:
             0.9375rem; }) so it wins on source order at equal selector
             specificity (one class + one class) — this intentionally
             overrides only that rule's padding value (0.5rem 1.125rem ->
             0.75rem 1.75rem, matching "Meet all the Mamas"'s effective
             padding from the untouched shared base rule). align-self:
             center and font-size:0.9375rem from that earlier rule are
             LEFT UNCHANGED — neither was named in this instruction's
             copy-list ("gradient, white text, no border, shadow, radius,
             padding and hover behaviour") nor its do-not-change list
             ("labels, routes, alignment or card hover behaviour"), so the
             existing centred alignment and compact font-size were kept
             exactly as-is out of caution. Only .sdx-btn-primary is
             targeted in this new rule (not .sdx-btn-secondary) because
             all four door CTAs use .sdx-btn-primary only; .sdx-btn-
             secondary is unused inside .door-card-body, so leaving it out
             changes nothing for this page. Labels, hrefs, and the four
             doors' card markup are completely untouched (verified via
             grep against mamadex.html — same four <a class="sdx-btn-
             primary"> lines, same text, same hrefs as before this edit).
             The Living Tower CTA rule block (.mamadex-living-tower-band
             .sdx-btn-secondary, added v5.10.0) and its :hover rule are
             untouched by this edit — verified via grep, no lines in that
             block were modified. .door-card:hover/:focus-within (card
             lift, §6) is untouched — verified via grep, same two-line
             rule as before. Brace balance re-verified after this edit:
             94 open / 94 close (exact match, no stray brace).
   - v5.10.0 (2026-07-11): TWO DEFECT CORRECTIONS — owner instruction, on
             top of v5.9.0.
             (1) FILLED GRADIENT CTA — added
             .page-mamadex .mamas-network-cta .sdx-btn-secondary,
             .page-mamadex .mamadex-living-tower-band .sdx-btn-secondary
             { background: linear-gradient(135deg, var(--page-primary) 0%,
             var(--page-secondary) 100%); color:#fff; border:none;
             box-shadow: 0 3px 12px rgba(from var(--page-primary) r g b /
             0.32); } plus a :hover shadow-alpha bump (0.32 -> 0.45, no
             transform — page's existing hover-motion-cancel rule already
             covers .sdx-btn-secondary). Verified via grep before adding
             this that no such override previously existed anywhere in this
             file — "Meet all the Mamas" was rendering as the plain global
             .sdx-btn-secondary (outlined: light bg, 2px page-primary
             border, page-primary text) until this rule. Owner explicitly
             confirmed: keep class .sdx-btn-secondary on both CTAs (not
             .sdx-btn-primary); this page-scoped override is what makes it
             look filled.
             (2) SILVER LIGHTBOX-TRIGGER BORDER FIX — the
             .door-card-media/.capability-card-media .media-thumb rule
             (added v5.9.0) reset border/background/padding/margin but not
             `appearance`, so native <button> chrome (silver bezel) painted
             through. Added appearance/-webkit-appearance:none,
             border-radius:inherit, box-shadow:none, line-height:0. Added a
             page-scoped .media-thumb:focus-visible override (3px solid
             var(--sdx-color-mama-violet), beats the shared component's
             generic teal 2px rule via specificity). Added border:0/
             border-radius:inherit to .door-card-media img and
             .capability-card-media img for full spec compliance (was
             already effectively borderless; now explicit). Geometry
             (aspect-ratio 3/2 on both media containers, overflow:hidden,
             img 100%/100%/object-fit:cover) required NO change — it was
             already identical across all ten triggers. Did NOT rename
             .media-thumb to .media-lightbox-trigger (as the owner's
             illustrative CSS used) because media-lightbox.js's click
             delegation (classList.contains("media-thumb")) and gallery
             grouping (querySelectorAll('.media-thumb[data-gallery=...]'))
             both key off this literal class name — renaming would break
             the shared lightbox integration for all ten triggers.
   - v5.9.0 (2026-07-11): COMPLIANT LIVING TOWER EXIT + SHARED IMAGE
             LIGHTBOX — owner instruction (narrow implementation pass:
             hero, four door cards, Mama slider, six capability cards,
             routes, copy, and card hover behaviour all explicitly left
             untouched).
             LIVING TOWER EXIT: rebuilt on the canonical .sdx-cta-band
             component (global.css) — the same component reporters.html
             and mamadex-mamas.html use for their own Living Tower exits —
             per owner's explicit direction after reviewing options
             ("Use the live .sdx-cta-band as the structural source, but
             implement a visually quieter secondary variant"). REMOVED —
             .mamadex-living-tower-exit/-exit-copy/-exit-link and their
             dark-mode hover rule (dead — mamadex.html no longer uses these
             bespoke classes). ADDED — .page-mamadex .mamadex-living-tower-
             band: the only override needed, reducing the canonical band's
             padding (5rem 2rem -> 2.5rem 2rem desktop, 3.5rem 1.5rem ->
             2rem 1.5rem at <=600px) and the intro paragraph's bottom
             margin. Everything else — full-width outside .container,
             border-top divider, var(--page-primary) tinted ::before wash
             (already MamaDEX violet via this page's own token binding in
             §1), centred .sdx-cta-band-inner column — is the unmodified
             canonical component. mamadex.html's markup drops the <h2>
             entirely (no large primary headline) and uses .sdx-btn-
             secondary instead of .sdx-btn-primary (restrained outline
             link, not an oversized filled CTA) — already covered by this
             page's own §5 hover-motion-cancel rule, so "no hover movement"
             needed no new CSS. Explicitly NOT revived: the older retired
             .pillars-footer-link idiom.
             SHARED IMAGE LIGHTBOX: media-lightbox.css/.js restored (see
             mamadex.html's own v7.1.6 changelog for the full HTML side —
             10 image triggers, one shared #media-lightbox overlay, no
             video triggers, no portal/canvas/mist code). ADDED — .page-
             mamadex .door-card-media .media-thumb, .page-mamadex
             .capability-card-media .media-thumb: the only page-scoped CSS
             this needed, since the shared component's own .media-thumb
             geometry rule is scoped to ".cards .card" (an ancestor pattern
             this page doesn't use). Supplies block/100%-fill geometry +
             cursor:zoom-in (allowed affordance, replaces the shared rule's
             plain pointer cursor which doesn't reach this page anyway).
             No hover zoom/scale/translate added anywhere — .door-card-
             media img/.capability-card-media img's existing plain
             object-fit:cover rules are completely unmodified; the
             canonical .door-card:hover/:focus-within lift (§6) is also
             completely unmodified — task explicitly required both left
             alone.
   - v5.8.0 (2026-07-11): FINAL CORRECTION PASS — CLOSING-ROUTE SECTION
             REMOVED, LIVING TOWER EXIT KEPT AND RELOCATED — owner
             instruction (the four visitor doors are the only primary
             routing layer; the closing-route section repeated the same
             four choices a second time, adding nothing).
             REMOVED — .page-mamadex .closing-route-links (base rule),
             .closing-route-links .sdx-btn-secondary, and the
             max-width:640px variant of both. REMOVED —
             .mamadex-closing-route from the two grouped selector lists it
             used to share with .mamas-block/.mamadex-doors/.mamadex-
             capability (the module max-width helper, and the section-
             scale-compression padding/margin-bottom rule, base + 768px).
             KEPT, UNCHANGED — .page-mamadex .mamadex-living-tower-exit and
             its child rules (-copy/-link, plus dark-mode link-hover) —
             same top-border "continuation block" treatment as before,
             only its HTML position moved (now sits directly after the
             capability section rather than inside the deleted closing-
             route section — see mamadex.html v7.1.5 changelog). It is
             NOT wrapped in .sdx-card-section, deliberately — that class
             carries card/border/box-shadow styling the owner explicitly
             ruled out for this line ("not a button, card, CTA band, or
             bordered control").
             COMMENT-ONLY UPDATES (no rule changes): the .mamadex-living-
             tower-exit doc-comment and the page-scoped CTA-hover-motion-
             cancel rule's doc-comment both mentioned "the closing-route
             links" — updated for accuracy now that they're gone; neither
             rule's actual selectors or declarations changed.
             HERO INTRO TEXT: see mamadex.html's own v7.1.5 changelog and
             the i18n/vault files themselves for the three-sentence
             replacement — no CSS change was needed or made for this part
             (same .intro selector, same text-shadow rule from v5.5.0,
             untouched).
             UNCHANGED: hero image/H1 position/shadow, door-card rules,
             capability-card rules, mamas-bar/slider rules, every other
             page rule.
   - v5.7.0 (2026-07-11): HERO CTA REMOVED, DEAD CSS + I18N CLEANED UP —
             owner instruction (the four visitor doors immediately below
             the hero are already the page's action layer; the hero button
             added no new choice, only visual clutter). Companion CSS pass
             to mamadex.html's own v7.1.4 change (button + its now-empty
             .hero-actions wrapper removed from the HTML).
             REMOVED — .page-mamadex .hero-actions (base rule: display:flex,
             gap, justify-content, margin-top) — laid out the wrapper that
             no longer exists. REMOVED — the two
             ".page-mamadex .hero-body .hero-actions,
             .page-mamadex .hero-actions { justify-content: ... }" rules
             inside both the >=1024px and <1024px hero-body media queries
             (v5.6.0/v5.5.0) — same reason, dead once the wrapper is gone.
             REMOVED — .btn-hero-primary:hover/:focus-visible from the
             page-scoped "CTA hover motion removed" selector list (§5) —
             nothing on this page uses that class any longer.
             UNTOUCHED — .sdx-btn-primary/.sdx-btn-secondary hover-motion
             rule (still used by the four door CTAs, the Meet-all-the-Mamas
             CTA, the four closing-route links, and the Living Tower exit —
             none of that button styling was touched this pass), every
             .door-card* rule, and every other page rule.
             I18N — mamadex.hero.cta removed from all 5 runtime locale
             files (i18n/mamadex/{en-ZA,de-DE,fi-FI,fr-FR,zh-CN}.json) and
             all 5 vault translation files
             (vault/translations/www/mamadex/{en-ZA,de-DE,fi-FI,fr-FR,
             zh-CN}.translations.v1.0.json) — confirmed via a full-codebase
             grep that the only reference to this exact key was the removed
             button (a similarly-named mamadex.hero.cta.continue key in
             assets/data/pages/pages.index.json is unrelated and untouched).
             id="visitor-doors" on the doors section below was NOT removed
             — it is that section's own id, not logic built solely for the
             deleted button, and costs nothing to keep.
             HERO SPACING: no new spacing rule added. .hero-body simply
             ends after the intro now; .hero's own top/bottom padding
             (5rem/2rem desktop, 4rem/1.5rem <=768px, unchanged) already
             provides the vertical breathing room, and the block's height-
             dependent centring (transform:translateY(-50%) at >=1024px,
             align-items:end at <1024px) recomputes automatically for the
             shorter block — verified this requires no extra rule rather
             than assumed.
   - v5.6.0 (2026-07-11): STAGE 1 — 55/45 GRID SPLIT UNDONE, WIDER OVERLAY
             PLACEMENT — owner instruction ("the instruction was wrong...
             Coworker followed it accurately; the bad result comes from my
             geometry"). v5.5.0's grid-template-columns:minmax(0,55%)
             minmax(20rem,45%) on .hero-grid, and grid-column:2/justify-
             self:start/max-width:30rem on .hero-body, REMOVED — the 30rem
             column was forcing the H1 into a four-line stack.
             REPLACED with a page-scoped absolute-overlay placement: at
             >=1024px, .hero-body is position:absolute; left:44%; top:50%;
             transform:translateY(-50%) (static centring, confirmed by
             owner as permitted — not a hover/transition effect, none
             added); width:min(40rem,46vw); max-width:40rem; margin:0;
             text-align:left. See the rule's own comment for two deliberate
             numeric deviations from the owner's supplied example (anchored
             to .hero rather than converting .hero-grid to
             position:relative, which would have collapsed it to 0x0 once
             its child left the flow; 46vw fallback instead of 48vw, tuned
             so the copy width lands inside the requested 36-40rem band
             from ~1250px up and never overflows .hero at the 1024px edge)
             — both explained inline, both produce the same or a safer
             result at the named 1440px reference point.
             <1024px: explicit position:static added to the existing
             bottom-anchored/background-position-shifted mobile treatment
             (unchanged from v5.5.0) so the return to normal flow below
             1024px is stated, not just implied by the breakpoint boundary.
             INTRO TEXT-SHADOW: kept exactly as added in v5.5.0, unchanged,
             per explicit owner instruction this round.
             H1 line count, face/body coverage, and the two-sided
             composition at 1440px could not be screenshot-verified in this
             environment (no browser/render tooling, no package-registry
             network access — confirmed again this pass) — reported as
             computed CSS values and font-metric reasoning only; owner has
             direct visual access to the rendered page and is the source of
             truth on the actual line count.
             UNCHANGED: door-card CSS (v5.3.0 stands), section order,
             routes, images, visible copy, i18n keys, other MamaDEX pages.
   - v5.5.0 (2026-07-11): STAGE 1 — HERO CORRECTION MADE EXPLICIT AND
             MEASURABLE — owner instruction (v5.4.0's margin-right nudge
             confirmed too small — ~14-29px at 1440px — to visibly change
             the composition; "do not make another micro-adjustment").
             REPLACED the justify-self/margin-right mechanism entirely with
             explicit .hero-grid column tracks (owner-supplied values),
             confirmed applied to a .hero-grid node that genuinely exists in
             the live HTML (mamadex.html: <div class="hero-grid"><div
             class="hero-body">) — not assumed. At >=1024px:
             grid-template-columns: minmax(0,55%) minmax(20rem,45%);
             .hero-body moved to grid-column:2, justify-self:start,
             width/max-width min(100%,30rem)/30rem, margin:0. This makes the
             copy block's left edge land exactly at the 55% mark of the
             hero's content width at every desktop viewport (a fixed
             percentage, not a small fixed-px nudge) — see the correction
             report for the measured percentages at 1024px and ~1400px.
             <1024px: single column reverts to global.css's own default
             (no override needed — the >=1024px media query is the only
             place the two-column track is set). Copy block stays centred,
             but now bottom-anchored (.hero align-items:end, page-scoped,
             mobile-only) rather than vertically centred, because a plain
             centred crop of this 1690x967 landscape photo inside a much
             narrower/taller mobile box lands squarely on the Mama's face —
             confirmed by direct proportion check, not assumed. Paired with
             a mobile-only background-position shift (68% 40%, was the
             page's existing "center 40%") that moves the visible crop
             window off her face entirely (see the rule's own comment for
             the percentage math) while keeping the centre-activity tables
             and the garden/doorway zone in frame. 430px/390px add only
             overflow-guard side padding on top of the same <1024px
             mechanism — not a second layout system.
             INTRO TEXT-SHADOW STRENGTHENED, PAGE-SCOPED — owner instruction
             ("technically present but still weak... increase only the
             per-glyph shadow strength, without a background panel").
             global.css's canonical ".hero .intro" shadow was re-confirmed
             present/matching/unoverridden in the v5.4.0 pass immediately
             before this one; the owner has now explicitly asked for a
             stronger page-scoped value regardless of that prior finding —
             recorded here as a deliberate, instructed exception to this
             file's own earlier "pages must not override .intro
             text-shadow" convention (v5.2.0 note), not an oversight or a
             contradiction. New rule: .page-mamadex .hero .intro (3-class
             specificity, outranks global.css's 2-class .hero .intro
             regardless of load order) — text-shadow only, three stacked
             layers (tight, mid, wide), same layered photographic-hero
             technique as the rule it strengthens. global.css itself was
             NOT modified. No background panel, no blur, no glow invented.
             H1 shadow: unchanged this pass — the owner's correction this
             round named the intro only; .headline's canonical shadow was
             already confirmed correct in v5.4.0 and is not revisited here.
             CTA: unchanged — .btn-hero-primary hover/focus transform:none
             (page-wide since v5.1.0, §5) still applies; CTA still aligns
             with the copy block's own left edge via .hero-actions
             justify-content:flex-start at >=1024px, centred only inside
             the <1024px centred composition.
   - v5.4.0 (2026-07-11): STAGE 1 FINISH — HERO PLACEMENT AND TEXT
             READABILITY ONLY — owner instruction ("narrow final correction
             ... hero placement and text readability only"). No door-card
             change (v5.3.0 stands untouched), no section order/route/
             image/copy/i18n change, no other MamaDEX page touched.
             Timestamped backup taken first: _snapshots/mamadex/backups/
             mamadex.html.20260711T132210Z.bak and
             mamadex.css.20260711T132210Z.bak.
             HERO DOM: unchanged — still the single canonical
             .hero-wrap > .hero > .hero-grid > .hero-body structure, no
             .hero-grid two-column variant, no new wrapper, no boxed/glass
             panel, no dark rectangle behind the copy, no transform hack.
             HERO POSITIONING: .hero-body's v5.1.0 single fixed value
             (max-width 30rem, margin-right 2vw, switch to centred at
             860px) replaced with explicit per-breakpoint values at
             1440px, 1024px, 768px, 430px and 390px — same four properties
             as before (justify-self, text-align, max-width, margin), nothing
             new. >=1440px: max-width 30rem / margin-right 4vw. Default
             (861-1439px, covers the 1024px checkpoint): max-width 24rem /
             margin-right 4vw at <=1024px, else max-width 28rem / margin-
             right 3vw. <=768px: reverts to the plain canonical centred/
             full-width composition (justify-self:center, text-align:center,
             max-width 34rem, margin-right 0) — the crossover point moved
             from 860px to 768px so 1024px keeps the two-sided composition
             and 768px is the deliberate switch, matching the breakpoint
             named in the correction. <=430px/<=390px: same centred
             composition, only horizontal side padding added (0.25rem /
             0.125rem) to guard against overflow on the narrowest common
             phone widths — not a second layout system.
             TEXT SHADOW (H1 + intro): verified against the live computed
             selectors, not just quoted from global.css. p.intro in
             mamadex.html carries exactly class="intro" (confirmed in the
             HTML), so the canonical ".hero .intro" rule in global.css
             (color:#fff; text-shadow: 0 5px 20px rgba(0,0,0,0.90), 0 3px
             12px rgba(0,0,0,0.70)) matches it via descendant combinator —
             specificity (0,2,0) beats the generic ".intro" rule (0,1,0), so
             it is not overridden by that or by anything else in this file,
             themes.css, header.css, footer.css, or mamadex-slider.css
             (grepped directly — zero matches for .intro/.headline/
             text-shadow in any of those four files). Same check for
             h1.headline against global.css's ".headline" rule (text-shadow:
             0 4px 20px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.6), 0 1px
             3px rgba(0,0,0,0.4)) — also unmatched by any override. Both
             shadows were already the canonical photographic-hero per-glyph
             treatment and neither was missing nor overridden — per
             instruction, no new glow invented, no CSS change made to
             either rule. The readability complaint this pass responds to
             is attributed to the v5.1.0 copy position sitting closer to
             the image's lighter dirt-path/activity register at narrower
             widths, not to the shadow value itself — the breakpoint
             correction above moves the column solidly over the shaded
             garden/tree-canopy zone at every checkpoint instead.
             CTA: no change — .btn-hero-primary hover/focus already has
             transform:none applied page-wide since v5.1.0 (see §5); still
             left-aligned with the copy block via .hero-actions
             justify-content:flex-start (flex-start again at <=1024px,
             centred only inside the <=768px centred composition).
             DARK STRIP: re-confirmed, not changed. Same finding as v5.1.0 —
             the .hero-wrap::before vignette (opacity 0.20, fade at 32%) is
             byte-identical to every other Buktika hero (checked against
             living-tower.css again this pass) and is the standard
             readability treatment, not a leftover overlay. The visible dark
             band at the hero's bottom edge is the source photo's own dark
             floor/threshold register (image-hero2.webp's doorway sill and
             interior floor sit noticeably darker than the rest of the
             frame) reading through that same standard vignette — not a
             MamaDEX-specific defect, so not removed or weakened.
             VERSION: mamadex.html's stylesheet link query bumped 5.2.0 ->
             5.4.0 in the same pass (was already stale at 5.2.0 against this
             file's own 5.3.0 header before this change).
   - v5.3.0 (2026-07-11): NARROW CORRECTION — DOOR-CARD HOVER BORDER-COLOUR
             REMOVED, NOW BYTE-EQUAL TO LIVING TOWER's .card:hover — owner
             instruction ("match Living Tower exactly"). v5.2.0 kept a
             page-scoped border-color: var(--page-primary) (--sdx-color-
             mama-violet, #8b5cf6) hover/focus-within change alongside the
             canonical lift/shadow; that was still a MamaDEX-specific
             invention, since Living Tower's source rule (global.css
             "CANONICAL CARD - Design System v4.0.0", .card / .card:hover)
             has NO border-color change on hover or focus at all — hover
             there is transform + box-shadow only. Removed border-color
             from both .door-card's transition list and its :hover/
             :focus-within rule. Resting border (1px solid var(--border))
             is unchanged and unaffected — it simply no longer recolours
             on interaction. No other violet token, outline, or box-shadow
             ring was present on .door-card; none added.
   - v5.2.0 (2026-07-11): STAGE 1 CORRECTION — DOOR-CARD HOVER RESTORED TO
             CANONICAL, CTA CENTRED — owner instruction ("Stage 1 — Hero,
             card behaviour and page compression"). Reverses part of
             v5.1.0's door-card treatment: v5.1.0 removed all card lift;
             this pass restores it, but to the exact canonical .card values
             from global.css ("CANONICAL CARD - Design System v4.0.0":
             transition: transform 0.28s ease, box-shadow 0.28s ease;
             :hover { transform: translateY(-3px); box-shadow:
             var(--card-shadow-hover); }), not a reinvented value — door
             cards now behave exactly like every other canonical card on
             the site. border-color hover change (page-scoped, non-motion)
             kept alongside it. .door-card-body .sdx-btn-primary/
             .sdx-btn-secondary align-self changed flex-start -> center —
             CTA now sits centred under left-aligned heading/body text.
             Button hover still cannot move: the existing page-scoped
             transform:none override (added v5.1.0, unchanged) still
             applies regardless of the card's own lift.
             VERIFIED, NOT CHANGED: hero H1/intro text-shadow — mamadex.css
             carries no text-shadow override on .headline or .hero .intro;
             the canonical global.css shadow (see that file's .headline and
             .hero .intro rules) already applies unmodified — global.css's
             own hard rule forbids page overrides of .intro text-shadow, so
             none was added. Capability card image ratio (3/2, chosen last
             pass over 4/3) and the six-card image+label-only structure are
             unchanged. Section/card compression values from v5.1.0 are
             unchanged (already compact; re-verified, not re-tightened).
   - v5.1.0 (2026-07-11): VISUAL COMPRESSION + HOVER-BEHAVIOUR CORRECTION —
             owner instruction (narrow correction pass on the already-rewritten
             page; no rewrite, no section/route/i18n/HTML-structure change).
             HERO: no new hero architecture added — the existing canonical
             .hero-wrap > .hero > .hero-grid > .hero-body DOM is unchanged.
             .hero-body repositioned into the image's right-hand text-safe
             area using only properties already present in the canonical
             hero system (justify-self, text-align, max-width, margin) —
             see the rule's own comment. Reverts to the plain centred
             global.css default at <=860px so mobile is never forced into
             the desktop right-side composition.
             DARK STRIP INVESTIGATION: the .hero-wrap::before vignette
             (opacity 0.20, fade at 32%) and global.css's .hero-wrap
             border-bottom:1px are confirmed byte-identical to every other
             Buktika hero (living-tower.css checked directly) — this is the
             standard image-readability treatment, not a leftover portal/
             overlay rule, and is NOT removed. The perceived "dark strip" is
             the source photo's own dark dirt-floor register at its bottom
             edge (confirmed by direct crop inspection of image-hero2.webp)
             reading more strongly under the standard vignette than a
             brighter reference photo would. No CSS defect found; documented
             rather than "fixed" by weakening the shared readability
             treatment.
             DOOR CARDS: .door-card/.door-card:hover,:focus-within transform
             (translateY lift) removed — hover/focus now change box-shadow
             and border-color only, zero geometry change. .door-card-media
             aspect-ratio 4/3 -> 3/2 (mild height reduction, subjects
             re-checked to stay in frame). Section padding, grid gap, card
             body padding/margins, and CTA size reduced (see rules below).
             CTA HOVER MOTION: new page-scoped rule cancels the translateY
             lift that global.css's .btn-hero-primary/.sdx-btn-primary/
             .sdx-btn-secondary apply on hover/focus everywhere else on the
             site (global.css explicitly permits standalone-button lift —
             this page opts out via a higher-specificity page-scoped
             transform:none, not by editing the shared global rule). Colour/
             box-shadow/border hover changes already defined globally are
             untouched.
             MAMAS SECTION: .mamas-bar margin-bottom and .mamas-network-cta
             margin-top reduced; page-scoped .section-intro margin reduced
             (permitted — the DOC-02 §4.1.4 hard rule restricts colour/
             border-bottom/text-align/max-width overrides on canonical
             heading/intro classes, not margin).
             CAPABILITY SECTION: .capability-card-media aspect-ratio 2/1 ->
             3/2 — re-derived from the six actual source dimensions (five
             images are 724x362/2:1, one is 1448x1086/4:3): 3/2 crops less
             width off the five wide photos than 4/3 would, and crops far
             less height off the one 4:3 photo than the previous 2/1 did,
             making it the best single shared ratio for all six, not a
             guess from file dimensions alone. .capability-card-caption
             rule removed (captions removed from mamadex.html — labels
             only now); .capability-card-label padding increased slightly
             to fill the space; explicit cursor:default confirms these
             cards stay non-interactive.
             CLOSING ROUTE: .closing-route-links .sdx-btn-secondary
             shrunk from four equal flexed "dashboard tiles"
             (flex:1 1 13rem;max-width:18rem) to compact natural-width
             pills (flex:0 0 auto, smaller padding/font-size) that wrap
             naturally.
             LIVING TOWER EXIT: anchor's class changed in mamadex.html from
             "sdx-btn-secondary mamadex-living-tower-exit-btn" to a new,
             much quieter .mamadex-living-tower-exit-link text-link style
             (no button fill/border/shadow) — no longer a second competing
             button. Same href, same i18n key, same visible text.
             SECTION PADDING: shared page-scoped rule compresses top/bottom
             padding and margin-bottom on .mamadex-doors/.mamadex-capability/
             .mamadex-closing-route/.mamas-block (all still .sdx-card-section
             instances — the shared global.css .sdx-card-section rule itself
             is untouched; only this page's instances are overridden).
             UNCHANGED: section order, routes, images, visible copy, i18n
             keys, colour tokens, other MamaDEX pages, global.css/themes.css.
   - v5.0.1 (2026-07-11): CAPABILITY IMAGE ASPECT-RATIO CORRECTION — after
             visually inspecting the six actual delivered capability photos
             (mamadex-capability-*.webp) rather than assuming a ratio: five
             of six (care/food/growing/skills/records) are 724x362, exactly
             2:1; only learning is 1448x1086 (4:3). .capability-card-media
             aspect-ratio changed from 4/3 to 2/1 — 4/3 was centre-cropping
             roughly a quarter of the width off both sides of five images,
             several of which (food especially) have people spread edge to
             edge. See the rule's own comment for detail. No other change.
   - v5.0.0 (2026-07-11): MAMADEX ORIENTATION-HUB REWRITE — owner instruction
             (Coworker instruction: "Rewrite mamadex/mamadex.html as the
             MamaDEX orientation hub"). Companion stylesheet change to
             mamadex.html's own v5.0.0 rewrite — see that file's V7-HEADER
             for the full architecture rationale.
             REMOVED: entire portal/orb system — --portal-top/-w/-h/-radius
             and --orb-mobile-* custom properties; .hero-orb/.orb-glow/
             .orb-logo/@keyframes sdx-orb-glow; .hero-portal-rect and all
             #sparkle-container/canvas/#mist-canvas/#midground-canvas/
             #sparkle-canvas rules; .portal-text/.portal-text-line; the
             860px mobile portal layout block. The bespoke 9-tier
             ".hero-wrap,.hero{min-height:...}" scale ("premium scale for
             MamaDEX portal experience") replaced with the plain canonical
             single-breakpoint pattern (var(--hero-min) desktop / 480px at
             640px) already used by living-tower.css/mamadex-proof-
             routes.css. .hero-grid width override and .hero-body custom
             padding/z-index removed — both existed only to stack hero text
             above the portal canvases.
             REMOVED: .comprehension-* ("The centre already knows" Kitchen
             Table image block), .flow-beat/.flow-step (3-beat flow),
             .field-pathways-footer-* (five-video section's proof-routes
             continuation link), .mamadex-pillars .pillar-grid/.pillar-card/
             .pillar-brand-icon/.pillar-tagline/.pillar-points/.btn-pillar-*
             (Four Pillars section) — all removed with their HTML sections.
             .pillars-header h2/.intro selectors split out of the shared
             .mamas-bar h2 rule and deleted (mamas-bar keeps its own rule,
             unchanged). .pillars-footer-link/-copy/-btn renamed to
             .mamadex-living-tower-exit/-copy/-btn and reused for the
             rebuilt page's new "Living Tower secondary exit" section (same
             quiet continuation-block idiom; button now the canonical
             .sdx-btn-secondary rather than a page-specific gradient, per
             the "canonical button classes only" instruction). Dead
             "(hero section, nav buttons)" .cta/.btn/tooltip block removed
             — confirmed unused in the live HTML (grep-verified).
             ADDED: --hero-image now points at the approved doorway-Mama
             photo (image-hero2.webp), replacing the generic mamadex-
             hero.webp (unused sunbeam/forest artwork). .hero-actions
             (canonical, matching living-tower.css). .door-grid/.door-card/
             .door-card-media/.door-card-body/.door-card-heading (Four
             visitor doors, section 2). .capability-grid/.capability-card/
             .capability-card-media/-label/-caption (six-card function
             grid, section 4, non-clickable). .closing-route-links
             (compact closing route, section 5) using .sdx-btn-secondary.
             UNCHANGED: page token block (--page-bg/-primary/-secondary/
             -accent/-depth/-dark-base/-dark-surface), .mamas-bar/.mamas-
             bar-heading/.mamas-bar-tip (Mamas slider heading, kept
             verbatim — slider itself untouched), .mamas-network-cta,
             .sdx-cta-band .sdx-btn-primary gradient, generic .card/
             .btn-primary/.cta-btn rules (not targeted by this pass — no
             longer referenced by this page's own markup but left in place,
             not part of the enumerated portal/pillar/comprehension removal
             list), all dark-mode rules for the above unchanged sections.
   - v4.9.15 (2026-07-09): PATHWAY CARDS REPLACED WITH SINGLE BUSINESS-
             ROUTE CONTINUATION BLOCK — owner instruction (mamadex.html
             v6.2.0 rejects v4.9.14's three-card module: the page already
             has route exits for the people/centre paths, only the
             business/proof route was missing). REMOVED — .page-mamadex
             .mamadex-field-pathways .mamadex-pathway-cards and
             .mamadex-pathway-card (grid, card, hover, dark-mode, mobile
             rules) entirely. ADDED — .page-mamadex .field-pathways-footer-
             link / -footer-copy / -footer-btn, structurally identical to
             .pillars-footer-link/-footer-copy/-footer-btn below (copy +
             one filled sdx-btn-primary button, same MamaDEX violet ->
             depth gradient pair), just scoped to the new block instead of
             reusing the pillars-footer classes directly (keeps the two
             continuation blocks independently tunable). Button max-width
             widened to 26rem (vs pillars-footer's 22rem) to comfortably
             hold the longer "See Human Restoration Proof Routes" label.
   - v4.9.14 (2026-07-09): PATHWAY SECTION CORRECTION — owner instruction
             (mamadex.html v6.1.0 rejects v4.9.13's standalone
             .mamadex-pathways section as mechanically inserted, unstyled,
             and non-canonical). REMOVED — .page-mamadex .mamadex-pathways
             .pathway-grid, .pathway-card, and its dark-mode/mobile rules,
             entirely. ADDED — .page-mamadex .mamadex-field-pathways
             .mamadex-pathway-cards and .mamadex-pathway-card (same grid/
             card/button structure, renamed to match the new HTML module
             now nested inside .mamadex-videos instead of a standalone
             section). REMOVED ".videos-header" from three grouped h2
             selectors (canonical underline, dark-mode, mobile font-size),
             the grouped ".intro" rule, and the grouped wrapper-container
             rule — .mamadex-videos no longer has a .videos-header wrapper
             div; its header (span.eyebrow / h2.section-title / p.section-
             intro) now inherits global.css's canonical rules directly,
             same as .mamadex-comprehension's h2. .pillars-header and
             .mamas-bar rules in those groups are unchanged.
   - v4.9.13 (2026-07-09): .mamadex-pathways ADDED — owner instruction
             (MamaDEX page chain correction; see mamadex.html v6.0.0
             changelog). New "Choose your MamaDEX path" section, three-card
             .pathway-grid/.pathway-card pattern — simplified variant of
             .pillar-card (no icon/bullet list/per-card colour). Cards use
             the bare canonical .sdx-btn-secondary class, unmodified, so
             the section stays quieter than .btn-pillar-* and the enlarged
             .sdx-cta-band primary button. Heading is a direct
             .sdx-card-section > h2 child — no new h2 rule needed, inherits
             the canonical global.css treatment already used by
             .mamadex-comprehension's h2.
   - v4.9.12 (2026-07-09): .pillars-footer-btn FILLED, .pillars-footer-copy
             WIDENED — owner instruction (outline button read as pale/
             leftover; lead sentence wrapped onto two lines on desktop).
             RENAMED   - .pillars-footer-lead -> .pillars-footer-copy;
             max-width 34rem -> 56rem so the sentence holds one line at
             normal desktop page width; still var(--muted), centred,
             font-size now var(--body) token instead of a literal 1rem.
             ADDED     - .pillars-footer-btn: filled violet -> depth
             gradient (var(--sdx-color-mama-violet) to
             var(--sdx-color-mama-depth)), white text, min-width 16rem /
             max-width 22rem, centred via the wrapper's text-align:center.
             Anchor's HTML class changed from sdx-btn-secondary to
             "sdx-btn-primary pillars-footer-btn" — canonical primary
             button as the base, this rule only narrows its width and
             swaps the gradient stops to the pair already used elsewhere
             on this page (.sdx-cta-band .sdx-btn-primary,
             .btn-pillar-mamadex). No new colours.
             ADDED     - mobile (max-width:640px) rule: copy max-width
             22rem, button width:100% capped at max-width:22rem.
             KEPT      - .pillars-footer-link wrapper (border-top +
             padding, v4.9.11) unchanged.
   - v4.9.11 (2026-07-09): .pillars-footer-link RESTYLED AS CONTINUATION
             BLOCK — owner instruction (the section-level Living Tower
             button still read as a floating afterthought after v4.9.10's
             fix). ADDED .pillars-footer-lead rule for the new lead-in
             sentence ("To see the full mechanism behind these four roles,
             open the Living Tower.") — var(--muted) text, centred, capped
             at 34rem so it reads as a short note, not a paragraph.
             CHANGED   - .pillars-footer-link (now wraps a <div> in HTML,
             was a <p>): gained border-top:1px solid var(--border) and
             padding-top:2rem, reusing the exact token .sdx-cta-band uses
             for its own top divider (thinner here — 1px vs 2px — to stay
             the quieter of the two). Purpose: visually separate this
             block from the pillar grid above so sentence+button read as
             one deliberate continuation note, not a stray trailing link.
             No new colours introduced anywhere in this change.
   - v4.9.10 (2026-07-09): .pillars-footer-link ANCHOR CONVERTED TO BUTTON —
             owner instruction ("See the full Living Tower" was plain
             underlined hyperlink text; not allowed at this CTA position).
             REMOVED  - .pillars-footer-link a and .pillars-footer-link
             a:hover rules (custom underline + token-coloured text). The
             anchor now carries class="sdx-btn-secondary" in mamadex.html —
             the canonical global.css button class, unmodified, no page-
             specific colour override added. Renders as a token-coloured
             outline button (var(--page-primary), the same MamaDEX token
             the old underline rule used), which stays visibly quieter than
             the filled-gradient .btn-pillar-* buttons in the grid above it
             and the enlarged .sdx-cta-band .sdx-btn-primary final CTA.
             KEPT     - .pillars-footer-link wrapper rule (margin-top +
             text-align:center) — layout only, still centres the button
             below the four pillar cards.
   - v4.9.9 (2026-07-09): .sdx-cta-band-actions REMOVED — owner instruction
             (final CTA band's "Explore the Living Tower" secondary button
             removed as a redundant Living Tower exit; see mamadex.html
             v5.9.3 changelog). The flex-row wrapper this rule laid out
             (added v4.9.7 for the two-button row) has no HTML to target
             now that only the primary button remains — dead rule, deleted
             rather than left orphaned. .sdx-cta-band-inner p's existing
             margin-bottom:2rem (global.css canonical rule) already spaces
             the remaining button correctly; no replacement rule needed.
   - v4.9.8 (2026-07-09): .pillars-footer-link added — owner correction
             (MamaDEX pillar card CTA was wrong; card lost its own button,
             section gained one quiet link instead). Plain text link, not a
             button — deliberately lower visual weight than .sdx-btn-*.
   - v4.9.7 (2026-07-09): Final CTA band rewired to a two-button row —
             owner instruction (MamaDEX centre-route page build). ADDED
             .sdx-cta-band-actions (flex row, wraps on narrow viewports).
             Both buttons remain the canonical .sdx-btn-primary/.sdx-btn-
             secondary classes from global.css; no new button styling.
   - v4.9.6 (2026-07-09): MINOR POLISH — owner instruction.
             CHANGED   - .comprehension-overlay (§8) padding 1.125rem/
                         1.25rem → 1.375rem/1.5rem (more internal breathing
                         room, owner request #1).
             CHANGED   - .comprehension-overlay (§8) desktop margin 1.25rem
                         → 1.75rem (moved further inward from the image's
                         right/bottom edges, owner request #2).
             UNCHANGED - .comprehension-image object-position (still
                         "center 35%") and .comprehension-media height
                         (still 32rem desktop) — owner explicitly said
                         "preserve the image crop" this round; not touched.
                         Section structure, eyebrow, title, quote, 3-beat
                         flow all unchanged. No role cards reintroduced.
   - v4.9.5 (2026-07-09): FIX LAYOUT FAULTS — owner instruction ("the
             implementation has layout faults... do not revert to role
             cards, do not change the section concept").
             FIXED     - .comprehension-media (§8) had zero gap between the
                         h2's canonical underline and the image — margin
                         changed from "0 auto 1.75rem" to "2rem auto
                         1.75rem". Matches the spacing rhythm the owner
                         pointed to in "Meet some of our Mamas"
                         (.mamas-bar margin-bottom, same technique: gap
                         lives on the module wrapper, not the canonical h2).
             FIXED     - .comprehension-image (§8) crop was cropping off
                         both women's heads entirely (v4.9.4's bottom-
                         anchored object-position: center 100%). Desktop
                         height raised 30rem → 32rem (512px, within the
                         owner's new 460-540px allowance) and
                         object-position changed to "center 35%" (owner's
                         own suggested value). Faces and most of the bread
                         are now in frame; register/phone are not — owner
                         downgraded that to "if possible" this round. See
                         inline comment for the exact crop math.
             CHANGED   - .comprehension-overlay (§8) and children: owner
                         "make the overlay feel like a caption/seal...not a
                         heavy purple slab... the photo must remain
                         dominant." Panel narrowed 26rem → 20rem, padding
                         reduced, gradient opacity lowered at every stop,
                         hairline border added. text-shadow added to the
                         quote/support text to preserve legibility now that
                         the panel is more translucent.
             UNCHANGED - eyebrow, title, quote/support copy, 3-beat flow.
                         No HTML changes this round — same markup, same
                         i18n keys, CSS-only fix. No role cards
                         reintroduced.
   - v4.9.4 (2026-07-09): LANDSCAPE IMAGE, FULL-WIDTH OVERLAY — owner
             instruction ("full-width cinematic image card", "do not use a
             separate 50/50 purple slab", "overlay the quote on the image
             ... preferably right or lower-right").
             REMOVED   - .comprehension-media grid split (§8): no more
                         grid-template-columns image/panel columns.
                         .comprehension-media is now position:relative,
                         single full-width block, max-width 1200px
                         (matches the page's other full-width modules).
             CHANGED   - .comprehension-image (§8): object-fit:cover now
                         fills the whole card (width/height 100%);
                         object-position "center 90%" → "center 100%"
                         (bottom-anchored) — recalculated for the new
                         landscape source and the new full-width box; see
                         inline comment for the exact visible crop window
                         and the faces-vs-register/phone trade-off, which
                         is unavoidable at this aspect ratio per the
                         owner's own constraints (full-width + 420-500px).
             CHANGED   - .comprehension-overlay (§8): display:flex fixed-
                         height column → position:absolute floating card,
                         sized to its own content. Mobile: full-width band
                         along the image's bottom edge. Desktop (min-width
                         800px): lower-right floating card, max-width
                         26rem, dark translucent violet→black gradient +
                         backdrop-filter blur (was a solid gradient
                         filling a stretched half-width column).
             CHANGED   - .comprehension-overlay-support (§8): hairline
                         top-border treatment (added v4.9.3 specifically to
                         fill dead space in the old stretched column)
                         removed — the floating card sizes to content now,
                         so that problem no longer exists.
             UNCHANGED - .comprehension-eyebrow, overlay-line typography,
                         .comprehension-flow spacing, block height (still
                         30rem/480px desktop). No role cards reintroduced.
   - v4.9.3 (2026-07-09): REBALANCE COMPREHENSION MEDIA — owner instruction
             ("image should carry more visual weight than the quote panel;
             don't lose the table/register/phone; reduce dead space").
             CHANGED   - .comprehension-media (§8) desktop grid-template-
                         columns 1.4fr:1fr (58%/42%) → 3fr:2fr (60%/40%),
                         owner's preferred image:panel ratio. Held at the
                         60% low end of the requested 60-65% range on
                         purpose — see inline comment: a wider image column
                         at fixed 480px height leaves less vertical crop
                         window, so 60% was chosen to protect the
                         register/phone from being cut.
             CHANGED   - .comprehension-image (§8) object-position
                         "center 18%" → "center 90%". Photo was viewed
                         directly to plan this: it re-biases the crop from
                         the women's faces (top of frame) to the bread
                         loaves, flour/yeast, and — critically — the
                         handwritten register and phone (bottom of frame),
                         per owner instruction #5. Faces are the trade-off;
                         documented inline with an explicit note on how to
                         reverse it if the owner prefers.
             CHANGED   - .comprehension-overlay-support (§8): copy shortened
                         to the owner's new one-line text; added a hairline
                         top border + padding so the line reads as an
                         intentional design element rather than filler.
                         Panel's existing justify-content:center (vertical
                         centring) also addresses the "dead space" note.
             UNCHANGED - block height (still 30rem / 480px, owner: "do not
                         make the block taller"), 3-beat flow spacing, no
                         role cards reintroduced.
   - v4.9.2 (2026-07-09): TIGHTEN COMPREHENSION BLOCK — owner instruction
             ("too tall", "too much empty space" in the purple panel).
             CHANGED   - .comprehension-media (§8): desktop min-height 26rem
                         → fixed height 30rem (480px), within the owner's
                         460-520px target. overflow:hidden already present
                         is the overflow safety net.
             CHANGED   - .comprehension-image (§8): mobile height 20rem →
                         18rem; object-fit:cover retained so the image crops
                         instead of forcing the box to full portrait height.
             ADDED     - .comprehension-eyebrow (§8) — small label above the
                         h2, "The Kitchen Table".
             ADDED     - .comprehension-overlay-support (§8) — supporting
                         line now lives inside the purple overlay panel.
             REMOVED   - .comprehension-support (§8) — the standalone
                         paragraph below the image is gone; its role is
                         taken by .comprehension-overlay-support inside the
                         panel, removing duplicate content and page height.
             CHANGED   - .comprehension-overlay padding 2.25rem 2rem →
                         2rem 1.75rem; .comprehension-flow gap 1.75rem/2rem
                         → 1.25rem/2rem; .flow-beat padding-top 1.5rem →
                         1.125rem — reduces vertical spacing so the Mamas
                         slider appears sooner, per owner instruction.
   - v4.9.0 (2026-07-09): IMAGE-LED COMPREHENSION BLOCK — owner instruction.
             REMOVED   - .promise-box/.promise-statement (§8) — the promise
                         card is gone from mamadex.html, replaced by a single
                         image-led section. NOTE: mamadex-mamas.css keeps its
                         own independent copy of these rules for its loop
                         bridge — untouched by this change.
             REMOVED   - .roles-grid/.role-card and children (§8) — the
                         four-card Mama/Centre/Fellow/Keeper skim layer is
                         gone.
             REMOVED   - .mamadex-roles from the §5 width-helper selector
                         list — replaced with .mamadex-comprehension.
             REMOVED   - dark-mode .promise-box/.role-card entries (§10) —
                         dead. The new block's overlay panel uses a fixed
                         brand gradient (works in both themes); support text
                         and flow-beat borders use theme-adaptive tokens —
                         no new dark-mode rules required.
             ADDED     - .comprehension-media/.comprehension-image/
                         .comprehension-overlay/.comprehension-overlay-line/
                         .comprehension-support/.comprehension-flow/
                         .flow-beat/.flow-step (§8).
   - v4.8.0 (2026-07-09): INFORMATION ARCHITECTURE SPLIT — owner instruction.
             ADDED     - .mamadex-roles / .roles-grid / .role-card: four-role
                         visual-skim layer (Mama, Centre, Keeper, Fellow).
             ADDED     - .mamas-network-cta: compact CTA inside mamas-block
                         linking to mamadex-mamas.html.
             REMOVED   - .product-cards/.product-card/.product-badge/
                         .product-subtitle/.product-deliverables/.btn-product
                         (§8 PRODUCT CARDS) — section moved to
                         mamadex-mamas.css (page-mamadex-mamas scope).
             REMOVED   - .sample-box and children (§8 SAMPLE ARTEFACT) — moved.
             REMOVED   - .trigger-cards/.trigger-card/.trigger-social/
                         .trigger-corridor/.trigger-badge/.trigger-details/
                         .trigger-actions (§8 TRIGGER CARDS) — moved.
             REMOVED   - .corridor-grid/.corridor-card and children,
                         .corridors-kicker/.corridors-helper (§8 CORRIDOR
                         CARDS) — moved.
             REMOVED   - .products-header/.corridors-header/.section-lead
                         entries from the §4 typography block and §5 width
                         rules (dead — those sections no longer exist on this
                         page). .videos-header/.pillars-header/.mamas-bar
                         entries kept — still live.
             REMOVED   - Dark-mode rules for .product-card/.trigger-card/
                         .corridor-card/.sample-box/.trigger-corridor/
                         .corridor-launch-label/.corridor-card-action/
                         .corridors-kicker/.corridors-helper (§10) — dead.
                         .promise-box and .pillar-card dark rules kept.
             REASON    - mamadex.html is now the human-facing intro page only;
                         products, triggers, and corridors relocated verbatim
                         to mamadex-mamas.html (network/pathways page).
   - 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               */

  /* v5.0.0: orientation-hub rewrite — hero image switched from the generic
     mamadex-hero.webp (sunbeam/forest artwork, no people) to the approved
     doorway-Mama photo. Portal rectangle / orb geometry custom properties
     removed — the portal system no longer exists on this page. */
  --hero-image:         url("/assets/images/mamadex/image-hero2.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);
}

/* ======================================================================================================
   1b) Canonical MamaDEX section-heading lockup — eyebrow typography/
   spacing AND section-title (h2) size/spacing, normalised to match the
   Living Tower page's own computed values.
   v5.13.0, owner instruction (rejected-build correction). The v5.12.0
   version of this block used .page-mamadex .eyebrow (specificity 0,2,0)
   for the margin fix — the owner's rendered screenshot showed the gap had
   not visibly changed. Per owner instruction, the margin/spacing rules
   below are now written against .page-mamadex .sdx-card-section >
   .eyebrow (specificity 0,3,0 — the extra .sdx-card-section class in the
   chain, plus the direct-child combinator confirming .eyebrow is always
   a direct child of the section in every door page's markup) so this
   rule wins decisively over global.css's canonical .eyebrow { margin-
   bottom: 0.75rem } (0,1,0) regardless of any other rule this owner
   audit may not have found. The sibling rule also now matches both
   possible next-element selectors (plain h2 AND h2.section-title) per
   owner instruction, since global.css's canonical heading selector list
   includes .section-title as an alternate class, not only bare h2.
   Required computed result (owner-specified): eyebrow margin-block-end:
   36px (2.25rem — NOT the previous 32px/2rem estimate); h2/.section-title
   margin-block-start: 0px.

   Living Tower (/living-tower/living-tower.html) remains the typography
   comparator for every OTHER property below (font-size, weight, tracking,
   uppercase) — see REFERENCE block, unchanged from v5.12.0. Only the
   margin value and selector specificity changed this pass.

   REFERENCE (computed, Living Tower, assets/css/living-tower/living-
   tower.css lines ~470-478 and ~444-457):
     .eyebrow      display:block; font-size:1.1rem; font-weight:600;
                   letter-spacing:0.15em; text-transform:uppercase;
                   margin-bottom:2.0rem; color:var(--page-primary) [stone
                   — Living Tower's OWN colour, not reused here].
     h2            font-size:clamp(1.75rem,3vw,2rem), 2.5rem at
                   min-width:768px; margin:0 0 1.5rem; padding-bottom:
                   0.75rem; text-align:center; border-bottom:2px solid
                   var(--page-accent) [amber — Living Tower's OWN colour,
                   NOT reused here].

   MAMADEX RESULT = Living Tower size/weight/tracking/uppercase + the
   owner's explicit 36px eyebrow-to-title gap + MamaDEX's own dark-violet
   eyebrow colour (var(--page-secondary)) + MamaDEX's own light-violet h2
   underline (inherited unchanged from global.css's canonical
   border-bottom:2px solid var(--page-primary) — NOT touched by this
   block, no border-bottom-color rule below). Eyebrow reading-start
   alignment (text-align:start) and width:100% are also folded in here —
   every MamaDEX door page was already setting these identically per-page;
   consolidating removes the duplication (see changelog for the per-page
   rules removed this pass).

   HARD-RULE compliance (global.css v3.16.0 §4.1): this block does not
   override text-align, font-family, font-weight, or colour on
   .section-title/.sdx-card-section > h2 — only font-size, margin, and
   padding-bottom, exactly mirroring the properties living-tower.css
   itself overrides for its own family. h2 colour/border-bottom-colour is
   not set here at all, so it continues to inherit the canonical pillar
   underline unchanged.

   Compact modules (callouts, CTA bands, card-internal labels) never carry
   a bare eyebrow+h2 pair in this shape, so this rule does not reach them. */
.page-mamadex .sdx-card-section > .eyebrow {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: start;
  width: 100%;
  color: color-mix(in srgb, var(--page-primary) 55%, var(--muted) 45%);
  margin-block-end: 2.25rem; /* 36px — owner-specified exact value */
}

.page-mamadex .sdx-card-section > .eyebrow + h2,
.page-mamadex .sdx-card-section > .eyebrow + .section-title {
  margin-block-start: 0;
}

.page-mamadex .sdx-card-section h2 {
  font-size: clamp(1.75rem, 3vw, 2rem);
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .page-mamadex .sdx-card-section h2 {
    font-size: 2.5rem;
  }
}

/* ======================================================================================================
   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. */
}

/* v5.0.0: bespoke .hero-grid width override and the 9-tier "premium
   portal experience" min-height scale removed — both were built only to
   serve the retired portal/orb layout. Hero now uses the plain canonical
   global.css .hero-grid/.hero-body (same as living-tower.html and
   mamadex-proof-routes.html) with no page-level width override, and the
   same single-breakpoint mobile min-height pattern those two pages use. */

/* Canonical pillar headline override — same clamp used on living-tower.css
   and mamadex-proof-routes.css, reused verbatim so this page's H1 matches
   an already-approved Buktika hero scale rather than inventing a new one. */
.page-mamadex .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

/* v5.7.0: .page-mamadex .hero-actions rule REMOVED — the hero CTA button
   and its wrapper were removed from mamadex.html (owner instruction; see
   that file's own v7.1.4 changelog). This rule existed only to lay out
   that wrapper (flex row, left-aligned, gap, top margin) — dead once the
   wrapper is gone, so deleted rather than left orphaned. */

/* v5.6.0: HERO CORRECTION REVERTED AND REPLACED — the 55/45 .hero-grid
   column split (v5.5.0) is UNDONE. Owner confirmed the resulting narrow
   30rem column forced the H1 into an ugly four-line stack — the values
   were followed accurately, the geometry itself was wrong. Removed
   entirely: grid-template-columns: minmax(0,55%) minmax(20rem,45%) on
   .hero-grid; grid-column:2 / justify-self:start / max-width:30rem on
   .hero-body. Replaced with a wider absolute overlay per owner instruction
   — .hero-body positioned directly, at the values below, instead of being
   confined to a grid track at all.
   CONTAINING BLOCK NOTE (the one deliberate deviation from the owner's own
   example): the owner's supplied snippet also set
   ".hero-grid { display:block; position:relative; }" and positioned
   .hero-body against IT. Not done here — .hero-grid has no in-flow content
   once .hero-body is pulled out via position:absolute, so it would collapse
   to a 0x0 box, making "top:50%"/"left:44%" resolve against zero and
   breaking the placement entirely. .page-mamadex .hero (the grid's own
   parent) is already position:relative (see the "Hero inner grid" rule
   above, unchanged since v4.4.0) and has a real, definite box (min-height:
   var(--hero-min), width up to the canonical 1400px hero max-width) — using
   it as the containing block instead produces the exact same rendered
   left/top numbers (hero-grid carries no padding/border of its own that
   would otherwise offset the two) while guaranteeing they resolve against
   a real box instead of a collapsed one. No new wrapper was added either
   way — .hero itself is the existing canonical node.
   WIDTH FORMULA NOTE (the other deliberate deviation): the owner's example
   used width:min(40rem,48vw). Checked directly against the 1024px
   breakpoint edge itself: 48vw at exactly 1024px viewport is ~491px, and
   left:44% of .hero's own ~1024px box is ~451px — 451+491 = 942px, safely
   under 1024px, so overflow was never actually the risk; the risk checked
   for and corrected instead was the copy width undershooting the requested
   36-40rem band right at that same edge (491px = ~30.7rem). Changed the
   vw fallback to 46vw: at 1024px this still yields ~471px (~29.4rem,
   intentionally conservative/safe — flagged below, not silently rounded up
   into the stated range) with a full 10% right-hand margin still free
   inside .hero before hero-wrap's overflow:hidden edge; from roughly
   1250px upward it sits inside 36-40rem, and is flat at the 40rem cap from
   ~1391px up (matches/exceeds the 1440px reference point named in the
   instruction). */
@media (min-width: 1024px) {
  .page-mamadex .hero-body {
    position: absolute;
    left: 44%;
    top: 50%;
    transform: translateY(-50%);
    width: min(40rem, 46vw);
    max-width: 40rem;
    margin: 0;
    text-align: left;
  }
}

/* <1024px: single column (global.css default — no override needed to
   revert grid-template-columns, it simply isn't set outside the media
   query above). The copy stays centred, but the OWNER'S NOTE THIS ROUND is
   explicit: do not just re-centre it over the Mama, because the hero
   background at this aspect is cropped so tightly (a 1690x967 landscape
   photo forced to cover a much narrower/taller box) that a plain centred
   crop lands squarely on the Mama's face, not a neutral background — see
   the background-position correction directly below, which the text
   placement here depends on. Bottom-anchoring (align-items:end on .hero,
   page-scoped, mobile-only) keeps the copy over the image's lower,
   naturally darker floor/threshold register (already reinforced by the
   existing bottom vignette) instead of the vertical centre of the frame,
   where the Mama's face and the seated workers sit. */
@media (max-width: 1023px) {
  .page-mamadex .hero {
    align-items: end;
  }

  .page-mamadex .hero-body {
    /* Explicit reset — the >=1024px rule above is the only place
       position:absolute is ever set, but stated here too so the return to
       normal flow below 1024px is unambiguous rather than merely implied
       by the media-query boundary. */
    position: static;
    justify-self: center;
    text-align: center;
    max-width: 34rem;
    margin: 0;
    padding-bottom: 0.5rem;
  }
}

/* <1024px background-position correction: at this aspect ratio "cover"
   must crop hard on width to fill the narrower/taller box, and the default
   "center 40%" keeps that crop centred on the Mama (confirmed by direct
   proportion check against image-hero2.webp: at a 375x480 mobile box the
   visible window covers roughly 28-72% of the image's width, which
   includes her face). Shifting the horizontal anchor to 68% moves the
   visible window to roughly 36-81% of the image instead — still showing
   the centre-activity tables, but no longer including the Mama's face,
   and it now ends inside the open garden/doorway zone rather than cutting
   it off entirely. Vertical anchor unchanged (40%, matches desktop). */
@media (max-width: 1023px) {
  .page-mamadex .hero-wrap {
    background-position: 68% 40%;
  }
}

/* 768px / 430px / 390px: same mechanism as the <1024px rules above (bottom
   anchor + shifted background-position) — these three checkpoints add
   only overflow-guard side padding and confirm the composition still
   holds at each named width; they are not a second layout system. */
@media (max-width: 430px) {
  .page-mamadex .hero-body {
    max-width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

@media (max-width: 390px) {
  .page-mamadex .hero-body {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }
}

@media (max-width: 640px) {
  .page-mamadex .hero-wrap,
  .page-mamadex .hero { min-height: 480px; }
}

/* v5.5.0: INTRO SHADOW STRENGTHENED, PAGE-SCOPED ONLY — owner instruction
   ("the rendered result is still weak... increase only the per-glyph
   shadow strength on this page, without adding a background panel").
   global.css's own ".hero .intro" rule was confirmed present and matching
   (see changelog) but the owner has now explicitly asked for a stronger
   page-scoped value regardless — this is a deliberate, instructed
   exception to the earlier "pages must not override .intro text-shadow"
   convention noted in this file's own v5.2.0 entry, not an oversight.
   Selector below (.page-mamadex .hero .intro, 3 classes) outranks
   global.css's .hero .intro (2 classes) on specificity alone, so it wins
   regardless of load order. global.css itself is NOT touched. No
   background/panel/blur added — text-shadow only, same layered
   photographic-hero technique, just stronger per-glyph values. */
.page-mamadex .hero .intro {
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.95),
    0 4px 10px rgba(0, 0, 0, 0.85),
    0 8px 24px rgba(0, 0, 0, 0.75);
}

/* v5.0.0: entire orb/portal system (brand orb, glow, glow keyframes,
   portal rectangle, sparkle container, mist/midground/sparkle canvases,
   rotating portal text, mobile portal layout) removed — retired per the
   MamaDEX orientation-hub rewrite. The hero is now the plain canonical
   photographic hero (image + eyebrow + H1 + intro + one CTA), matching
   living-tower.html/mamadex-proof-routes.html. See mamadex.html's own
   v5.0.0 changelog for the full removal note and the archived-file list. */

/* ======================================================================================================
   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 .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);
  /* v5.1.0: translateY(-0.0625rem) removed — colour/border change only, no movement. */
  transform: none;
}

[data-theme="dark"] .page-mamadex .mamas-bar-tip {
  color: var(--sdx-color-mama-violet-light);
  border-color: rgba(237, 233, 254, 0.45);
}

/* .page-mamadex owns a light page canvas in the base rule, so the root theme
   token cannot replace it by inheritance. Explicitly bind the pillar canvas. */
[data-theme="dark"] .page-mamadex {
  background: var(--page-dark-base);
  color: var(--fg);
}

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

[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 .mamas-bar h2 {
    font-size: 1.75rem;
  }

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

/* Section header container — no pill styling.
   v5.1.0: margin-bottom 3rem -> 1.25rem — moves the slider closer to the
   heading/intro (compression pass; slider markup/JS untouched). */
.page-mamadex .mamas-bar {
  display: block;
  margin-bottom: 1.25rem;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}

/* v5.9.0: LIVING TOWER EXIT REBUILT ON THE CANONICAL .sdx-cta-band —
   owner instruction (final correction: the bare-<div> text-link version
   above read as "leftover text above the footer"; reuse the live
   .sdx-cta-band component — global.css "CANONICAL CLOSING CTA BAND",
   the same one reporters.html and mamadex-mamas.html use for their own
   Living Tower exits — but implement it as a visibly quieter secondary
   variant: no <h2>, .sdx-btn-secondary instead of .sdx-btn-primary,
   reduced padding).
   REMOVED — .mamadex-living-tower-exit / -exit-copy / -exit-link and their
   dark-mode hover rule. mamadex.html no longer uses these classes (the
   bespoke centred-div-with-underlined-link markup they styled is gone,
   replaced by <section class="sdx-cta-band mamadex-living-tower-band">).
   Explicitly NOT revived: the older retired .pillars-footer-link idiom —
   owner instruction this round was to build on the live .sdx-cta-band
   pattern instead, not restore that one.
   ADDED — .page-mamadex .mamadex-living-tower-band, below: the ONLY
   override this page needs, since every other .sdx-cta-band/.sdx-cta-
   band-inner property (full-width outside .container, border-top divider,
   var(--page-primary) tinted wash — already MamaDEX violet via this
   page's own token binding in §1, centred inner column, .sdx-btn-secondary
   hover already fixed to transform:none by this page's existing §5 rule)
   is reused completely unmodified. This class only reduces padding so the
   band reads lighter than the full canonical version used as an actual
   page-ending CTA elsewhere — "quieter", not a different component. */
.page-mamadex .mamadex-living-tower-band {
  padding: 2.5rem 2rem;
}

.page-mamadex .mamadex-living-tower-band .sdx-cta-band-inner p {
  margin: 0 0 1.25rem;
}

@media (max-width: 600px) {
  .page-mamadex .mamadex-living-tower-band {
    padding: 2rem 1.5rem;
  }
}

/* ======================================================================================================
   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.
   v5.8.0: .mamadex-closing-route removed from this list — that section no
   longer exists (see mamadex.html v7.1.5 changelog). .mamadex-living-
   tower-exit, which now sits in its place, needs no entry here — it
   floats directly inside .container (already max-width:1200px, centred),
   not inside its own sdx-card-section. */
.page-mamadex .mamas-block,
.page-mamadex .mamadex-doors,
.page-mamadex .mamadex-capability {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

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

/* v5.1.0: SECTION-SCALE COMPRESSION — owner instruction ("the page should
   feel like an orientation hub, not a long institutional report"). Reduces
   top/bottom padding and the gap between stacked sections on this page's
   four rebuilt .sdx-card-section instances only — the shared global.css
   .sdx-card-section rule (padding: 3.5rem 2.5rem; margin: 0 auto 2rem) is
   untouched, so no other page is affected.
   Before (inherited from global.css): padding 3.5rem 2.5rem, margin-bottom 2rem.
   After (this page only):             padding 2rem 2rem,     margin-bottom 1.25rem. */
.page-mamadex .sdx-card-section.mamadex-doors,
.page-mamadex .sdx-card-section.mamadex-capability,
.page-mamadex .sdx-card-section.mamas-block {
  padding: 2rem 2rem;
  margin-bottom: 1.25rem;
}

/* The global container bottom padding and the last section margin used to
   accumulate into a large blank strip above the closing band. */
.page-mamadex main > .container {
  padding-bottom: 1rem;
}

.page-mamadex .sdx-card-section.mamadex-capability {
  margin-bottom: 0;
}

/* v5.19.0: The orientation page intentionally has no visible section
   eyebrows, but its headings keep the same vertical register as the
   eyebrow-led MamaDEX pages. This structural slot equals the shared
   eyebrow line plus its title gap. */
.page-mamadex .sdx-card-section.mamadex-doors::before,
.page-mamadex .sdx-card-section.mamas-block::before,
.page-mamadex .sdx-card-section.mamadex-capability::before {
  content: "";
  display: block;
  block-size: 3.9rem;
}

@media (max-width: 768px) {
  .page-mamadex .sdx-card-section.mamadex-doors,
  .page-mamadex .sdx-card-section.mamadex-capability,
  .page-mamadex .sdx-card-section.mamas-block {
    padding: 1.5rem 1.25rem;
    margin-bottom: 1rem;
  }
}

/* Section heading -> intro gap compression. Permitted: DOC-02 §4.1.4 only
   restricts page overrides of colour/border-bottom on .section-title and
   text-align/max-width on .section-intro — margin is not restricted.
   Before: margin: 1.25rem auto 2.5rem. After: margin: 0.75rem auto 1.5rem. */
.page-mamadex .section-intro {
  margin: 0.75rem auto 1.5rem;
}

/* v5.1.0: CTA HOVER MOTION REMOVED ON THIS PAGE ONLY — owner instruction
   ("hover and focus change colour/highlight only, no movement"). global.css
   permits standalone buttons to lift on hover site-wide (.btn-hero-primary,
   .sdx-btn-primary, .sdx-btn-secondary) — that rule is left completely
   unchanged for every other page. This higher-specificity, page-scoped
   override cancels only the translateY lift for the buttons this page
   actually uses (four door CTAs, Meet-all-the-Mamas CTA, and — as of
   v5.9.0 — the Living Tower exit link, which now uses this same
   .sdx-btn-secondary class instead of its own bespoke one). The colour/
   box-shadow/border-color hover changes those global rules already define
   are untouched — only transform is reset.
   v5.7.0: .btn-hero-primary:hover/:focus-visible REMOVED from this
   selector list — the hero CTA that used that class was removed from
   mamadex.html (owner instruction). Nothing on this page uses
   .btn-hero-primary any longer; kept the rule only for the classes still
   actually in use (.sdx-btn-primary/.sdx-btn-secondary — unrelated button
   styling, left untouched).
   v5.8.0: "the four closing-route links" removed from this comment's
   enumeration — that section was deleted from mamadex.html (owner
   instruction; see that file's v7.1.5 changelog). The rule's actual
   selector list is unaffected — .sdx-btn-secondary is still used
   elsewhere on this page (Meet-all-the-Mamas CTA), so nothing here
   needed to change beyond the comment. */
.page-mamadex .sdx-btn-primary:hover,
.page-mamadex .sdx-btn-primary:focus-visible,
.page-mamadex .sdx-btn-secondary:hover,
.page-mamadex .sdx-btn-secondary:focus-visible {
  transform: none;
}

/* ======================================================================================================
   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
   ====================================================================================================== */

/* v5.0.0: the image-led "comprehension" block ("The centre already
   knows" Kitchen Table section, .comprehension-eyebrow/-media/-image/
   -overlay*/-flow/.flow-beat/.flow-step) removed entirely — that section
   no longer exists on the rebuilt page (see mamadex.html v5.0.0 changelog;
   its "the centre already knows" idea now lives in the hero H1 instead). */

/* --- NETWORK CTA (hands off to mamadex-mamas.html) ---
   v5.1.0: margin-top 2.5rem -> 1rem — moves the CTA closer to the slider
   (compression pass; slider markup/JS untouched). */
.page-mamadex .mamas-network-cta {
  text-align: center;
  margin-top: 1rem;
}

.page-mamadex .mamas-network-cta p {
  max-width: 46rem;
  margin: 0 auto 1.25rem;
  font-size: 1.0625rem;
  color: var(--muted);
}

/* v5.10.0: FILLED GRADIENT CTA — owner instruction (defect correction).
   Verified via code that no gradient override previously existed for
   .mamas-network-cta .sdx-btn-secondary ("Meet all the Mamas") — before
   this rule it rendered as the plain global .sdx-btn-secondary (light
   background, 2px page-primary border, page-primary text: an outlined
   button). This adds the requested filled violet→secondary gradient,
   white text, no border, and box-shadow to BOTH "Meet all the Mamas" and
   the Living Tower CTA (.mamadex-living-tower-band), scoped by each CTA's
   existing wrapper so the two buttons are now visually identical except
   for label/href. Class stays .sdx-btn-secondary on both (per owner
   instruction — do not switch to .sdx-btn-primary); this override only
   changes what that class paints on this page, for these two CTAs. Hover
   state bumps the shadow alpha (0.32 -> 0.45), matching the same
   box-shadow-alpha-only hover idiom already used elsewhere on this page
   (mamadex-slider.css .mamas-bar-tip). No transform/lift on hover — the
   page's existing §5 rule already forces
   .sdx-btn-secondary:hover/:focus-visible to transform:none. */
.page-mamadex .mamas-network-cta .sdx-btn-secondary,
.page-mamadex .mamadex-living-tower-band .sdx-btn-secondary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 3px 12px rgba(from var(--page-primary) r g b / 0.32);
}

.page-mamadex .mamas-network-cta .sdx-btn-secondary:hover,
.page-mamadex .mamadex-living-tower-band .sdx-btn-secondary:hover {
  box-shadow: 0 6px 18px rgba(from var(--page-primary) r g b / 0.45);
}

/* ======================================================================================================
   v5.0.0 — FOUR VISITOR DOORS
   Section 2 of the rebuilt page, immediately after the hero. Four equal,
   image-led route cards read as one family — not product cards (no
   colour-coded badges, no decorative icons, no arrows in labels). The
   image carries most of the meaning; text stays short. 2x2 on desktop,
   single column on mobile. Uses only MamaDEX page tokens.
   ====================================================================================================== */

.page-mamadex .door-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

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

.page-mamadex .door-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  /* v5.3.0: exact canonical .card transition/lift values, no more and no
     less (global.css "CANONICAL CARD - Design System v4.0.0": transition:
     transform 0.28s ease, box-shadow 0.28s ease; :hover { transform:
     translateY(-3px); box-shadow: var(--card-shadow-hover); }) — the
     visitor-door cards must behave exactly like canonical interactive
     cards elsewhere on the site, not invent a different (or zero) lift.
     v5.3.0 REMOVED the border-color transition and the hover border-color
     change (was var(--page-primary), i.e. --sdx-color-mama-violet) — the
     canonical card has no border-color change on hover/focus at all, so
     matching it exactly means dropping the violet ring, not recolouring
     it. Resting border (1px solid var(--border), set above) is untouched
     and still shows on hover — it just never changes colour.
     v5.15.0: REMOVED the resting border entirely (was 1px solid
     var(--border)) — owner instruction confirmed via screenshot that this
     border, not just the image trigger's, is the visible grey line
     surrounding the whole card at rest and on hover. --card-shadow/
     --card-shadow-hover (global.css) are plain soft drop-shadows with no
     inset ring component (0 Ypx blur rgba, no "0 0 0 1px" segment), so no
     simulated border-via-box-shadow existed to remove; the box-shadow
     values were unchanged at that point and remained the sole rest/hover
     edge treatment.
     v5.16.0: box-shadow changed from var(--card-shadow) to none — owner
     instruction, follow-up screenshot comparison (rest vs. hover, same
     card) showed the border:0 fix (v5.15.0) was working correctly and no
     scale()/zoom transform exists anywhere in this file, global.css, or
     the site's JS (re-confirmed by full-codebase grep), but the
     --card-shadow soft drop-shadow itself (0 14px 30px rgba(...,0.08),
     0 1px 2px rgba(...,0.06)) was still visible as a thin grey edge at
     rest, and its escalation to --card-shadow-hover (larger blur, higher
     opacity) plus the translateY(-3px) lift on hover read as the card/
     image "growing". Owner chose to remove the shadow outright rather
     than soften it. transform: translateY(-3px) on hover/focus-within is
     kept — it is a positional lift only, produces no border/shadow/edge
     and was not the reported defect.
     v5.21.0 (2026-07-23): RESTORED border + box-shadow — new owner
     instruction (mobile visual-defect pass): the borderless/shadowless
     v5.15.0/v5.16.0 treatment reads as one continuous panel once the four
     door cards stack on mobile, especially since --card (#f8f5f2) and
     --bg (#f3f4f6) are near-identical tones. Reinstated the exact
     canonical card edge (1px solid var(--border) + var(--card-shadow),
     var(--card-shadow-hover) on hover/focus-within) so each door card
     reads as its own object — same values EduTower's own six-journey
     .edutower-door-card already uses (edutower.css, read-only reference,
     not modified). border-radius/background/transform/lift are
     unchanged. */
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.page-mamadex .door-card:hover,
.page-mamadex .door-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.page-mamadex .door-card-media {
  display: block;
  width: 100%;
  /* v5.1.0: 4/3 -> 3/2 — mild height reduction (compression pass); all
     four door photos are natively 4:3 with the human interaction centred,
     so the resulting top/bottom trim is small and does not cross a face
     or hand. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-alt);
}

.page-mamadex .door-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
  /* Centred by default — each door image was framed so the human
     interaction sits centrally; no crop removes it at this ratio. */
  object-position: center;
}

/* v5.9.0: LIGHTBOX TRIGGER LAYOUT — owner instruction (shared media-lightbox
   restored; only clicking/tapping the image opens it, the route CTA stays
   separate). The shared component's own CSS (media-lightbox.css) scopes its
   .media-thumb geometry rule to ".cards .card .media-thumb" — an ancestor
   pattern this page doesn't use (.door-card/.capability-card are this page's
   own class names, not ".cards .card"). This page-scoped rule supplies only
   the missing geometry (the button must fill its .door-card-media/
   .capability-card-media parent exactly, the same box the plain <img> used
   to fill directly) so the shared lightbox / is-image / data-kind contract
   works without editing the shared CSS file itself. cursor:zoom-in per the
   allowed-affordance list (overrides the shared rule's plain cursor:pointer,
   itself scoped to .cards .card and therefore not applying here anyway).
   No hover zoom/scale/translate is added — .door-card-media img/
   .capability-card-media img keep their existing plain object-fit:cover
   rules above/below, completely unmodified; only the button wrapping the
   image is new. */
/* v5.10.0: SILVER BORDER FIX — owner instruction (defect correction). Root
   cause: the rule below reset border/background/padding/margin but did not
   reset `appearance`, so WebKit/Blink still painted native <button> chrome
   (a light/silver inset bezel) on top of the explicit border:0/background:
   transparent — the same failure mode this codebase already fixed once at
   .strip-shell .arrow (see v3.7.1 changelog), whose working fix included
   appearance:none. Added appearance/-webkit-appearance:none, border-radius:
   inherit (so any future card radius is honoured, none currently set),
   box-shadow:none, and line-height:0 (prevents inline text-metrics from
   giving the button a fractionally taller box than its image, which read
   as an uneven edge). Geometry (aspect-ratio 3/2 on both .door-card-media
   and .capability-card-media, overflow:hidden, img width/height:100%/
   object-fit:cover) was already identical for all ten triggers before this
   fix and is unchanged — every image in each grid already shared one frame
   size; this fix only removes the native button chrome sitting on top of
   it. Class kept as .media-thumb (NOT renamed to .media-lightbox-trigger)
   because /assets/js/partials/media-lightbox.js's click-delegation
   (classList.contains("media-thumb")) and gallery grouping
   (querySelectorAll('.media-thumb[data-gallery=...]')) both key off this
   exact class name — renaming it would silently break the shared lightbox
   for all ten triggers. */
.page-mamadex .door-card-media .media-thumb,
.page-mamadex .capability-card-media .media-thumb {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  /* v5.10.2: min-width/min-height:0 added alongside the wrapper's — see
     that rule's comment for why this closes off the one remaining path an
     oversized intrinsic image (the trigger's own child) could use to grow
     this box past the 100%/100% it's told to be. */
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  line-height: 0;
  cursor: zoom-in;
}

/* v5.17.0: FIREFOX NATIVE BUTTON CHROME — owner instruction (root cause
   found via Firefox DevTools Layout/Box Model panel: the trigger button
   was rendering with a real 2px border and 1px/4px padding that appear
   nowhere in this rule — border:0/padding:0 above were being beaten by
   Firefox's own <button> user-agent default (border:2px outset ButtonFace;
   padding:1px 4px) because -moz-appearance:none was missing; the plain
   appearance/-webkit-appearance:none pair above does not reliably suppress
   Firefox's native chrome on its own). That leftover border+padding shrank
   the button's content box below its .door-card-media/.capability-card-
   media parent's 100%/100% box; the image (100%/100% of the button) then
   also fell short of the parent, and the parent's own background
   (var(--surface-alt)) showed through the gap — most visible at the
   rounded top corners where the outer card's border-radius/overflow:hidden
   clip crosses it, and along the straight sides, which is exactly the
   "border on the corners, fill visible around the image" the owner
   identified. -moz-appearance:none added above, alongside the existing
   appearance/-webkit-appearance:none, so Firefox now strips the same
   native chrome Chrome/Safari were already stripping. This rule is a
   defensive backstop only, restating border:0/padding:0/margin:0 with
   !important across all ten lightbox triggers, so no future browser-
   default leak of this kind can silently reopen the same gap. */
.page-mamadex .door-card-media .media-thumb,
.page-mamadex .capability-card-media .media-thumb {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* v5.14.0: explicit rest/hover/active neutralisation — SCOPED TO THE FOUR
   VISITOR-DOOR IMAGES ONLY (.door-card-media), per this pass's explicit
   scope ("edit only the CSS governing the four visitor-door cards" — the
   six capability-card images below are a different section of this same
   page and were deliberately left untouched, even though they share the
   base .media-thumb rule above). The rule above already zeroed border/
   box-shadow at rest but never stated a :hover/:active value, leaving the
   door open for any future rule (or a browser default) to paint one back
   in on interaction. Belt-and-suspenders only — no visual change from the
   v5.10.0 resting state. */
.page-mamadex .door-card-media .media-thumb:hover,
.page-mamadex .door-card-media .media-thumb:active {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.page-mamadex .door-card-media img {
  box-shadow: none;
}

/* v5.15.0: TRANSFORM NEUTRALISATION — owner instruction, door-card images
   only. No transform: scale(...) rule was found anywhere in this file, in
   global.css, or in media-lightbox.css for these triggers — the only
   transform in the visitor-door system is the card SHELL's own
   translateY(-3px) lift (see .door-card:hover above), which does not
   change the image's rendered size or crop, only its vertical position as
   part of the whole card. That lift is left in place; it is the "soft
   elevation" behaviour the owner asked to keep, and it is not what
   "enlarges" the photo. This rule is the explicit, belt-and-suspenders
   guarantee the owner asked for: the trigger and its image never receive
   any transform of their own, at rest, on hover, or on focus, so no
   future rule can introduce a scale/zoom effect on the photo itself. */
.page-mamadex .door-card-media .media-thumb,
.page-mamadex .door-card-media .media-thumb:hover,
.page-mamadex .door-card-media .media-thumb:focus-visible,
.page-mamadex .door-card-media img,
.page-mamadex .door-card-media .media-thumb:hover img,
.page-mamadex .door-card:hover .door-card-media img {
  transform: none;
}

/* v5.19.0: Every image that opens the shared lightbox uses the same zoom
   affordance. This supersedes v5.15.0's door-only pointer exception. */
.page-mamadex .door-card-media .media-thumb {
  cursor: zoom-in;
}

.page-mamadex .door-card-media .media-thumb img {
  cursor: inherit;
}

.page-mamadex .door-card-media .media-thumb:focus-visible {
  /* v5.15.0: colour changed from --sdx-color-mama-violet to
     --sdx-color-mama-cyan for the door-card triggers only, per this
     pass's explicit instruction; split out of the combined rule below so
     the six capability-card triggers keep the violet ring unchanged. */
  outline: 3px solid var(--sdx-color-mama-cyan);
  outline-offset: 3px;
}

.page-mamadex .capability-card-media .media-thumb:focus-visible {
  /* Page-scoped override beats the shared component's generic
     .media-thumb:focus-visible (media-lightbox.css, teal outline) via the
     usual 2-3-class specificity convention used throughout this page.
     3px offset keeps the ring outside the photograph edge, not painted
     over it — already satisfied the "no permanent grey image border"
     requirement before this pass; unchanged. */
  outline: 3px solid var(--sdx-color-mama-violet);
  outline-offset: 3px;
}

/* Legacy single-caption lightboxes should use the available horizontal
   space. Structured captions keep the shared component's readable measure. */
.page-mamadex .lightbox-caption:not(:has(.lightbox-caption-description)) {
  width: max-content;
  max-width: calc(min(90vw, 960px) - 2.5rem);
}

@media (min-width: 641px) {
  .page-mamadex .lightbox-caption:not(:has(.lightbox-caption-description)) {
    white-space: nowrap;
  }
}

.page-mamadex .door-card-body {
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.page-mamadex .door-card-heading {
  font-family: var(--headline-font);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.375rem;
}

.page-mamadex .door-card-body p {
  margin: 0 0 0.875rem;
  font-size: var(--body);
  line-height: 1.5;
  color: var(--muted);
  flex: 1;
}

.page-mamadex .door-card-body .sdx-btn-primary,
.page-mamadex .door-card-body .sdx-btn-secondary {
  /* v5.2.0: flex-start -> center — CTA is now centred horizontally inside
     the card while the heading and body text above it stay left-aligned
     (text-align is untouched; only the flex item's own cross-axis position
     changes). */
  align-self: center;
  /* v5.1.0: door CTA was sized as a standalone button and dominated the
     compact card — reduced padding/font-size in this context only (global
     .sdx-btn-primary/.sdx-btn-secondary geometry is untouched everywhere
     else on the site). */
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
}

/* v5.10.1: DOOR CTA — MATCH "MEET ALL THE MAMAS" — owner instruction.
   Same treatment as .mamas-network-cta/.mamadex-living-tower-band above:
   gradient, white text, no border, shadow, and (this round only) padding.
   Placed after the v5.1.0 compact-size rule above so it wins on equal
   specificity (source order) — this intentionally supersedes that rule's
   padding value for these four buttons only; font-size (0.9375rem) and
   align-self:center from that rule are untouched (not requested this
   round). border-radius is inherited from the shared global.css
   .sdx-btn-primary/.sdx-btn-secondary base rule (var(--radius)) — already
   identical to "Meet all the Mamas" without an explicit override, but
   restated here for an explicit, self-contained match. Only .sdx-btn-
   primary is targeted (all four door CTAs use that class, not
   .sdx-btn-secondary) so nothing else on the page is affected. No
   transform/lift added on hover — the page's existing hover-motion-cancel
   rule (.sdx-btn-primary:hover/:focus-visible { transform: none; }) already
   covers this selector. Card lift on :hover/:focus-within (.door-card)
   and CTA labels/hrefs are completely untouched by this rule. */
.page-mamadex .door-card-body .sdx-btn-primary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.75rem;
  box-shadow: 0 3px 12px rgba(from var(--page-primary) r g b / 0.32);
}

.page-mamadex .door-card-body .sdx-btn-primary:hover {
  box-shadow: 0 6px 18px rgba(from var(--page-primary) r g b / 0.45);
}

@media (max-width: 640px) {
  .page-mamadex .door-card-body {
    padding: 1rem;
  }
}

/* ======================================================================================================
   v5.0.0 — CAPABILITY FUNCTION GRID ("A MamaDEX centre is already working")
   Section 4. Six image-led, NON-clickable function cards — not route
   cards, not product cards. Image + one-word label, optional one-line
   caption. 3x2 desktop, 2 columns tablet, 1 column narrow mobile.
   ====================================================================================================== */

.page-mamadex .capability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  max-width: 1200px;
  margin: 0 auto;
}

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

@media (min-width: 900px) {
  .page-mamadex .capability-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.page-mamadex .capability-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  /* v5.1.0: these cards are not interactive — no href, no button, no
     tabindex. Explicit default cursor and no hover rule confirm that
     intent; do not style them as actionable controls. */
  cursor: default;
}

/* v5.10.2: CAPABILITY-FRAME INTRINSIC-SIZE DEFECT — owner instruction. Root
   cause per owner report: the Learning image (source 1448x1086, 4:3 — the
   one outlier among six mostly-2:1 source photos) was rendering from its
   own intrinsic proportions instead of the shared 3:2 frame used by the
   other five. The aspect-ratio/width/height/object-fit rules below were
   already present (v5.1.0/v5.9.0) and are spec-correct on their own, but
   this pass adds the missing definite-sizing guarantees the owner
   specified so the frame cannot be re-opened by any single outlier image's
   intrinsic size in any browser layout path: position:relative (explicit
   containing-block anchor for the wrapper) and min-height:0/min-width:0 on
   both the wrapper and the trigger (removes the browser's automatic
   content-based minimum size — the flexbox/grid "min-height:auto" default
   — which is the one mechanism that can let an oversized intrinsic image
   push its own box taller than aspect-ratio alone would otherwise allow,
   even while every other rule here is correct). All six wrappers now
   resolve their height purely from aspect-ratio:3/2 against a definite
   100% width — never from content. */
.page-mamadex .capability-card-media {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  /* v5.1.0: 2/1 -> 3/2 — re-derived from the six actual source images
     (five are 724x362/2:1, one is 1448x1086/4:3), not chosen from
     dimensions alone. 3/2 (1.5) sits closer to both native ratios than
     either 4/3 (1.333) or the previous 2/1 (2.0): it crops less width off
     the five wide photos than 4/3 would, and far less height off the one
     4:3 photo than 2/1 did — the best single shared ratio for all six. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-alt);
}

.page-mamadex .capability-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
  /* v5.10.2: per-image composition override point — none of the six
     images needed one after this fix (Learning's crop reads correctly at
     the default center/center once constrained to the shared frame); if a
     future image needs recomposing, add a single declaration such as
     .page-mamadex .capability-card--learning img { object-position: center
     45%; } rather than changing this shared rule or the shared 3/2 ratio. */
  object-position: center;
}

.page-mamadex .capability-card-label {
  /* v5.1.0: bottom padding increased slightly (0.25rem -> 0.875rem) now
     that the caption line below it is gone — label no longer sits flush
     against the card's bottom edge. */
  padding: 0.875rem 1rem;
  font-family: var(--headline-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  text-align: center;
}

/* v5.1.0: .capability-card-caption rule removed — the six one-sentence
   captions were removed from mamadex.html (owner instruction: labels only,
   image carries the meaning). The i18n keys themselves were left in the
   locale/vault files (not deleted) and are now orphaned; see the
   correction-pass report. */

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

/* v5.8.0: COMPACT CLOSING ROUTE REMOVED — owner instruction (final
   correction pass: the four-link "Where do you need to go next?" section
   repeated the same four door destinations already at the top of the page
   and was deleted from mamadex.html entirely; see that file's v7.1.5
   changelog). Removed here: .closing-route-links (base rule),
   .closing-route-links .sdx-btn-secondary, and the max-width:640px
   variant of both — nothing in the live HTML uses these selectors any
   longer. The Living Tower exit that used to sit inside this same section
   is NOT deleted — .mamadex-living-tower-exit (below, §8 further down)
   is unchanged and simply relocated in the HTML. */

/* v5.0.0: the Four Pillars card grid (.mamadex-pillars .pillar-grid,
   .pillar-card, .pillar-brand-icon, .pillar-tagline, .pillar-points,
   .btn-pillar and its four per-pillar colour variants) removed entirely —
   that section no longer exists on the rebuilt page. See the new
   "Four visitor doors" (.door-card) and "capability function grid"
   (.capability-card) rules above §8 for its replacements. */

/* v5.0.0: the generic "(hero section, nav buttons)" .cta/.btn/tooltip
   block removed — confirmed unused anywhere in the live HTML (no
   class="cta" or class="btn" exists on this page; canonical
   .hero-actions/.btn-hero-primary/.btn-hero-secondary now own the hero
   CTA, and .sdx-btn-primary/.sdx-btn-secondary own every other button on
   the page) — a dead hero-era selector superseded by the rebuilt
   canonical hero. */

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

/* v5.0.0: mobile rules for the retired .comprehension-overlay and
   .pillar-card removed along with their sections. Door-card and
   capability-card mobile behaviour is defined inline next to each rule
   in §8 above (same convention already used elsewhere in this file). */

/* ======================================================================================================
   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);
}

/* v5.0.0: dark-mode .pillar-card rules removed along with the pillar
   section. .door-card and .capability-card use var(--card)/var(--border)
   directly, which already resolve correctly in dark mode via themes.css —
   the capability-card dark-mode border tweak lives with its own rule in §8. */