/* =====================================================================
   MARROW PREMIUM PRIMITIVES  (premium.css)
   Wave 0 of the grand slam elevation. Shared, reusable design language.
   ---------------------------------------------------------------------
   Self-contained. Reuses ONLY the locked :root tokens from styles.css
   (bone-cream #EFE9DC, bone-white #EFE9DC, bone-black #0A0908,
   marrow-red #6B0F1A, marrow-red-glow #8B1828, steel, the fonts).
   NO new brand tokens. NO external assets, fonts, or CDNs. CSP clean:
   every texture is an inline SVG data-uri rendered self-hosted.
   Every motion primitive is wrapped in prefers-reduced-motion.

   Load order on any page: styles.css FIRST, then premium.css.
   Pair the motion classes with /assets/js/premium-motion.js (defer).

   =====================================================================
   CLASS API  (what page agents apply)
   =====================================================================

   TEXTURE
   .mz-grain            Film-grain overlay. Put on a position:relative dark
                        section so bone-black stops reading flat. The grain
                        is a ::before pseudo-element, pointer-events:none,
                        very low opacity, sits behind content (z-index 0).
                        Give the section's real content z-index 1 (or wrap it
                        in .mz-layer). Use .mz-grain--soft for an even subtler
                        pass on large hero areas.

   GLOW
   .mz-glow             Soft marrow-red radial glow behind a dark section or
                        hero headline. ::before pseudo-element, centered,
                        pointer-events:none, behind content. Extends the
                        existing lattice-mark glow language.
   .mz-glow--top        Glow anchored to the top third (good behind headlines).
   .mz-glow--strong     A touch more presence for a focal hero.
   .mz-glow-spot        Inline element you drop anywhere as a positioned
                        radial bloom (e.g. behind a stat or a mark). Size it
                        with width/height; recolor with --mz-accent.

   DEPTH
   .mz-card             Dimensional light-surface card. Layered shadow plus a
                        hairline inner highlight so it lifts off bone-cream.
   .mz-card--dark       Dimensional dark-surface panel for bone-black sections.
                        Inner top highlight + deep drop shadow, reads carved
                        not flat. Pair with .mz-grain on the parent section.
   .mz-card--lift       Adds a tasteful hover lift (honors reduced-motion).
   .mz-inset            Recessed inner-shadow well, for embedded mock/figure
                        frames inside a card.
   .mz-hairline         A single hairline top highlight, for stacking custom
                        panels without the full card treatment.

   MOTION  (needs premium-motion.js)
   .mz-reveal           Fade + small translateY in on scroll. JS adds
                        .is-visible via IntersectionObserver. Fast, not bouncy.
   .mz-reveal--up       (default direction, same as .mz-reveal)
   .mz-reveal--left     Enters from a small x offset instead.
   .mz-reveal--right    Enters from the other side.
   .mz-reveal--scale    Subtle scale-up settle.
   .mz-stagger-1..6     Add to children for cascading delays (60ms steps).
                        Reduced-motion disables ALL of the above, instantly
                        visible, zero transition.

   RHYTHM  (generous section spacing helpers, built on the --space scale)
   .mz-section          Generous vertical section rhythm (space-8 / space-7).
   .mz-section--tight   One step down for denser sections.
   .mz-section--xl      One step up for marquee sections.
   .mz-stack-gap        Vertical flow gap between stacked blocks (space-5).
   .mz-measure          Caps a text column at a comfortable reading measure.
   .mz-layer            position:relative; z-index:1. Lifts real content above
                        the grain/glow pseudo-elements.

   PER-GYM ACCENT
   Every accent in this file reads from --mz-accent / --mz-accent-glow, which
   default to the locked marrow-red. A page (or a scoped wrapper) can set
   --mz-accent and --mz-accent-glow to recolor glows, app-mock accents, and
   value-stack accents to a gym's brand, WITHOUT touching the brand tokens.
   ===================================================================== */

:root {
  /* Per-gym recolor hooks. Default to the locked Marrow red.
     A page overrides these on a wrapper to brand the mock per gym.
     These are aliases of locked tokens, NOT new brand tokens. */
  --mz-accent: var(--marrow-red);
  --mz-accent-glow: var(--marrow-red-glow);
}

