/*
V7-HEADER
* Title:    Buktika - MamaDEX Proof Routes Page Styles
* Filename: assets/css/mamadex/mamadex-proof-routes.css
* Version:  v2.6.9
* Issued:   2026-07-23
* Author:   Buktika Webdesk (Binka)
* Owner:    Buktika — Binka
* Purpose:  Page styles for mamadex-proof-routes.html — MamaDEX's Evidence
*           Bridge (BKT 35120 v2.0.0): context acknowledgement -> five-stage
*           route -> Evidence Pack contents -> claim boundary -> illustrative
*           sample -> one onward Viridians action. Companion stylesheet to
*           that file's v2.7.0 rebuild — see its own V7-HEADER for the full
*           structural rationale.
* Type:     CSS stylesheet
* Colour Map:    v3.9.0 Section 5.3 (LOCKED)
* Design System: v4.0.0
* ISO Reference: ISO 27001, ISO 9241-110
* Source Naming Standard: Buktika v7.1 (ISO Aligned)
* License:  © Buktika, 2026. All rights reserved.
*
* Palette (Colour Map v3.9.0 §5.3 — MamaDEX, identical to mamadex.html and
* mamadex-mamas.html — same pillar, same tokens):
*   --page-primary:   --sdx-color-mama-violet  #8b5cf6
*   --page-secondary: --sdx-color-mama-depth   #220f27
*   --page-accent:    --sdx-color-mama-amber   #f5b014
*   --page-depth:     --sdx-color-stem-olive   #464820
*
* ChangeLog:
* - v2.6.9 (2026-07-23): TERMINOLOGY NOTE — owner instruction (visual/
*             terminology correction pass). Added .terminology-note: a
*             compact, muted, italic footnote style (matches .sample-note's
*             visual weight) for the single "Buktika term: Viridian..."
*             aside now placed beneath "Beyond MamaDEX"/"Downstream
*             assessment" in mamadex-proof-routes.html. No band, heading, or
*             full-width treatment — deliberately subordinate to the
*             surrounding route-chapter-step copy.
* - v2.6.8 (2026-07-17): Restored the illustrative sample action to the
*             canonical MamaDEX violet/depth gradient with white text, and
*             sized the new inline, localisable boundary SVG responsively.
* - v2.6.7 (2026-07-17): Removed now-dead hero CTA overrides and changed the
*             sample status badge from a black image overlay to a quiet,
*             in-flow MamaDEX violet label above the explanatory copy.
* - v2.6.6 (2026-07-17): Replaced compact pack-content counters with the
*             connected 3rem gradient-number track used by
*             mamadex-restoration-evidence.html's evidence story.
* - v2.6.5 (2026-07-17): Matched section eyebrows to the shared MamaDEX
*             1.1rem/start-aligned/muted-violet lockup and enlarged route
*             chapter indices to Eco Guilds' canonical gate-num treatment.
* - v2.6.4 (2026-07-17): Widened the desktop image-safe hero column to the
*             established 52rem content measure and tightened the multiline
*             headline leading for a balanced four-line title.
* - v2.6.3 (2026-07-17): Matched the established hero type rhythm exactly:
*             canonical headline clamp, var(--lead) intro and 2rem CTA gap.
* - v2.6.2 (2026-07-17): Replaced the fluid 54vw hero hybrid with the main
*             MamaDEX hero geometry: left:44%, max-width:40rem on desktop;
*             centred, bottom-anchored normal flow below 1024px.
* - v2.6.1 (2026-07-17): Centred the eyebrow-free hero copy within its
*             image-safe column and restored the canonical MamaDEX hero CTA
*             gradient, white text and inset ring in every link state.
* - v2.6.0 (2026-07-17): Reworked the page into a visual evidence journey:
*             open hero typography, three large route chapters, split pack
*             contents, explicit assembly/assessment boundary, full-preview
*             sample and visual centre-selection close.
* - v2.5.1 (2026-07-17): EYEBROW TONE — applied the shared MamaDEX muted
*             violet treatment to section eyebrows. Hero eyebrow unchanged.
* - v2.5.0 (2026-07-14): BKT 35120 v2.0.0 PART B — companion CSS for
*             mamadex-proof-routes.html v2.7.0's full 7-section rebuild.
*             REMOVED IN FULL (sections deleted from the HTML this pass):
*             §4 selector-list entries + §6 module rules for
*             .mamadex-capability-families/.capability-grid/.capability-card,
*             .mamadex-records/.records-grid/.record-item,
*             .mamadex-evidence-packs/.evidence-grid/.evidence-card,
*             .mamadex-triggers/.trigger-cards/.trigger-card/.trigger-social/
*             .trigger-corridor/.trigger-badge/.trigger-details/.trigger-
*             actions, .mamadex-products/.product-cards/.product-card/
*             .product-badge/.product-subtitle/.product-deliverables/.btn-
*             product, .mamadex-corridors/.corridor-grid/.corridors-kicker/
*             .corridors-helper/.corridor-card/.corridor-card-top/.corridor-
*             card-body/.corridor-flag/.corridor-launch-label/.corridor-
*             card-action, and their dark-mode counterparts in the former §7.
*             No other page uses these page-scoped selectors (all scoped
*             under .page-mamadex-proof-routes), so removing them is safe.
*             ADDED: §6 new module rules for the three new sections —
*             `.route-stages-grid`/`.route-stage-card`/`.route-stage-index`/
*             `.route-stages-boundary` (five-stage route) plus a CSS-only
*             decorative `::after` arrow connector between cards at the
*             five-column (1024px+) breakpoint, showing the required
*             Community activity -> Records -> Evidence -> Evidence Pack ->
*             Downstream assessment sequence without any translatable text
*             (content is a plain Unicode arrow, purely decorative — the real
*             order is conveyed by DOM order and the numbered index for
*             assistive tech), `.pack-groups-grid`/`.pack-group-card`
*             (Evidence Pack contents), and
*             `.mamadex-claim-boundary` (plain-prose claim-boundary section,
*             no card treatment — deliberately the plainest section on the
*             page, matching mamadex-restoration-evidence.css's own consent-
*             note treatment for the same kind of governing statement).
*             `.route-stage-card`/`.pack-group-card` reuse the EXACT same
*             card visual language the removed `.capability-card`/`.record-
*             item` used (var(--card) background, var(--border) border, 4px
*             var(--page-primary) left accent, var(--radius)/10px corner,
*             var(--card-shadow)) — no new visual language introduced, per
*             owner instruction ("no new page-wide design language").
*             ADDED: `.route-stage-card.is-downstream` — a quieter, dashed-
*             border variant for the fifth stage (Downstream assessment),
*             same visual distinction technique mamadex-restoration-
*             evidence.css's own `.chain-step.is-downstream` already uses,
*             reused here rather than inventing a new one.
*             ADDED: `.btn-sample-illustrative` — a quieter outline button
*             (var(--page-primary) text/border, transparent fill) replacing
*             `.btn-sample`'s strong gradient treatment on the sample-index
*             section's download link, so it reads as secondary to §7's one
*             dominant final action (owner instruction, Part D). `.btn-
*             sample`'s own rule is UNCHANGED/kept (no longer referenced by
*             this page, but not deleted — a shared-looking utility class,
*             left in place rather than risk an unaudited cross-page removal;
*             flagged for a future dead-CSS pass if confirmed unused
*             elsewhere).
*             UNCHANGED: §1 page variable binding, §2 hero (all rules), §3
*             typography-override shared selector list (still used by
*             `.section-lead`, now also serving `.route-stages`/`.pack-
*             groups` headers via the same shared class), §5 button/CTA
*             rules, `.sample-box`/`.sample-preview`/`.sample-thumbnail`/
*             `.sample-content`/`.sample-icon`/`.sample-note` (kept, still
*             used by the renamed/kept sample-index section),
*             `.proof-routes-placeholder-note` (kept, now also used by the
*             Evidence Pack contents section's disclaimer — same reusable
*             component, second use), and the Context bridge block at the
*             end of this file (unchanged, still used unmodified by the
*             kept/repositioned context-acknowledgement section).
* - v2.4.0 (2026-07-14): CONTEXT BRIDGE STYLING ADDED — see prior history
*             (superseded in numbering only — the rules themselves are kept
*             unchanged by v2.5.0 above).
* - v2.3.0 (2026-07-10) through v1.0.0 (2026-07-09): HERO and prior page
*             structure — see prior history below (hero rules kept unchanged
*             by v2.5.0 above; structural rules for the pre-v2.0.0/pre-v2.7.0
*             page layout are superseded and removed above, kept described
*             here for historical record only, not restated twice).
*
* --- Prior v1.x/v2.x history (kept verbatim for record) ---
* - v2.3.0 (2026-07-10): HERO RESCALED — poster-like hero rejected, owner
*             instruction. See mamadex-proof-routes.html v2.3.0 changelog for
*             the full audit/rationale.
* - v2.2.0 (2026-07-10): HERO IMAGE SWAPPED.
* - v2.1.0 (2026-07-10): REAL IMAGE-LED HERO.
* - v2.0.0 (2026-07-10): MAMADEX GTAN-FRONT STRUCTURE — companion CSS change
*           for mamadex-proof-routes.html v2.0.0 (superseded by v2.5.0
*           above — capability/records/evidence-packs module rules this pass
*           added were removed in v2.5.0).
* - v1.1.0 (2026-07-10): HERO REPAIR.
* - v1.0.0 (2026-07-09): NEW FILE.
*/

/* 0) depends on: global.css, themes.css, partials/header.css, partials/footer.css */

/* ======================================================================================================
   1) Page variable binding + base surfaces
   Colour Map v3.9.0 Section 5.3 — MamaDEX locked palette. Identical tokens
   to mamadex.html / mamadex-mamas.html — same pillar.
   ====================================================================================================== */

.page-mamadex-proof-routes {
  --page-bg:            var(--sdx-color-mama-bg);
  --page-primary:       var(--sdx-color-mama-violet);
  --page-secondary:     var(--sdx-color-mama-depth);
  --page-accent:        var(--sdx-color-mama-amber);
  --page-depth:         var(--sdx-color-stem-olive);
  --page-dark-base:     var(--sdx-color-mama-dark-base);
  --page-dark-surface:  var(--sdx-color-mama-dark-surface);

  --hero-image:         url("/assets/images/mamadex/evidence-route/mamadex-proof-routes-hero-finland.webp");
  --hero-vignette-from: rgba(139, 92, 246, 0.20);
  --hero-vignette-to:   rgba(139, 92, 246, 0);

  background: var(--page-bg);
  color: var(--fg);
  scroll-behavior: smooth;
}

/* ======================================================================================================
   2) Hero — unchanged from v2.3.0. Canonical .hero-wrap > .hero > .hero-grid
   > .hero-body structure (global.css Design System v2.9.0 §8, same system as
   living-tower.html and mamadex.html's own hero, minus the orb column).
   ====================================================================================================== */

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