/* =====================================================================
   1. GRAIN  —  inline SVG fractalNoise, self-hosted data-uri, no network
   ===================================================================== */
.mz-grain { position: relative; }
.mz-grain > * { position: relative; z-index: 1; }
.mz-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.mz-grain--soft::before { opacity: 0.035; }

/* =====================================================================
   2. GLOW  —  soft marrow-red radial bloom (extends lattice-mark language)
   ===================================================================== */
.mz-glow { position: relative; }
.mz-glow > * { position: relative; z-index: 1; }
.mz-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 55% at 50% 42%,
    color-mix(in srgb, var(--mz-accent-glow) 22%, transparent) 0%,
    transparent 62%
  );
}
.mz-glow--top::before {
  background: radial-gradient(
    ellipse 65% 45% at 50% 22%,
    color-mix(in srgb, var(--mz-accent-glow) 24%, transparent) 0%,
    transparent 60%
  );
}
.mz-glow--strong::before {
  background: radial-gradient(
    ellipse 75% 60% at 50% 40%,
    color-mix(in srgb, var(--mz-accent-glow) 32%, transparent) 0%,
    transparent 64%
  );
}

/* Fallback for engines without color-mix: a fixed marrow-red-glow wash. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .mz-glow::before,
  .mz-glow--top::before,
  .mz-glow--strong::before {
    background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(139, 24, 40, 0.20) 0%, transparent 62%);
  }
}

/* Inline positioned glow spot. Size with width/height, position with the
   usual top/left/transform, recolor with --mz-accent-glow. */
.mz-glow-spot {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--mz-accent-glow) 30%, transparent) 0%,
    transparent 68%
  );
  filter: blur(8px);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .mz-glow-spot { background: radial-gradient(circle at 50% 50%, rgba(139, 24, 40, 0.28) 0%, transparent 68%); }
}

/* =====================================================================
   3. DEPTH  —  layered shadows + inner highlights, dimensional surfaces
   ===================================================================== */
.mz-card {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.7) inset,   /* top inner highlight */
    0 1px 2px rgba(10, 9, 8, 0.04),
    0 12px 32px rgba(10, 9, 8, 0.07),
    0 28px 64px rgba(10, 9, 8, 0.05);
}
.mz-card--dark {
  background: linear-gradient(180deg, rgba(251, 248, 242, 0.045) 0%, rgba(251, 248, 242, 0.02) 100%);
  border: 1px solid rgba(251, 248, 242, 0.12);
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.10) inset,  /* carved top edge */
    0 0 0 1px rgba(139, 24, 40, 0.05) inset,
    0 30px 70px rgba(0, 0, 0, 0.5),
    0 8px 22px rgba(0, 0, 0, 0.35);
}
.mz-card--lift {
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mz-card--lift:hover {
  transform: translateY(-4px);
  border-color: var(--bone-black);
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.7) inset,
    0 2px 4px rgba(10, 9, 8, 0.05),
    0 24px 56px rgba(10, 9, 8, 0.12),
    0 40px 90px rgba(10, 9, 8, 0.07);
}
.mz-card--dark.mz-card--lift:hover {
  border-color: var(--mz-accent-glow);
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.12) inset,
    0 0 0 1px rgba(139, 24, 40, 0.18) inset,
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(139, 24, 40, 0.18);
}
.mz-inset {
  border-radius: 8px;
  box-shadow:
    0 2px 6px rgba(10, 9, 8, 0.10) inset,
    0 1px 0 rgba(251, 248, 242, 0.5);
  background: var(--bone-cream);
}
.mz-hairline {
  box-shadow: 0 1px 0 rgba(251, 248, 242, 0.7) inset;
}

@media (hover: none) {
  .mz-card--lift:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-card--lift { transition: border-color 0.15s ease; }
  .mz-card--lift:hover { transform: none; }
}

/* =====================================================================
   4. MOTION  —  scroll reveal via IntersectionObserver (premium-motion.js)
   Tasteful, fast, not bouncy. Reduced-motion disables everything.

   PROGRESSIVE ENHANCEMENT GUARD:
   The hidden initial state (opacity:0 + transform) is gated behind the
   html.mz-js class, which is only added once JS is confirmed live (a
   synchronous snippet in each page <head>, plus premium-motion.js as a
   belt-and-suspenders). If JS is off, errors, or the script 404s, the
   class is never added and every .mz-reveal element stays fully visible.
   Content is NEVER invisible without JS.
   ===================================================================== */
html.mz-js .mz-reveal,
html.mz-js .mz-reveal--up,
html.mz-js .mz-reveal--left,
html.mz-js .mz-reveal--right,
html.mz-js .mz-reveal--scale {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
html.mz-js .mz-reveal,
html.mz-js .mz-reveal--up { transform: translateY(20px); }
html.mz-js .mz-reveal--left { transform: translateX(-20px); }
html.mz-js .mz-reveal--right { transform: translateX(20px); }
html.mz-js .mz-reveal--scale { transform: scale(0.97); }

html.mz-js .mz-reveal.is-visible,
html.mz-js .mz-reveal--up.is-visible,
html.mz-js .mz-reveal--left.is-visible,
html.mz-js .mz-reveal--right.is-visible,
html.mz-js .mz-reveal--scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for cascading children. 60ms steps. */
.mz-stagger-1 { transition-delay: 0.06s; }
.mz-stagger-2 { transition-delay: 0.12s; }
.mz-stagger-3 { transition-delay: 0.18s; }
.mz-stagger-4 { transition-delay: 0.24s; }
.mz-stagger-5 { transition-delay: 0.30s; }
.mz-stagger-6 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html.mz-js .mz-reveal,
  html.mz-js .mz-reveal--up,
  html.mz-js .mz-reveal--left,
  html.mz-js .mz-reveal--right,
  html.mz-js .mz-reveal--scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mz-stagger-1, .mz-stagger-2, .mz-stagger-3,
  .mz-stagger-4, .mz-stagger-5, .mz-stagger-6 { transition-delay: 0s; }
}

/* =====================================================================
   5. RHYTHM  —  generous section-spacing + reading helpers
   ===================================================================== */
.mz-section { padding: var(--space-8) 0; }
.mz-section--tight { padding: var(--space-7) 0; }
.mz-section--xl { padding: calc(var(--space-8) + var(--space-4)) 0; }
@media (max-width: 720px) {
  .mz-section { padding: var(--space-7) 0; }
  .mz-section--tight { padding: var(--space-6) 0; }
  .mz-section--xl { padding: var(--space-7) 0; }
}
.mz-stack-gap > * + * { margin-top: var(--space-5); }
.mz-measure { max-width: 64ch; }
.mz-layer { position: relative; z-index: 1; }

/* =====================================================================
   6. APP MOCK  (.mz-appmock)
   Branded member-app screen. Pure HTML/CSS/SVG, no image files.
   A premium phone frame showing a member's day. Recolor per gym by
   setting --mz-accent / --mz-accent-glow on an ancestor.
   Markup partial: /_components/member-app-mock.html
   ===================================================================== */
.mz-appmock {
  --mz-app-surface: var(--bone-cream);
  --mz-app-card: var(--bone-white);
  --mz-app-ink: var(--bone-black);
  --mz-app-muted: var(--steel);
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* Phone hardware frame: bone-black bezel, dimensional edge, soft contact shadow */
.mz-appmock-phone {
  position: relative;
  border-radius: 44px;
  background: linear-gradient(155deg, #15130F 0%, #0A0908 55%, #000 100%);
  padding: 12px;
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.12) inset,
    0 0 0 1.5px rgba(10, 9, 8, 0.9),
    0 2px 3px rgba(251, 248, 242, 0.06) inset,
    0 30px 70px rgba(10, 9, 8, 0.45),
    0 12px 28px rgba(10, 9, 8, 0.3);
}
/* Side button + volume rockers, subtle, on the bezel */
.mz-appmock-phone::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 130px;
  width: 3px;
  height: 56px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #2A2724, #0A0908);
}
.mz-appmock-phone::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 96px;
  width: 3px;
  height: 92px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, #2A2724, #0A0908);
}

/* The screen */
.mz-appmock-screen {
  position: relative;
  border-radius: 33px;
  overflow: hidden;
  background: var(--mz-app-surface);
  color: var(--mz-app-ink);
  font-family: var(--sans);
  /* inner screen edge highlight so the glass reads real */
  box-shadow:
    0 0 0 1px rgba(10, 9, 8, 0.25),
    0 0 22px rgba(10, 9, 8, 0.18) inset;
}