.page-mamadex-proof-routes .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%
  );
}

.page-mamadex-proof-routes .hero {
  position: relative;
  min-height: var(--hero-min);
}

.page-mamadex-proof-routes .eyebrow-hero {
  display: block;
  font-family: var(--text-font);
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.90),
    0 2px 6px rgba(0, 0, 0, 0.70);
  margin-bottom: 0.75rem;
}

.page-mamadex-proof-routes .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

.page-mamadex-proof-routes .hero-body {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(10, 6, 20, 0.58) 0%, rgba(10, 6, 20, 0.30) 62%, rgba(10, 6, 20, 0) 100%);
}

.page-mamadex-proof-routes .hero .intro {
  width: min(100%, 36rem);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .page-mamadex-proof-routes .hero-wrap,
  .page-mamadex-proof-routes .hero {
    min-height: 480px;
  }
  .page-mamadex-proof-routes .hero-wrap {
    background-position: 38% 28%;
  }
  .page-mamadex-proof-routes .hero-body {
    max-width: 100%;
    padding: 1.5rem;
  }
}

/* ======================================================================================================
   3) Typography overrides — section header pattern (h2 + .intro) shared by
   every non-hero section on this page. v2.5.0: selector list now serves
   `.section-lead` (route-stages, pack-groups) — same values as before, no
   new typography scale introduced.
   ====================================================================================================== */

.page-mamadex-proof-routes .section-lead h2 {
  font-family: var(--headline-font);
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  color: var(--fg);
  margin: 0 0 1rem 0;
  display: block;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--page-primary);
}

[data-theme="dark"] .page-mamadex-proof-routes .section-lead h2 {
  border-bottom-color: rgba(from var(--page-primary) r g b / 0.40);
}

@media (max-width: 768px) {
  .page-mamadex-proof-routes .section-lead h2 {
    font-size: 1.75rem;
  }
}

.page-mamadex-proof-routes .section-lead .intro {
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: left;
  max-width: 65ch;
  margin: 0 auto 3rem;
  color: var(--muted);
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  display: block;
}

.page-mamadex-proof-routes .section-lead {
  display: block;
  margin-bottom: 3rem;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}

.page-mamadex-proof-routes .section-lead .eyebrow {
  display: block;
  text-align: start;
  width: 100%;
}

.page-mamadex-proof-routes .section-lead > .eyebrow,
.page-mamadex-proof-routes .mamadex-claim-boundary > .eyebrow {
  display: block;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: start;
  color: color-mix(in srgb, var(--page-primary) 55%, var(--muted) 45%);
  margin-block-end: 2.25rem;
}

/* ======================================================================================================
   4) Sections and width constraints.
   ====================================================================================================== */

.page-mamadex-proof-routes .mamadex-route-stages,
.page-mamadex-proof-routes .mamadex-pack-groups {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.page-mamadex-proof-routes .mamadex-claim-boundary {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}

.page-mamadex-proof-routes .mamadex-claim-boundary h2 {
  font-family: var(--headline-font);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 1rem;
}

.page-mamadex-proof-routes .mamadex-claim-boundary p {
  font-size: var(--body);
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

/* ======================================================================================================
   5) Buttons and CTAs.
   ====================================================================================================== */

.page-mamadex-proof-routes .sdx-cta-band .sdx-btn-primary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

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

.page-mamadex-proof-routes .sdx-cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

/* ======================================================================================================
   6) Page modules
   ====================================================================================================== */

/* --- FIVE-STAGE ROUTE (§3 of the page: "From everyday activity to a
   reviewable Evidence Pack") — NEW in v2.5.0. Same card visual language as
   the removed .capability-card/.record-item: var(--card) surface, 4px left
   accent in var(--page-primary), var(--card-shadow). Five cards in a plain
   <ol> (list semantics kept for screen readers — "5 items", ordered). --- */
.page-mamadex-proof-routes .route-stages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .page-mamadex-proof-routes .route-stages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .page-mamadex-proof-routes .route-stages-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Decorative connector showing the required sequence (Community activity
     -> Records -> Evidence -> Evidence Pack -> Downstream assessment) at the
     five-column breakpoint only — content is CSS-generated and decorative,
     the real order is already conveyed by the numbered index + DOM order for
     assistive tech, so no aria-hidden span/text duplication is needed. */
  .page-mamadex-proof-routes .route-stage-card:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: -0.9rem;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
  }
}

.page-mamadex-proof-routes .route-stage-card {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--page-primary);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

/* Fifth stage (Downstream assessment) — visually quieter, dashed-border
   variant, same technique mamadex-restoration-evidence.css's own
   .chain-step.is-downstream already uses, reused rather than invented
   fresh: this is the point where the Proof Buyer's own process takes over,
   not a MamaDEX-side step. */
.page-mamadex-proof-routes .route-stage-card.is-downstream {
  border-left-style: dashed;
  background: rgba(139, 92, 246, 0.05);
}