/* Dynamic-island notch */
.mz-appmock-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  background: #0A0908;
  border-radius: 12px;
  z-index: 5;
}

/* Status bar */
.mz-appmock-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mz-app-ink);
}
.mz-appmock-status-glyphs { display: flex; align-items: center; gap: 5px; }
.mz-appmock-status-glyphs svg { display: block; }

/* App header: gym wordmark + member avatar */
.mz-appmock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 14px;
}
.mz-appmock-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.mz-appmock-brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
}
.mz-appmock-brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mz-app-ink);
  line-height: 1;
}
.mz-appmock-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mz-accent);
  color: var(--bone-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(10, 9, 8, 0.18);
}

/* Greeting */
.mz-appmock-greet {
  padding: 4px 20px 14px;
}
.mz-appmock-greet-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mz-accent);
  font-weight: 500;
  margin-bottom: 6px;
}
.mz-appmock-greet-line {
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--mz-app-ink);
}

/* Today's session card (the hero card) */
.mz-appmock-session {
  margin: 0 16px 12px;
  border-radius: 18px;
  background: linear-gradient(165deg, #15130F 0%, var(--bone-black) 70%);
  color: var(--bone-white);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.10) inset,
    0 14px 30px rgba(10, 9, 8, 0.3);
}
/* accent glow bloom inside the session card */
.mz-appmock-session::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--mz-accent-glow) 55%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .mz-appmock-session::before { background: radial-gradient(circle at 50% 50%, rgba(139, 24, 40, 0.5) 0%, transparent 70%); }
}
.mz-appmock-session-eyebrow {
  position: relative;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-cream);
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mz-appmock-session-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mz-accent-glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-accent-glow) 25%, transparent);
}
@supports not (box-shadow: 0 0 0 3px color-mix(in srgb, red 10%, transparent)) {
  .mz-appmock-session-dot { box-shadow: 0 0 0 3px rgba(139, 24, 40, 0.25); }
}
.mz-appmock-session-title {
  position: relative;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--bone-white);
  margin-bottom: 4px;
}
.mz-appmock-session-meta {
  position: relative;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--steel-light);
  margin-bottom: 16px;
}
/* the one big primary button */
.mz-appmock-start {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 0;
  border-radius: 12px;
  background: var(--mz-accent);
  color: var(--bone-white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--mz-accent) 38%, transparent);
}
@supports not (box-shadow: 0 8px 20px color-mix(in srgb, red 10%, transparent)) {
  .mz-appmock-start { box-shadow: 0 8px 20px rgba(107, 15, 26, 0.38); }
}
.mz-appmock-start svg { width: 15px; height: 15px; flex: none; }

/* Coach note */
.mz-appmock-note {
  margin: 0 16px 12px;
  border-radius: 16px;
  background: var(--mz-app-card);
  border: 1px solid var(--line);
  padding: 14px 15px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.7) inset,
    0 6px 16px rgba(10, 9, 8, 0.05);
}
.mz-appmock-note-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: var(--bone-cream);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--mz-accent);
}
.mz-appmock-note-body { min-width: 0; }
.mz-appmock-note-from {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mz-accent);
  font-weight: 500;
  margin-bottom: 4px;
}
.mz-appmock-note-text {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mz-app-ink);
}

/* Streak strip */
.mz-appmock-streak {
  margin: 0 16px 18px;
  border-radius: 16px;
  background: var(--mz-app-card);
  border: 1px solid var(--line);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(251, 248, 242, 0.7) inset;
}
.mz-appmock-streak-left { display: flex; flex-direction: column; gap: 2px; }
.mz-appmock-streak-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mz-app-muted);
  font-weight: 500;
}
.mz-appmock-streak-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--mz-app-ink);
}
.mz-appmock-streak-value span {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--mz-app-muted);
  letter-spacing: 0;
}
/* seven-day dots */
.mz-appmock-streak-dots { display: flex; gap: 5px; }
.mz-appmock-streak-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--steel-light);
  display: block;
}
.mz-appmock-streak-dots i.on { background: var(--mz-accent); }
.mz-appmock-streak-dots i.today {
  background: var(--mz-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-accent) 22%, transparent);
}
@supports not (box-shadow: 0 0 0 3px color-mix(in srgb, red 10%, transparent)) {
  .mz-appmock-streak-dots i.today { box-shadow: 0 0 0 3px rgba(107, 15, 26, 0.22); }
}