.page-mamadex-proof-routes .route-stage-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999rem;
  background: rgba(139, 92, 246, 0.10);
  color: var(--page-primary);
  font-family: var(--headline-font);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.page-mamadex-proof-routes .route-stage-card h3 {
  font-family: var(--headline-font);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.5rem;
}

.page-mamadex-proof-routes .route-stage-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Required boundary statement — quieter than a card, matching the
   established .chain-handoff-note treatment on mamadex-restoration-
   evidence.html for the same kind of governing sentence. */
.page-mamadex-proof-routes .route-stages-boundary {
  margin: 2rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
}

/* --- EVIDENCE PACK CONTENTS (§4 of the page: "What an Evidence Pack can
   contain") — NEW in v2.5.0. Four content-group cards, same visual
   language as the five-stage cards above. --- */
.page-mamadex-proof-routes .pack-groups-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .page-mamadex-proof-routes .pack-groups-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .page-mamadex-proof-routes .pack-groups-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.page-mamadex-proof-routes .pack-group-card {
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--page-primary);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

.page-mamadex-proof-routes .pack-group-card h3 {
  font-family: var(--headline-font);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.5rem;
}

.page-mamadex-proof-routes .pack-group-card p {
  margin: 0;
  font-size: var(--body);
  line-height: 1.5;
  color: var(--muted);
}

/* Reusable placeholder-disclosure paragraph — unchanged from v2.0.0, now
   also used by the Evidence Pack contents section's required disclaimer
   (second use of the same component). */
.page-mamadex-proof-routes .proof-routes-placeholder-note {
  margin: 2rem auto 0;
  max-width: 48rem;
  padding: 0.875rem 1rem;
  background: rgba(120, 113, 108, 0.08);
  border: 1px solid rgba(120, 113, 108, 0.18);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.6;
  text-align: center;
}

.page-mamadex-proof-routes .proof-routes-placeholder-note a {
  color: var(--page-primary);
  font-weight: 600;
}

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

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

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

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

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

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

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

/* Kept, no longer referenced by this page's own markup (the sample-index
   section now uses .btn-sample-illustrative below) — left in place rather
   than risk an unaudited cross-page removal; flagged for a future dead-CSS
   pass if confirmed unused elsewhere. */
.page-mamadex-proof-routes .btn-sample {
  display: inline-block;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

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

/* Secondary action, still unmistakably MamaDEX. */
.page-mamadex-proof-routes .btn-sample-illustrative {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 4px 12px rgba(89, 45, 154, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.page-mamadex-proof-routes .btn-sample-illustrative:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(89, 45, 154, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

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

/* ======================================================================================================
   7) Dark mode.
   ====================================================================================================== */

[data-theme="dark"] .page-mamadex-proof-routes {
  background: var(--page-dark-base);
  color: var(--sdx-color-ui-dark-text);
}

[data-theme="dark"] .page-mamadex-proof-routes .sample-box,
[data-theme="dark"] .page-mamadex-proof-routes .route-stage-card,
[data-theme="dark"] .page-mamadex-proof-routes .pack-group-card {
  background: var(--card);
  border-color: rgba(245, 176, 20, 0.20);
}

[data-theme="dark"] .page-mamadex-proof-routes .route-stage-card.is-downstream {
  background: rgba(245, 176, 20, 0.06);
}

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

[data-theme="dark"] .page-mamadex-proof-routes .route-stage-index {
  background: rgba(245, 176, 20, 0.12);
  color: var(--sdx-color-mama-amber);
}

[data-theme="dark"] .page-mamadex-proof-routes .btn-sample-illustrative {
  color: #ffffff;
}

[data-theme="dark"] .page-mamadex-proof-routes .btn-sample-illustrative:hover {
  filter: brightness(1.12);
}

/* ======================================================================================================
   Context bridge (v2.4.0, unchanged) — #proof-routes-context-bridge.
   Deliberately the lightest treatment on this page: one text line + inline
   links, quiet tint, no border-left card accent — an acknowledgement, not a
   competing content section. Hidden by default in HTML; shown only by
   mamadex-proof-routes-context.js when a valid Mama/centre context resolves.
   ====================================================================================================== */

.proof-routes-context-bridge {
  max-width: 900px;
  margin: 0 auto 2rem;
  padding: 1rem 1.5rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.20);
  border-radius: var(--radius);
  text-align: center;
}

.proof-routes-context-text {
  margin: 0 0 0.5rem;
  font-size: var(--body);
  color: var(--fg);
}

.proof-routes-context-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.proof-routes-context-actions a {
  font-size: var(--small);
  color: var(--page-primary);
  text-decoration: underline;
}

[data-theme="dark"] .proof-routes-context-bridge {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.35);
}

/* ======================================================================================================
   8) v2.6 visual narrative
   ====================================================================================================== */

.page-mamadex-proof-routes .hero-wrap::before {
  background: linear-gradient(270deg, rgba(13, 8, 22, 0.76) 0%, rgba(13, 8, 22, 0.42) 48%, rgba(13, 8, 22, 0.06) 78%);
}

.page-mamadex-proof-routes .hero-grid {
  justify-items: center;
}

.page-mamadex-proof-routes .hero-body {
  max-width: 100%;
  margin: 0;
  padding: 2rem 0;
  border-radius: 0;
  background: none;
  text-align: center;
}

.page-mamadex-proof-routes .hero .headline,
.page-mamadex-proof-routes .hero .intro {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.82), 0 1px 3px rgba(0, 0, 0, 0.95);
}

.page-mamadex-proof-routes .headline {
  max-width: none;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.08;
}

.page-mamadex-proof-routes .hero .intro {
  width: min(100%, 45rem);
  font-size: var(--lead);
}

@media (min-width: 1024px) {
  .page-mamadex-proof-routes .hero-body {
    position: absolute;
    left: 42%;
    top: 50%;
    transform: translateY(-50%);
    width: min(52rem, 55vw);
    max-width: 52rem;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .page-mamadex-proof-routes .hero .headline,
  .page-mamadex-proof-routes .hero .intro {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

}

@media (max-width: 1023px) {
  .page-mamadex-proof-routes .hero {
    align-items: end;
  }

  .page-mamadex-proof-routes .hero-body {
    position: static;
    width: auto;
    max-width: 34rem;
    margin: 0;
    padding: 0 0 0.5rem;
    transform: none;
    text-align: center;
  }

  .page-mamadex-proof-routes .hero-wrap {
    background-position: 64% 40%;
  }
}

.page-mamadex-proof-routes main > .container {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

.page-mamadex-proof-routes .sdx-card-section {
  margin: 0 auto;
}

.page-mamadex-proof-routes .section-lead {
  margin-bottom: 2rem;
}

.page-mamadex-proof-routes .section-lead h2,
.page-mamadex-proof-routes .mamadex-claim-boundary h2,
.page-mamadex-proof-routes .mamadex-sample > h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.page-mamadex-proof-routes .section-lead .intro {
  margin: 1rem auto 0;
  text-align: center;
}

.page-mamadex-proof-routes .route-chapters {
  display: grid;
  gap: 1.5rem;
}

.page-mamadex-proof-routes .route-chapter {
  display: grid;
  grid-template-columns: minmax(18rem, 42%) minmax(0, 1fr);
  min-height: 20rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--card-shadow);
}

.page-mamadex-proof-routes .route-chapter--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 42%);
}

.page-mamadex-proof-routes .route-chapter--reverse .route-chapter-media {
  grid-column: 2;
}

.page-mamadex-proof-routes .route-chapter--reverse .route-chapter-copy {
  grid-column: 1;
  grid-row: 1;
}

.page-mamadex-proof-routes .route-chapter-media {
  min-width: 0;
  min-height: 20rem;
  overflow: hidden;
}

.page-mamadex-proof-routes .route-chapter-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-mamadex-proof-routes .route-chapter--downstream .route-chapter-media img {
  filter: saturate(0.82) contrast(1.04);
}

.page-mamadex-proof-routes .route-chapter-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.page-mamadex-proof-routes .route-chapter-index {
  font-family: var(--headline-font);
  font-size: clamp(2.25rem, 2.1vw, 2.75rem);
  font-weight: 800;
  color: var(--page-primary);
  opacity: 0.40;
  line-height: 1;
  margin-bottom: 0.625rem;
}

.page-mamadex-proof-routes .route-chapter h3 {
  margin: 0 0 1.4rem;
  font-family: var(--headline-font);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

[data-theme="dark"] .page-mamadex-proof-routes .route-chapter-index {
  opacity: 0.26;
}

.page-mamadex-proof-routes .route-chapter-step {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}

.page-mamadex-proof-routes .route-chapter-step h4,
.page-mamadex-proof-routes .route-chapter-step p {
  margin: 0;
}

.page-mamadex-proof-routes .route-chapter-step h4 {
  margin-bottom: 0.3rem;
  font-family: var(--headline-font);
  font-size: 1.1rem;
}

.page-mamadex-proof-routes .route-chapter-step p {
  color: var(--muted);
  line-height: 1.55;
}

/* v2.6.9: TERMINOLOGY NOTE — compact, visually subordinate footnote
   introducing "Viridian" once, beneath the "Beyond MamaDEX"/"Downstream
   assessment" content. Deliberately not a heading, band or callout: same
   quiet weight as .sample-note (small, muted, italic) so "Proof Buyer"
   stays the page's principal term and this reads as a glossary aside, not
   a competing definition. */
.page-mamadex-proof-routes .terminology-note {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

.page-mamadex-proof-routes .terminology-note a {
  color: inherit;
  text-decoration: underline;
}

.page-mamadex-proof-routes .pack-contents-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 44%) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}

.page-mamadex-proof-routes .pack-contents-media {
  min-height: 30rem;
  overflow: hidden;
  border-radius: 14px;
}

.page-mamadex-proof-routes .pack-contents-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-mamadex-proof-routes .pack-groups-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 52rem;
  margin: 0 auto;
}