/* Bottom tab bar */
.mz-appmock-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 11px 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--mz-app-card);
}
.mz-appmock-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mz-app-muted);
}
.mz-appmock-tab svg { width: 19px; height: 19px; display: block; }
.mz-appmock-tab.is-active { color: var(--mz-accent); }
/* home-indicator bar */
.mz-appmock-tabs::after { content: none; }

/* Optional caption under the mock */
.mz-appmock-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 18px;
}

@media (max-width: 380px) {
  .mz-appmock { width: 270px; }
}

/* =====================================================================
   7. VALUE STACK  (.mz-stack)
   Itemized "what an Operating Partners build replaces", each anchored to
   a real open-market comp, totalled, then the reveal line.
   Markup partial: /_components/value-stack.html
   ===================================================================== */
.mz-stack {
  max-width: 720px;
  margin: 0 auto;
}
.mz-stack-head { margin-bottom: 28px; }
.mz-stack-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mz-accent);
  font-weight: 500;
  margin-bottom: 16px;
}
.mz-stack-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--bone-black);
  margin-bottom: 16px;
}
.mz-stack-title em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--mz-accent);
}
.mz-stack-lede {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--steel);
  max-width: 60ch;
}

/* The itemized list, built as a dimensional card */
.mz-stack-list {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 28px;
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.7) inset,
    0 1px 2px rgba(10, 9, 8, 0.04),
    0 14px 36px rgba(10, 9, 8, 0.06),
    0 30px 64px rgba(10, 9, 8, 0.04);
}
.mz-stack-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.mz-stack-row:last-of-type { border-bottom: none; }
/* marrow-red accent bar bullet (replaces the dash glyph, honors voice rule) */
.mz-stack-bar {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--mz-accent);
  align-self: start;
  margin-top: 4px;
}
.mz-stack-row-main { min-width: 0; }
.mz-stack-row-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.004em;
  color: var(--bone-black);
  margin-bottom: 5px;
}
.mz-stack-row-desc {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--steel);
}
.mz-stack-row-comp {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-mid);
  margin-top: 6px;
}
.mz-stack-row-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--bone-black);
  white-space: nowrap;
  text-align: right;
  align-self: start;
}
.mz-stack-row-price .per {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-mid);
  margin-top: 3px;
}

/* Total framing block */
.mz-stack-total {
  margin-top: 18px;
  background: var(--bone-black);
  color: var(--bone-cream);
  border-radius: 10px;
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(251, 248, 242, 0.10) inset,
    0 24px 56px rgba(10, 9, 8, 0.22);
}
.mz-stack-total::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 90% 10%,
    color-mix(in srgb, var(--mz-accent-glow) 22%, transparent) 0%, transparent 60%);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .mz-stack-total::before { background: radial-gradient(ellipse 60% 80% at 90% 10%, rgba(139, 24, 40, 0.2) 0%, transparent 60%); }
}
.mz-stack-total-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mz-stack-total-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-light);
  font-weight: 500;
}
.mz-stack-total-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone-white);
}
.mz-stack-total-value em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--mz-accent-glow);
}

/* The reveal line under the total */
.mz-stack-reveal {
  position: relative;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(251, 248, 242, 0.12);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--steel-light);
}
.mz-stack-reveal strong {
  color: var(--bone-white);
  font-weight: 600;
}
.mz-stack-reveal .credit { color: var(--mz-accent-glow); font-weight: 600; }

/* The auditable-anchor footnote */
.mz-stack-note {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--steel);
  margin-top: 18px;
  max-width: 62ch;
}

@media (max-width: 600px) {
  .mz-stack-list { padding: 4px 18px; }
  .mz-stack-row { grid-template-columns: 12px 1fr; gap: 12px; padding: 18px 0; }
  .mz-stack-row-price { grid-column: 2; text-align: left; margin-top: 8px; }
  .mz-stack-row-price .per { display: inline; margin: 0 0 0 6px; }
}