.page-mamadex-proof-routes .pack-group-card {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  align-content: start;
  padding: 0 0 1.75rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.page-mamadex-proof-routes .pack-group-card:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 3rem;
  inset-block-end: 0;
  inset-inline-start: calc(1.5rem - 1px);
  width: 2px;
  background: color-mix(in srgb, var(--page-primary) 32%, var(--border));
}

.page-mamadex-proof-routes .pack-group-icon {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--page-primary) 28%, transparent);
}

.page-mamadex-proof-routes .pack-group-card h3,
.page-mamadex-proof-routes .pack-group-card p {
  grid-column: 2;
}

.page-mamadex-proof-routes .mamadex-claim-boundary {
  max-width: 1200px;
}

.page-mamadex-proof-routes .claim-boundary-intro {
  font-size: 1.12rem;
}

.page-mamadex-proof-routes .claim-boundary-graphic {
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 14px;
}

.page-mamadex-proof-routes .claim-boundary-graphic img,
.page-mamadex-proof-routes .claim-boundary-svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-mamadex-proof-routes .claim-boundary-side {
  display: grid;
  gap: 0.35rem;
  min-height: 9rem;
  align-content: center;
  padding: 1.5rem;
  border-radius: 14px;
}

.page-mamadex-proof-routes .claim-boundary-side--mamadex {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(34, 15, 39, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.page-mamadex-proof-routes .claim-boundary-side--buyer {
  background: rgba(46, 94, 68, 0.11);
  border: 1px solid rgba(46, 94, 68, 0.28);
}

.page-mamadex-proof-routes .claim-boundary-side strong {
  font-family: var(--headline-font);
  font-size: 1.3rem;
}

.page-mamadex-proof-routes .claim-boundary-side span {
  color: var(--muted);
}

.page-mamadex-proof-routes .claim-boundary-pack {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 8.5rem;
  min-height: 6rem;
  padding: 1rem;
  border: 2px solid var(--page-primary);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 8px 8px 0 rgba(139, 92, 246, 0.12), 16px 16px 0 rgba(139, 92, 246, 0.06);
  font-family: var(--headline-font);
  font-weight: 700;
}

.page-mamadex-proof-routes .mamadex-sample {
  width: 100%;
  max-width: 1200px;
}

.page-mamadex-proof-routes .mamadex-sample > h2 {
  margin-top: 0;
  text-align: center;
}

.page-mamadex-proof-routes .sample-box {
  grid-template-columns: minmax(20rem, 52%) minmax(0, 1fr);
  max-width: 1100px;
  padding: clamp(1rem, 3vw, 2rem);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.page-mamadex-proof-routes .sample-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(34, 15, 39, 0.14);
}

.page-mamadex-proof-routes .sample-preview {
  position: relative;
  min-width: 0;
}

.page-mamadex-proof-routes .sample-thumbnail {
  display: block;
  max-height: 36rem;
  object-fit: cover;
  object-position: top;
}

.page-mamadex-proof-routes .sample-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.26);
  color: var(--page-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-theme="dark"] .page-mamadex-proof-routes .sample-badge {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(196, 181, 253, 0.32);
  color: #c4b5fd;
}

.page-mamadex-proof-routes .btn-sample-illustrative {
  display: inline-block;
}

.page-mamadex-proof-routes .sdx-cta-band-inner {
  position: relative;
}

.page-mamadex-proof-routes .evidence-source-map-pin {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
  object-fit: contain;
}

.page-mamadex-proof-routes .proof-routes-context-bridge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 1.25rem;
  text-align: left;
}

.page-mamadex-proof-routes .proof-routes-context-bridge[hidden],
.page-mamadex-proof-routes .proof-routes-context-portrait[hidden],
.page-mamadex-proof-routes .proof-routes-context-location[hidden] {
  display: none;
}

.page-mamadex-proof-routes .proof-routes-context-portrait img {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(139, 92, 246, 0.3);
}

.page-mamadex-proof-routes .proof-routes-context-copy .eyebrow {
  margin: 0 0 0.3rem;
  color: color-mix(in srgb, var(--page-primary) 55%, var(--muted));
}

.page-mamadex-proof-routes .proof-routes-context-text {
  font-family: var(--headline-font);
  font-size: 1.2rem;
  font-weight: 700;
}

.page-mamadex-proof-routes .proof-routes-context-location {
  margin: -0.15rem 0 0.55rem;
  color: var(--muted);
  font-size: var(--small);
}

.page-mamadex-proof-routes .proof-routes-context-actions {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .page-mamadex-proof-routes .hero-body {
    width: auto;
    margin: 0;
    padding: 0 0 0.5rem;
  }

  .page-mamadex-proof-routes .route-chapter,
  .page-mamadex-proof-routes .route-chapter--reverse,
  .page-mamadex-proof-routes .pack-contents-layout,
  .page-mamadex-proof-routes .sample-box {
    grid-template-columns: 1fr;
  }

  .page-mamadex-proof-routes .route-chapter--reverse .route-chapter-media,
  .page-mamadex-proof-routes .route-chapter--reverse .route-chapter-copy {
    grid-column: 1;
  }

  .page-mamadex-proof-routes .route-chapter--reverse .route-chapter-media {
    grid-row: 1;
  }

  .page-mamadex-proof-routes .route-chapter--reverse .route-chapter-copy {
    grid-row: 2;
  }

  .page-mamadex-proof-routes .route-chapter-media,
  .page-mamadex-proof-routes .pack-contents-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .page-mamadex-proof-routes .hero-wrap::before {
    background: rgba(13, 8, 22, 0.52);
  }
}

@media (max-width: 520px) {
  .page-mamadex-proof-routes .proof-routes-context-bridge {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .page-mamadex-proof-routes .proof-routes-context-portrait {
    margin: 0 auto;
  }

  .page-mamadex-proof-routes .proof-routes-context-actions {
    justify-content: center;
  }
}