/* ============================================
   MULLET PARTY — CONCEPT STYLES
   Aligned with 11-design-system.md
   Design tokens (palette, section primaries) live in tokens.css,
   loaded BEFORE this file.
   ============================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
/* BODY GRID
   The whole site sits on a visible pink-hot grid the way Blueprint's site
   sits on a navy grid. Sections with solid backgrounds (teal-deep, gray,
   pink-hot) cover the grid; light sections let it show through. */
body {
  background-color: var(--white);
  /* Drastic grid + cross-hatch dots. Pink-hot lines clearly visible. */
  background-image:
    /* major grid */
    linear-gradient(rgba(var(--mp-section-primary-rgb),0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--mp-section-primary-rgb),0.18) 1px, transparent 1px),
    /* sub-grid quarter lines for texture density */
    linear-gradient(rgba(var(--mp-section-primary-rgb),0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--mp-section-primary-rgb),0.07) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
  background-position: -1px -1px;
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* TYPOGRAPHY
   Editorial discipline inspired by The Blueprint of Water:
   - Inter for body and headlines
   - Source Serif Pro (italic) for emphasis inside a headline
   - JetBrains Mono for labels, eyebrows, numerals in data contexts
   Sentence case as default. ALL CAPS only for mono labels. */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; letter-spacing: 0; }
/* Massive editorial H1, magazine-cover scale. */
h1 {
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-weight: 500;
}
h2 { font-size: clamp(28px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.01em; }
h3 { font-size: 16px; }
.editorial, .mono-num { font-family: 'Source Serif Pro', Georgia, serif; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* INLINE EMPHASIS
   Big italic-serif emphasis inside a headline. Different pink shade so it
   pops against the headline body. Pattern lifted from Blueprint's
   "From the *basement.*" treatment where the italic word is a different color. */
.emph {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--pink-rose);
  letter-spacing: -0.015em;
}
/* On dark surfaces (hero, dark sections, closer), use pink-light for contrast. */
.hero h1 .emph,
.price-slider-section .emph,
.quiz-section .emph,
.pull .emph,
.closer .emph,
[data-page] header.subhero .emph { color: var(--mp-section-primary); }

/* PLOT FRAME
   Blueprint's bordered-card-on-grid signature, in MP voice. Wraps a section's
   content in a thin pink-hot rounded rectangle that floats on the body grid.
   Use: <div class="plot">section content</div> */
.plot {
  border: 1px solid rgba(var(--mp-section-primary-rgb),0.35);
  border-radius: 14px;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 44px);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  position: relative;
}
.plot--dark {
  border-color: rgba(var(--mp-section-primary-rgb),0.45);
  background: rgba(4,52,44,0.55);
  color: var(--white);
}
/* Corner tick marks like architectural drawings. */
.plot::before,
.plot::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--mp-section-primary);
  border-style: solid;
  border-width: 0;
}
.plot::before {
  top: -1px; left: -1px;
  border-top-width: 2px; border-left-width: 2px;
  border-top-left-radius: 14px;
}
.plot::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px; border-right-width: 2px;
  border-bottom-right-radius: 14px;
}
.plot--dark::before,
.plot--dark::after { border-color: var(--mp-section-primary); }

/* PILL BADGES
   Dot + mono uppercase label, like "● FIELD NOTES · FREE TO READ" from Blueprint.
   Use: <span class="pill">Tested in Austin</span> */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--mp-section-primary-rgb),0.40);
  background: var(--pink-pale);
  color: var(--pink-deeper);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
}
.pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink-rose);
  box-shadow: 0 0 0 0 var(--pink-rose);
  animation: pillpulse 2.6s ease-in-out infinite;
}
@keyframes pillpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,74,106,0.55); }
  50%       { box-shadow: 0 0 0 6px rgba(232,74,106,0); }
}
.pill--dark {
  background: rgba(var(--mp-section-primary-rgb),0.15);
  border-color: rgba(var(--mp-section-primary-rgb),0.40);
  color: var(--mp-section-primary);
}
.pill--dark::before { background: var(--mp-section-primary); }
.pill--mint { background: rgba(34,211,165,0.15); border-color: rgba(34,211,165,0.50); color: var(--splash-mint); }
.pill--mint::before { background: var(--splash-mint); }

/* STATS WIDGET
   Sidebar block of small mono labels with big serif values, hairline-separated.
   Like Blueprint's "Posts published / In the pipeline / Cadence" panel. */
.stats {
  display: flex; flex-direction: column;
  border: 1px solid rgba(var(--mp-section-primary-rgb),0.30);
  border-radius: 14px;
  overflow: hidden;
}
.stats .row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(var(--mp-section-primary-rgb),0.18);
  gap: 18px;
}
.stats .row:last-child { border-bottom: 0; }
.stats .row .label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.stats .row .val {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--pink-rose);
  letter-spacing: -0.01em;
}
.stats .row .val small {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-left: 6px;
}
.stats--dark { border-color: rgba(var(--mp-section-primary-rgb),0.30); }
.stats--dark .row { border-bottom-color: rgba(var(--mp-section-primary-rgb),0.18); }
.stats--dark .row .label { color: rgba(255,255,255,0.6); }
.stats--dark .row .val { color: var(--pink-light); }

/* EYEBROW
   Mono cap label with a § section glyph that runs through the whole site
   as the section marker, the way Blueprint uses § for its section heads. */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--mp-section-primary); font-weight: 400;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.eyebrow::before {
  content: "§";
  display: inline-block;
  opacity: 0.55;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
}
.eyebrow-on-dark {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(var(--mp-section-primary-rgb),0.10);
  border: 0.5px solid rgba(var(--mp-section-primary-rgb),0.30);
  padding: 4px 12px; border-radius: 999px;
  color: var(--mp-section-primary); font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; font-weight: 400;
  display: inline-block; margin-bottom: 16px;
}

/* BUTTONS */
.cta {
  background: var(--mp-section-primary); color: var(--white);
  padding: 13px 28px; border-radius: 8px;
  font-size: 14px; font-weight: 500; border: none;
  display: inline-block; transition: background 0.15s, transform 0.15s;
}
.cta:hover { background: var(--mp-section-primary-hover); }
.cta-on-dark { background: var(--mp-section-primary); color: var(--white); }
.cta-on-dark:hover { background: var(--mp-section-primary-hover); color: var(--white); }
.cta.bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.ghost {
  color: var(--white); padding: 13px 22px; font-size: 13px; font-weight: 500;
  border: 0.5px solid rgba(255,255,255,0.4); border-radius: 8px;
  display: inline-block;
}
.ghost-light {
  color: var(--text-primary); padding: 13px 22px; font-size: 13px; font-weight: 500;
  border: 0.5px solid var(--border); border-radius: 8px;
  background: var(--white); display: inline-block;
}
.ghost-light:hover { border-color: var(--mp-section-primary); }

/* LAYOUT */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 48px 0; }
/* Route-wrapping sections are layout containers, not content sections —
   they should not add their own vertical padding, otherwise a 48px gap
   appears between the sticky nav and the hero. */
section[data-page] { padding: 0; }
@media (max-width: 768px) {
  .wrap { padding: 0 18px; }
  section { padding: 28px 0; }
}

/* ===========================================================
   NAV, dark + textured
   Background is a layered composition: dark teal base, four
   radial gradient color washes pulling in the splash palette,
   and a subtle noise grain overlay. Big animated logo on the
   left, bold color coded tab pills on the right. Pink hot
   bottom border closes it off.
   =========================================================== */
nav.top {
  position: sticky; top: 0; z-index: 50;
  /* Logo overflows downward; let it escape. */
  overflow: visible;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 320px 130px at 18% 50%, rgba(var(--mp-section-primary-rgb), 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 280px 110px at 42% 50%, rgba(34, 211, 165, 0.24) 0%, transparent 70%),
    radial-gradient(ellipse 300px 120px at 64% 50%, rgba(127, 119, 221, 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 280px 110px at 86% 50%, rgba(55, 138, 221, 0.24) 0%, transparent 70%),
    linear-gradient(180deg, #04342C 0%, #022721 100%);
  border-bottom: 3px solid var(--mp-section-primary);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
nav.top .row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 32px;
  max-width: 1480px;
  margin: 0 auto;
  gap: 24px;
  /* Don't clip the oversized brand logo that hangs below this row. */
  overflow: visible;
}

/* Brand. Phase 1.1: contained to the nav row, no overhang into the
   hero. The old "oversized + bleed below nav" treatment was killed
   because it crashed into hero text on /venues, /parties, /weddings.
   Logo sized to fit the 56px effective nav row height. */
nav.top .brand {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  cursor: pointer;
  /* Carries the active section primary down to the inline flamingo SVG,
     whose former-pink fills now use fill="currentColor". */
  color: var(--mp-section-primary);
  overflow: visible;
}
nav.top .brand svg {
  width: 60px;
  height: 60px;
  display: block;
}
nav.top .brand video.brand-logo,
nav.top .brand img.brand-logo {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 84px;
  box-sizing: border-box;
  padding: 7px 10px;
  display: block;
  object-fit: contain;
  /* The logo is a light-background design (dark flamingo + wordmark), so it
     needs a light chip to read against the dark teal nav. */
  background: #F4F4F0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  z-index: 30;
  filter: none;
}
nav.top .wordmark {
  font-size: 24px;
  letter-spacing: 2.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
}

/* Primary tabs, color coded per vertical (on dark bg) ----- */
nav.top ul.primary {
  display: flex;
  gap: 6px;
  list-style: none;
  font-size: 17px;
  align-items: center;
}
nav.top ul.primary a {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 11px 20px;
  border-radius: 999px;
  color: var(--tab-color, #FFFFFF);
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  border: 2px solid transparent;
}
/* Default text colors are brighter variants of the splash palette
   so they read against the dark teal background. Hover and active
   states fill the pill with the original splash color, white text. */
nav.top ul.primary a[data-route="shop"]      { --tab-color: #FF6B9D; --tab-fill: var(--mp-shop); }
nav.top ul.primary a[data-route="quiz"]      { --tab-color: #34E3B6; --tab-fill: var(--mp-quiz); }
nav.top ul.primary a[data-route="weddings"]  { --tab-color: #ED93B1; --tab-fill: var(--mp-weddings); }
nav.top ul.primary a[data-route="corporate"] { --tab-color: #4ADE80; --tab-fill: var(--mp-corporate); }
nav.top ul.primary a[data-route="camps"]     { --tab-color: #B0A8E8; --tab-fill: var(--mp-camps); }
nav.top ul.primary a[data-route="about"]     { --tab-color: #6BAFFE; --tab-fill: var(--mp-about); }

nav.top ul.primary a:hover,
nav.top ul.primary a.active {
  background: var(--tab-fill, var(--tab-color));
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.55);
}

/* Utility nav (FAQ, Contact, Cart) on dark --------------- */
nav.top .utility {
  display: flex; gap: 14px; align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  flex-shrink: 0;
}
nav.top .utility a {
  transition: color 0.15s;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.82);
}
nav.top .utility a:hover { color: #FFFFFF; }
nav.top .cart-pill {
  background: var(--mp-section-primary) !important;
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 14px -4px rgba(var(--mp-section-primary-rgb), 0.55);
}
nav.top .cart-pill:hover {
  background: var(--mp-section-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(var(--mp-section-primary-rgb), 0.7);
}

/* Responsive --------------------------------------------- */
@media (max-width: 1100px) {
  nav.top .row { padding: 6px 22px; }
  nav.top ul.primary { gap: 2px; font-size: 15px; }
  nav.top ul.primary a { padding: 9px 14px; letter-spacing: 0.4px; }
  nav.top .brand { width: 56px; height: 56px; }
  nav.top .brand svg { width: 56px; height: 56px; }
  nav.top .brand video.brand-logo,
  nav.top .brand img.brand-logo { width: auto; height: 74px; top: 50%; }
  nav.top .wordmark { font-size: 19px; letter-spacing: 2px; }
}
@media (max-width: 900px) {
  /* Phase 1.1: hide desktop nav + utility on small viewports.
     Hamburger drawer takes over (see .mp-menu rules below). */
  nav.top ul.primary { display: none; }
  nav.top .utility .util-link { display: none; }
  nav.top .row { padding: 6px 16px; }
  nav.top .brand { width: 48px; height: 48px; }
  nav.top .brand svg { width: 48px; height: 48px; }
  nav.top .brand video.brand-logo,
  nav.top .brand img.brand-logo { width: auto; height: 64px; top: 50%; }
  nav.top .wordmark { font-size: 17px; letter-spacing: 1.8px; }
}

/* HERO */
.hero {
  position: relative; min-height: 88vh;
  background: var(--teal-deep);
  color: var(--white); overflow: hidden;
}
.hero .bg {
  position: absolute; inset: 0;
  background-image: url("photos/Top%20Photos/FOr%20claude%20photos%20for%20MP/IMG_9933.JPG");
  background-size: cover; background-position: center;
}

/* HERO SLIDER */
.hero-slider { position: absolute; inset: 0; overflow: hidden; }
.hero-slider .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.2s ease, transform 8s ease;
}
.hero-slider .slide.active { opacity: 1; transform: scale(1); }
.hero-slider .controls {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: 8px; align-items: center;
}
.hero-slider .dot {
  width: 28px; height: 3px; background: rgba(255,255,255,0.3);
  border: none; padding: 0; border-radius: 2px;
  cursor: pointer; transition: background 0.2s, width 0.2s;
}
.hero-slider .dot:hover { background: rgba(255,255,255,0.5); }
.hero-slider .dot.active { background: var(--mp-section-primary); width: 44px; }
.hero-slider .arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 44px; height: 44px; border-radius: 999px;
  background: rgba(0,0,0,0.3); color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; transition: background 0.2s;
  backdrop-filter: blur(6px);
}
.hero-slider .arrow:hover { background: var(--mp-section-primary); border-color: var(--mp-section-primary); }
.hero-slider .arrow.prev { left: 16px; }
.hero-slider .arrow.next { right: 16px; }
@media (max-width: 768px) {
  .hero-slider .arrow { width: 36px; height: 36px; font-size: 16px; }
  .hero-slider .arrow.prev { left: 8px; }
  .hero-slider .arrow.next { right: 8px; }
}
.hero-slider .counter {
  position: absolute; top: 24px; right: 24px; z-index: 3;
  font-size: 11px; letter-spacing: 1.5px; color: rgba(255,255,255,0.6);
  font-family: 'Source Serif Pro', Georgia, serif; font-style: italic;
}

.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,52,44,0.45) 0%, rgba(4,52,44,0.85) 100%);
  pointer-events: none;
}
.hero .content {
  position: relative; z-index: 2;
  min-height: 88vh; display: flex; flex-direction: column; justify-content: center;
  padding: 80px 24px 48px;
  max-width: 1200px; margin: 0 auto;
}
.hero .content > .pill {
  align-self: flex-start;
  background: rgba(0,0,0,0.34);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero h1 {
  max-width: 14ch;
  font-size: clamp(46px, 11vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 18px 0 24px;
  font-weight: 500;
}
.hero .lede {
  font-family: 'Source Serif Pro', Georgia, serif;
  max-width: 50ch;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin-bottom: 32px;
}
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .micro { margin-top: 20px; font-size: 12px; color: rgba(255,255,255,0.6); font-style: italic; }

.live-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(var(--mp-section-primary-rgb),0.12); color: var(--mp-section-primary);
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 20px;
}
.live-tag .dot {
  width: 6px; height: 6px; background: var(--mp-section-primary);
  border-radius: 50%; animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }

/* Use-case page hero variants (smaller than home hero, photo-driven) */
.subhero {
  position: relative; min-height: 56vh;
  background: var(--teal-deep); color: var(--white); overflow: hidden;
}
.subhero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.subhero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,52,44,0.45) 0%, rgba(4,52,44,0.85) 100%);
}
.subhero .content {
  position: relative; z-index: 2; min-height: 56vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 24px 40px; max-width: 1200px; margin: 0 auto;
}
.subhero h1 { max-width: 18ch; margin-bottom: 14px; }
.subhero .lede { max-width: 56ch; color: rgba(255,255,255,0.85); margin-bottom: 22px; }

/* MARQUEE
   Loud ticker. Pink-hot and splash-mint accents punch hard. */
.marquee {
  background: var(--teal-deep); color: var(--white);
  overflow: hidden; padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: scroll 28s linear infinite;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.005em;
  line-height: 1;
}
.marquee span { display: inline-flex; align-items: center; gap: 48px; }
.marquee .accent { color: var(--pink-light); }
.marquee .accent2 { color: var(--splash-mint); }
/* A tiny dot separator between phrases adds rhythm. */
.marquee-track > span + span::before {
  content: "·";
  margin-right: 24px;
  color: var(--pink-light);
  font-size: 1.2em;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* SPLASH SHAPES
   Big offset circles that bleed off section edges. Layers color punch
   behind content. Apply with class="splashes splashes--A" (variant). */
.splashes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.splashes > .wrap { position: relative; z-index: 1; }
.splashes::before,
.splashes::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.14;
}
.splashes--A::before {
  width: 420px; height: 420px;
  background: var(--splash-purple);
  left: -160px; top: 8%;
}
.splashes--A::after {
  width: 320px; height: 320px;
  background: var(--mp-section-primary);
  right: -120px; bottom: 12%;
}
.splashes--B::before {
  width: 380px; height: 380px;
  background: var(--splash-teal);
  right: -140px; top: -60px;
}
.splashes--B::after {
  width: 280px; height: 280px;
  background: var(--splash-mint);
  left: -80px; bottom: -100px;
  opacity: 0.18;
}
@media (max-width: 700px) {
  .splashes::before, .splashes::after { transform: scale(0.7); opacity: 0.10; }
}

/* TILES (use-case grid on home + sub-nav) */
.tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  background: var(--white); border: 0.5px solid var(--border);
  border-top: 5px solid var(--accent); border-radius: 12px;
  overflow: hidden; display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 14px 28px -20px rgba(4,52,44,0.3), 0 2px 4px rgba(0,0,0,0.04);
}
.tile:hover {
  transform: translateY(-5px);
  box-shadow:
    0 26px 44px -22px color-mix(in srgb, var(--accent) 55%, transparent),
    0 4px 10px rgba(0,0,0,0.08);
}
.tile .photo { aspect-ratio: 4/3; overflow: hidden; background: var(--teal-deep); }
.tile .photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.tile:hover .photo img { transform: scale(1.05); }
.tile .body { padding: 16px 14px 18px; text-align: center; }
.tile .name {
  font-size: 17px; font-weight: 500; margin-bottom: 6px;
  color: var(--accent);
}
.tile .blurb { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.tile.weddings { --accent: var(--mp-section-primary); }
.tile.corporate { --accent: var(--splash-teal); }
.tile.camps { --accent: var(--splash-purple); }
.tile.venues { --accent: var(--splash-blue); }
.tile.parties { --accent: var(--splash-green); }

/* WEDDING MATH BLOCK */
.math {
  background: var(--gray-surface); border-radius: 12px; padding: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 800px) { .math { grid-template-columns: 1fr; padding: 28px; } }
.math .nums { display: grid; gap: 0; }
.math .row {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 0.5px solid var(--border); padding: 14px 0;
}
.math .row:last-child { border-bottom: 0; }
.math .row .label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-secondary);
}
.math .row .val {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.math .row.win {
  border-bottom: 1px solid var(--mp-section-primary);
}
.math .row.win .val { color: var(--mp-section-primary); }
.math .row.win .label { color: var(--text-primary); font-weight: 500; }
.math .copy p { margin-bottom: 12px; line-height: 1.6; }
.math .copy .punchline {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 18px; font-style: italic; color: var(--text-primary);
  border-left: 3px solid var(--mp-section-primary); padding-left: 14px;
}

/* PULL QUOTE
   Editorial. Big italic serif, hairline above and below, attribution mono. */
.pull {
  background: var(--teal-deep); color: var(--white);
  padding: 88px 24px; text-align: center;
  position: relative;
}
.pull::before,
.pull::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--mp-section-primary);
  margin: 0 auto 28px;
  opacity: 0.7;
}
.pull::after {
  margin: 28px auto 0;
  background: rgba(var(--mp-section-primary-rgb),0.3);
}
.pull q {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(24px, 3.4vw, 36px); font-weight: 400; font-style: italic;
  line-height: 1.25; max-width: 30ch; display: block; margin: 0 auto;
  quotes: '\201C' '\201D';
  letter-spacing: -0.005em;
}
.pull .attr {
  margin-top: 24px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.4px;
}
.pull .attr strong { color: var(--pink-light); font-weight: 400; }

/* CARDS (testimonials) */
.cards { display: grid; gap: 18px; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--white); border: 0.5px solid var(--border);
  border-radius: 14px; padding: 22px 20px;
  position: relative;
  box-shadow: 0 12px 26px -18px rgba(4,52,44,0.25), 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -22px rgba(var(--mp-section-primary-rgb),0.35), 0 4px 8px rgba(0,0,0,0.06);
}
/* The first and third testimonials get splash-blue and splash-teal top accents.
   Subtle, doesn't compete with the featured Dad card. */
.cards .card:nth-child(1) { border-top: 3px solid var(--splash-blue); }
.cards .card:nth-child(3) { border-top: 3px solid var(--splash-teal); }
.card.featured {
  border: 2px solid var(--mp-section-primary);
  transform: scale(1.04);
  box-shadow: 0 24px 48px -20px rgba(var(--mp-section-primary-rgb),0.45), 0 4px 12px rgba(0,0,0,0.08);
}
.card.featured:hover { transform: scale(1.04) translateY(-3px); }
.card.featured::before {
  content: "DAD";
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  position: absolute; top: -10px; left: 16px;
  background: var(--mp-section-primary); color: var(--white);
  font-size: 10px; padding: 4px 10px; border-radius: 4px;
  font-weight: 500; letter-spacing: 1.4px;
}
.card .who {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 12px;
}
.card .who strong { color: var(--text-primary); font-weight: 500; }
.card .quote {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 15px; line-height: 1.5; color: var(--text-primary);
}
.card.featured .quote { font-size: 17px; }

/* PHOTO STRIP */
/* PHOTO STRIPS
   Big, full-bleed scrolling photo bands. Cells are ~440px wide so each
   photo reads cinematic, not thumbnail. Strip breaks out of any parent
   .wrap so it runs edge-to-edge across the viewport. */
.strip {
  overflow: hidden;
  padding: 36px 0;
  /* Force full viewport width even inside .wrap */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
.strip-track {
  display: flex; gap: 18px;
  animation: scroll 50s linear infinite;
  padding: 0 24px;
}
.strip-track .s {
  flex: 0 0 460px;
  aspect-ratio: 4/3;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 44px -22px rgba(4,52,44,0.4), 0 4px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.strip-track .s:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 56px -22px rgba(var(--mp-section-primary-rgb),0.45), 0 6px 12px rgba(0,0,0,0.1);
}
.strip-track .s img { width: 100%; height: 100%; object-fit: cover; }
/* Tall / wide variants for rhythm — both still big. */
.strip-track .s.tall { flex-basis: 360px; aspect-ratio: 3/4; }
.strip-track .s.wide { flex-basis: 620px; aspect-ratio: 16/9; }
@media (max-width: 700px) {
  .strip-track .s { flex-basis: 320px; }
  .strip-track .s.tall { flex-basis: 240px; }
  .strip-track .s.wide { flex-basis: 420px; }
}

/* Reverse-direction strip for visual counterpoint between sections. */
.strip.reverse .strip-track { animation: scroll-reverse 56s linear infinite; }
@keyframes scroll-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* TILTED POLAROID CLUSTER
   Overlapping photo cluster with subtle rotation. Reads as physical depth,
   like a stack of prints on a table. */
.cluster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 20px 0 32px;
  position: relative;
}
@media (max-width: 800px) { .cluster { grid-template-columns: repeat(2, 1fr); } }
.cluster .pic {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
  border: 6px solid var(--white);
  box-shadow: 0 20px 36px -22px rgba(4,52,44,0.4), 0 3px 6px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s 0.25s;
}
.cluster .pic:nth-child(1) { transform: rotate(-3deg) translateY(8px); }
.cluster .pic:nth-child(2) { transform: rotate(2deg) translateY(-12px) translateX(-12px); }
.cluster .pic:nth-child(3) { transform: rotate(-1deg) translateY(20px) translateX(-18px); }
.cluster .pic:nth-child(4) { transform: rotate(4deg) translateY(-4px) translateX(-24px); }
.cluster .pic:hover {
  transform: rotate(0) translateY(-8px) scale(1.04);
  z-index: 2;
  box-shadow: 0 32px 60px -22px rgba(var(--mp-section-primary-rgb),0.45), 0 6px 14px rgba(0,0,0,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s 0s;
}
.cluster .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* HOW IT WORKS */
/* STEPS
   Loud, layered. Each step a chunky card with a big colored numeral badge
   that uses the splash palette as a rotation. Deep shadow for depth. */
.steps { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px 24px;
  position: relative;
  box-shadow: 0 14px 28px -18px rgba(4,52,44,0.25), 0 2px 4px -2px rgba(0,0,0,0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -20px rgba(var(--mp-section-primary-rgb),0.35), 0 4px 8px -2px rgba(0,0,0,0.08);
}
.step .n {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--mp-section-primary); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
  box-shadow: 0 10px 22px -10px rgba(var(--mp-section-primary-rgb),0.55);
}
.step:nth-child(2) .n {
  background: var(--splash-teal);
  box-shadow: 0 10px 22px -10px rgba(29,158,117,0.55);
}
.step:nth-child(3) .n {
  background: var(--splash-purple);
  box-shadow: 0 10px 22px -10px rgba(127,119,221,0.55);
}
.step h3 {
  margin-bottom: 8px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.22;
}
.step p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* PRICING LADDER
   Standalone colorful cards with depth shadows. Big Source Serif price,
   mono per-unit label, italic-serif tier name. Each card lifts on hover. */
.ladder {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin-top: 24px;
}
@media (max-width: 1100px) { .ladder { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
@media (max-width: 700px) { .ladder { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.rung {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 24px 14px 22px;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 22px -16px rgba(4,52,44,0.25), 0 1px 2px rgba(0,0,0,0.04);
}
/* Splash-color top accent bar, rotates around the palette like the tiles do. */
.rung::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--mp-section-primary);
}
.rung:nth-child(2)::before { background: var(--splash-teal); }
.rung:nth-child(3)::before { background: var(--splash-purple); }
.rung:nth-child(4)::before { background: var(--splash-blue); }
.rung:nth-child(5)::before { background: var(--splash-green); }
.rung:nth-child(6)::before { background: var(--mp-section-primary); }
.rung:nth-child(7)::before { background: var(--splash-mint); }
.rung .qty {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--mp-section-primary);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.rung .each {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 8px;
}
.rung .tag {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  color: var(--text-primary);
  margin-top: 8px;
}
.rung.peak {
  background: var(--teal-deep); color: var(--white); border-color: var(--teal-deeper);
  box-shadow: 0 14px 32px -16px rgba(4,52,44,0.55), 0 2px 6px rgba(0,0,0,0.1);
}
.rung.peak .qty { color: var(--splash-mint); }
.rung.peak .each { color: rgba(255,255,255,0.6); }
.rung.peak .tag { color: var(--pink-light); }
button.rung {
  font-family: inherit; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}
button.rung:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -22px rgba(var(--mp-section-primary-rgb),0.45), 0 4px 8px rgba(0,0,0,0.06);
}
button.rung.peak:hover {
  box-shadow: 0 24px 44px -22px rgba(34,211,165,0.55), 0 4px 10px rgba(0,0,0,0.18);
}
.rung-hint {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: var(--text-secondary); letter-spacing: 1.2px;
  margin-top: 16px; text-transform: uppercase; text-align: center;
}

/* Price preview pill on use-case pages */
.price-preview {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(31,158,117,0.12); color: var(--splash-teal);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.4px;
  margin-bottom: 16px;
}
.price-preview .save { color: var(--splash-green); font-weight: 500; }
.price-preview strong { color: var(--text-primary); font-weight: 500; }

/* ============================================
   LIVE PRICING SLIDER (drag, watch price drop)
   ============================================ */
/* DARK SECTIONS get a subtle splash-dot texture for depth, the way
   Blueprint uses a grid pattern under its navy field. Skip .pull because
   it already uses ::before for the hairline rule. */
.price-slider-section,
.quiz-section,
.closer {
  position: relative;
  isolation: isolate;
}
.price-slider-section::before,
.quiz-section::before,
.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* big halftone dots, pink */
    radial-gradient(rgba(var(--mp-section-primary-rgb),0.22) 2.5px, transparent 2.5px),
    /* offset mint dots */
    radial-gradient(rgba(34,211,165,0.16) 2px, transparent 2px),
    /* grid lines layer beneath */
    linear-gradient(rgba(var(--mp-section-primary-rgb),0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--mp-section-primary-rgb),0.08) 1px, transparent 1px);
  background-size: 32px 32px, 44px 44px, 80px 80px, 80px 80px;
  background-position: 0 0, 16px 16px, 0 0, 0 0;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
}
.closer::before {
  background-image:
    radial-gradient(rgba(255,255,255,0.18) 2.5px, transparent 2.5px),
    radial-gradient(rgba(34,211,165,0.20) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px, 44px 44px, 80px 80px, 80px 80px;
  background-position: 0 0, 16px 16px, 0 0, 0 0;
}

.price-slider-section {
  background: var(--teal-deep); color: var(--white);
  padding: 96px 24px;
}
.price-slider-section .sec-head h2 { color: var(--white); }
/* Dark teal section — eyebrow lifts toward white so it stays readable
   on every route. Section-primary alone fails AA contrast here on most
   routes (corporate/weddings/about/quiz). */
.price-slider-section .eyebrow {
  color: color-mix(in srgb, var(--mp-section-primary) 40%, white);
}
.price-slider {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 44px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
@media (max-width: 768px) { .price-slider { padding: 24px 18px; } }

.big-display {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center;
  margin-bottom: 36px; text-align: center;
}
@media (max-width: 700px) { .big-display { grid-template-columns: 1fr; } }
.big-qty, .big-price {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.big-qty .num, .big-price .num {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(64px, 10vw, 112px); line-height: 1;
  font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s;
}
.big-qty .num { color: var(--mp-section-primary); }
.big-price .num { color: var(--splash-mint); }
.big-price .num.bumped { animation: bump 0.4s ease; }
@keyframes bump { 50% { transform: scale(1.08); color: var(--mp-section-primary); } }
.big-display .unit {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-weight: 400;
}
.big-display .vs {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; color: rgba(255,255,255,0.25);
}
@media (max-width: 700px) { .big-display .vs { display: none; } }

.slider-track {
  position: relative; padding: 32px 0 56px;
}
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px;
  background: linear-gradient(90deg, var(--mp-section-primary) 0%, var(--splash-mint) 100%);
  border-radius: 999px; outline: none;
  cursor: grab;
}
.range:active { cursor: grabbing; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--white); cursor: grab;
  border: 4px solid var(--mp-section-primary);
  box-shadow: 0 4px 16px rgba(var(--mp-section-primary-rgb),0.5);
  transition: transform 0.15s, box-shadow 0.15s;
}
.range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); box-shadow: 0 6px 24px rgba(var(--mp-section-primary-rgb),0.7); }
.range::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--white); cursor: grab;
  border: 4px solid var(--mp-section-primary);
  box-shadow: 0 4px 16px rgba(var(--mp-section-primary-rgb),0.5);
}

.tier-marks {
  position: absolute; top: 50px; left: 0; right: 0; height: 24px;
  pointer-events: none;
}
.tier-marks .mark {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(255,255,255,0.4); font-weight: 500;
  white-space: nowrap; transition: color 0.2s;
}
.tier-marks .mark::before {
  content: ""; display: block; margin: -16px auto 4px;
  width: 1px; height: 8px; background: rgba(255,255,255,0.3);
}
.tier-marks .mark.hit { color: var(--splash-mint); }
.tier-marks .mark.hit::before { background: var(--splash-mint); }

.totals-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  background: rgba(0,0,0,0.2); border-radius: 12px; padding: 18px;
  margin-bottom: 24px;
}
@media (max-width: 600px) { .totals-row { grid-template-columns: 1fr; } }
.totals-row > div {
  text-align: center;
  border-right: 0.5px solid rgba(255,255,255,0.1);
  padding: 4px 0;
}
.totals-row > div:last-child { border-right: none; }
@media (max-width: 600px) { .totals-row > div { border-right: none; border-bottom: 0.5px solid rgba(255,255,255,0.1); padding: 12px 0; } .totals-row > div:last-child { border-bottom: none; } }
.totals-row .label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 6px;
}
.totals-row .val {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.totals-row .val.win { color: var(--splash-mint); }
.totals-row .val.tier {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  color: var(--mp-section-primary); font-size: 20px;
  letter-spacing: 0;
}

.price-slider .cta-row {
  text-align: center; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.price-slider .nudge {
  font-size: 12px; color: rgba(255,255,255,0.55); font-style: italic;
  text-align: center; margin-top: 14px;
  font-family: 'Source Serif Pro', Georgia, serif;
}

/* GALLERY
   Masonry-ish grid with bigger cells, varied spans, and depth shadow on
   hover. Reads like a contact sheet, not a thumbnail dump. */
.gallery {
  display: grid; gap: 8px;
  grid-template-columns: repeat(8, 1fr); grid-auto-rows: 160px;
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; gap: 6px; } }
.gallery .g {
  overflow: hidden; border-radius: 8px; background: var(--gray-surface);
  box-shadow: 0 6px 14px -10px rgba(4,52,44,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery .g:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -16px rgba(var(--mp-section-primary-rgb),0.4);
  z-index: 2;
}
.gallery .g img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery .g:hover img { transform: scale(1.06); }
.gallery .g.span2 { grid-column: span 2; grid-row: span 2; }
.gallery .g.span3 { grid-column: span 3; grid-row: span 2; }
.gallery .g.tall { grid-row: span 2; }

/* WEDDING HERO CAROUSEL
   Full-bleed slow auto-cycling hero with prev/next arrows and a counter.
   Lives at the top of the /weddings page. */
.wh-hero {
  position: relative;
  min-height: 70vh;
  background: var(--teal-deep);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.wh-slides { position: absolute; inset: 0; z-index: 1; }
.wh-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1100ms ease, transform 8000ms ease-out;
  will-change: opacity, transform;
}
.wh-slide.is-active {
  opacity: 1;
  transform: scale(1.0);
}
.wh-veil {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(4,52,44,0.30) 0%, rgba(4,52,44,0.78) 100%),
    radial-gradient(ellipse at 30% 60%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 70%);
  pointer-events: none;
}
.wh-content {
  position: relative; z-index: 3;
  min-height: 70vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 64px 80px;
  max-width: 1200px;
  margin: 0 auto;
}
.wh-content h1 { max-width: 18ch; margin: 8px 0 14px; }
.wh-content .lede { max-width: 56ch; color: rgba(255,255,255,0.9); margin-bottom: 22px; }
.wh-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
  font-family: inherit;
  padding: 0 0 4px 0;
}
.wh-arrow:hover {
  background: var(--mp-section-primary);
  border-color: var(--mp-section-primary);
  transform: translateY(-50%) scale(1.06);
}
.wh-arrow-prev { left: 18px; }
.wh-arrow-next { right: 18px; }
.wh-counter {
  position: absolute;
  bottom: 22px; right: 26px;
  z-index: 4;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.32);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 800px) {
  .wh-hero { min-height: 78vh; }
  .wh-content { padding: 40px 22px 70px; min-height: 78vh; }
  .wh-arrow { width: 44px; height: 44px; font-size: 22px; }
  .wh-arrow-prev { left: 10px; }
  .wh-arrow-next { right: 10px; }
}

/* WEDDING FEATURE STRIP
   Seven hero shots below the carousel as a wrapped grid. */
.wh-strip-wrap { padding: 56px 0 24px; }
.wh-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.wh-strip-card {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: var(--gray-surface);
  box-shadow: 0 6px 16px -12px rgba(4,52,44,0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wh-strip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -18px rgba(var(--mp-section-primary-rgb),0.45);
}
.wh-strip-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.wh-strip-card:hover img { transform: scale(1.06); }
@media (max-width: 1000px) { .wh-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .wh-strip { grid-template-columns: repeat(2, 1fr); } }

/* WEDDING MOSAIC
   Big varied dump of remaining photos before the closer. */
.wh-mosaic-wrap { padding: 64px 0 48px; background: var(--gray-surface); }
.wh-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 8px;
}
.wh-tile {
  overflow: hidden;
  border-radius: 8px;
  background: var(--cream-deep);
  position: relative;
  box-shadow: 0 8px 18px -14px rgba(4,52,44,0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wh-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 32px -18px rgba(var(--mp-section-primary-rgb),0.45);
  z-index: 2;
}
.wh-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.45s ease;
}
.wh-tile:hover img { transform: scale(1.05); }
.wh-tile-wide { grid-column: span 2; }
.wh-tile-tall { grid-row: span 2; }
.wh-tile-xl   { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1000px) {
  .wh-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; }
}
@media (max-width: 640px) {
  .wh-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .wh-tile-xl { grid-column: span 2; grid-row: span 2; }
  .wh-tile-wide { grid-column: span 2; }
  .wh-tile-tall { grid-row: span 1; }
}

/* ============================================================
   WEDDING BAND, full-bleed auto-scrolling marquee under the hero.
   Pauses on hover. prefers-reduced-motion renders as a static row.
   Speed: ~70s per full cycle of 12 photos.
   ============================================================ */
.wedding-band {
  position: relative;
  width: 100%;
  height: 280px;
  margin: 0;
  background: var(--mp-cream);
  overflow: hidden;
  box-shadow:
    inset 0 6px 14px -10px rgba(0, 0, 0, 0.18),
    inset 0 -6px 14px -10px rgba(0, 0, 0, 0.18);
}
.wedding-band__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  gap: 8px;
  width: max-content;
  animation: wedding-band-scroll 70s linear infinite;
  will-change: transform;
}
.wedding-band:hover .wedding-band__track,
.wedding-band:focus-within .wedding-band__track {
  animation-play-state: paused;
}
.wedding-band__img {
  display: block;
  height: 100%;
  width: auto;
  flex: 0 0 auto;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes wedding-band-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 760px) {
  .wedding-band { height: 200px; }
  .wedding-band__track { gap: 6px; animation-duration: 56s; }
}
@media (prefers-reduced-motion: reduce) {
  .wedding-band { overflow-x: auto; }
  .wedding-band__track {
    animation: none;
    width: auto;
  }
}

/* WEDDING BAND height fix: percentage height on .wedding-band__track did not
   resolve against the fixed-height band in this flex + marquee context
   (track collapsed to ~184px, leaving an empty strip under the photos).
   Pin track + image heights explicitly so the photos fill the band.
   Mirrors the .photo-band fix. */
.wedding-band__track { height: 280px; }
.wedding-band__img   { height: 280px; }
@media (max-width: 760px) {
  .wedding-band__track { height: 200px; }
  .wedding-band__img   { height: 200px; }
}

/* ============================================================
   WEDDING MATH headline green pop.
   ============================================================ */
.wm-green {
  color: var(--splash-green);
  font-weight: 500;
  font-style: italic;
}

/* ============================================================
   WEDDING PUNCHLINE, "Nobody remembers the peonies" elevated.
   ============================================================ */
.wedding-punchline {
  padding: clamp(40px, 6vw, 72px) 24px;
  text-align: center;
  background: transparent;
}
.wedding-punchline__rule {
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto 16px;
  background: var(--pink-rose);
}
.wedding-punchline__lines {
  max-width: 1100px;
  margin: 0 auto;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(30px, 4.8vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wedding-punchline__faint {
  color: var(--text-secondary);
  opacity: 0.55;
}
.wedding-punchline__loud {
  color: var(--mp-ink);
}

/* ============================================================
   WEDDING-OPTION CARDS, reusable use-case-card component.
   Built to be reused on Corporate / Camps / Venues / Parties:
   each card declares its accent via --card-accent / --card-accent-rgb
   inline. Swap the CSS variable + the copy + the URL and the card
   re-themes itself.
   ============================================================ */
.wedding-cards {
  padding: clamp(56px, 8vw, 96px) 24px clamp(72px, 9vw, 120px);
  background: var(--mp-cream);
}
.wedding-cards__wrap {
  max-width: 1280px;
  margin: 0 auto;
}
.wedding-cards__head {
  text-align: center;
  margin-bottom: 36px;
}
.wedding-cards__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mp-weddings);
  background: rgba(var(--mp-weddings-rgb), 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.wedding-cards__head h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  margin: 0;
  color: var(--mp-ink);
}
.wedding-cards__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Reusable card. Accent color flows through --card-accent / -rgb. */
.use-case-card {
  --card-accent: var(--mp-weddings);
  --card-accent-rgb: var(--mp-weddings-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  padding: 18px 18px 22px;
  border-radius: 14px;
  background: var(--card-accent);
  color: var(--mp-cream);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 28px -16px rgba(var(--card-accent-rgb), 0.5);
  transition: transform 0.22s cubic-bezier(0.18, 0.9, 0.32, 1.18),
              box-shadow 0.22s ease-out;
}
.use-case-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 42px -14px rgba(var(--card-accent-rgb), 0.65),
    0 0 0 2px rgba(var(--card-accent-rgb), 0.18);
}
.use-case-card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}
/* Phase 1.1: badge moved to the top-right corner so it doesn't clash
   with the BEST FOR sizing band in the top-left. Smaller font + tighter
   max-width so it reads as a corner tag, not a header. */
.use-case-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.75);
  background: rgba(250, 244, 231, 0.85);
  padding: 5px 8px;
  border-radius: 4px;
  line-height: 1.25;
  max-width: 140px;
  text-align: right;
}
.use-case-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.use-case-card__band {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 244, 231, 0.7);
  font-weight: 700;
}
.use-case-card__name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  margin: 0;
  color: var(--mp-cream);
}
.use-case-card__pitch {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(250, 244, 231, 0.82);
  margin: 0;
}
.use-case-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(250, 244, 231, 0.18);
}
.use-case-card__price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(250, 244, 231, 0.85);
  letter-spacing: 0.04em;
}
.use-case-card__arrow {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 22px;
  color: var(--mp-cream);
  transition: transform 0.18s ease;
}
.use-case-card:hover .use-case-card__arrow { transform: translateX(4px); }

/* Tablet: 3 + 2 wrap */
@media (max-width: 1100px) {
  .wedding-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Mobile: stack */
@media (max-width: 720px) {
  .wedding-cards__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .use-case-card { min-height: 260px; }
}

/* ============================================================
   PACK PAGE STUB (Phase 1 placeholder for bachelorette,
   rehearsal-dinner, after-party). Reuses .pack-hero / .pack-page
   layout, swaps the bg photo for a "photo needed" plate so future
   art direction lands cleanly without rewriting markup.
   ============================================================ */
.pack-hero__photo--stub {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mp-pack-color) 92%, black),
    color-mix(in srgb, var(--mp-pack-color) 68%, black));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pack-hero__photo-needed {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 244, 231, 0.7);
  background: rgba(18, 18, 18, 0.32);
  border: 1px dashed rgba(250, 244, 231, 0.3);
  padding: 10px 16px;
  border-radius: 6px;
  text-align: center;
  max-width: 480px;
  line-height: 1.45;
}
.pack-stub {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.pack-stub__copy {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0 0 28px;
}
.pack-config__widget--placeholder {
  background: var(--gray-surface);
  border: 1px dashed rgba(18, 18, 18, 0.15);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  color: var(--text-secondary);
}
.pack-config__widget--placeholder p { margin: 0 0 14px; }
.pack-stub__cta {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--mp-pack-color);
  color: var(--mp-cream);
  text-decoration: none;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  font-style: normal;
  transition: background 0.18s ease, transform 0.12s ease;
}
.pack-stub__cta:hover {
  background: color-mix(in srgb, var(--mp-pack-color) 85%, black);
  transform: translateY(-1px);
}

/* CLOSER */
.closer {
  background: var(--mp-section-primary); color: var(--white);
  text-align: center; padding: 64px 24px;
}
.closer h2 {
  font-size: clamp(40px, 7vw, 88px);
  max-width: 18ch;
  margin: 0 auto 32px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.closer .cta { background: var(--teal-deep); }
.closer .cta:hover { background: var(--teal-deeper); }

/* FOOTER */
footer { background: var(--teal-deeper); color: var(--white); padding: 48px 24px 32px; }
footer .grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr 1fr;
}
@media (max-width: 800px) { footer .grid { grid-template-columns: 1fr 1fr; } }
footer .brand-foot { display: flex; align-items: center; gap: 10px; }
footer .brand-foot svg { width: 32px; height: 32px; }
footer .brand-foot img.brand-logo-foot { width: 96px; height: 96px; display: block; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
footer .wm { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
footer p.tag { color: rgba(255,255,255,0.65); margin-top: 12px; max-width: 32ch; font-size: 13px; line-height: 1.55; }
footer h4 { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pink-light); margin-bottom: 12px; }
footer ul { list-style: none; }
footer li { margin-bottom: 6px; font-size: 13px; color: rgba(255,255,255,0.8); }
footer li a { transition: color 0.15s; }
footer li a:hover { color: var(--mp-section-primary); }
footer .legal {
  max-width: 1200px; margin: 32px auto 0;
  border-top: 0.5px solid rgba(255,255,255,0.12);
  padding-top: 18px; display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.5);
}
@media (max-width: 600px) { footer .legal { flex-direction: column; gap: 8px; } }

/* ===== SHOP PAGE ===== */
.shop-grid {
  display: grid; grid-template-columns: 2.2fr 1fr; gap: 32px; align-items: start;
}
@media (max-width: 1000px) { .shop-grid { grid-template-columns: 1fr; } }

.shop-mode {
  display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;
}
.shop-mode button {
  background: var(--white); border: 0.5px solid var(--border);
  padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--text-primary);
}
.shop-mode button.active { background: var(--mp-section-primary); color: var(--white); border-color: var(--mp-section-primary); }

.surprise-card {
  background: var(--gray-surface); border-radius: 12px; padding: 32px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center;
}
@media (max-width: 800px) { .surprise-card { grid-template-columns: 1fr; padding: 24px; } }
.surprise-card .copy h3 { font-size: 22px; margin-bottom: 8px; }
.surprise-card .copy p { color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.qty-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.qty-row label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.qty-row input {
  width: 88px; padding: 10px 12px; font-size: 18px; font-weight: 500;
  border: 0.5px solid var(--border); border-radius: 8px; background: var(--white);
  font-family: inherit;
}
.qty-stepper {
  display: inline-flex; align-items: center; border: 0.5px solid var(--border);
  border-radius: 8px; overflow: hidden; background: var(--white);
}
.qty-stepper button { background: var(--white); border: none; padding: 8px 12px; font-size: 16px; }
.qty-stepper input {
  width: 64px; text-align: center; border: none; padding: 8px 4px;
  font-size: 16px; font-weight: 500; font-family: inherit;
  border-left: 0.5px solid var(--border); border-right: 0.5px solid var(--border);
}

.character-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px;
}
@media (max-width: 700px) { .character-grid { grid-template-columns: repeat(2, 1fr); } }
.char {
  background: var(--white); border: 0.5px solid var(--border); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.char .img-slot {
  aspect-ratio: 1/1; background: var(--gray-surface); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase;
}
.char .name { font-size: 15px; font-weight: 500; }
.char .desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; min-height: 34px; }

.cart-side {
  position: sticky; top: 80px;
  background: var(--white); border: 0.5px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.cart-side h3 { margin-bottom: 14px; font-size: 16px; }
.cart-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 0.5px solid var(--border); font-size: 14px;
}
.cart-row.total { border-bottom: none; padding-top: 16px; font-weight: 500; font-size: 18px; }
.cart-row.savings { color: var(--splash-green); font-weight: 500; }
.cart-side .tier-badge {
  display: inline-block; background: rgba(31,158,117,0.12); color: var(--splash-teal);
  padding: 4px 10px; border-radius: 999px; font-size: 11px;
  font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase;
  margin-bottom: 14px;
}
.cart-side .check-row {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 0;
  border-top: 0.5px solid var(--border); font-size: 13px;
}
.cart-side .check-row input { margin-top: 3px; }
.cart-side .check-row .desc { color: var(--text-secondary); font-size: 12px; line-height: 1.4; }

.ridiculous {
  background: var(--gray-surface); border-radius: 12px; padding: 28px; margin-top: 24px;
}
.ridiculous h3 { margin-bottom: 16px; }
.ridiculous .tier-row {
  display: grid; grid-template-columns: 110px 1fr auto;
  gap: 16px; align-items: center; padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
}
.ridiculous .tier-row:last-child { border-bottom: none; }
.ridiculous .tier-row .price { font-size: 18px; font-weight: 500; }
.ridiculous .tier-row .name { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.ridiculous .tier-row .desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* ===== ABOUT ===== */
.about-block { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 800px) { .about-block { grid-template-columns: 1fr; } }
.about-block .copy p { margin-bottom: 14px; line-height: 1.65; font-size: 16px; }
.about-block .copy p.editorial-quote {
  font-family: 'Source Serif Pro', Georgia, serif; font-size: 20px; font-style: italic;
  border-left: 3px solid var(--mp-section-primary); padding-left: 16px; color: var(--text-primary);
}
.about-block img { border-radius: 12px; aspect-ratio: 4/5; object-fit: cover; }

.founders {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px;
}
@media (max-width: 700px) { .founders { grid-template-columns: 1fr; } }
.founder {
  background: var(--white); border: 0.5px solid var(--border); border-radius: 12px;
  padding: 20px; display: flex; gap: 14px; align-items: flex-start;
}
.founder .ph {
  width: 64px; height: 64px; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--splash-purple), var(--mp-section-primary));
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 500; font-size: 22px;
}
.founder h4 { font-size: 16px; margin-bottom: 4px; }
.founder .role { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--mp-section-primary); margin-bottom: 8px; }
.founder p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

/* ===== FAQ ===== */
.faq-cat { margin-bottom: 28px; }
.faq-cat h3 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mp-section-primary); margin-bottom: 14px; }
details.faq {
  background: var(--white); border: 0.5px solid var(--border); border-radius: 8px;
  padding: 16px 18px; margin-bottom: 8px;
}
details.faq[open] { border-color: var(--mp-section-primary); }
details.faq summary {
  list-style: none; cursor: pointer; font-size: 15px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; font-size: 22px; font-weight: 400; color: var(--mp-section-primary);
  transition: transform 0.2s;
}
details.faq[open] summary::after { content: "\2013"; }
details.faq .answer {
  margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--border);
  color: var(--text-secondary); line-height: 1.6; font-size: 14px;
}

/* ===== CONTACT ===== */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 14px; }
.form .field { display: grid; gap: 6px; }
.form label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; }
.form input, .form select, .form textarea {
  padding: 12px 14px; border: 0.5px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 15px; background: var(--white);
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--mp-section-primary);
  box-shadow: 0 0 0 3px rgba(var(--mp-section-primary-rgb),0.4);
}
.contact-side {
  background: var(--gray-surface); border-radius: 12px; padding: 24px;
}
.contact-side h3 { margin-bottom: 12px; }
.contact-side .row { padding: 10px 0; border-bottom: 0.5px solid var(--border); font-size: 14px; }
.contact-side .row:last-child { border: none; }
.contact-side .row strong { display: block; font-weight: 500; margin-bottom: 2px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }

/* ===== USE-CASE PAGE PIECES ===== */
.suggested {
  background: var(--white); border: 2px solid var(--mp-section-primary); border-radius: 12px;
  padding: 24px 22px; position: relative; margin-top: 8px;
}
.suggested::before {
  content: "RECOMMENDED"; position: absolute; top: -8px; left: 14px;
  background: var(--mp-section-primary); color: var(--white);
  font-size: 9px; padding: 3px 8px; border-radius: 4px;
  font-weight: 500; letter-spacing: 1px;
}
.suggested h3 { font-size: 20px; margin-bottom: 8px; }
.suggested .price { font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; }
.suggested .price strong { color: var(--text-primary); font-weight: 500; }
.suggested ul { list-style: none; margin-bottom: 16px; }
.suggested li { font-size: 14px; padding: 6px 0; padding-left: 22px; position: relative; }
.suggested li::before {
  content: "✓"; position: absolute; left: 0; color: var(--splash-green); font-weight: 500;
}

.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.two-col .copy p { margin-bottom: 14px; line-height: 1.65; }
.two-col .copy h2 { margin-bottom: 14px; }

.callout-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px;
}
@media (max-width: 800px) { .callout-row { grid-template-columns: 1fr; } }
.callout {
  background: var(--white); border: 0.5px solid var(--border); border-radius: 8px; padding: 18px;
}
.callout .num { font-size: 22px; font-weight: 500; color: var(--mp-section-primary); margin-bottom: 6px; }
.callout .label { font-size: 13px; color: var(--text-secondary); }

/* SECTION HEADERS */
/* sec-head: container max-width removed so the pill/lede flow naturally.
   The H2 itself caps at a sensible character count so it stays a 2-3 line
   editorial block, not a 7-line narrow stack. */
.sec-head { margin-bottom: 32px; max-width: none; }
.sec-head h2 {
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.02;
  max-width: 26ch;
}
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center h2 { margin-left: auto; margin-right: auto; }
.sec-head .pill { margin-bottom: 14px; }

/* SPA: page panels */
[data-page] { display: none; }
[data-page].active { display: block; animation: fadein 0.25s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* QUIZ SECTION
   Self-hosted quiz, replaces the blocked claude.site iframe. The section
   sits on teal-deep and the card lives in white for a clean editorial
   reset against the dark backdrop. */
.quiz-section {
  background: var(--teal-deep); color: var(--white);
  padding: 96px 24px 112px;
}
/* Same dark-teal context as .price-slider-section .eyebrow. */
.quiz-section .eyebrow {
  color: color-mix(in srgb, var(--mp-section-primary) 40%, white);
}
.quiz-section h2 { color: var(--white); }
.quiz-section .sec-head { margin-bottom: 44px; }
.quiz-section .quiz-lede {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--mp-section-primary);
  margin-top: 12px;
  max-width: 48ch;
  line-height: 1.45;
}
@media (max-width: 700px) {
  .quiz-section { padding: 64px 18px 80px; }
}

/* QUIZ CARD
   The centerpiece of the section. Big card, generous padding, architectural
   corner ticks (plot-frame signature) at top-left and bottom-right, big
   Source Serif question, dramatic answer rows with chunky letter chips. */
.quiz-card {
  background: var(--white);
  color: var(--text-primary);
  border-radius: 18px;
  border: 1px solid rgba(var(--mp-section-primary-rgb),0.30);
  box-shadow: 0 36px 80px -30px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.18);
  max-width: 960px;
  margin: 0 auto;
  padding: 44px 48px 48px;
  position: relative;
}
/* Architectural corner ticks, same signature as .plot */
.quiz-card::before,
.quiz-card::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--mp-section-primary);
  border-style: solid;
  border-width: 0;
}
.quiz-card::before {
  top: -1px; left: -1px;
  border-top-width: 2px; border-left-width: 2px;
  border-top-left-radius: 18px;
}
.quiz-card::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px; border-right-width: 2px;
  border-bottom-right-radius: 18px;
}
@media (max-width: 700px) {
  .quiz-card { padding: 28px 22px 32px; border-radius: 14px; }
}

.quiz-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  padding-bottom: 0;
}
.quiz-step {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mp-section-primary);
  white-space: nowrap;
  font-weight: 500;
}
.quiz-bar {
  flex: 1;
  height: 3px;
  background: rgba(var(--mp-section-primary-rgb),0.12);
  border-radius: 3px;
  overflow: hidden;
}
.quiz-bar-fill {
  height: 100%;
  background: var(--pink-rose);
  width: 20%;
  transition: width 0.25s ease;
}
.quiz-restart {
  background: transparent;
  border: 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: all 0.15s;
}
.quiz-restart:hover {
  color: var(--mp-section-primary);
  border-color: var(--mp-section-primary);
}

.quiz-prompt {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 30px;
  color: var(--text-primary);
  max-width: 24ch;
}

.quiz-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-answer {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.12s, background 0.18s, box-shadow 0.18s;
  font-family: inherit;
  overflow: hidden;
}
.quiz-answer:hover {
  border-color: var(--mp-section-primary);
  transform: translateX(4px);
  box-shadow: 0 10px 20px -14px rgba(var(--mp-section-primary-rgb),0.45);
}
.quiz-answer:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--mp-section-primary-rgb),0.35);
}
.quiz-letter {
  flex: 0 0 56px;
  background: var(--gray-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--mp-section-primary);
  border-right: 1px solid var(--border);
  transition: background 0.18s, color 0.18s, border-right-color 0.18s;
}
.quiz-answer:hover .quiz-letter {
  background: var(--mp-section-primary);
  color: var(--white);
  border-right-color: var(--mp-section-primary);
}
.quiz-answer-text {
  padding: 18px 20px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.4;
  color: var(--text-primary);
  flex: 1;
  display: flex;
  align-items: center;
}

/* Result stage */
.quiz-card[data-stage="result"] .quiz-bar-fill { background: var(--splash-mint); }
.quiz-card[data-stage="result"]::before { border-color: var(--splash-mint); }
.quiz-card[data-stage="result"]::after { border-color: var(--splash-mint); }
.quiz-result {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: left;
}
.quiz-result-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mp-section-primary);
  font-weight: 500;
}
.quiz-verdict {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
  max-width: 18ch;
}
.quiz-reason {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
  max-width: 52ch;
}
.quiz-numbers {
  display: flex;
  gap: 32px;
  border-top: 1px solid rgba(var(--mp-section-primary-rgb),0.20);
  border-bottom: 1px solid rgba(var(--mp-section-primary-rgb),0.20);
  padding: 22px 0;
  margin: 6px 0 4px;
}
.qn { display: flex; flex-direction: column; gap: 6px; }
.qn-num {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 500;
  color: var(--pink-rose);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.qn-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.quiz-result .cta {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 15px;
  padding: 15px 28px;
}
.quiz-result .cta-on-dark {
  background: var(--mp-section-primary);
  color: var(--white);
}
.quiz-result .cta-on-dark:hover { background: var(--mp-section-primary-hover); }

/* SKIP LINK (a11y) */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 10000;
  background: #121212;
  color: #FFFFFF;
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: top 0.16s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid var(--pink-rose);
  outline-offset: 2px;
}

/* BRAND MARQUEE — sits above nav, runs forever */
.brand-marquee {
  background: var(--mp-ink);
  color: var(--mp-cream);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 10px 0;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brand-marquee__track {
  display: inline-flex;
  gap: 28px;
  white-space: nowrap;
  padding-left: 28px;
  animation: brand-marquee-scroll 25s linear infinite;
  will-change: transform;
}
.brand-marquee__item,
.brand-marquee__sep {
  display: inline-block;
}
.brand-marquee__sep {
  opacity: 1;
  color: var(--pink-rose);
}
@keyframes brand-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .brand-marquee { font-size: 12px; padding: 8px 0; }
  .brand-marquee__track { animation-duration: 35s; gap: 22px; padding-left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track { animation: none; padding-left: 16px; }
}

/* ============================================================
   QUANTITY SLIDER (Shop / Surprise Mix)
   Replaces the legacy +/− stepper. Source of truth is the
   hidden #qty-input; the slider writes to it and triggers
   updateCart(). The slider clamps visually at max=500, but
   #qty-input may hold higher values (set by tier-rung clicks).
   ============================================================ */
.mp-qty {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 24px 24px 20px;
}
.mp-qty__readout {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mp-qty__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mp-ink);
  opacity: 0.55;
  font-weight: 700;
}
.mp-qty__value {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--mp-section-primary);
  font-variant-numeric: tabular-nums;
  transition: color 0.18s ease;
}
.mp-qty__unit {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--mp-ink);
  opacity: 0.55;
}
.mp-qty__row {
  display: flex; align-items: center; gap: 14px;
}
.mp-qty__fine {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--mp-ink);
  background: transparent;
  color: var(--mp-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.mp-qty__fine:hover { background: var(--mp-ink); color: var(--mp-cream); }
.mp-qty__fine:active { transform: scale(0.94); }
.mp-qty__fine:focus-visible {
  outline: 3px solid var(--mp-section-primary);
  outline-offset: 2px;
}
.mp-qty__slider-wrap { flex: 1; position: relative; }
.mp-qty__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--mp-section-primary) 0%,
    var(--mp-section-primary) var(--mp-fill, 10%),
    rgba(18, 18, 18, 0.10) var(--mp-fill, 10%),
    rgba(18, 18, 18, 0.10) 100%
  );
  outline: none;
  margin: 0;
  padding: 0;
  cursor: grab;
  transition: background 0.05s linear;
}
.mp-qty__slider:active { cursor: grabbing; }
.mp-qty__slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--mp-section-primary-rgb), 0.35);
}
.mp-qty__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mp-section-primary);
  border: 3px solid var(--mp-cream);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  cursor: grab;
}
.mp-qty__slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mp-section-primary);
  border: 3px solid var(--mp-cream);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  cursor: grab;
}
.mp-qty__notches {
  position: relative;
  height: 6px;
  margin: 8px 12px 0;
  pointer-events: none;
}
.mp-qty__notch {
  position: absolute;
  top: 0;
  width: 2px; height: 6px;
  background: var(--mp-ink);
  opacity: 0.25;
  transform: translateX(-1px);
}
.mp-qty__labels {
  position: relative;
  margin: 6px 12px 0;
  height: 18px;
  pointer-events: none;
}
.mp-qty__tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--mp-ink);
  opacity: 0.55;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mp-qty__tick--active {
  opacity: 1;
  color: var(--mp-section-primary);
  font-weight: 700;
}
.mp-qty__tier {
  margin-top: 14px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--mp-ink);
  opacity: 0.75;
}
.mp-qty__tier strong {
  color: var(--mp-section-primary);
  font-style: normal;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 13px;
}
@media (max-width: 520px) {
  .mp-qty { padding: 20px 16px 16px; }
  .mp-qty__fine { width: 32px; height: 32px; font-size: 16px; }
  .mp-qty__tier { font-size: 13px; }
}

/* ============================================================
   CORPORATE PAGE MVP
   - Hero (corp-hero)
   - Expense Report Wedge (corp-wedge, corp-expense)
   - Bulk Savings Calculator (bsc)
   - Founder Bonus Discounts (fbd)
   - B2B Trust Strip (trust-strip)
   - Three Case Studies (cs)
   ============================================================ */

/* ---- shared on corporate route ---- */
body[data-section="corporate"] .corp-only { display: block; }

/* ---- HERO ---- */
.corp-hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: center;
  padding: 60px 40px;
  color: #fff;
  overflow: hidden;
  background: #0b1f1c;
}
.corp-hero::before {
  /* Photo stub (real AI hero goes here later). Inline gradient + label. */
  content: "[ PHOTO STUB: corporate hero · mixed-age team in conference room mid-laugh, half wearing mullets, oxblood + forest + cream grading, cinematic grain ]";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #04342C 0%, #1e0a0d 100%);
  display: grid; place-items: center;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1px;
  color: rgba(255,255,255,0.32);
  padding: 40px; line-height: 1.6;
  z-index: 0;
}
.corp-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,52,44,0.35) 0%, rgba(4,52,44,0.85) 100%);
  z-index: 1;
}
.corp-hero__content { position: relative; z-index: 2; max-width: 760px; }
.corp-hero__breadcrumb {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px; margin-right: 12px;
}
.corp-hero__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mp-corp-glow);
  background: rgba(111,190,158,0.12);
  border: 1px solid rgba(111,190,158,0.35);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.corp-hero h1 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.02; letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.corp-hero h1 em { font-style: italic; color: var(--mp-corp-glow); }
.corp-hero__lede {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  max-width: 580px; line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0 0 28px;
}
.corp-hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 15px;
  letter-spacing: 0.4px;
  background: var(--mp-section-primary);
  color: #fff;
  padding: 16px 28px; border: none; border-radius: 999px;
  cursor: pointer; text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  box-shadow: 0 12px 32px -8px rgba(var(--mp-section-primary-rgb), 0.55);
}
.corp-hero__cta:hover {
  transform: translateY(-1px);
  background: var(--mp-section-primary-hover);
}
.corp-hero__cta-arrow { display: inline-block; transition: transform 0.18s; }
.corp-hero__cta:hover .corp-hero__cta-arrow { transform: translateY(2px); }
.corp-hero__sub {
  display: block; margin-top: 14px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic; font-size: 14px;
  color: rgba(255,255,255,0.65);
}

/* ---- EXPENSE REPORT WEDGE ---- */
.corp-wedge {
  background: var(--mp-cream);
  padding: 96px 24px;
  position: relative; overflow: hidden;
}
.corp-wedge__wrap { max-width: 940px; margin: 0 auto; position: relative; }
.corp-wedge__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mp-section-primary);
  background: rgba(var(--mp-section-primary-rgb), 0.08);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.corp-wedge h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.012em;
  margin: 0 0 18px; color: var(--mp-ink);
}
.corp-wedge__lede {
  font-size: 16px; max-width: 620px;
  color: rgba(18,18,18,0.7); line-height: 1.55;
  margin: 0 0 36px;
}
.corp-expense {
  position: relative;
  background: #fff;
  border: 1px solid rgba(18,18,18,0.10);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 50px -28px rgba(18,18,18,0.35);
}
.corp-expense__header,
.corp-expense__row {
  display: grid;
  grid-template-columns: 130px 1fr 120px 130px;
  gap: 24px; padding: 12px 28px;
}
.corp-expense__header {
  background: #f4f1ea;
  border-bottom: 1px solid rgba(18,18,18,0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(18,18,18,0.55);
}
.corp-expense__rows { position: relative; }
.corp-expense__row {
  padding: 22px 28px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14.5px; color: var(--mp-ink);
  border-top: 1px solid rgba(18, 18, 18, 0.05);
}
.corp-expense__row:first-child { border-top: none; }
/* Children fade with a small upward motion. JS toggles .is-fading per
   row with an 80ms cascade, then restores on content swap. */
.corp-expense__row > span {
  transition: opacity 150ms ease, transform 150ms ease;
}
.corp-expense__row.is-fading > span {
  opacity: 0;
  transform: translateY(-4px);
}
.corp-expense__amount { text-align: right; font-weight: 600; }
.corp-expense__status {
  text-align: right; font-size: 10.5px;
  letter-spacing: 1.4px;
  color: rgba(18,18,18,0.5); text-transform: uppercase;
  font-weight: 600;
}
/* APPROVED stamp sits inside the LAST row so it covers only the most
   recent line item. Animated in via .is-stamped on the row. */
.corp-expense__row--last { position: relative; }
.corp-stamp {
  position: absolute;
  top: 50%; right: 6%;
  transform: translateY(-50%) rotate(-1.5deg) scale(0.7);
  opacity: 0;
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  letter-spacing: 0.04em;
  color: var(--mp-corporate);
  border: 4px solid var(--mp-corporate);
  border-radius: 8px;
  padding: 6px 18px 4px;
  text-transform: uppercase;
  pointer-events: none; z-index: 5;
}
.corp-expense__row--last.is-stamped .corp-stamp {
  animation: corp-stamp-in 350ms cubic-bezier(.34, 1.5, .64, 1) forwards;
}
@keyframes corp-stamp-in {
  0%   { opacity: 0; transform: translateY(-50%) rotate(-3deg) scale(0.7); }
  60%  { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1.05); }
  100% { opacity: 1; transform: translateY(-50%) rotate(-1.5deg) scale(1); }
}

.corp-wedge__reroll {
  margin-top: 28px;
  display: flex; flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.corp-wedge__reroll-copy {
  margin: 0;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(18, 18, 18, 0.8);
  max-width: 620px;
}
.corp-wedge__reroll-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mp-section-primary);
  color: var(--mp-cream);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  min-height: 44px;
}
.corp-wedge__reroll-btn:hover {
  background: var(--mp-section-primary-hover);
}
.corp-wedge__reroll-btn:active { transform: translateY(1px); }
.corp-wedge__reroll-btn:focus-visible {
  outline: 3px solid rgba(var(--mp-section-primary-rgb), 0.4);
  outline-offset: 3px;
}
.corp-wedge__reroll-icon { flex-shrink: 0; display: inline-block; }
.corp-wedge__reroll-btn.is-spinning .corp-wedge__reroll-icon {
  animation: corp-reroll-spin 600ms ease-out;
}
@keyframes corp-reroll-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(-360deg); }
}

@media (max-width: 720px) {
  /* Hide DATE and STATUS columns; keep DESCRIPTION + AMOUNT. */
  .corp-expense__header,
  .corp-expense__row {
    grid-template-columns: 1fr 90px;
    gap: 8px;
    padding: 16px 18px;
  }
  .corp-expense__header > *:nth-child(1),
  .corp-expense__header > *:nth-child(4),
  .corp-expense__row > .corp-expense__date,
  .corp-expense__row > .corp-expense__status {
    display: none;
  }
  .corp-stamp {
    font-size: 1.6rem;
    right: 4%;
    padding: 4px 12px 3px;
  }
  .corp-wedge__reroll-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 28px;
    min-height: 48px;
  }
}

/* Reduced motion: kill fades + stamp animation + icon spin. */
@media (prefers-reduced-motion: reduce) {
  .corp-expense__row > span { transition: none; }
  .corp-expense__row.is-fading > span { opacity: 1; transform: none; }
  .corp-expense__row--last.is-stamped .corp-stamp {
    animation: none;
    opacity: 1;
    transform: translateY(-50%) rotate(-1.5deg) scale(1);
  }
  .corp-wedge__reroll-btn.is-spinning .corp-wedge__reroll-icon { animation: none; }
}

/* ---- BULK SAVINGS CALCULATOR ---- */
.bsc { padding: 88px 24px 96px; position: relative; }
.bsc__wrap { max-width: 940px; margin: 0 auto; }
.bsc__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mp-section-primary);
  background: rgba(var(--mp-section-primary-rgb), 0.08);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.bsc h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05; letter-spacing: -0.012em;
  margin: 0 0 16px; color: var(--mp-ink);
}
.bsc__lede {
  font-size: 16px; max-width: 560px;
  color: rgba(18,18,18,0.7); line-height: 1.55;
  margin: 0 0 36px;
}
.bsc__card {
  background: #fff;
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 16px;
  padding: 36px 36px 32px;
  box-shadow: 0 20px 60px -32px rgba(18,18,18,0.4);
}
.bsc__question {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(18,18,18,0.55);
  margin-bottom: 14px;
}
.bsc__big {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  line-height: 1;
  color: var(--mp-section-primary);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.bsc__big-unit {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: rgba(18,18,18,0.6);
  font-weight: 500;
  margin-left: 10px;
}
.bsc__slider-row {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 18px;
}
.bsc__fine {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--mp-ink);
  background: transparent; color: var(--mp-ink);
  font-size: 18px; cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.bsc__fine:hover { background: var(--mp-ink); color: var(--mp-cream); }
.bsc__fine:active { transform: scale(0.94); }
.bsc__fine:focus-visible { outline: 3px solid var(--mp-section-primary); outline-offset: 2px; }
.bsc__slider {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 12px; border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--mp-section-primary) 0%,
    var(--mp-section-primary) var(--bsc-fill, 15%),
    rgba(18,18,18,0.10) var(--bsc-fill, 15%),
    rgba(18,18,18,0.10) 100%
  );
  outline: none; cursor: grab;
}
.bsc__slider:active { cursor: grabbing; }
.bsc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mp-section-primary);
  border: 3px solid var(--mp-cream);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.bsc__slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mp-section-primary);
  border: 3px solid var(--mp-cream);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.bsc__slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--mp-section-primary-rgb), 0.35);
}
.bsc__ticks {
  display: flex; justify-content: space-between;
  margin: 6px 12px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(18,18,18,0.5);
  letter-spacing: 0.4px;
}
.bsc__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0 24px;
}
.bsc__stat { border-top: 2px solid var(--mp-corporate); padding-top: 14px; }
.bsc__stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(18,18,18,0.55); margin-bottom: 4px;
}
.bsc__stat-value {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--mp-ink);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.bsc__stat--savings .bsc__stat-value { color: var(--mp-section-primary); }
.bsc__stat-sub { font-size: 12px; color: rgba(18,18,18,0.55); margin-top: 2px; }
.bsc__cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--mp-section-primary); color: #fff;
  font: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0.4px;
  padding: 16px 28px; border: none; border-radius: 999px;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 10px 30px -10px rgba(var(--mp-section-primary-rgb), 0.55);
}
.bsc__cta:hover {
  background: var(--mp-section-primary-hover);
  transform: translateY(-1px);
}
.bsc__cta-qty { font-variant-numeric: tabular-nums; }
.bsc__note {
  margin-top: 14px; font-size: 13px;
  color: rgba(18,18,18,0.55);
  font-style: italic;
  font-family: 'Source Serif Pro', Georgia, serif;
}
@media (max-width: 640px) {
  .bsc__card { padding: 28px 22px; }
  .bsc__stats { grid-template-columns: 1fr 1fr; }
  .bsc__stat:nth-child(3) { grid-column: 1 / -1; }
}

/* ============================================================
   EXPENSE BUILDER, /corporate page primary persuasion moment.
   Two columns on desktop (pickable items left, live report right),
   single-column stack on mobile.
   ============================================================ */
.expense-builder {
  padding: 64px 24px 80px;
  background: var(--gray-surface);
}
.expense-builder__wrap {
  max-width: 1180px;
  margin: 0 auto;
}
.expense-builder__head {
  text-align: center;
  margin-bottom: 36px;
}
.expense-builder__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mp-corporate);
  background: rgba(var(--mp-corporate-rgb), 0.08);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.expense-builder h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--mp-ink);
}
.expense-builder__lede {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto;
}

.expense-builder__cols {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 28px;
  align-items: start;
}
.expense-builder__cols > * { min-width: 0; }

/* Left column: pickable items */
.expense-builder__pick {
  background: #fff;
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 28px -18px rgba(0,0,0,0.15);
}
.expense-builder__pick-header { margin-bottom: 14px; }
.expense-builder__pick-header h3 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--mp-ink);
}
.expense-builder__pick-hint {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
}
.expense-builder__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 620px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(18,18,18,0.18) transparent;
  padding-right: 4px;
}
.expense-builder__list::-webkit-scrollbar { width: 6px; }
.expense-builder__list::-webkit-scrollbar-thumb { background: rgba(18,18,18,0.18); border-radius: 999px; }

.expense-builder__item {
  position: relative;
  border: 1px solid rgba(18,18,18,0.10);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.expense-builder__item:hover {
  border-color: rgba(var(--mp-corporate-rgb), 0.4);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px rgba(var(--mp-corporate-rgb), 0.5);
}
.expense-builder__item-toggle {
  position: absolute;
  top: 14px; right: 14px;
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: var(--mp-corporate);
}
.expense-builder__item-label {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name name"
    "desc desc"
    "amt amt";
  gap: 4px 12px;
  padding: 14px 44px 14px 16px;
  cursor: pointer;
}
.expense-builder__item-name {
  grid-area: name;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}
.expense-builder__item-desc {
  grid-area: desc;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 17px;
  line-height: 1.25;
  color: var(--mp-ink);
}
.expense-builder__item-amount {
  grid-area: amt;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-corporate);
  justify-self: start;
  margin-top: 2px;
}
.expense-builder__item--active {
  border-color: var(--mp-corporate);
  background: rgba(var(--mp-corporate-rgb), 0.04);
  box-shadow: 0 8px 20px -12px rgba(var(--mp-corporate-rgb), 0.4);
}

/* Right column: live report */
.expense-builder__report {
  background: #fff;
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 14px;
  padding: 22px 22px 24px;
  box-shadow: 0 10px 28px -18px rgba(0,0,0,0.15);
  position: relative;
}
.expense-builder__report-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.expense-builder__report-header h3 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  color: var(--mp-ink);
}
.expense-builder__report-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}

.expense-builder__table {
  position: relative;
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 10px;
  background: var(--gray-surface);
  overflow: hidden;
}
.expense-builder__table-head {
  display: grid;
  grid-template-columns: minmax(90px, 0.85fr) 2fr minmax(80px, 0.8fr) minmax(110px, 1fr);
  gap: 10px;
  padding: 10px 14px;
  background: rgba(var(--mp-corporate-rgb), 0.06);
  border-bottom: 1px solid rgba(18,18,18,0.08);
}
.expense-builder__th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}
.expense-builder__th--amt { text-align: right; }
.expense-builder__th--status { text-align: right; }

.expense-builder__rows {
  display: flex;
  flex-direction: column;
}
.expense-builder__row {
  display: grid;
  grid-template-columns: minmax(90px, 0.85fr) 2fr minmax(80px, 0.8fr) minmax(110px, 1fr);
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(18,18,18,0.06);
  background: #fff;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.18), max-height 0.22s ease-in;
  max-height: 200px;
  overflow: hidden;
}
.expense-builder__row.is-in {
  opacity: 1;
  transform: translateX(0);
}
.expense-builder__row.is-out {
  opacity: 0;
  transform: translateX(28px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}
.expense-builder__row:last-child { border-bottom: none; }
.expense-builder__cell {
  align-self: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.expense-builder__cell--prod {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}
.expense-builder__cell--desc {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text-primary);
}
.expense-builder__cell--amt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.expense-builder__cell--status { text-align: right; }

.expense-builder__status {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.2s ease-out, color 0.2s ease-out;
}
.expense-builder__status--pending {
  background: rgba(18,18,18,0.06);
  color: var(--text-secondary);
}
.expense-builder__status--approved {
  background: rgba(29, 158, 117, 0.15);
  color: var(--splash-teal);
}
.expense-builder__status--cleared {
  background: rgba(99, 153, 34, 0.15);
  color: var(--splash-green);
}
.expense-builder__status--logged {
  background: rgba(127, 119, 221, 0.18);
  color: var(--splash-purple);
}

.expense-builder__empty {
  padding: 22px 18px;
  text-align: center;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-secondary);
  background: #fff;
}
.expense-builder__empty[hidden] { display: none; }

.expense-builder__total-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(var(--mp-corporate-rgb), 0.06);
  border-top: 1px solid rgba(18,18,18,0.08);
  position: relative;
}
.expense-builder__total {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.expense-builder__total-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}
.expense-builder__total-amount {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--mp-ink);
  font-variant-numeric: tabular-nums;
}
.expense-builder__stamp {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mp-corporate);
  border: 4px solid var(--mp-corporate);
  border-radius: 6px;
  padding: 6px 16px;
  transform: rotate(-12deg);
  opacity: 0;
  transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.18, 0.9, 0.32, 1.2);
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -42px;
}
.expense-builder__stamp.is-visible {
  opacity: 0.85;
  transform: rotate(-12deg) scale(1);
}

.expense-builder__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 28px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--mp-corporate);
  color: #fff;
  text-decoration: none;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.2px;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 14px 28px -12px rgba(var(--mp-corporate-rgb), 0.55);
}
.expense-builder__cta:hover {
  background: color-mix(in srgb, var(--mp-corporate) 85%, black);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -10px rgba(var(--mp-corporate-rgb), 0.65);
}
.expense-builder__cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-corporate) 65%, white);
  outline-offset: 3px;
}
.expense-builder__disclaimer {
  margin: 12px 0 0;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .expense-builder__cols {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .expense-builder__list { max-height: 460px; }
}

/* ----- Mobile (<760px) ----- */
@media (max-width: 760px) {
  .expense-builder { padding: 44px 16px 60px; }
  .expense-builder__head { margin-bottom: 24px; }
  .expense-builder__pick {
    padding: 18px 16px 14px;
    /* Contain the horizontal scroll strip inside the card so it doesn't
       blow out the page width on small viewports. */
    min-width: 0;
    overflow: hidden;
  }
  .expense-builder__list {
    /* Horizontal scroll strip of item cards */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    max-width: 100%;
    padding: 4px 4px 14px;
    scroll-snap-type: x mandatory;
    gap: 12px;
  }
  .expense-builder__item {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
  .expense-builder__report { padding: 18px 14px 18px; }
  .expense-builder__table-head { grid-template-columns: 1fr 1fr; }
  .expense-builder__th--prod,
  .expense-builder__th--status { grid-column: span 1; }
  .expense-builder__th--desc { display: none; }
  .expense-builder__th--amt { text-align: right; }
  .expense-builder__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "prod   status"
      "desc   desc"
      "amt    amt";
    gap: 4px 12px;
    padding: 12px 14px 14px;
  }
  .expense-builder__cell--prod   { grid-area: prod; }
  .expense-builder__cell--status { grid-area: status; }
  .expense-builder__cell--desc   { grid-area: desc; font-size: 15px; }
  .expense-builder__cell--amt    { grid-area: amt; text-align: left; }
  .expense-builder__total-wrap {
    flex-direction: row;
    padding: 14px;
  }
  .expense-builder__stamp {
    font-size: 32px;
    right: 6px;
    margin-top: -28px;
    padding: 4px 10px;
    border-width: 3px;
  }
  /* Sticky CTA at the bottom of the viewport once the builder is in view */
  .expense-builder__cta {
    position: sticky;
    bottom: 14px;
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .expense-builder__row,
  .expense-builder__row.is-in,
  .expense-builder__row.is-out,
  .expense-builder__status,
  .expense-builder__stamp { transition: none !important; }
}

/* ---- FOUNDER BONUS DISCOUNTS ---- */
.fbd { max-width: 720px; margin: 0 auto; padding: 0 24px 96px; }
.fbd__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mp-section-primary);
  background: rgba(var(--mp-section-primary-rgb), 0.08);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.fbd__card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(18,18,18,0.08);
  padding: 38px 36px 32px 52px;
  border-radius: 6px;
  box-shadow:
    0 24px 50px -30px rgba(18,18,18,0.35),
    0 4px 8px -4px rgba(18,18,18,0.08);
  transform: rotate(-1.4deg);
  transform-origin: 30% 30%;
}
.fbd__card::before {
  content: "";
  position: absolute;
  left: 14px; top: 14px; bottom: 14px;
  width: 4px;
  background: var(--mp-corporate);
  border-radius: 2px;
}
.fbd__card::after {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--mp-corporate);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), inset 0 -2px 4px rgba(0,0,0,0.18);
  transform: translateX(-50%);
}
.fbd__card h3 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.1;
  margin: 0 0 24px;
  color: var(--mp-ink);
  max-width: 540px;
}
.fbd__rungs { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
.fbd__rung {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px; align-items: baseline;
}
.fbd__pct {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  line-height: 1;
  color: var(--mp-section-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
}
.fbd__pct-off {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(var(--mp-section-primary-rgb), 0.6);
  font-weight: 600; margin-top: 4px;
}
.fbd__trade {
  font-size: 15.5px; line-height: 1.5;
  color: var(--mp-ink);
}
.fbd__trade strong {
  font-weight: 600;
  background: rgba(122,31,43,0.14);
  padding: 0 4px; border-radius: 2px;
}
.fbd__foot {
  margin: 0;
  font-size: 13px; font-style: italic;
  color: var(--mp-section-primary);
  font-family: 'Source Serif Pro', Georgia, serif;
  line-height: 1.5;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--mp-section-primary-rgb), 0.15);
}
.fbd__foot a {
  color: inherit; font-style: normal; font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--mp-section-primary-rgb), 0.4);
  text-underline-offset: 3px;
}
@media (max-width: 580px) {
  .fbd__card { transform: rotate(-1deg); padding: 30px 22px 26px 38px; }
  .fbd__rung { grid-template-columns: 72px 1fr; gap: 14px; }
  .fbd__pct { font-size: 2rem; }
  .fbd__trade { font-size: 14.5px; }
}

/* ---- B2B TRUST STRIP ---- */
.trust-strip {
  background: linear-gradient(180deg, #04342C 0%, #022721 100%);
  color: #fff; padding: 32px 24px;
  border-top: 2px solid var(--mp-corp-glow);
  border-bottom: 2px solid var(--mp-corp-glow);
}
.trust-strip__row {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 0;
}
.trust-strip__item {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 4px 16px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
  border-right: 1px solid rgba(111,190,158,0.35);
}
.trust-strip__item:last-child { border-right: none; }
.trust-strip__check {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mp-corp-glow); color: var(--mp-ink);
  font-size: 12px; font-weight: 800; line-height: 1;
}
.trust-strip__label { text-align: left; }
.trust-strip__label strong {
  display: block;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--mp-corp-glow);
  margin-bottom: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.trust-strip__label span {
  font-size: 14px;
  color: rgba(255,255,255,0.92);
}
@media (max-width: 900px) {
  .trust-strip__row { flex-wrap: wrap; }
  .trust-strip__item {
    flex: 0 0 calc(50% - 1px);
    padding: 12px 16px;
    justify-content: flex-start;
    border-right: 1px solid rgba(111,190,158,0.35);
    border-bottom: 1px solid rgba(111,190,158,0.35);
  }
  .trust-strip__item:nth-child(2n) { border-right: none; }
  .trust-strip__item:nth-child(5) { flex: 0 0 100%; border-right: none; border-bottom: none; }
}
@media (max-width: 480px) {
  .trust-strip__item {
    flex: 0 0 100%;
    border-right: none;
    border-bottom: 1px solid rgba(111,190,158,0.35);
    padding: 14px 16px;
  }
  .trust-strip__item:last-child { border-bottom: none; }
}

/* ---- THREE CASE STUDIES ---- */
.cs { padding: 88px 24px 96px; }
.cs__wrap { max-width: 1200px; margin: 0 auto; }
.cs__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mp-section-primary);
  background: rgba(var(--mp-section-primary-rgb), 0.08);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 16px;
}
.cs h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05; letter-spacing: -0.012em;
  margin: 0 0 12px;
}
.cs__lede {
  font-size: 16px; max-width: 580px;
  color: rgba(18,18,18,0.7); line-height: 1.55;
  margin: 0 0 44px;
}
.cs__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 980px) { .cs__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .cs__grid { grid-template-columns: 1fr; } }
.cs__card {
  background: #fff;
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 14px 36px -24px rgba(18,18,18,0.3);
}
.cs__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #04342C 0%, #1e0a0d 100%);
  display: grid; place-items: center;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.6px;
  color: rgba(255,255,255,0.45);
  padding: 20px; line-height: 1.5;
}
.cs__photo-tag {
  position: absolute;
  top: 12px; left: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  background: rgba(111,190,158,0.9);
  color: var(--mp-ink);
  padding: 4px 10px; border-radius: 4px;
  font-weight: 600;
}
.cs__body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column;
  flex: 1;
}
.cs__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(18,18,18,0.66);
  margin-bottom: 10px;
}
.cs__title {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 22px; line-height: 1.15;
  margin: 0 0 12px; color: var(--mp-ink);
}
.cs__story {
  font-size: 14.5px; line-height: 1.55;
  color: rgba(18,18,18,0.78);
  margin: 0 0 16px;
}
.cs__quote {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(var(--mp-section-primary-rgb), 0.05);
  border-left: 3px solid var(--mp-section-primary);
  border-radius: 0 6px 6px 0;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14.5px; line-height: 1.45;
  color: var(--mp-ink);
}
.cs__quote-attr {
  display: block; margin-top: 8px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal; letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(18,18,18,0.66);
}
.cs__stats {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(18,18,18,0.08);
  padding-top: 0;
}
.cs__stat { padding: 14px 0 0; }
.cs__stat:last-child { text-align: right; }
.cs__stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(18,18,18,0.7);
  margin-bottom: 3px;
}
.cs__stat-value {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--mp-ink);
}
.cs__stat-value--save { color: var(--mp-section-primary); }

/* ============================================================
   MULLET INSURANCE MODAL
   Triggered from the cart-side "What's this?" link.
   ============================================================ */
.mp-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.mp-modal.is-open { display: flex; }
.mp-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 18, 18, 0.65);
  cursor: pointer;
}
.mp-modal__panel {
  position: relative;
  background: var(--mp-cream);
  width: 100%;
  max-width: 480px;
  padding: 32px;
  border-radius: 12px;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.55),
    0 6px 20px -4px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.mp-modal__close {
  position: absolute;
  top: 8px; right: 8px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--mp-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.mp-modal__close:hover { background: rgba(0, 0, 0, 0.06); }
.mp-modal__close:focus-visible {
  outline: 3px solid var(--mp-section-primary);
  outline-offset: 2px;
}
.mp-modal__title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-section-primary);
  margin: 0 0 6px;
  line-height: 1.1;
  padding-right: 40px;
}
.mp-modal__subhead {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 1.4px;
  color: rgba(18, 18, 18, 0.6);
  margin: 0 0 20px;
  text-transform: uppercase;
}
.mp-modal__body {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mp-ink);
  margin: 0 0 14px;
}
.mp-modal__body:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .mp-modal { padding: 16px; }
  .mp-modal__panel { padding: 28px 22px; width: 90vw; }
  .mp-modal__title { font-size: 20px; padding-right: 36px; }
  .mp-modal__body { font-size: 15px; }
}

/* Respect reduced motion: no animation on open (simple display: flex). */

/* ============================================================
   CORPORATE — BONUS DISCOUNTS REVEAL
   Inline side-reveal of the AI founders photo when the user clicks
   "See what we mean →" inside the Founder Bonus Discounts card.
   Default: 1-col grid, card centered.
   Open: 2-col grid, card shifts left, photo fades in on the right
         with a 100ms delay so it lands after the card has moved.
   Mobile: stacks the photo BELOW the card, fade-only (no x-motion).
   ============================================================ */

/* Loosen the .fbd max-width only when the reveal is open so the
   two-column layout has room to breathe. */
.fbd { transition: max-width 400ms ease-out; }
.fbd:has(.bonus-reveal.is-open) { max-width: 1120px; }

.bonus-reveal {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: start;
  gap: 32px;
  transition: grid-template-columns 400ms ease-out;
}
.bonus-reveal.is-open {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Photo container: hidden by default (no grid space), shown when open. */
.bonus-reveal__photo { display: none; }
.bonus-reveal.is-open .bonus-reveal__photo {
  display: block;
  position: relative;
  max-width: 480px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(var(--mp-section-primary-rgb), 0.30);
  border-radius: 10px;
  background: var(--mp-cream);
  box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.35);
  animation: bonus-reveal-photo-in 400ms 100ms ease-out backwards;
  /* Sticky to the card's top edge so the photo aligns with the card head */
  align-self: start;
}
.bonus-reveal__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}
.bonus-reveal__photo figcaption {
  display: block;
  padding: 10px 14px 12px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(18, 18, 18, 0.7);
  text-align: center;
}
.bonus-reveal__close {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  min-width: 24px; min-height: 24px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--mp-section-primary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
  z-index: 2;
}
.bonus-reveal__close:hover { background: #fff; transform: scale(1.05); }
.bonus-reveal__close:focus-visible {
  outline: 3px solid var(--mp-section-primary);
  outline-offset: 2px;
}

@keyframes bonus-reveal-photo-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bonus-reveal-photo-in-mobile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* EXHIBIT A block (lives inside the .fbd__card, between the rungs and footer) */
.fbd__exhibit {
  margin: 4px 0 22px;
  padding: 0;
}
.fbd__exhibit-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--mp-section-primary-rgb), 0.6);
  font-weight: 600;
  margin-bottom: 6px;
}
.fbd__exhibit-body {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mp-ink);
  margin: 0 0 8px;
}
.fbd__exhibit-link {
  background: none;
  border: none;
  padding: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mp-section-primary);
  cursor: pointer;
  text-decoration: none;
}
.fbd__exhibit-link:hover,
.fbd__exhibit-link:focus { text-decoration: underline; text-underline-offset: 3px; }
.fbd__exhibit-link:focus-visible {
  outline: 3px solid rgba(var(--mp-section-primary-rgb), 0.4);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Mobile: stack photo BELOW the card. No horizontal motion in the fade. */
@media (max-width: 720px) {
  .fbd:has(.bonus-reveal.is-open) { max-width: 720px; }
  .bonus-reveal.is-open { grid-template-columns: 1fr; }
  .bonus-reveal.is-open .bonus-reveal__photo {
    animation-name: bonus-reveal-photo-in-mobile;
    max-width: 100%;
  }
}

/* Reduced motion: instant show/hide, no transitions. */
@media (prefers-reduced-motion: reduce) {
  .fbd, .bonus-reveal { transition: none; }
  .bonus-reveal.is-open .bonus-reveal__photo { animation: none; }
}

/* ============================================================
   .section-hero — shared hero pattern for Weddings + Camps.
   Parallel to .corp-hero (which stays as the read-only reference).
   Pattern: left-half text column, dim forest wash, breadcrumb +
   pill + serif headline with italic accent, body, CTA, italic sub.
   Local --mp-champagne for the per-section Weddings accent.
   ============================================================ */
.section-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 48px 24px 48px 64px;
  color: var(--mp-cream);
  overflow: hidden;
  isolation: isolate;
}
.section-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Camps hero rotation: the video plays once, then crossfades to two rafting
   photos, then loops back. All three are .ch-layer at z-index 0, above the
   poster bg (also z-index 0, behind via DOM order) and below the veil (1) and
   content (2). object-fit cover so the video fills any aspect ratio. */
.section-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: var(--mp-teal-deeper, #022721);
}
.ch-layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}
.ch-layer.is-active { opacity: 1; }
.ch-photo {
  background-size: cover;
  background-position: center;
}
@media (prefers-reduced-motion: reduce) {
  /* No rotation for reduced motion: hide the moving layers, the poster bg shows. */
  .section-hero__video,
  .ch-photo { display: none; }
}
.section-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 52, 44, 0.40) 0%, rgba(4, 52, 44, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.section-hero__content {
  position: relative; z-index: 2;
  max-width: clamp(320px, 50%, 640px);
  /* When .section-hero is also the carousel container .wh-hero, the
     content already sits in the right layer via z-index. */
}
.section-hero__breadcrumb {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(250, 244, 231, 0.5);
  margin: 0 12px 14px 0;
}
.section-hero__pill {
  display: inline-block;
  border: 1px solid var(--mp-section-primary);
  color: var(--mp-section-primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 18px;
  vertical-align: baseline;
}
.section-hero h1 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--mp-cream);
  margin: 24px 0 0;
}
.section-hero h1 em {
  font-style: italic;
  color: var(--mp-section-primary);
}
/* Per-route accent overrides */
:root { --mp-champagne: #8FCFB6; /* sage for Weddings (cool, replaced rose gold per warm-tone hybrid) */ }
.section-hero[data-accent="mustard"]   h1 em { color: var(--mp-mustard); }
.section-hero[data-accent="champagne"] h1 em { color: var(--mp-champagne); }
.section-hero[data-accent="champagne"] .section-hero__pill {
  border-color: var(--mp-champagne);
  color: var(--mp-champagne);
}
.section-hero[data-accent="champagne"] .section-hero__asterisk {
  color: var(--mp-champagne);
}
.section-hero__asterisk {
  font-family: 'Source Serif Pro', serif;
  font-style: normal;
  font-size: 0.4em;
  vertical-align: super;
  color: var(--mp-section-primary);
  margin-left: 4px;
  line-height: 0;
}
.section-hero__lede {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(250, 244, 231, 0.8);
  max-width: 480px;
  margin: 32px 0 0;
}
.section-hero__cta {
  display: inline-block;
  margin-top: 32px;
  background: var(--mp-section-primary);
  color: var(--mp-cream);
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.section-hero__cta:hover {
  background: color-mix(in srgb, var(--mp-section-primary) 85%, black);
}
.section-hero__cta:active { transform: translateY(1px); }
/* Camps: mustard is the section primary; ink reads better than cream
   on a mustard pill button. */
.section-hero[data-accent="mustard"] .section-hero__cta { color: var(--mp-ink); }
.section-hero[data-accent="mustard"] .section-hero__cta:hover { color: var(--mp-cream); }

.section-hero__sub {
  display: block;
  margin-top: 12px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(250, 244, 231, 0.6);
  text-decoration: none;
}
a.section-hero__sub:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .section-hero { padding: 40px 22px; min-height: 78vh; }
  .section-hero__content { max-width: 100%; }
  .section-hero__veil {
    background: linear-gradient(180deg, rgba(4, 52, 44, 0.55) 0%, rgba(4, 52, 44, 0.90) 100%);
  }
  .section-hero h1 { font-size: clamp(40px, 9vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .section-hero__cta { transition: none; }
}

/* ============================================
   ABOUT v2: MEMENTO MULLET MANIFESTO
   Hero with hand-edited "Memento Mori → Mullet",
   dictionary entry, four color-coded manifesto blocks,
   imperative closer. Per-block color via inline CSS vars.
   ============================================ */

/* ----- HERO ----- */
.about-hero {
  padding: clamp(40px, 6vh, 76px) 24px clamp(28px, 4vh, 48px);
  text-align: center;
  position: relative;
  background: transparent;
}
.about-hero__inner { max-width: 920px; margin: 0 auto; }
.about-hero__h1 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--mp-ink);
  margin: 0;
  display: inline-block;
  padding-top: clamp(40px, 5vw, 80px);
  position: relative;
  white-space: nowrap;
}
.about-hero__mori { position: relative; display: inline-block; }
.about-hero__strike {
  position: absolute;
  top: 48%; left: -5%;
  width: 110%; height: 40%;
  transform: translateY(-50%);
  pointer-events: none;
}
.about-hero__mullet {
  position: absolute;
  left: 50%;
  top: -0.65em;
  transform: translateX(-50%) rotate(-7deg);
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  /* Slightly smaller than the printed word it's editing — reads as
     a real teacher's pen correction, not another headline. */
  font-size: clamp(48px, 7vw, 96px);
  color: var(--pink-rose);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.about-hero__sub {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--text-secondary);
  margin: clamp(16px, 2.5vh, 28px) auto 0;
  line-height: 1.5;
}
.about-hero__sub em { font-style: italic; color: var(--text-secondary); }
/* dictionary kicker, folded in from the removed definition box. Tiny mono
   stamp under the giant serif headline: max type-category + size contrast. */
.about-hero__pos {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.65;
  margin: clamp(14px, 2vh, 20px) 0 0;
}
.about-hero__die { position: relative; display: inline-block; }
.about-hero__strike-sub {
  position: absolute;
  top: 50%; left: -10%;
  width: 120%; height: 60%;
  transform: translateY(-50%);
  pointer-events: none;
}
.about-hero__mullet-sub {
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%) rotate(-5deg);
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--pink-rose);
  font-weight: 700;
  white-space: nowrap;
  font-style: normal;
  line-height: 1;
}

/* ----- DICTIONARY ENTRY ----- */
.about-dict-wrap {
  padding: clamp(32px, 6vh, 72px) 24px;
  background: var(--white);
}
.about-dict {
  background: var(--mp-cream);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.about-dict::before {
  content: "n.";
  position: absolute;
  top: 18px; right: 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  opacity: 0.5;
}
.about-dict__head {
  border-bottom: 0.5px solid rgba(0,0,0,0.12);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.about-dict__word {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  color: var(--mp-ink);
  letter-spacing: 0;
  margin: 0;
}
.about-dict__dot {
  display: inline-block;
  transform: translateY(-3px);
  margin: 0 1px;
  color: rgba(0,0,0,0.4);
}
.about-dict__pron {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-secondary);
  margin: 6px 0 0;
}
.about-dict__pos {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 14px;
  color: var(--text-secondary);
  margin: 4px 0 0;
}
.about-dict__pos em { font-style: italic; }
.about-dict__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-dict__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  padding: 6px 0;
}
.about-dict__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--mp-dict-color);
  color: var(--white);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.about-dict__body {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--text-primary);
}
.about-dict__cat {
  font-style: italic;
  font-weight: 500;
  color: color-mix(in srgb, var(--mp-dict-color) 78%, #000);
  margin-right: 2px;
}

/* ----- COLOR-CODED MANIFESTO BLOCKS ----- */
.about-manifesto {
  padding: clamp(40px, 6vh, 80px) 24px clamp(60px, 8vh, 100px);
  background: var(--white);
}
.about-blockc {
  display: grid;
  grid-template-columns: clamp(100px, 16vw, 180px) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 0.5px solid rgba(0,0,0,0.1);
}
.about-blockc:first-of-type {
  border-top: none;
  padding-top: clamp(24px, 4vw, 40px);
}
.about-blockc__index {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: clamp(64px, 11vw, 132px);
  line-height: 0.85;
  color: var(--mp-block-color);
  letter-spacing: -0.04em;
  position: sticky;
  top: 88px;
  user-select: none;
}
.about-blockc__body { max-width: 580px; }
.about-blockc__eyebrow {
  color: var(--mp-block-color) !important;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
}
.about-blockc__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--mp-block-color);
  border-radius: 999px;
  opacity: 1;
  transform: translateY(0);
  margin-right: 2px;
}
.about-blockc__h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  color: var(--mp-ink);
}
.about-blockc__h2 .emph {
  color: var(--mp-block-color);
  font-style: italic;
}
.about-blockc__body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.about-blockc__body p:last-child { margin-bottom: 0; }
.about-blockc__pull {
  border-left: 3px solid var(--mp-block-color);
  background: rgba(var(--mp-block-rgb), 0.06);
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
}
.about-blockc__pull p {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--mp-ink);
  margin: 0 0 8px;
}
.about-blockc__pull cite {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-block-color);
}

/* ----- CLOSER ----- */
.about-closer-block {
  padding: clamp(64px, 10vh, 140px) 24px clamp(80px, 12vh, 180px);
  background: var(--mp-ink);
  color: var(--mp-cream);
  text-align: center;
}
.about-closer-block__wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}
.about-closer-block__line {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
  margin: 0 0 16px;
  color: rgba(250, 244, 231, 0.85);
}
.about-closer-block__line--bold {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--mp-cream);
  font-size: clamp(18px, 2vw, 22px);
  margin: 28px 0 32px;
}
.about-closer-block__sign {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
  color: var(--mp-cream);
  line-height: 1.15;
}
.about-closer-block__sign .emph {
  color: var(--pink-rose);
  font-style: italic;
}
.about-closer-block__cta {
  background: var(--mp-shop);
  color: var(--white);
  font-size: 15px;
  padding: 16px 36px;
  border-radius: 999px;
}
.about-closer-block__cta:hover { background: var(--pink-deeper); }

/* ----- MOBILE TIGHTENING ----- */
@media (max-width: 760px) {
  .about-hero { padding: 44px 18px 30px; }
  .about-hero__h1 { padding-top: 56px; }
  .about-hero__mullet { top: -56px; }
  .about-blockc {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 36px 0;
  }
  .about-blockc__index {
    font-size: 64px;
    position: static;
    margin-bottom: 4px;
  }
  .about-blockc__body { max-width: 100%; }
  .about-dict__item {
    grid-template-columns: 28px 1fr;
    gap: 12px;
  }
  .about-dict__num { width: 24px; height: 24px; font-size: 12px; }
}


/* ============================================================
   ABOUT v2 — manifesto editorial flow
   Replaces the .about-blockc single-column layout with section
   banners + alternating two-column rows where each paragraph is
   paired with a "companion" element (quote / mini-dict / stat).
   The old .about-blockc* rules above are unused but left in place
   as dead code per the spec.
   ============================================================ */
.about-manifesto { padding: clamp(48px, 8vh, 96px) 24px; }
.about-manifesto__wrap {
  max-width: 1180px;
  margin: 0 auto;
}

/* ---- SECTION BANNER ---- */
.about-banner {
  max-width: 900px;
  margin: clamp(56px, 10vh, 120px) auto clamp(40px, 6vh, 72px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.about-banner:first-of-type { margin-top: 0; }
.about-banner__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mp-c) 78%, #000);
  font-weight: 500;
  margin-bottom: 6px;
}
.about-banner__numeral {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(64px, 12vw, 140px);
  line-height: 0.9;
  color: var(--mp-c);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.about-banner__h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mp-ink);
  margin: 0;
}
.about-banner__h2 em {
  font-style: italic;
  color: var(--mp-c);
  font-weight: 500;
}

/* ---- ALTERNATING ROW ---- */
.about-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  margin: clamp(40px, 6vh, 72px) 0;
}
.about-row__prose p {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--mp-ink);
  margin: 0 0 16px;
}
.about-row__prose p:last-child { margin-bottom: 0; }

/* ---- COMPANION: QUOTE ---- */
.about-quote {
  margin: 0;
  padding: 8px 0 8px 18px;
  border-left: 2px solid var(--mp-c);
  background: linear-gradient(
    90deg,
    rgba(var(--mp-c-rgb), 0.04) 0%,
    rgba(var(--mp-c-rgb), 0.0) 70%
  );
}
.about-quote__latin {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.35;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.about-quote__body {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.3;
  color: var(--mp-ink);
  margin: 0 0 16px;
}
.about-quote__attr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-c);
  font-weight: 500;
}
.about-quote__attr cite {
  font-style: italic;
  font-weight: 500;
}

/* ---- COMPANION: MINI DICTIONARY ---- */
.about-mini-dict {
  position: relative;
  background: var(--mp-cream);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 24px 24px 22px;
  max-width: 420px;
}
.about-mini-dict__pos {
  position: absolute;
  top: 14px; right: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}
.about-mini-dict__word {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: var(--mp-ink);
  margin: 0 0 6px;
}
.about-mini-dict__dot {
  display: inline-block;
  margin: 0 0.05em;
  color: var(--text-secondary);
  opacity: 0.5;
}
.about-mini-dict__pron {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 4px;
}
.about-mini-dict__cat {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.about-mini-dict__cat em { font-style: italic; }
.about-mini-dict__def {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mp-ink);
  margin: 0;
}

/* ---- COMPANION: STAT ---- */
.about-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.about-stat__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(80px, 10vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--mp-c);
}
.about-stat__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  max-width: 280px;
  line-height: 1.5;
}

/* ---- Mobile: collapse rows to single column ---- */
@media (max-width: 760px) {
  .about-row {
    grid-template-columns: 1fr;
    gap: 28px;
    margin: clamp(36px, 5vh, 56px) 0;
  }
  .about-banner__numeral { font-size: 64px; }
  .about-banner { margin: clamp(40px, 7vh, 64px) auto clamp(28px, 4vh, 40px); }
  .about-quote__body { font-size: 20px; }
  .about-quote__latin { font-size: 17px; }
  .about-stat__num { font-size: 64px; }
  .about-mini-dict { max-width: 100%; }
}

/* ============================================================
   SHOP V2: PACKS-FIRST REDESIGN
   - .shop-subnav: top sub-nav (Packs / Add-ons / Bulk / Custom)
   - .shop-tab: each top-level tab (Packs is default)
   - .pack-slider + .pack-card: 5-card horizontal scroll-snap on /shop
   - .pack-page: per-pack detail page
   - .pack-hero, .pack-config, .pack-summary: pack subpage anatomy
   - .addons-grid + .addon-card: showcase grid on /shop/addons
   - .bulk-tiers + .bulk-calc: tier ladder + interactive math
   - .custom-form + .case-card: B2B inquiry form + case studies
   Inline --mp-pack-color / --mp-pack-rgb drives accent per pack.
   ============================================================ */

/* ---- Sub-nav ---- */
.shop-subnav {
  background: var(--mp-cream);
  border-bottom: 1px solid rgba(18,18,18,0.08);
}
.shop-subnav__wrap {
  max-width: 1180px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; gap: 24px;
  overflow-x: auto;
}
.shop-subnav__link {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.6);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.shop-subnav__link:hover { color: var(--mp-ink); }
.shop-subnav__link.is-active {
  color: var(--mp-section-primary);
  border-bottom-color: var(--mp-section-primary);
}

/* ---- Tab header ---- */
.shop-tab { padding: clamp(40px, 6vh, 72px) 24px 0; }
.shop-tab__head { max-width: 940px; margin: 0 auto 36px; }
.shop-tab__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mp-section-primary);
  display: inline-block; margin-bottom: 12px;
}
.shop-tab__h1 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05; letter-spacing: -0.012em;
  margin: 0 0 14px;
  color: var(--mp-ink);
}
.shop-tab__h1 em {
  font-style: italic;
  color: var(--mp-section-primary);
}
.shop-tab__lede {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 17px; line-height: 1.6;
  color: rgba(18,18,18,0.7);
  max-width: 580px; margin: 0;
}

/* ---- Pack slider ---- */
.pack-slider {
  position: relative;
  max-width: 1180px; margin: 0 auto 48px;
  padding: 0 24px;
}
.pack-slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 16px;
  scrollbar-width: thin;
}
.pack-slider__track::-webkit-scrollbar { height: 6px; }
.pack-slider__track::-webkit-scrollbar-thumb { background: rgba(18,18,18,0.15); border-radius: 999px; }
.pack-card {
  flex: 0 0 420px;
  scroll-snap-align: start;
  position: relative;
  height: 480px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--mp-cream);
  background: var(--mp-ink);
  box-shadow: 0 20px 50px -28px rgba(0,0,0,0.5);
  isolation: isolate;
  transition: transform 0.15s ease;
}
.pack-card:hover { transform: translateY(-2px); }
.pack-card__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.pack-card__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(var(--mp-pack-rgb), 0.08) 0%, rgba(var(--mp-pack-rgb), 0.20) 100%);
  z-index: 1;
}
.pack-card__body {
  position: relative; z-index: 2;
  height: 100%;
  padding: 32px 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 8px;
}
.pack-card__band {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mp-pack-color);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(var(--mp-pack-rgb), 0.4);
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 4px;
}
.pack-card__name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  margin: 0;
}
.pack-card__tag {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 8px;
}
.pack-card__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pack-card__price strong { font-size: 16px; }
.pack-card__cta { color: var(--mp-pack-color); font-weight: 500; }

.pack-slider__arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: none;
  color: var(--mp-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.3);
}
.pack-slider__arrow--prev { left: -10px; }
.pack-slider__arrow--next { right: -10px; }
.pack-slider__arrow:hover { background: #fff; }
.pack-slider__dots {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 20px;
}
.pack-slider__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(18,18,18,0.18);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.pack-slider__dot.is-active {
  background: var(--mp-section-primary);
  transform: scale(1.2);
}

/* ---- Bulk teaser ---- */
.bulk-teaser {
  display: flex; align-items: center;
  gap: 24px;
  max-width: 1180px; margin: 0 auto 64px;
  padding: 18px 24px;
  background: var(--mp-cream);
  border-top: 1px solid rgba(18,18,18,0.08);
  border-bottom: 1px solid rgba(18,18,18,0.08);
  text-decoration: none;
  color: var(--mp-ink);
  flex-wrap: wrap;
}
.bulk-teaser__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mp-section-primary);
  font-weight: 600;
}
.bulk-teaser__tiers {
  display: flex; flex: 1; flex-wrap: wrap;
  gap: 16px 24px;
}
.bulk-teaser__tier {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(18,18,18,0.7);
}
.bulk-teaser__tier strong { color: var(--mp-ink); margin-right: 6px; }

/* ---- Add-ons grid ---- */
.addons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px; margin: 0 auto;
  padding: 0 24px 80px;
}
.addon-card {
  background: #fff;
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 30px -22px rgba(0,0,0,0.3);
}
.addon-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(18,18,18,0.06);
  padding-bottom: 10px;
}
.addon-card__name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  margin: 0;
}
.addon-card__price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--mp-section-primary);
  white-space: nowrap;
  font-weight: 600;
}
.addon-card__copy {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(18,18,18,0.75);
  margin: 0 0 18px;
  flex: 1;
}
.addon-card__toggle {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.addon-card__toggle input { width: 18px; height: 18px; cursor: pointer; }

/* ---- Bulk pricing ---- */
.bulk-tiers {
  max-width: 940px; margin: 0 auto 56px;
  padding: 0 24px;
}
.bulk-tiers__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(18,18,18,0.08);
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bulk-tiers__row--featured {
  background: rgba(var(--mp-section-primary-rgb), 0.10);
  border-radius: 6px;
}
.bulk-tiers__qty {
  font-weight: 500;
  font-size: 14px;
  color: var(--mp-ink);
  letter-spacing: 0.04em;
}
.bulk-tiers__each {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--mp-section-primary);
}
.bulk-tiers__save {
  font-size: 12px;
  color: rgba(18,18,18,0.6);
  letter-spacing: 0.06em;
}
.bulk-tiers__example {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(18,18,18,0.7);
}

.bulk-calc {
  max-width: 940px; margin: 0 auto 56px;
  padding: 32px;
  background: var(--mp-cream);
  border-radius: 14px;
}
.bulk-calc__h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 18px;
}
.bulk-calc__inputs label {
  display: flex; flex-direction: column;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.6);
  max-width: 320px;
}
.bulk-calc__inputs input {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 22px;
  padding: 10px 14px;
  border: 1px solid rgba(18,18,18,0.15);
  border-radius: 8px;
  background: #fff;
}
.bulk-calc__results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(18,18,18,0.08);
}
.bulk-calc__stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.55);
  margin-bottom: 6px;
}
.bulk-calc__stat-value {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 32px;
  color: var(--mp-section-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bulk-calc__stat-value--small { font-size: 20px; color: var(--mp-ink); }

.bulk-share {
  max-width: 940px; margin: 0 auto 64px;
  padding: 0 24px;
  display: flex; align-items: center; gap: 14px;
}
.bulk-share__btn {
  background: var(--mp-ink);
  color: var(--mp-cream);
  border: none;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.1s;
}
.bulk-share__btn:hover { transform: translateY(-1px); }
.bulk-share__hint {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--mp-section-primary);
  opacity: 0;
  transition: opacity 0.15s;
}
.bulk-share__hint.is-shown { opacity: 1; }

.bulk-why {
  max-width: 760px; margin: 0 auto 80px;
  padding: 0 24px;
}
.bulk-why__h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 16px;
}
.bulk-why p {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(18,18,18,0.78);
  margin: 0 0 14px;
}

/* ---- Custom form ---- */
.custom-form {
  max-width: 760px; margin: 0 auto 56px;
  padding: 0 24px;
}
.custom-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.custom-form__field {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.custom-form__field:last-of-type { margin-bottom: 28px; }
.custom-form__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.6);
}
.custom-form__field input,
.custom-form__field select,
.custom-form__field textarea {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(18,18,18,0.15);
  border-radius: 8px;
  background: #fff;
  resize: vertical;
}
.custom-form__field input:focus,
.custom-form__field select:focus,
.custom-form__field textarea:focus {
  outline: 3px solid rgba(var(--mp-section-primary-rgb), 0.3);
  border-color: var(--mp-section-primary);
}
.custom-form__actions {
  display: flex; flex-direction: column;
  gap: 10px; align-items: flex-start;
}
.custom-form__submit {
  background: var(--mp-section-primary);
  color: var(--mp-cream);
  border: none;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.custom-form__submit:hover { background: var(--mp-section-primary-hover); }
.custom-form__sla {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(18,18,18,0.65);
  margin: 0;
}
.custom-form__sla a { color: var(--mp-section-primary); }

.case-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 940px; margin: 0 auto 80px;
  padding: 0 24px;
}
.case-card {
  background: var(--mp-cream);
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.case-card__photo {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #04342C 0%, #1e0a0d 100%);
}
.case-card__body { padding: 18px 20px 22px; }
.case-card__tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-section-primary);
}
.case-card__h3 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  margin: 6px 0 8px;
}
.case-card p {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: rgba(18,18,18,0.7);
  margin: 0;
}

/* ============================================================ */
/* PACK SUBPAGE ANATOMY                                          */
/* ============================================================ */

.pack-hero {
  position: relative;
  min-height: 70vh;
  display: flex; align-items: center;
  padding: 80px 24px 60px 64px;
  color: var(--mp-cream);
  overflow: hidden;
  isolation: isolate;
}
.pack-hero__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.pack-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 52, 44, 0.45) 0%, rgba(4, 52, 44, 0.88) 100%);
  z-index: 1;
}
.pack-hero__content {
  position: relative; z-index: 2;
  max-width: clamp(320px, 50%, 640px);
}
.pack-hero__back {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,244,231,0.7);
  text-decoration: none;
  margin-bottom: 18px;
}
.pack-hero__back:hover { color: var(--mp-pack-color); }
.pack-hero__band {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mp-pack-color);
  border: 1px solid var(--mp-pack-color);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pack-hero__name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1.02;
  margin: 0 0 14px;
}
.pack-hero__tag {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: rgba(250,244,231,0.85);
  margin: 0 0 22px;
}
.pack-hero__price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,244,231,0.75);
}
.pack-hero__price strong { color: var(--mp-pack-color); font-size: 18px; }

.pack-config {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  max-width: 1180px; margin: 0 auto;
  padding: 56px 24px 48px;
  align-items: start;
}
.pack-config__main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pack-config__widget {
  background: #fff;
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 14px;
  padding: 26px 28px;
}
.pack-config__readout {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px;
}
.pack-config__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.55);
  font-weight: 700;
}
.pack-config__big {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: var(--mp-pack-color);
  font-variant-numeric: tabular-nums;
}
.pack-config__unit {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: rgba(18,18,18,0.6);
}
.pack-config__slider-row {
  display: flex; align-items: center; gap: 14px;
}
.pack-config__fine {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--mp-ink);
  background: transparent;
  color: var(--mp-ink);
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
}
.pack-config__fine:hover { background: var(--mp-ink); color: var(--mp-cream); }
.pack-config__slider {
  -webkit-appearance: none; appearance: none;
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--mp-pack-color) 0%,
    var(--mp-pack-color) var(--pack-fill, 15%),
    rgba(18,18,18,0.10) var(--pack-fill, 15%),
    rgba(18,18,18,0.10) 100%
  );
  outline: none;
  cursor: grab;
}
.pack-config__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mp-pack-color);
  border: 3px solid var(--mp-cream);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.pack-config__slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mp-pack-color);
  border: 3px solid var(--mp-cream);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.pack-config__tier {
  margin-top: 12px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(18,18,18,0.72);
}
.pack-config__tier strong {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  color: var(--mp-pack-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  font-weight: 600;
}
.pack-config__photo {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(18,18,18,0.08);
}

.pack-summary {
  background: var(--mp-cream);
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 14px;
  padding: 26px 24px 22px;
  position: sticky;
  top: 110px;
}
.pack-summary__h2 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.55);
  margin: 0 0 16px;
}
.pack-summary__row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 15px;
  color: var(--mp-ink);
  border-bottom: 1px solid rgba(18,18,18,0.06);
}
.pack-summary__row--save {
  color: var(--mp-pack-color);
  font-style: italic;
}
.pack-summary__addons {
  margin: 16px 0 8px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.pack-summary__addon {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.4;
  padding: 8px 0;
  cursor: pointer;
}
.pack-summary__addon input { margin-top: 4px; }
.pack-summary__addon strong { font-weight: 500; }
.pack-summary__addon-desc {
  font-style: italic;
  font-size: 12.5px;
  color: rgba(18,18,18,0.6);
}
.pack-summary__total {
  display: flex; justify-content: space-between;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  padding: 12px 0;
  margin-top: 6px;
  border-top: 2px solid var(--mp-ink);
  border-bottom: 2px solid var(--mp-ink);
}
.pack-summary__cta {
  display: block;
  text-align: center;
  margin-top: 16px;
  background: var(--mp-pack-color);
  color: var(--mp-cream);
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
}
.pack-summary__cta:hover { background: color-mix(in srgb, var(--mp-pack-color) 85%, black); }
/* Mustard CTA needs ink text for contrast */
.pack-page[style*="212, 167, 44"] .pack-summary__cta { color: var(--mp-ink); }
.pack-page[style*="212, 167, 44"] .pack-summary__cta:hover { color: var(--mp-cream); }
.pack-summary__note {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(18,18,18,0.55);
  margin: 10px 0 0;
  text-align: center;
}

.pack-pitch {
  max-width: 760px; margin: 0 auto;
  padding: 24px 24px 56px;
}
.pack-pitch__h2 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-pack-color);
  margin: 0 0 14px;
}
.pack-pitch p {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(18,18,18,0.85);
  margin: 0 0 16px;
}
.pack-pitch__pitch {
  font-style: italic;
  border-left: 2px solid var(--mp-pack-color);
  padding-left: 18px;
}

.pack-related {
  max-width: 1180px; margin: 0 auto;
  padding: 0 24px 80px;
}
.pack-related__h2 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.55);
  margin: 0 0 18px;
}
.pack-related__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pack-related__card {
  display: flex;
  background: var(--mp-cream);
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--mp-ink);
}
.pack-related__photo {
  flex: 0 0 160px;
  background-size: cover; background-position: center;
}
.pack-related__body { padding: 16px 18px; flex: 1; }
.pack-related__body h3 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 6px;
}
.pack-related__body span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(18,18,18,0.6);
}

/* ---- Mobile (<=760px) ---- */
@media (max-width: 760px) {
  .pack-card { flex-basis: 86vw; height: 420px; }
  .pack-slider__arrow { display: none; }
  .addons-grid { grid-template-columns: 1fr; }
  .bulk-tiers__row {
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
  }
  .bulk-tiers__example { grid-column: 1 / -1; }
  .bulk-calc__results { grid-template-columns: 1fr; gap: 14px; }
  .custom-form__row { grid-template-columns: 1fr; }
  .case-row { grid-template-columns: 1fr; }
  .pack-config { grid-template-columns: 1fr; padding: 36px 22px; }
  .pack-summary { position: static; }
  .pack-hero { padding: 60px 22px 40px; min-height: 60vh; }
  .pack-related__row { grid-template-columns: 1fr; }
}

/* ============================================================
   CONFIG SLIDER — pack page headliner component.
   Lives inside .pack-config__main on each /shop/<pack> route.
   Two color axes: --mp-event-color (top layer, drives chip + bignum
   + active fill + thumb + CTA) and --mp-tier-color (bottom layer,
   drives the tier swatch and total-kit number). Both are written by
   JS as inline CSS variables so the styling cascade does the rest.
   ============================================================ */
.config-slider {
  --mp-event-color: #0F6F50;
  --mp-event-color-rgb: 15, 111, 80;
  --mp-tier-color: #7F77DD;
  --mp-tier-color-rgb: 127, 119, 221;
  --mp-fill-pct: 10%;

  position: relative;
  background: #fff;
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 18px;
  padding: 32px 32px 28px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Keep above the brand-logo bleed if a sticky-nav overhang reaches in. */
  z-index: 2;
}

.config-slider .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ----- Event chip (top of card) ----- */
.config-slider__event-chip {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 12px 16px 12px 14px;
  border-radius: 12px;
  background: rgba(var(--mp-event-color-rgb), 0.06);
  border: 1px solid rgba(var(--mp-event-color-rgb), 0.18);
  transition: background 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
  transform-origin: left center;
  will-change: transform;
}
.config-slider__event-chip--bounce {
  animation: cs-chip-bounce 0.22s ease-out;
}
@keyframes cs-chip-bounce {
  0%   { transform: scale(1.0); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1.0); }
}
.config-slider__event-bar {
  flex-shrink: 0;
  width: 4px;
  align-self: stretch;
  background: var(--mp-event-color);
  border-radius: 2px;
  transition: background 0.2s ease-out;
}
.config-slider__event-chip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.config-slider__event-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.5);
  font-weight: 700;
}
.config-slider__event-name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--mp-ink);
}
.config-slider__event-sub {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ----- Big quantity number ----- */
.config-slider__bignum-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 4px;
}
.config-slider__bignum {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.95;
  color: var(--mp-event-color);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease-out;
}
.config-slider__bignum-unit {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  color: var(--text-secondary);
}

/* ----- Track + thumb + ticks ----- */
.config-slider__track-wrap {
  position: relative;
  margin: 6px 0 32px;
  padding: 18px 0 0;
}

/* Event guide bands ride the upper 60% of the track footprint, at low saturation. */
.config-slider__track-zones {
  position: absolute;
  left: 0; right: 0;
  top: 18px;
  height: 11px; /* upper 60% of 18px */
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: rgba(18, 18, 18, 0.04);
}
.config-slider__zone {
  position: absolute;
  top: 0; bottom: 0;
  opacity: 0.18;
  transition: opacity 0.2s ease-out;
}

/* The actual <input type="range"> sits on top of the zones. */
.config-slider__range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  height: 18px;
  background: transparent;
  margin: 0;
  padding: 0;
  cursor: grab;
  outline: none;
  z-index: 2;
}
.config-slider__range:active { cursor: grabbing; }
.config-slider__range:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 60%, transparent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* WebKit track */
.config-slider__range::-webkit-slider-runnable-track {
  height: 18px;
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      var(--mp-event-color) 0%,
      var(--mp-event-color) var(--mp-fill-pct),
      rgba(18, 18, 18, 0) var(--mp-fill-pct),
      rgba(18, 18, 18, 0) 100%
    );
  border: 1px solid rgba(18, 18, 18, 0.08);
}
/* WebKit thumb */
.config-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mp-event-color);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.25);
  margin-top: -10px; /* center on track */
  cursor: grab;
  transition: width 0.15s ease, height 0.15s ease, border-color 0.2s ease-out, box-shadow 0.15s ease;
}
.config-slider__range:hover::-webkit-slider-thumb,
.config-slider__range:active::-webkit-slider-thumb,
.config-slider__range:focus-visible::-webkit-slider-thumb {
  width: 44px;
  height: 44px;
  margin-top: -14px;
  box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.32);
}

/* Firefox track */
.config-slider__range::-moz-range-track {
  height: 18px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0);
  border: 1px solid rgba(18, 18, 18, 0.08);
}
.config-slider__range::-moz-range-progress {
  height: 18px;
  border-radius: 999px;
  background: var(--mp-event-color);
}
.config-slider__range::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mp-event-color);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.25);
  cursor: grab;
  transition: border-color 0.2s ease-out, box-shadow 0.15s ease;
}

/* ----- Tier ticks (bottom layer of the track) ----- */
.config-slider__tier-ticks {
  position: relative;
  height: 56px;
  margin-top: 4px;
  pointer-events: none;
}
.config-slider__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(18, 18, 18, 0.45);
  letter-spacing: 0.08em;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
  --tier-color: var(--mp-ink);
}
.config-slider__tick-mark {
  width: 2px;
  height: 10px;
  background: rgba(18, 18, 18, 0.25);
  display: block;
  transition: background 0.2s ease-out, height 0.2s ease-out;
}
.config-slider__tick-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  white-space: nowrap;
}
.config-slider__tick-name {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 9px;
  opacity: 0;
  transition: opacity 0.18s ease-out, color 0.2s ease-out;
  pointer-events: none;
}
.config-slider__tick-price {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 11px;
  color: rgba(18, 18, 18, 0.55);
  transition: color 0.2s ease-out, font-weight 0.2s ease-out;
}
/* Active tier: highlighted mark + name + price */
.config-slider__tick--active .config-slider__tick-mark {
  background: var(--tier-color);
  height: 16px;
}
.config-slider__tick--active .config-slider__tick-name {
  color: var(--tier-color);
  opacity: 1;
}
.config-slider__tick--active .config-slider__tick-price {
  color: var(--tier-color);
  font-weight: 700;
}
/* Adjacent tier: reveal the name + price stays muted color */
.config-slider__tick--adjacent .config-slider__tick-name {
  color: rgba(18, 18, 18, 0.6);
  opacity: 1;
}

/* ----- Input row (minus / number / plus) ----- */
.config-slider__input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: -4px;
}
.config-slider__btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--mp-ink);
  background: transparent;
  color: var(--mp-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.config-slider__btn:hover { background: var(--mp-ink); color: var(--mp-cream); }
.config-slider__btn:active { transform: scale(0.95); }
.config-slider__btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 60%, transparent);
  outline-offset: 2px;
}
.config-slider__input {
  width: 84px;
  height: 40px;
  text-align: center;
  border: 1px solid rgba(18, 18, 18, 0.18);
  border-radius: 8px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--mp-ink);
  background: #fff;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.config-slider__input::-webkit-outer-spin-button,
.config-slider__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.config-slider__input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 60%, transparent);
  outline-offset: 1px;
  border-color: var(--mp-event-color);
}

/* ----- Stat row (three columns) ----- */
.config-slider__stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(18, 18, 18, 0.08);
}
.config-slider__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.config-slider__stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.5);
  font-weight: 700;
}
.config-slider__stat-num {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--mp-tier-color);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease-out;
}
.config-slider__stat-num--save {
  color: var(--mp-ink);
}
.config-slider__stat-num--tier {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mp-ink);
}
.config-slider__tier-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--mp-tier-color);
  flex-shrink: 0;
  transition: background 0.2s ease-out;
}
.config-slider__stat-sub {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ----- CTA button ----- */
.config-slider__cta {
  display: block;
  text-align: center;
  background: var(--mp-event-color);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 18px 28px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.2s ease-out, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 22px -6px rgba(var(--mp-event-color-rgb), 0.5);
}
.config-slider__cta:hover {
  background: color-mix(in srgb, var(--mp-event-color) 85%, black);
  box-shadow: 0 14px 26px -6px rgba(var(--mp-event-color-rgb), 0.6);
}
.config-slider__cta:active { transform: scale(0.99); }
.config-slider__cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 70%, white);
  outline-offset: 3px;
}

/* ----- Disclaimer ----- */
.config-slider__disclaimer {
  margin: 0;
  text-align: center;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(18, 18, 18, 0.55);
  line-height: 1.4;
}

/* ----- Mobile / tablet refinements ----- */
@media (max-width: 1024px) {
  .config-slider__stat-num { font-size: 24px; }
  .config-slider__stat-num--tier { font-size: 20px; }
}
@media (max-width: 760px) {
  .config-slider {
    padding: 22px 20px 22px;
    gap: 18px;
    border-radius: 14px;
  }
  .config-slider__event-name { font-size: 19px; }
  .config-slider__event-sub { font-size: 13px; }
  .config-slider__bignum-unit { font-size: 20px; }
  .config-slider__stat-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .config-slider__stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 2px;
  }
  .config-slider__stat-label {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }
  .config-slider__stat-num {
    grid-row: 1;
    grid-column: 2;
    text-align: right;
    font-size: 22px;
  }
  .config-slider__stat-num--tier {
    justify-content: flex-end;
    font-size: 18px;
  }
  .config-slider__stat-sub {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 12px;
  }
  /* Hide non-adjacent tier labels to avoid collision on small screens. */
  .config-slider__tier-ticks {
    height: 48px;
  }
  .config-slider__tick {
    font-size: 9px;
  }
  .config-slider__tick:not(.config-slider__tick--active):not(.config-slider__tick--adjacent) .config-slider__tick-label {
    opacity: 0;
    pointer-events: none;
  }
  .config-slider__cta {
    font-size: 16px;
    padding: 16px 22px;
  }
}

/* Reduced motion: kill all transitions and the bounce keyframe. */
@media (prefers-reduced-motion: reduce) {
  .config-slider,
  .config-slider *,
  .config-slider *::before,
  .config-slider *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   SHOP HERO — full-bleed config slider on /shop landing.
   Layout: 100vh below the sticky nav. Tier band at top, big
   quantity + slider in the center, event chip + CTA at the
   bottom (closer to the reactive pack cards below).
   ============================================================ */
.shop-hero {
  --mp-event-color: #0F6F50;
  --mp-event-color-rgb: 15, 111, 80;
  --mp-tier-color: #7F77DD;
  --mp-tier-color-rgb: 127, 119, 221;
  --mp-fill-pct: 10%;

  position: relative;
  min-height: calc(100svh - 80px); /* sticky nav clearance, use svh for mobile */
  height: calc(100svh - 80px);
  padding: 18px 40px 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  background:
    radial-gradient(circle at 20% 12%, rgba(var(--mp-tier-color-rgb), 0.10) 0%, transparent 55%),
    radial-gradient(circle at 80% 88%, rgba(var(--mp-event-color-rgb), 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #FCFAF3 0%, var(--mp-cream) 100%);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.4s ease-out;
}
.shop-hero__grid {
  /* faint grid backdrop, sits behind everything */
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(18,18,18,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,18,18,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 0;
  pointer-events: none;
}
.shop-hero > * { position: relative; z-index: 1; }

/* ----- TIER BAND (top) ----- */
.shop-hero__tier-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.shop-hero__band-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.5);
  font-weight: 700;
}
.shop-hero__tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(var(--mp-tier-color-rgb), 0.25);
  box-shadow: 0 14px 30px -16px rgba(var(--mp-tier-color-rgb), 0.4);
  transition: background 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.shop-hero__tier-chip--bounce {
  animation: shop-hero-tier-bounce 0.26s ease-out;
}
@keyframes shop-hero-tier-bounce {
  0%   { transform: scale(1.0) translateY(0); }
  55%  { transform: scale(1.06) translateY(-2px); }
  100% { transform: scale(1.0) translateY(0); }
}
.shop-hero__tier-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--mp-tier-color);
  transition: background 0.2s ease-out;
}
.shop-hero__tier-name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--mp-ink);
  letter-spacing: 0.005em;
}
.shop-hero__tier-each {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-secondary);
}

/* ----- CORE (center: big quantity + slider) ----- */
.shop-hero__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 4px 0;
}
.shop-hero__bignum-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  text-align: center;
  line-height: 0.95;
}
.shop-hero__bignum {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(120px, min(16vw, 22vh), 220px);
  color: var(--mp-event-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color 0.2s ease-out;
  line-height: 0.9;
}
.shop-hero__bignum-unit {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(24px, min(3vw, 4vh), 40px);
  color: var(--text-secondary);
}
.shop-hero__stats {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text-secondary);
  font-style: italic;
}
.shop-hero__stat strong {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: normal;
  font-weight: 700;
  color: var(--mp-tier-color);
  font-variant-numeric: tabular-nums;
  font-size: 1.1em;
  transition: color 0.2s ease-out;
}
.shop-hero__stat:nth-child(3) strong { color: var(--mp-ink); }
.shop-hero__stat-sep { color: rgba(18,18,18,0.25); }

/* The slider track. Reuses .config-slider__track-zones / __tier-ticks
   from the pack-page component for parity. */
.shop-hero__slider-wrap {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 12px auto 0;
  padding: 18px 0 0;
}

.shop-hero__input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: -2px;
}
.shop-hero__btn {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--mp-ink);
  background: transparent;
  color: var(--mp-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.shop-hero__btn:hover { background: var(--mp-ink); color: var(--mp-cream); }
.shop-hero__btn:active { transform: scale(0.95); }
.shop-hero__btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 60%, transparent);
  outline-offset: 2px;
}
.shop-hero__input {
  width: 100px;
  height: 44px;
  text-align: center;
  border: 1px solid rgba(18, 18, 18, 0.2);
  border-radius: 10px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--mp-ink);
  background: #fff;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.shop-hero__input::-webkit-outer-spin-button,
.shop-hero__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-hero__input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 60%, transparent);
  outline-offset: 1px;
  border-color: var(--mp-event-color);
}

/* ----- EVENT BAND (bottom) + CTA ----- */
.shop-hero__event-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.shop-hero__event-chip {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  padding: 16px 22px 16px 18px;
  border-radius: 14px;
  background: rgba(var(--mp-event-color-rgb), 0.06);
  border: 1px solid rgba(var(--mp-event-color-rgb), 0.22);
  transition: background 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}
.shop-hero__event-chip--bounce {
  animation: shop-hero-event-bounce 0.26s ease-out;
}
@keyframes shop-hero-event-bounce {
  0%   { transform: scale(1.0); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1.0); }
}
.shop-hero__event-bar {
  flex-shrink: 0;
  width: 5px;
  align-self: stretch;
  background: var(--mp-event-color);
  border-radius: 3px;
  transition: background 0.2s ease-out;
}
.shop-hero__event-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.shop-hero__event-name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--mp-ink);
  line-height: 1.15;
}
.shop-hero__event-sub {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text-secondary);
}
.shop-hero__cta {
  display: inline-block;
  background: var(--mp-event-color);
  color: #fff;
  border-radius: 999px;
  padding: 18px 32px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease-out, transform 0.1s ease, box-shadow 0.2s ease-out;
  box-shadow: 0 18px 36px -12px rgba(var(--mp-event-color-rgb), 0.55);
  text-align: center;
}
.shop-hero__cta:hover {
  background: color-mix(in srgb, var(--mp-event-color) 85%, black);
  box-shadow: 0 22px 42px -10px rgba(var(--mp-event-color-rgb), 0.65);
  transform: translateY(-1px);
}
.shop-hero__cta:active { transform: translateY(0); }
.shop-hero__cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 70%, white);
  outline-offset: 3px;
}
.shop-hero__disclaimer {
  margin: 0;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(18, 18, 18, 0.5);
  text-align: center;
}
.shop-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.45);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  transition: color 0.15s ease, background 0.15s ease;
}
.shop-hero__scroll:hover { color: var(--mp-ink); background: rgba(255,255,255,0.9); }

/* ============================================================
   PACK CARD GRID below the hero. Reactive: when slider qty
   sits in a card's declared range, .is-matched lights the card;
   the single best fit gets .is-matched-primary (scale + glow +
   pulled forward). Non-matched cards desaturate slightly.
   ============================================================ */
.shop-packs-row {
  max-width: 1280px;
  margin: 56px auto 32px;
  padding: 0 32px;
}
.shop-packs-row__head {
  margin-bottom: 28px;
  text-align: center;
}
.shop-packs-row__h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 0 0 8px;
  color: var(--mp-ink);
  line-height: 1.1;
}
.shop-packs-row__lede {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
}
.shop-packs-row__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  padding: 18px 0; /* room for the scale-up of the primary card */
}
.pack-card--grid {
  flex: none;
  width: auto;
  min-width: 0;
  height: 380px;
  scroll-snap-align: none;
  filter: saturate(0.85);
  transition: transform 0.32s cubic-bezier(0.18, 0.9, 0.32, 1.18),
              filter 0.25s ease-out,
              box-shadow 0.32s ease-out,
              outline-color 0.2s ease-out,
              opacity 0.25s ease-out;
  outline: 0 solid transparent;
  outline-offset: 0;
}
.pack-card--grid .pack-card__body {
  padding: 22px 20px;
}
.pack-card--grid .pack-card__name {
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.1;
}
.pack-card--grid .pack-card__tag {
  font-size: 13px;
}
.pack-card--grid .pack-card__band {
  font-size: 9px;
  letter-spacing: 0.14em;
}
.pack-card--grid .pack-card__row {
  padding-top: 10px;
  font-size: 11px;
}

.pack-card--grid:hover {
  transform: translateY(-4px) scale(1.015);
  filter: saturate(1);
}
.pack-card--grid.is-matched {
  filter: saturate(1);
  outline: 2px solid rgba(var(--mp-pack-rgb), 0.5);
  outline-offset: 4px;
  box-shadow: 0 24px 50px -18px rgba(var(--mp-pack-rgb), 0.5);
  transform: translateY(-5px) scale(1.01);
}
.pack-card--grid.is-matched-primary {
  filter: saturate(1.08) brightness(1.04);
  outline: 3px solid var(--mp-pack-color);
  outline-offset: 5px;
  box-shadow:
    0 36px 64px -18px rgba(var(--mp-pack-rgb), 0.8),
    0 0 0 8px rgba(var(--mp-pack-rgb), 0.1);
  transform: translateY(-14px) scale(1.08);
  z-index: 2;
}
.pack-card--grid:not(.is-matched):not(.is-matched-primary) {
  filter: saturate(0.55) brightness(0.92);
  opacity: 0.72;
}
.pack-card--grid:not(.is-matched):not(.is-matched-primary):hover {
  filter: saturate(0.9) brightness(1);
  opacity: 0.95;
}

/* ============================================================
   SHOP HERO mobile + tablet refinements.
   ============================================================ */
@media (max-width: 1024px) {
  .shop-hero { padding: 24px 28px 32px; }
  .shop-packs-row__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .pack-card--grid { height: 320px; }
}
@media (max-width: 760px) {
  .shop-hero {
    min-height: calc(100vh - 80px);
    padding: 18px 18px 28px;
    gap: 14px;
  }
  .shop-hero__tier-chip {
    padding: 10px 16px;
    gap: 10px;
  }
  .shop-hero__tier-name { font-size: 19px; }
  .shop-hero__tier-each { font-size: 13px; }
  .shop-hero__bignum-row { gap: 10px; }
  .shop-hero__stats {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  .shop-hero__stat-sep { display: none; }
  .shop-hero__event-chip {
    padding: 14px 16px 14px 14px;
    gap: 12px;
  }
  .shop-hero__event-name { font-size: 19px; }
  .shop-hero__event-sub { font-size: 14px; }
  .shop-hero__cta {
    width: 100%;
    padding: 18px 22px;
    font-size: 17px;
  }
  .shop-hero__scroll { bottom: 8px; font-size: 10px; padding: 6px 12px; }
  .shop-packs-row { padding: 0 20px; margin: 40px auto 24px; }
  .shop-packs-row__grid {
    grid-template-columns: 1fr;
  }
  .pack-card--grid { height: 280px; }
  .pack-card--grid.is-matched-primary { transform: translateY(-6px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-hero,
  .shop-hero *,
  .pack-card--grid {
    animation: none !important;
    transition: none !important;
  }
}

/* Phase 1.1: the shop-page-specific logo override is now redundant,
   the global rule contains the logo on every page. Left intentionally
   minimal so any future per-section nudges have a place to land. */

/* ============================================================
   PHASE 1 SHOP REBUILD: shared use-case landing page components
   used by /weddings, /venues, /parties. Each landing declares its
   own --uc-color / --uc-color-rgb on the wrapper and the styling
   cascades through the band, punchline, and card grid.
   ============================================================ */

/* ---- Generic use-case hero (cream background, color-themed) ---- */
.uc-hero {
  background: var(--mp-cream);
  padding: clamp(72px, 11vw, 132px) 24px clamp(48px, 8vw, 88px);
  border-bottom: 1px solid rgba(18, 18, 18, 0.06);
}
.uc-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.uc-hero__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--uc-color, var(--mp-section-primary));
  background: rgba(var(--uc-color-rgb, var(--mp-section-primary-rgb)), 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  font-weight: 700;
}
.uc-hero__h1 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--mp-ink);
}
.uc-hero__lede {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 28px;
}
.uc-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--uc-color, var(--mp-section-primary));
  color: #fff;
  text-decoration: none;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.2px;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 14px 28px -12px rgba(var(--uc-color-rgb, var(--mp-section-primary-rgb)), 0.55);
}
.uc-hero__cta:hover {
  background: color-mix(in srgb, var(--uc-color, var(--mp-section-primary)) 85%, black);
  transform: translateY(-1px);
}

/* ---- Video variant of the use-case hero (parties) ---- */
.uc-hero--video {
  position: relative;
  overflow: hidden;
  background: #022721;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(82vh, 760px);
}
.uc-hero__bg,
.uc-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.uc-hero__bg { background-size: cover; background-position: center; }
.uc-hero__video { object-fit: cover; }
.uc-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(2, 39, 33, 0.60) 0%,
    rgba(2, 39, 33, 0.50) 46%,
    rgba(2, 39, 33, 0.78) 100%);
}
.uc-hero--video .uc-hero__inner { position: relative; z-index: 2; width: 100%; }
.uc-hero--video .uc-hero__h1 { color: var(--mp-cream); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.uc-hero--video .uc-hero__lede { color: rgba(250, 244, 231, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.uc-hero--video .uc-hero__eyebrow { color: #fff; background: rgba(212, 83, 126, 0.92); }

/* ---- Photo variant of the use-case hero (How to Party: the bag drop) ---- */
.uc-hero--photo {
  position: relative;
  overflow: hidden;
  background: #022721;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(88vh, 840px);
}
.uc-hero--photo .uc-hero__veil {
  background: linear-gradient(180deg,
    rgba(2, 39, 33, 0.58) 0%,
    rgba(2, 39, 33, 0.40) 42%,
    rgba(2, 39, 33, 0.82) 100%);
}
.uc-hero--photo .uc-hero__inner { position: relative; z-index: 2; width: 100%; }
.uc-hero--photo .uc-hero__h1 { color: var(--mp-cream); text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55); }
.uc-hero--photo .uc-hero__lede { color: rgba(250, 244, 231, 0.94); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55); }
.uc-hero--photo .uc-hero__eyebrow { color: #fff; background: rgba(212, 83, 126, 0.95); }

/* ---- Generic use-case band (marquee + placeholder slots) ----
   Visual pattern mirrors .wedding-band but accepts color-block
   placeholders instead of <img> children. Same animation. ---- */
.use-case-band {
  position: relative;
  width: 100%;
  height: 280px;
  margin: 0;
  background: var(--mp-cream);
  overflow: hidden;
  box-shadow:
    inset 0 6px 14px -10px rgba(0, 0, 0, 0.18),
    inset 0 -6px 14px -10px rgba(0, 0, 0, 0.18);
}
.use-case-band__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  gap: 8px;
  width: max-content;
  animation: wedding-band-scroll 70s linear infinite;
  will-change: transform;
}
.use-case-band:hover .use-case-band__track,
.use-case-band:focus-within .use-case-band__track {
  animation-play-state: paused;
}
.use-case-band__slot {
  flex: 0 0 360px;
  height: 100%;
  background: var(--uc-color, var(--mp-section-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.use-case-band__placeholder-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 244, 231, 0.85);
  background: rgba(18, 18, 18, 0.28);
  border: 1px dashed rgba(250, 244, 231, 0.32);
  padding: 10px 14px;
  border-radius: 6px;
  text-align: center;
  line-height: 1.45;
  max-width: 320px;
}
@media (max-width: 760px) {
  .use-case-band { height: 200px; }
  .use-case-band__track { gap: 6px; animation-duration: 56s; }
  .use-case-band__slot { flex-basis: 260px; }
  .use-case-band__placeholder-text { font-size: 10px; max-width: 220px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .use-case-band { overflow-x: auto; }
  .use-case-band__track { animation: none; width: auto; }
}

/* ---- Filled photo treatment for use-case band slots and cards ---- */
.use-case-band__slot--photo { padding: 0; background: #161616; }
.use-case-band__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.use-case-card__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.use-case-card__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0) 38%, rgba(18, 18, 18, 0.30) 64%, rgba(18, 18, 18, 0.60) 100%),
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.12) 0%, rgba(var(--card-accent-rgb), 0.42) 55%, rgba(var(--card-accent-rgb), 0.80) 100%);
}
.use-case-card__body { position: relative; z-index: 2; }
/* Photo cards only: drop the copy to the bottom over the strong part of the
   scrim so the photo reads up top and the text stays legible. */
.use-case-card:has(.use-case-card__img) .use-case-card__body { margin-top: auto; }
.use-case-card:has(.use-case-card__img) .use-case-card__name { text-shadow: 0 1px 10px rgba(18, 18, 18, 0.45); }
.use-case-card:has(.use-case-card__img) .use-case-card__band { text-shadow: 0 1px 8px rgba(18, 18, 18, 0.5); }

/* ---- Generic use-case punchline (mirrors .wedding-punchline) ---- */
.use-case-punchline {
  padding: clamp(40px, 6vw, 72px) 24px;
  text-align: center;
  background: transparent;
}
.use-case-punchline__rule {
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto 16px;
  background: var(--uc-color, var(--pink-rose));
}
.use-case-punchline__lines {
  max-width: 1100px;
  margin: 0 auto;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(30px, 4.8vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.use-case-punchline__faint {
  color: var(--text-secondary);
  opacity: 0.55;
}
.use-case-punchline__loud {
  color: var(--mp-ink);
}

/* ============================================================
   SHOP SUB-SUB-TABS (Phase 1).
   Sits below the top-level Shop sub-nav inside the Packs tab.
   Each tab declares its own --cat-color / --cat-color-rgb for the
   active-state underline.
   ============================================================ */
.shop-subsubnav {
  background: var(--mp-cream);
  border-bottom: 1px solid rgba(18, 18, 18, 0.06);
  padding: 14px 24px 0;
}
.shop-subsubnav__wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.shop-subsubnav__wrap::-webkit-scrollbar { display: none; }
.shop-subsubnav__link {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 14px 20px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.66);
  text-decoration: none;
  transition: color 0.18s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px; /* sit on the parent's border */
}
.shop-subsubnav__link:hover {
  color: var(--cat-color, var(--mp-ink));
}
.shop-subsubnav__link.is-active {
  color: var(--cat-color, var(--mp-ink));
  border-bottom-color: var(--cat-color, var(--mp-ink));
}

.shop-cat-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 12px;
  text-align: center;
  --cat-color: var(--mp-weddings);
  --cat-color-rgb: var(--mp-weddings-rgb);
}
.shop-cat-head__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cat-color);
  background: rgba(var(--cat-color-rgb), 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-weight: 700;
}
.shop-cat-head__h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  margin: 0;
  color: var(--mp-ink);
}

.shop-cat {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 64px;
}
.shop-cat__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.shop-cat__grid--sparse {
  grid-template-columns: minmax(0, 360px);
  justify-content: center;
}
.shop-cat__more {
  margin: 24px auto 0;
  max-width: 640px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.5);
}
.shop-cat__more a {
  color: var(--mp-section-primary, var(--mp-ink));
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1100px) {
  .shop-cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .shop-subsubnav { padding: 10px 16px 0; }
  .shop-subsubnav__link { padding: 11px 14px; font-size: 11px; }
  .shop-cat-head { padding: 24px 18px 8px; }
  .shop-cat { padding: 14px 18px 48px; }
  .shop-cat__grid { grid-template-columns: 1fr; gap: 14px; }
  .shop-cat__grid--sparse { grid-template-columns: 1fr; }
}

/* ---- Stub pack-card photo (no real photo yet, color-block + corner badge) ----
   Phase 1.1: badge sits in the top-right corner as a small tag. The BEST FOR
   sizing band keeps the top-left, the pack name + pitch sit in the center
   and lower half of the card. Clean hierarchy. ---- */
.pack-card__photo--stub {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mp-pack-color) 92%, black),
    color-mix(in srgb, var(--mp-pack-color) 68%, black));
  /* no flex centering: the badge positions itself */
}
.pack-card--grid .pack-card__photo-needed,
.pack-card__photo-needed {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 244, 231, 0.85);
  background: rgba(18, 18, 18, 0.5);
  border: 1px dashed rgba(250, 244, 231, 0.32);
  padding: 5px 8px;
  border-radius: 4px;
  text-align: right;
  line-height: 1.25;
  max-width: 140px;
}

/* Pack-hero stub photo plate keeps its centered badge (different layout
   from the small card). Restore center positioning there. */
.pack-hero__photo--stub .pack-hero__photo-needed,
.pack-hero__photo-needed {
  position: static;
  max-width: 480px;
  font-size: 11px;
  padding: 10px 16px;
  text-align: center;
}
.pack-hero__photo--stub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Phase 1.1: strengthen the contrast overlay on PHOTO-BACKED grid cards
   so the white pack name / italic pitch / "From $X each" / CTA all read.
   Stub cards (solid color background) keep the existing veil. */
.pack-card--grid:not(.pack-card--stub) .pack-card__veil {
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.5)  35%,
      rgba(0, 0, 0, 0.15) 60%,
      transparent 80%),
    linear-gradient(180deg, rgba(var(--mp-pack-rgb), 0.05) 0%, rgba(var(--mp-pack-rgb), 0.18) 100%);
}

/* ---- Footer utility row (Phase 1: Quiz / FAQs / Contact) ---- */
footer .utility-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 18px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}
footer .utility-row a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.15s ease;
}
footer .utility-row a:hover { color: #fff; }
@media (max-width: 640px) {
  footer .utility-row { gap: 18px; padding: 14px 16px; }
}

/* ---- Top-nav Shop "util-link" hybrid (Phase 1):
   Shop now sits in the right utility cluster alongside Cart, but
   should still look like a primary nav link (not a smaller utility
   link). Override the .util-link mute. ---- */
nav.top .utility .util-link--shop {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--tab-color, #FFFFFF);
  padding: 11px 20px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  --tab-color: #FF6B9D;
}
nav.top .utility .util-link--shop:hover,
nav.top .utility .util-link--shop.active {
  background: var(--mp-shop);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   PHASE 1.1: MOBILE HAMBURGER + DRAWER
   Trigger hidden on desktop, visible <= 760px. The drawer is a
   full-width slide-down panel. Body[data-mp-menu-open] toggles it.
   ============================================================ */
.mp-menu-trigger {
  display: none; /* desktop default */
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px 8px;
  margin-left: 4px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.mp-menu-trigger:hover { background: rgba(255, 255, 255, 0.08); }
.mp-menu-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}
.mp-menu-trigger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.18s ease;
}

/* Drawer container, hidden by default */
.mp-menu {
  position: fixed;
  inset: 0;
  z-index: 60;            /* above the sticky nav (50) */
  background: rgba(4, 39, 33, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.mp-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--mp-cream);
  padding: 60px 24px 32px;
  box-shadow: 0 24px 36px -12px rgba(0, 0, 0, 0.35);
  transform: translateY(-12px);
  transition: transform 0.22s cubic-bezier(0.18, 0.9, 0.32, 1.1);
  max-height: 100vh;
  overflow-y: auto;
}
.mp-menu__close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--mp-ink);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.mp-menu__close:hover { background: rgba(18, 18, 18, 0.08); }
.mp-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mp-menu__list li {
  border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}
.mp-menu__list li:last-child { border-bottom: none; }
.mp-menu__list a {
  display: block;
  padding: 16px 4px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--mp-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.mp-menu__list a:hover { color: var(--mp-section-primary); }
.mp-menu__list--shop a {
  font-weight: 700;
  color: var(--mp-shop);
}
.mp-menu__list--util a {
  font-size: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.65);
  padding: 14px 4px;
}
.mp-menu__divider {
  height: 1px;
  background: rgba(18, 18, 18, 0.12);
  margin: 10px 0;
}

/* Open state */
body[data-mp-menu-open="true"] .mp-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease;
}
body[data-mp-menu-open="true"] .mp-menu__panel {
  transform: translateY(0);
}
body[data-mp-menu-open="true"] {
  overflow: hidden; /* lock background scroll while drawer is open */
}

/* Show trigger, hide desktop nav items at small viewports.
   Reuses the existing 900px breakpoint which already hides .primary
   and .util-link. The trigger replaces that center cluster. */
@media (max-width: 900px) {
  .mp-menu-trigger {
    display: inline-flex;
  }
  nav.top .utility {
    gap: 10px;
  }
}
@media (min-width: 901px) {
  /* Desktop: drawer never visible. */
  .mp-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-menu,
  .mp-menu__panel,
  .mp-menu-trigger__bar { transition: none !important; }
}

/* ============================================================
   PHASE 2, /SHOP CONFIGURATOR (the headliner restored)
   Slider + order summary that drives every visible pack card.
   Lives below the sub-sub-tab card grid. The slider uses the
   canonical window.MP_SLIDER piecewise distribution.
   ============================================================ */
.shop-config {
  --mp-event-color: #0F6F50;
  --mp-event-color-rgb: 15, 111, 80;
  --mp-tier-color: #378ADD;
  --mp-tier-color-rgb: 55, 138, 221;
  --mp-fill-pct: 50%;
  /* Phase 3 visual tightening: the slider region is no longer a
     separately framed band. It flows inline below the cards grid
     with only minimal vertical breathing room so the cards + slider
     + summary read as one connected sales unit. */
  background: transparent;
  padding: 0 24px;
  border-top: 0;
  border-bottom: 0;
  margin-top: 24px;
}
.shop-config__wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ----- slider card (Phase 3: outer frame stripped) ----- */
.shop-config__slider-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.shop-config__event-chip {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  border-radius: 12px;
  background: rgba(var(--mp-event-color-rgb), 0.06);
  border: 1px solid rgba(var(--mp-event-color-rgb), 0.22);
  transition: background 0.2s ease-out, border-color 0.2s ease-out;
}
.shop-config__event-bar {
  flex-shrink: 0;
  width: 4px;
  align-self: stretch;
  background: var(--mp-event-color);
  border-radius: 2px;
  transition: background 0.2s ease-out;
}
.shop-config__event-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.shop-config__event-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.5);
  font-weight: 700;
}
.shop-config__event-name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--mp-ink);
}
.shop-config__event-sub {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.shop-config__bignum-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 4px;
}
.shop-config__bignum {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.95;
  color: var(--mp-event-color);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease-out;
}
.shop-config__bignum-unit {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  color: var(--text-secondary);
}

/* ----- track + thumb (piecewise via --mp-fill-pct) ----- */
.shop-config__track-wrap {
  position: relative;
  margin: 4px 0 28px;
  padding: 4px 0 0;
}
.shop-config__track {
  position: relative;
  width: 100%;
  height: 50px; /* enough vertical space for native input + custom thumb */
}
.shop-config__zones {
  position: absolute;
  left: 0; right: 0;
  top: 16px;
  height: 11px;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: rgba(18, 18, 18, 0.04);
}
.shop-config__zones .shop-config__zone {
  position: absolute;
  top: 0; bottom: 0;
  opacity: 0.22;
  transition: opacity 0.2s ease-out;
}
.shop-config__fill {
  position: absolute;
  left: 0;
  top: 16px;
  height: 18px;
  border-radius: 999px 0 0 999px;
  background: var(--mp-event-color);
  width: var(--mp-fill-pct, 0%);
  border-top: 1px solid rgba(18, 18, 18, 0.05);
  border-left: 1px solid rgba(18, 18, 18, 0.05);
  border-bottom: 1px solid rgba(18, 18, 18, 0.08);
  z-index: 1;
  pointer-events: none;
  transition: width 0.18s ease-out;
}
.shop-config__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 3;
}
.shop-config__range:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 60%, transparent);
  outline-offset: 4px;
  border-radius: 6px;
}
/* Hide the native thumb visually; custom thumb sits at piecewise position */
.shop-config__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px; height: 36px;
  opacity: 0;
  cursor: grab;
}
.shop-config__range::-moz-range-thumb {
  width: 36px; height: 36px;
  opacity: 0;
  border: 0;
  cursor: grab;
}
.shop-config__range::-webkit-slider-runnable-track {
  height: 34px;
  background: transparent;
}
.shop-config__range::-moz-range-track {
  height: 34px;
  background: transparent;
}
.shop-config__thumb {
  position: absolute;
  top: 8px;
  left: var(--mp-fill-pct, 0%);
  transform: translate(-50%, 0);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mp-event-color);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.25);
  z-index: 2;
  pointer-events: none;
  transition: border-color 0.2s ease-out, left 0.18s ease-out;
}

.shop-config__ticks {
  position: relative;
  height: 56px;
  margin-top: 6px;
  pointer-events: none;
}
.shop-config__ticks .shop-config__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(18, 18, 18, 0.45);
  letter-spacing: 0.08em;
  transition: color 0.2s ease-out;
  --tier-color: var(--mp-ink);
}
.shop-config__tick-mark {
  width: 2px;
  height: 10px;
  background: rgba(18, 18, 18, 0.25);
  display: block;
  transition: background 0.2s ease-out, height 0.2s ease-out;
}
.shop-config__tick-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  white-space: nowrap;
}
.shop-config__tick-name {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 9px;
  opacity: 0;
  transition: opacity 0.2s ease-out, color 0.2s ease-out;
}
.shop-config__tick-price {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 11px;
  color: rgba(18, 18, 18, 0.55);
  transition: color 0.2s ease-out;
}
.shop-config__tick--active .shop-config__tick-mark { background: var(--tier-color); height: 16px; }
.shop-config__tick--active .shop-config__tick-name  { color: var(--tier-color); opacity: 1; }
.shop-config__tick--active .shop-config__tick-price { color: var(--tier-color); font-weight: 700; }
.shop-config__tick--adjacent .shop-config__tick-name { color: rgba(18, 18, 18, 0.6); opacity: 1; }

/* ----- input row ----- */
.shop-config__input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.shop-config__btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--mp-ink);
  background: transparent;
  color: var(--mp-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.shop-config__btn:hover { background: var(--mp-ink); color: var(--mp-cream); }
.shop-config__btn:active { transform: scale(0.95); }
.shop-config__btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mp-event-color) 60%, transparent);
  outline-offset: 2px;
}
.shop-config__input {
  width: 92px; height: 40px;
  text-align: center;
  border: 1px solid rgba(18, 18, 18, 0.18);
  border-radius: 8px;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--mp-ink);
  background: #fff;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.shop-config__input::-webkit-outer-spin-button,
.shop-config__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ----- stat row ----- */
.shop-config__stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(18, 18, 18, 0.08);
}
.shop-config__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-config__stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.5);
  font-weight: 700;
}
.shop-config__stat-num {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--mp-tier-color);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease-out;
}
.shop-config__stat-num--save { color: var(--splash-green); }
.shop-config__stat-num--tier {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mp-ink);
}
.shop-config__tier-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--mp-tier-color);
  flex-shrink: 0;
  transition: background 0.2s ease-out;
}
.shop-config__stat-sub {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ----- order summary card ----- */
.shop-config__summary {
  background: #fff;
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.18);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.shop-config__summary-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}
.shop-config__summary-tier {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(var(--mp-tier-color-rgb), 0.08);
  border: 1px solid rgba(var(--mp-tier-color-rgb), 0.22);
  font-family: 'Source Serif Pro', Georgia, serif;
  color: var(--mp-ink);
  font-size: 16px;
}
.shop-config__summary-tier strong {
  font-weight: 700;
  font-size: 18px;
}
.shop-config__summary-tier span:last-child {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 14px;
}
.shop-config__summary-bignum-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}
.shop-config__summary-bignum {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.95;
  color: var(--mp-ink);
  font-variant-numeric: tabular-nums;
}
.shop-config__summary-bignum-unit {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--text-secondary);
}
.shop-config__summary-breakdown {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 17px;
  color: var(--text-secondary);
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
}
.shop-config__summary-breakdown strong { font-weight: 700; }
.shop-config__summary-breakdown span:first-child strong { color: var(--mp-event-color); }
.shop-config__summary-breakdown span:last-child strong  { color: var(--splash-green); }
.shop-config__summary-sep { color: rgba(18,18,18,0.25); }
.shop-config__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 540px;
  padding: 18px 28px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--mp-event-color);
  color: #fff;
  text-decoration: none;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  transition: background 0.2s ease-out, transform 0.1s ease, box-shadow 0.2s ease-out;
  box-shadow: 0 14px 28px -12px rgba(var(--mp-event-color-rgb), 0.55);
}
.shop-config__cta:hover {
  background: color-mix(in srgb, var(--mp-event-color) 85%, black);
  transform: translateY(-1px);
}
.shop-config__disclaimer {
  margin: 4px 0 0;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(18, 18, 18, 0.66);
}

/* ----- pack card live extensions (per-card +/- + kit + savings + recommended pill) ----- */
.pack-card__live {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pack-card__qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
}
.pack-card__qty-btn {
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  color: var(--mp-cream);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pack-card__qty-btn:hover { background: rgba(255, 255, 255, 0.22); }
.pack-card__qty-btn:active { transform: scale(0.94); }
.pack-card__qty-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.pack-card__qty {
  min-width: 38px;
  text-align: center;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--mp-cream);
  font-variant-numeric: tabular-nums;
}
.pack-card__numbers {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 244, 231, 0.85);
}
.pack-card__kit-total strong,
.pack-card__kit-total > span[data-card-kit] {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  color: var(--mp-cream);
  text-transform: none;
  letter-spacing: 0;
}
.pack-card__savings span[data-card-savings] {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: #B0E68A;  /* splash-green lighter for legibility on dark veil */
  text-transform: none;
  letter-spacing: 0;
}
.pack-card__reset {
  align-self: flex-start;
  background: transparent;
  border: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 244, 231, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
}
.pack-card__reset:hover { color: var(--mp-cream); }
.pack-card__buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--mp-cream);
  text-decoration: none;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  align-self: flex-start;
  transition: background 0.18s ease, transform 0.1s ease;
}
.pack-card__buy:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.pack-card__recommended-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.88);
  color: var(--mp-pack-color);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 14px -4px rgba(var(--mp-pack-rgb), 0.5);
}
.pack-card--grid.is-recommended {
  outline: 3px solid var(--mp-pack-color);
  outline-offset: 4px;
  box-shadow:
    0 32px 60px -18px rgba(var(--mp-pack-rgb), 0.7),
    0 0 0 8px rgba(var(--mp-pack-rgb), 0.08);
  transform: translateY(-6px) scale(1.02);
  z-index: 2;
}
.pack-card--grid.is-ideal {
  outline-width: 4px;
  transform: translateY(-10px) scale(1.04);
}
.pack-card--grid.is-decoupled {
  outline: 2px dashed rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

/* article cards lose the default <a> link styling but still get
   the existing pack-card visual treatment from earlier rules. */
article.pack-card--grid {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ----- responsive ----- */
@media (max-width: 1024px) {
  .shop-config__stat-row { grid-template-columns: 1fr 1fr; }
  .shop-config__stat:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .shop-config { padding: 48px 16px 48px; margin-top: 36px; }
  .shop-config__slider-card { padding: 22px 18px 22px; gap: 18px; }
  .shop-config__bignum { font-size: clamp(56px, 16vw, 96px); }
  .shop-config__stat-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .shop-config__summary { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-config__bignum,
  .shop-config__stat-num,
  .shop-config__fill,
  .shop-config__thumb,
  .pack-card--grid { transition: none !important; }
}

/* ============================================================
   ENHANCED SLIDER, canonical custom-thumb pattern.
   Applied by MP_SLIDER.enhanceSlider(container) on every slider
   (the /shop landing master + all 5 per-pack-page sliders).
   Hides the native track gradient + native thumb. The injected
   .mp-slider__fill div is the visual fill, .mp-slider__thumb is
   the visual thumb. Both positioned by JS via valueToPosition.
   The native <input type="range"> remains a transparent surface
   in the DOM for keyboard + screen reader access.
   ============================================================ */
.mp-slider--enhanced input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  position: relative;
  z-index: 4;       /* on top, so pointer/keyboard events still hit it */
  cursor: pointer;
}
.mp-slider--enhanced input[type="range"]::-webkit-slider-runnable-track {
  background: transparent !important;
  border-color: transparent !important;
}
.mp-slider--enhanced input[type="range"]::-moz-range-track {
  background: transparent !important;
  border-color: transparent !important;
}
.mp-slider--enhanced input[type="range"]::-moz-range-progress {
  background: transparent !important;
}
/* Hide the native thumb but keep it functional for keyboard /
   accessibility. Sized to keep its hit-area, but rendered transparent. */
.mp-slider--enhanced input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0;
}
.mp-slider--enhanced input[type="range"]::-moz-range-thumb {
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0;
}

/* The injected fill bar. Sits inside the same container as the
   native input, behind the thumb. Width = piecewise % of the track.
   Color resolves from the parent's --mp-event-color / --mp-pack-color
   cascade so the visual matches whichever slider context this is. */
.mp-slider__fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 18px;
  border-radius: 999px;
  background: var(--mp-event-color, var(--mp-pack-color, var(--mp-section-primary)));
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  transition: width 0.16s ease-out, background 0.18s ease-out;
}

/* The injected thumb. Positioned by JS via inline `left`. */
.mp-slider__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mp-event-color, var(--mp-pack-color, var(--mp-section-primary)));
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;       /* the underlying input handles drag */
  z-index: 3;                  /* above the fill, below the input */
  transition: left 0.16s ease-out, border-color 0.18s ease-out, transform 0.12s ease-out;
}
.mp-slider--enhanced.is-dragging .mp-slider__thumb,
.mp-slider--enhanced input[type="range"]:active ~ .mp-slider__thumb {
  transform: translate(-50%, -50%) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .mp-slider__fill,
  .mp-slider__thumb { transition: none !important; }
}

/* When enhanceSlider is applied to a .config-slider__track-wrap
   (the per-pack-page slider), the wrap needs to be the positioning
   context for the fill + thumb, and the native input becomes a
   thin overlay. The existing track-zones + tier-ticks stay where
   they are. */
.config-slider__track-wrap.mp-slider--enhanced {
  position: relative;
}
.config-slider__track-wrap.mp-slider--enhanced .config-slider__range {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 18px;
  margin: 0;
  width: 100%;
}
.config-slider__track-wrap.mp-slider--enhanced .mp-slider__fill {
  top: 27px;       /* center on the 18px track that sits at top: 18px */
  height: 18px;
}
.config-slider__track-wrap.mp-slider--enhanced .mp-slider__thumb {
  top: 27px;
}

/* For the /shop landing slider, enhanceSlider runs on
   .shop-config__track. Strip the bespoke [data-config-thumb] and
   [data-config-fill] visuals; the injected ones replace them. */
.shop-config__track.mp-slider--enhanced [data-config-fill],
.shop-config__track.mp-slider--enhanced [data-config-thumb] {
  display: none !important;
}
.shop-config__track.mp-slider--enhanced .mp-slider__fill {
  top: 25px;
  height: 18px;
}
.shop-config__track.mp-slider--enhanced .mp-slider__thumb {
  top: 25px;
}

/* ============================================================
   PHASE 3: deep links below the order summary card.
   Surface the Bulk pricing and Custom pages that no longer live
   in the Shop sub-tab nav.
   ============================================================ */
.shop-config__deep-links {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.shop-config__deep-links a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.shop-config__deep-links a:hover {
  color: var(--mp-ink);
}
@media (max-width: 760px) {
  .shop-config__deep-links { margin-top: 14px; }
  .shop-config__deep-links a { font-size: 11px; letter-spacing: 0.12em; }
}

/* ============================================================
   PHASE 3.1: /shop landing reorder
   New child order inside .shop-config__slider-card is:
     1. track-wrap   (the slider)
     2. input-row    (minus / number / plus)
     3. event-chip   (PERFECT FOR, the active sub-tab's pack)
     4. bignum-row   (big quantity + "people")
     5. stat-row     (Total Kit / Savings / Tier)
   The event chip gets an extra top margin to signal "configuration
   feedback section starts here" after the immediate controls.
   ============================================================ */
.shop-config__slider-card .shop-config__event-chip {
  margin-top: 12px; /* total visual gap above ~32px (22px base gap + 10px) */
}
@media (max-width: 760px) {
  .shop-config__slider-card .shop-config__event-chip {
    margin-top: 8px;
  }
}


/* ============================================================
   SHOP CONFIG, twinned to the homepage .price-slider.
   One dark teal focal card on the light shop page. One set of
   numbers, one buy action, qty -> price-per-mullet and the
   savings figure are the heroes (both in mint, linked by color).
   These rules sit AFTER the existing .shop-config block, so they
   win on specificity for the shared hooks they re-skin (event
   chip, track, ticks, zones, input row, swatch, enhanced fill/
   thumb). The old .shop-config__summary, __bignum-row, __stat-row,
   __cta(legacy) and their responsive rules are now dead markup
   and can be deleted in a later cleanup.
   ============================================================ */

/* homepage card proportions, centered single column */
.shop-config .shop-config__wrap {
  max-width: 760px;
  display: block;
}

/* The focal card, same glassy dark treatment as .price-slider */
.shop-config .shop-config--hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    var(--teal-deep);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 700px) { .shop-config .shop-config--hero { padding: 24px 18px; } }

/* ----- event chip: one calm centered line on dark ----- */
.shop-config--hero .shop-config__event-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 6px 10px;
  padding: 0;
  background: transparent;
  border: 0;
  margin-bottom: 8px;
}
.shop-config--hero .shop-config__event-bar {
  width: 24px; height: 3px; align-self: center; flex-shrink: 0;
  border-radius: 2px;
  background: var(--mp-event-color);
}
.shop-config--hero .shop-config__event-label,
.shop-config--hero .shop-config__event-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--mp-event-color) 50%, white);
}
.shop-config--hero .shop-config__event-sub {
  flex-basis: 100%;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px; line-height: 1.3;
  color: rgba(255,255,255,0.6);
}

/* ----- big qty -> price-per-mullet display (twins .big-display) ----- */
.shop-config--hero .shop-config__display {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  text-align: center;
  margin: 4px 0 12px;
}
@media (max-width: 560px) {
  .shop-config--hero .shop-config__display { grid-template-columns: 1fr; gap: 6px; }
  .shop-config--hero .shop-config__display-arrow { display: none; }
}
.shop-config--hero .shop-config__display-block {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0;
}
.shop-config--hero .shop-config__display-num {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500; line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease-out;
}
/* qty rides the live accent, lifted toward white so it clears
   contrast on teal across all five category colors (the wedding
   green #0F6F50 fails as raw fill on teal). */
.shop-config--hero .shop-config__display-num--qty {
  font-size: clamp(60px, 11vw, 104px);
  color: color-mix(in srgb, var(--mp-event-color) 55%, white);
}
/* price-per-mullet in mint, the same mint as the savings figure */
.shop-config--hero .shop-config__display-num--each {
  font-size: clamp(38px, 7.5vw, 72px);
  color: var(--splash-mint);
  white-space: nowrap;
}
.shop-config--hero .shop-config__display-unit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.shop-config--hero .shop-config__display-arrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px; color: rgba(255,255,255,0.25);
}

/* ----- track recolored for the dark card -----
   The shop track is progressively enhanced (enhanceSlider injects
   .mp-slider__fill / .mp-slider__thumb), so recolor BOTH the
   bespoke fallback and the injected elements. */
.shop-config--hero .shop-config__zones { background: rgba(255,255,255,0.07); }
.shop-config--hero .shop-config__thumb,
.shop-config--hero .shop-config__track.mp-slider--enhanced .mp-slider__thumb {
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.shop-config--hero .shop-config__tick-price { color: rgba(255,255,255,0.55); }
.shop-config--hero .shop-config__ticks .shop-config__tick { color: rgba(255,255,255,0.5); }
.shop-config--hero .shop-config__tick-mark { background: rgba(255,255,255,0.3); }
.shop-config--hero .shop-config__tick--adjacent .shop-config__tick-name { color: rgba(255,255,255,0.7); }

/* ----- number stepper on dark ----- */
.shop-config--hero .shop-config__input-row { margin: 4px 0 8px; }
.shop-config--hero .shop-config__btn {
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}
.shop-config--hero .shop-config__btn:hover {
  background: var(--white);
  color: var(--teal-deep);
}
.shop-config--hero .shop-config__input {
  border-color: rgba(255,255,255,0.2);
  color: var(--teal-deep);
  background: var(--white);
}

/* ----- three-stat totals row (twins .totals-row) ----- */
.shop-config--hero .shop-config__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
  padding: 18px;
  margin: 8px 0 20px;
}
.shop-config--hero .shop-config__total {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  border-right: 0.5px solid rgba(255,255,255,0.1);
  padding: 4px 6px;
}
.shop-config--hero .shop-config__total:last-child { border-right: none; }
.shop-config--hero .shop-config__total-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.shop-config--hero .shop-config__total-val {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 26px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--white);
  display: flex; align-items: center; gap: 8px;
}
.shop-config--hero .shop-config__total-val--win { color: var(--splash-mint); }
.shop-config--hero .shop-config__total-val--tier {
  font-style: italic;
  font-size: 19px;
  color: color-mix(in srgb, var(--mp-event-color) 55%, white);
}
.shop-config--hero .shop-config__tier-swatch {
  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
}
.shop-config--hero .shop-config__total-sub {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic; font-size: 12px;
  color: rgba(255,255,255,0.5);
}
/* the retail anchor under the savings figure (grafted from B) */
.shop-config--hero .shop-config__total-anchor {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic; font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.shop-config--hero .shop-config__strike {
  text-decoration: line-through;
  text-decoration-color: var(--pink-hot, #D4537E);
  text-decoration-thickness: 2px;
  font-style: normal;
  color: rgba(255,255,255,0.85);
}

/* ----- one pink CTA (the buy action color) -----
   --pink-hot is only ever defined with a fallback in this
   codebase, so the fallback is required here too. */
.shop-config--hero .shop-config__cta--hero {
  display: inline-flex; justify-content: center; align-items: center;
  gap: 10px; width: 100%; max-width: none;
  margin-top: 0;
  padding: 18px 28px;
  border-radius: 999px;
  background: var(--pink-hot, #D4537E);
  color: var(--white);
  text-decoration: none;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700; font-size: clamp(16px, 4vw, 18px);
  box-shadow: 0 14px 28px -12px rgba(212,83,126,0.6);
  transition: background 0.2s ease-out, transform 0.1s ease, box-shadow 0.2s ease-out;
}
.shop-config--hero .shop-config__cta--hero:hover {
  background: color-mix(in srgb, var(--pink-hot, #D4537E) 88%, black);
  transform: translateY(-1px);
  box-shadow: 0 20px 38px -12px rgba(212,83,126,0.72);
}
.shop-config--hero .shop-config__cta--hero:active { transform: translateY(0); }
.shop-config--hero .shop-config__cta--hero:focus-visible {
  outline: 3px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
}

/* ----- nudge line (twins .price-slider .nudge) ----- */
.shop-config--hero .shop-config__nudge {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin: 14px 0 0;
}

/* ----- hidden JS mirror so data-summary-* hooks still exist ----- */
.shop-config--hero .shop-config__sr-mirror { display: none; }

/* ----- mobile, 380px first ----- */
@media (max-width: 560px) {
  .shop-config--hero .shop-config__totals {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 16px;
  }
  .shop-config--hero .shop-config__total {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
    border-right: none;
    border-bottom: 0.5px solid rgba(255,255,255,0.1);
    padding: 13px 0;
    gap: 4px 12px;
  }
  .shop-config--hero .shop-config__total:last-child { border-bottom: none; }
  /* the caption rows span full width under their value */
  .shop-config--hero .shop-config__total-anchor { flex-basis: 100%; }
  /* hide the tier range so the tier cell never grows a third line */
  .shop-config--hero .shop-config__total-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-config--hero .shop-config__display-num,
  .shop-config--hero .shop-config__cta--hero { transition: none !important; }
}


/* ============================================================
   SHOP PACKS, SPLIT WIDE CARD (final). Append at the very END of
   concept-styles.css, AFTER the existing .shop-config--hero block
   (ends ~line 8144) so source order wins ties. Scoped to
   .shop-config--split / .shop-tab--packs so nothing else moves.
   Two specificity notes that MUST be honored or rules silently lose:
   (1) The inline <style id="mp-shop-redesign"> in index.html <head>
       loads AFTER this stylesheet and sets
       .shop-tab--packs .shop-config{padding-top:16px}. To beat it,
       the override below carries the [data-shop-config] attribute,
       raising specificity to (0,2,1) so it wins on its own merit.
   (2) The base flex column is .shop-config .shop-config--hero
       (0,2,0); the grid override below is .shop-config .shop-config--split
       (0,2,0) but appears LATER, so it wins the tie. Good.
   ============================================================ */

/* ----- the separate light hero header is gone (deleted in markup);
   belt-and-suspenders in case a cached copy renders ----- */
.shop-tab--packs .shop-packs-hero { display: none !important; }

/* ----- FOLD FIX #1 (the big one): kill the tick-label row -----
   .shop-config__ticks is 56px tall + 6px margin (concept-styles.css
   line 7242) and is ALWAYS populated by buildTicks() (index.html
   6065), so the real track footprint is ~140px, not 50px. The zone
   bands over the track already encode the tiers and the Tier stat
   names the active one, so the labels are redundant. Hiding them is
   the single highest-leverage fold fix. Also trim the track-wrap's
   28px bottom margin. buildTicks still runs harmlessly; the row is
   just collapsed, so no JS breaks. */
.shop-config--split .shop-config__ticks { display: none; }
.shop-config--split .shop-config__track-wrap { margin: 2px 0 6px; padding-top: 2px; }

/* ----- FOLD FIX #2: tighten the section top pad past the inline
   redesign rule. The [data-shop-config] attribute raises specificity
   above .shop-tab--packs .shop-config from the inline <style>. ----- */
.shop-tab--packs .shop-config[data-shop-config] { padding-top: 12px; margin-top: 0; }

/* ----- go wide: override the 760px wrap clamp ----- */
.shop-config .shop-config__wrap--split {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: block;            /* was the base block; keep explicit */
}

/* ----- the card: a two-column grid, not a tall stack ----- */
.shop-config .shop-config--split {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  align-items: stretch;      /* rail matches the left column height, no float */
  gap: 36px;
  padding: 26px 32px;        /* was 40px 36px */
  border-radius: 22px;
}
.shop-config--split .shop-config__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.shop-config--split .shop-config__col--main {
  gap: 10px;                 /* tightened from 14px per JUDGE 1 fold note */
  justify-content: flex-start;
}
.shop-config--split .shop-config__col--rail {
  gap: 12px;
  justify-content: flex-start;
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,0.1);   /* the hairline split */
}

/* ----- headline inside the green ----- */
.shop-config--split .shop-config__lead { margin: 0; }
.shop-config--split .shop-config__lead-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-light, #ED93B1);
  margin-bottom: 8px;
}
.shop-config--split .shop-config__lead-h1 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);   /* capped per JUDGE 1 to buy fold */
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--white);
}
/* GRAFT (from C): the em tracks the LIVE category accent, not a static
   pink. --mp-event-color is set on [data-shop-config] every render
   (index.html:6171), and the headline is inside that element, so it
   cascades. color-mix lifts it toward white so it clears contrast on
   teal across all five category colors. */
.shop-config--split .shop-config__lead-h1 em {
  font-style: italic;
  color: color-mix(in srgb, var(--mp-event-color, #D4537E) 62%, white);
}

/* ----- display: tighter, left-aligned in the main column ----- */
.shop-config--split .shop-config__display {
  margin: 0;
  justify-items: start;
  text-align: left;
  gap: 14px;
}
.shop-config--split .shop-config__display-block { align-items: flex-start; }
/* override the base clamp(60px,11vw,104px) which is the original
   height sink */
.shop-config--split .shop-config__display-num--qty { font-size: clamp(50px, 5.4vw, 74px); }
.shop-config--split .shop-config__display-num--each { font-size: clamp(34px, 4.2vw, 54px); }

/* ----- GRAFT (from A and C): cap the draggable track so going wide
   does not make the thumb travel unergonomic. The track lives in the
   left column (~600px); cap it at 560 and let the headline/display
   fill the rest. Do NOT set overflow:hidden on the wrap, the injected
   .mp-slider__thumb travels outside the track box. ----- */
.shop-config--split .shop-config__track-wrap { max-width: 560px; width: 100%; }

.shop-config--split .shop-config__input-row { margin: 2px 0 0; max-width: 240px; }

/* ----- right rail: chip ----- */
.shop-config--split .shop-config__event-chip {
  margin-bottom: 0;
  justify-content: flex-start;
  text-align: left;
}
/* trim the italic sub line on desktop to keep the card short; it
   comes back on mobile where vertical room is free (see media query) */
.shop-config--split .shop-config__event-sub { display: none; }

/* ----- totals: 3-up row -> vertical list, savings FIRST ----- */
.shop-config--split .shop-config__totals {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 12px 16px;
  margin: 0;
}
.shop-config--split .shop-config__total {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
  border-right: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.1);
  padding: 9px 0;
  gap: 2px 12px;
}
.shop-config--split .shop-config__total:last-child { border-bottom: none; }
.shop-config--split .shop-config__total-label { align-self: center; }
/* GRAFT (from B): the savings cell is the commercial hook, so it leads
   the stack and runs loud; the struck $25 anchor floats on its own line. */
.shop-config--split .shop-config__total--win { order: -1; padding-top: 2px; }
.shop-config--split .shop-config__total-val { font-size: 22px; }
.shop-config--split .shop-config__total--win .shop-config__total-val--win { font-size: 30px; }
.shop-config--split .shop-config__total-val--tier { font-size: 17px; }
.shop-config--split .shop-config__total-anchor { flex-basis: 100%; margin-top: 2px; }
.shop-config--split .shop-config__total-sub { flex-basis: 100%; }

/* ----- CTA + nudge in the rail ----- */
.shop-config--split .shop-config__cta--hero { margin-top: 6px; }
.shop-config--split .shop-config__nudge { margin: 8px 0 0; text-align: left; font-size: 11px; line-height: 1.35; }

/* ============================================================
   COMPACT PRESETS LABEL (collapse .shop-cat-head to one line).
   Markup + router-driven copy untouched; only the layout collapses.
   The [data-shop-config] sibling specificity trick is not needed here,
   the inline redesign block only pads .shop-config, not .shop-cat-head,
   except .shop-tab--packs .shop-cat-head{order:2} which we keep.
   The inline block does NOT set shop-cat-head padding, so these win. ============================================================ */
.shop-tab--packs .shop-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px;          /* was 36px 24px 12px */
  text-align: center;
}
.shop-tab--packs .shop-cat-head__eyebrow { margin-bottom: 0; }
.shop-tab--packs .shop-cat-head__h2 {
  font-size: clamp(18px, 2vw, 22px);     /* was clamp(26px,3vw,36px) */
  line-height: 1.2;
}
.shop-tab--packs .shop-cat-head__hint { display: none; }   /* reappears on mobile below */

/* ============================================================
   SHORT PACK ROW (210px instead of 380px).
   These beat the base .pack-card--grid{height:380px} (0,1,0) because
   .shop-tab--packs .pack-card--grid is (0,2,0) and appears later.
   ============================================================ */
.shop-tab--packs .shop-cat {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 24px 40px;    /* was 18px 24px 64px */
}
.shop-tab--packs .pack-card--grid { height: 210px; }
.shop-tab--packs .pack-card--grid .pack-card__body { padding: 16px 16px; justify-content: flex-end; gap: 4px; }
.shop-tab--packs .pack-card--grid .pack-card__band { font-size: 9px; padding: 3px 8px; margin-bottom: 2px; }
.shop-tab--packs .pack-card--grid .pack-card__name { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.08; }
/* clamp the pitch to 2 lines so the short card stays clean */
.shop-tab--packs .pack-card--grid .pack-card__tag {
  font-size: 12px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the live qty/kit/savings block and the "Buy this pack" link are
   too tall for a 210px card; hide them so the short preset reads as a
   tap-target. JS still updates them (display:none nodes stay in DOM),
   and the slider's own CTA is the buy action, so nothing is lost. */
.shop-tab--packs .pack-card--grid .pack-card__live,
.shop-tab--packs .pack-card--grid .pack-card__buy { display: none; }

/* ----- GRAFT (from C): the lit card reads at the short height -----
   keep the pink ring but gentler lift so it does not clip neighbours,
   and FORCE-SURFACE the existing Recommended pill (JS already toggles
   its [hidden] via applyRecommendation at index.html:6132, this just
   makes the shown state legible at 210px). ----- */
.shop-tab--packs .pack-card--grid.is-recommended {
  outline-width: 3px;
  transform: translateY(-3px) scale(1.01);
}
.shop-tab--packs .pack-card--grid.is-recommended [data-card-recommended] {
  display: inline-block !important;
}
/* is-ideal piles a bigger lift on the base rule; tame it for the short row */
.shop-tab--packs .pack-card--grid.is-ideal { transform: translateY(-5px) scale(1.02); }

/* ============================================================
   MOBILE: single clean column (380 to 760px).
   ============================================================ */
@media (max-width: 760px) {
  .shop-config .shop-config__wrap--split { padding: 0 16px; }

  /* card back to a vertical stack like the homepage slider */
  .shop-config .shop-config--split {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
  }
  .shop-config--split .shop-config__col--main { gap: 12px; }
  .shop-config--split .shop-config__col--rail {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 16px;
  }

  /* headline + display recenter, track spans full width again */
  .shop-config--split .shop-config__lead { text-align: center; }
  .shop-config--split .shop-config__display { justify-items: center; text-align: center; }
  .shop-config--split .shop-config__display-block { align-items: center; }
  .shop-config--split .shop-config__track-wrap { max-width: none; }
  .shop-config--split .shop-config__input-row { max-width: none; margin: 2px auto 0; }
  .shop-config--split .shop-config__nudge { text-align: center; }
  /* event sub line comes back, there is room to stack */
  .shop-config--split .shop-config__event-sub { display: block; }
  .shop-config--split .shop-config__event-chip { justify-content: center; text-align: center; }

  /* presets label can wrap, the hint paragraph reappears */
  .shop-tab--packs .shop-cat-head { flex-direction: column; padding: 14px 18px 4px; }
  .shop-tab--packs .shop-cat-head__hint { display: block; margin: 6px auto 0; max-width: 520px; }

  /* pack row to one column (inherits the existing 720px 1fr rule),
     cards a touch taller for touch legibility */
  .shop-tab--packs .shop-cat { padding: 10px 18px 40px; }
  .shop-tab--packs .shop-cat__grid { grid-template-columns: 1fr; gap: 14px; }
  .shop-tab--packs .pack-card--grid { height: 240px; }
}

/* 761 to 1100px tablet: keep the 2-col card but run the pack row 3-up
   so cards never get too thin (the base 1100px rule already sets 3-up,
   this just guarantees the card stays split in that band). */
@media (max-width: 1100px) and (min-width: 761px) {
  .shop-config .shop-config--split { grid-template-columns: 1.4fr 1fr; gap: 28px; }
  .shop-config--split .shop-config__col--rail { padding-left: 24px; }
}

@media (max-width: 560px) {
  .shop-config--split .shop-config__display { grid-template-columns: 1fr; gap: 6px; }
  .shop-config--split .shop-config__display-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-tab--packs .pack-card--grid.is-recommended,
  .shop-tab--packs .pack-card--grid.is-ideal { transform: none; }
}


/* ============================================================
   ABOUT: the reading sits on an elevated paper sheet floating over
   the body grid. Grid shows above it (under the hero), below it, and
   in the side margins, so it reads as a printed page laid on graph
   paper while the text lifts cleanly off the grid. Cool neutral
   surface (no warm cream, per palette).
   ============================================================ */
.about-sheet {
  position: relative;
  max-width: 1080px;
  margin: clamp(20px, 3vh, 44px) auto clamp(56px, 9vh, 110px);
  background: #F4F4F0;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 24px;
  box-shadow:
    0 34px 80px -30px rgba(4,52,44,0.24),
    0 6px 18px -10px rgba(4,52,44,0.10);
  padding: clamp(28px, 4vw, 72px) clamp(20px, 4vw, 64px) clamp(40px, 6vw, 88px);
}
.about-sheet .about-manifesto { padding: 0; }
.about-sheet .about-manifesto__wrap { max-width: 960px; }
@media (max-width: 760px) {
  .about-sheet { margin: 14px 10px 44px; border-radius: 18px; padding: 24px 16px 36px; }
}


/* ============================================================
   ABOUT v3 - color-blocked section tiles + popping quote cards.
   Each manifesto section is its own elevated white tile floating on
   the grid, led by a filled accent-color banner (the oomph). Quotes
   become vivid tinted cards with a big quote glyph so the eye lands
   on them. Body prose stays high-contrast and roomy for real reading.
   Loads after the v2 about rules so it wins on source order.
   ============================================================ */

/* outer sheet becomes a plain centered container; the tiles are the
   surfaces now, with the grid showing between and around them */
.about-sheet {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: 1080px;
  margin: clamp(16px, 2.5vh, 32px) auto clamp(48px, 8vh, 96px);
}
.about-sheet .about-manifesto__wrap { max-width: 1080px; }

/* ---- per-section tile ---- */
.about-section {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 22px;
  box-shadow:
    0 26px 64px -30px rgba(4,52,44,0.26),
    0 4px 14px -8px rgba(4,52,44,0.10);
  margin: 0 0 clamp(28px, 5vh, 60px);   /* grid gap between tiles as you scroll */
  overflow: hidden;                      /* clip the colored banner to the radius */
}
.about-section:last-of-type { margin-bottom: 0; }

/* ---- filled colored banner: the section masthead, big color oomph ---- */
.about-section .about-banner {
  max-width: none;
  margin: 0;
  padding: clamp(26px,3.5vw,44px) clamp(24px,4vw,56px) clamp(22px,3vw,36px);
  background:
    radial-gradient(140% 160% at 100% 0%, rgba(255,255,255,0.20), rgba(255,255,255,0) 55%),
    var(--mp-c);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* giant numeral becomes a translucent watermark on the color band */
.about-section .about-banner__numeral {
  position: absolute;
  top: 50%; right: clamp(14px,2.5vw,40px);
  transform: translateY(-50%);
  margin: 0;
  font-size: clamp(110px, 17vw, 210px);
  line-height: 1;
  color: rgba(255,255,255,0.20);
  pointer-events: none;
  z-index: 0;
}
.about-section .about-banner__eyebrow {
  position: relative; z-index: 1;
  color: rgba(255,255,255,0.88);
  margin-bottom: 8px;
}
.about-section .about-banner__h2 {
  position: relative; z-index: 1;
  color: #fff;
  max-width: 760px;
}
.about-section .about-banner__h2 em {
  color: #fff;
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.55);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* ---- tile body: the rows ---- */
.about-section .about-row {
  margin: 0;
  padding: clamp(26px,3vw,44px) clamp(24px,4vw,56px);
  align-items: center;
}
.about-section .about-row + .about-row { border-top: 1px solid rgba(0,0,0,0.07); }

/* ---- prose: bigger, roomier, high contrast (legibility) ---- */
.about-section .about-row__prose p {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.78;
  color: var(--mp-ink);
}

/* ---- QUOTE as a vivid tinted card that pops ---- */
.about-section .about-quote {
  position: relative;
  margin: 0;
  padding: clamp(22px,2.6vw,30px) clamp(22px,2.4vw,30px) clamp(20px,2.4vw,26px) clamp(42px,4vw,58px);
  border: 0;
  border-left: 5px solid var(--mp-c);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(var(--mp-c-rgb),0.16), rgba(var(--mp-c-rgb),0.09));
  box-shadow: 0 10px 26px -18px rgba(var(--mp-c-rgb),0.55);
}
.about-section .about-quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(2px,1vw,12px); left: clamp(10px,1.2vw,16px);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  font-size: clamp(54px,6vw,84px);
  line-height: 1;
  color: var(--mp-c);
  opacity: 0.34;
  pointer-events: none;
}
.about-section .about-quote__latin {
  position: relative;
  font-size: clamp(13px,1vw,15px);
  line-height: 1.4;
  color: color-mix(in srgb, var(--mp-c) 64%, #000);
  margin: 0 0 7px;
  opacity: 0.95;
}
.about-section .about-quote__body {
  position: relative;
  font-size: clamp(19px,1.7vw,26px);
  line-height: 1.38;
  color: var(--mp-ink);
  margin: 0 0 12px;
}
.about-section .about-quote__attr {
  color: color-mix(in srgb, var(--mp-c) 72%, #000);
  letter-spacing: 0.08em;
}
.about-section .about-quote__attr cite { font-style: normal; }

/* ---- MINI DICT: tinted card matching the section ---- */
.about-section .about-mini-dict {
  background: linear-gradient(180deg, rgba(var(--mp-c-rgb),0.12), rgba(var(--mp-c-rgb),0.06));
  border: 0;
  border-left: 5px solid var(--mp-c);
  border-radius: 14px;
}
.about-section .about-mini-dict__pos { color: color-mix(in srgb, var(--mp-c) 70%, #000); opacity: 0.8; }
.about-section .about-mini-dict__word { color: var(--mp-ink); }

/* ---- STAT: tinted card, giant colored number ---- */
.about-section .about-stat {
  background: linear-gradient(180deg, rgba(var(--mp-c-rgb),0.16), rgba(var(--mp-c-rgb),0.08));
  border-left: 5px solid var(--mp-c);
  border-radius: 14px;
  padding: clamp(20px,2.4vw,30px) clamp(22px,2.4vw,30px);
}
.about-section .about-stat__num {
  font-size: clamp(72px, 9vw, 132px);
  color: var(--mp-c);
}
.about-section .about-stat__label { color: color-mix(in srgb, var(--mp-c) 60%, #000); opacity: 0.9; }

/* ---- mobile ---- */
@media (max-width: 760px) {
  .about-sheet { max-width: none; margin: 12px 10px 44px; }
  .about-section { border-radius: 16px; margin-bottom: 22px; }
  .about-section .about-banner { padding: 22px 18px 18px; }
  .about-section .about-banner__numeral { font-size: 96px; right: 8px; }
  .about-section .about-row { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; }
  .about-section .about-quote__body { font-size: 19px; }
  .about-section .about-stat__num { font-size: 64px; }
}


/* ============================================================
   ABOUT v4 - PULL-QUOTE MAXIMALISM. Loads after v3 so it wins.
   The quote becomes the loudest object in the tile: a solid
   (slightly deepened) accent fill, white display serif at 30 to
   44px, a giant white quotation glyph anchoring the corner, and a
   mint attribution. Prose gets a big colored drop cap and a bolder
   lead first line so paragraphs feel deliberate. Scale contrast
   carries the energy: tiny mono labels against huge serif. Bodies
   stay dark on light, quote text stays white on a deep saturated
   fill, so reading never pays for the oomph.
   ============================================================ */

/* A reusable deepened version of each section color, mixed toward the
   brand teal-deep so white text clears comfortable contrast on every
   one of the four fills (teal was the weak one at full saturation). */
.about-section { --mp-c-fill: color-mix(in srgb, var(--mp-c) 84%, #04342C); }

/* ---------- QUOTE: the stop-and-read moment ---------- */
.about-section .about-quote {
  padding:
    clamp(34px,4.2vw,52px)
    clamp(26px,3vw,40px)
    clamp(26px,3vw,38px)
    clamp(30px,3.4vw,46px);
  border: 0;
  border-left: 0;
  border-radius: 18px;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%),
    linear-gradient(165deg,
      color-mix(in srgb, var(--mp-c-fill) 100%, #fff 6%),
      var(--mp-c-fill));
  box-shadow:
    0 28px 60px -34px rgba(var(--mp-c-rgb),0.85),
    0 6px 18px -12px rgba(var(--mp-c-rgb),0.45);
}

/* giant quotation mark as a real graphic anchor, white, top-left,
   sized so it reads as a design element not a typo */
.about-section .about-quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(-14px,-0.4vw,-6px);
  left: clamp(14px,1.6vw,22px);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(120px,15vw,210px);
  line-height: 1;
  color: #fff;
  opacity: 0.16;
  pointer-events: none;
}

/* the english pull-quote: huge white display serif */
.about-section .about-quote__body {
  position: relative;
  z-index: 1;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px,3.2vw,42px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0 0 clamp(16px,1.8vw,22px);
  text-wrap: balance;
}

/* the latin line: small, white, sits above the body as a quiet label */
.about-section .about-quote__latin {
  position: relative;
  z-index: 1;
  font-size: clamp(13px,1vw,15px);
  line-height: 1.4;
  color: rgba(255,255,255,0.82);
  opacity: 1;
  margin: 0 0 clamp(10px,1.2vw,14px);
}

/* attribution: mint, bolder, a tiny mono kicker that pops off the fill */
.about-section .about-quote__attr {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5ch;
  font-size: clamp(11px,0.85vw,12.5px);
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--mint, #22D3A5);
}
.about-section .about-quote__attr cite {
  font-style: italic;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

/* ---------- PROSE: drop cap + confident lead ---------- */
/* Drop cap on the FIRST paragraph of each section. The hook is a
   single class, .about-row__prose--lead, on the first prose block of
   each of the four sections (4 spots). See markupNotes for the exact
   find/replace. The :first-letter rule below is what makes it land. */
.about-section .about-row__prose--lead p:first-of-type::first-letter {
  float: left;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(58px,6.6vw,92px);
  line-height: 0.78;
  color: var(--mp-c);
  margin: 0.04em 0.10em 0 0;
  padding: 0;
}
/* bolder, slightly larger lead first line so the paragraph opens with
   intent (pure CSS, no per-word markup) */
.about-section .about-row__prose--lead p:first-of-type::first-line {
  font-weight: 600;
}

/* prose overall: a touch bigger and roomier than v3 for presence */
.about-section .about-row__prose p {
  font-size: clamp(17px,1.35vw,19.5px);
  line-height: 1.8;
  letter-spacing: 0.001em;
  max-width: 40ch;          /* tighter measure reads more deliberate */
  color: var(--mp-ink);
}
.about-section .about-row__prose p + p { margin-top: clamp(14px,1.4vw,18px); }

/* ---------- BANNER: heavier, bigger, more contrast ---------- */
.about-section .about-banner {
  padding-top: clamp(30px,3.8vw,52px);
  padding-bottom: clamp(26px,3.2vw,42px);
}
.about-section .about-banner__numeral {
  font-size: clamp(130px,19vw,250px);
  color: rgba(255,255,255,0.22);
}
.about-section .about-banner__eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.26em;
  color: rgba(255,255,255,0.92);
}
.about-section .about-banner__h2 {
  font-weight: 600;
  font-size: clamp(30px,3.9vw,54px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.about-section .about-banner__h2 em {
  text-decoration-color: var(--mint, #22D3A5);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* ---------- MINI DICT + STAT: nudge to match the new energy ---------- */
.about-section .about-stat__num {
  font-size: clamp(84px,10vw,150px);
  line-height: 0.86;
  letter-spacing: -0.03em;
}
.about-section .about-mini-dict { border-left-width: 6px; }
.about-section .about-stat { border-left-width: 6px; }

/* ---------- MOBILE (380px first) ---------- */
@media (max-width: 760px) {
  .about-section .about-quote {
    padding: 30px 20px 22px 22px;
    border-radius: 14px;
  }
  .about-section .about-quote::before {
    font-size: 104px;
    top: -8px;
    left: 10px;
  }
  .about-section .about-quote__body { font-size: 24px; line-height: 1.22; }
  .about-section .about-quote__latin { font-size: 13px; }
  .about-section .about-quote__attr { font-size: 11px; }

  .about-section .about-row__prose p { max-width: none; font-size: 17px; line-height: 1.75; }
  .about-section .about-row__prose--lead p:first-of-type::first-letter {
    font-size: 56px;
    line-height: 0.8;
    margin: 0.05em 0.09em 0 0;
  }

  .about-section .about-banner__numeral { font-size: 100px; }
  .about-section .about-banner__h2 { font-size: 28px; line-height: 1.12; }
  .about-section .about-stat__num { font-size: 70px; }
}


/* ============================================================
   ABOUT v4-GRAFT - pushes PULL-QUOTE MAXIMALISM harder and fixes
   the one verified weak spot. Loads AFTER the ABOUT v4 block so it
   wins on source order. Keep the existing v4; append this whole
   block at the very end of concept-styles.css.

   What it does:
   - Quote attribution flips from mint (fails small-text contrast on
     3 of 4 fills: pink 2.49, teal 2.16, blue 2.29, purple 3.92) to
     SOLID white (clears 4.15 to 7.53 on all four). Mint moves to a
     decorative hairline rule above the attribution: a "signature"
     gesture and a fourth brand color, with no text-contrast cost
     because a rule is decorative.
   - A thin mint inner keyline next to the glyph adds graphic
     structure and brand color without weakening the white read.
   - Stat label gets the same colored hairline so quote + stat share
     one signature system.
   - Banner eyebrow gets a mint hairline (masthead detail) and the
     scale jump widens (bigger numeral, more air under the headline).
   - A faint full-tile color wash makes each section feel themed;
     ink stays ~17.7:1, so reading is untouched.
   Verified contrast (real tokens): white quote body on the deepened
   fill = 4.78 / 7.53 / 4.15 / 4.40; white attribution on fill =
   4.78 / 7.53 / 4.15 / 4.40; ink on the .045 wash = ~17.7:1.
   ============================================================ */

/* ---- faint full-tile color wash (grafted from B, the one safe idea):
   each section reads as a color world, ink keeps ~17.7:1 ---- */
.about-section {
  background:
    linear-gradient(180deg, rgba(var(--mp-c-rgb),0.045), rgba(var(--mp-c-rgb),0.045)),
    var(--white);
}

/* ---- QUOTE: bigger, plus a thin mint inner keyline by the glyph ---- */
.about-section .about-quote {
  /* a touch more top room so the giant glyph and keyline breathe */
  padding-top: clamp(40px,4.6vw,58px);
}
/* thin mint keyline running down the left inside the card, beside the
   glyph: graphic structure + a 4th brand color, decorative only */
.about-section .about-quote::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: clamp(14px,1.6vw,22px);
  top: clamp(54px,5vw,72px);
  bottom: clamp(24px,2.8vw,34px);
  width: 3px;
  border-radius: 3px;
  background: var(--splash-mint, #22D3A5);
  opacity: 0.85;
  pointer-events: none;
}
/* indent the body/attr a little so the keyline sits in its own gutter */
.about-section .about-quote__latin,
.about-section .about-quote__body,
.about-section .about-quote__attr {
  padding-left: clamp(14px,1.6vw,22px);
}

/* the english pull-quote: nudge the ceiling up for more scale oomph */
.about-section .about-quote__body {
  font-size: clamp(27px,3.4vw,46px);
  line-height: 1.16;
}

/* ---- ATTRIBUTION: SOLID white signature on its own mint hairline ----
   (fixes A's mint-on-fill small-text contrast fail; mint now lives in
   the rule, which is decorative, so no text minimum applies) */
.about-section .about-quote__attr {
  display: block;          /* override inline-flex so the rule spans full */
  margin-top: clamp(16px,1.8vw,22px);
  padding-top: clamp(11px,1.2vw,14px);
  border-top: 2px solid var(--splash-mint, #22D3A5);
  font-size: clamp(11px,0.85vw,12.5px);
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #fff;             /* clears 4.15 to 7.53 on all four fills */
}
.about-section .about-quote__attr cite {
  font-style: italic;
  font-weight: 600;
  color: #fff;             /* full white, not 90%, so teal/blue clear AA */
}

/* ---- PROSE: a little more scale + drop-cap presence ---- */
.about-section .about-row__prose p {
  font-size: clamp(17.5px,1.4vw,20px);
  line-height: 1.82;
}
/* push the drop cap a notch larger and weightier (decorative letter) */
.about-section .about-row__prose--lead p:first-of-type::first-letter {
  font-size: clamp(64px,7vw,100px);
  font-weight: 700;
  line-height: 0.74;
  margin: 0.02em 0.12em 0 0;
}

/* ---- BANNER: wider mono-to-serif jump + a mint masthead hairline ---- */
.about-section .about-banner__eyebrow {
  display: inline-block;
  margin-bottom: clamp(14px,1.6vw,20px);   /* more air before the headline */
  padding-bottom: 8px;
  border-bottom: 2px solid var(--splash-mint, #22D3A5);
}
.about-section .about-banner__numeral {
  font-size: clamp(140px,20vw,270px);       /* bigger watermark = bigger jump */
  color: rgba(255,255,255,0.24);
}
.about-section .about-banner__h2 {
  font-size: clamp(31px,4.1vw,58px);
  line-height: 1.06;
}

/* ---- STAT: match the quote signature system (mint hairline label) ---- */
.about-section .about-stat__label {
  margin-top: clamp(10px,1.1vw,14px);
  padding-top: clamp(10px,1.1vw,13px);
  border-top: 2px solid var(--splash-mint, #22D3A5);
  color: color-mix(in srgb, var(--mp-c) 78%, #000);  /* on white card: 5.0 to 8.9:1 */
  opacity: 1;
}

/* ---- MOBILE (380px first): keep the punch, protect the read ---- */
@media (max-width: 760px) {
  .about-section .about-quote { padding-top: 34px; }
  .about-section .about-quote::after {
    left: 10px; top: 44px; bottom: 20px; width: 2px;
  }
  .about-section .about-quote__latin,
  .about-section .about-quote__body,
  .about-section .about-quote__attr { padding-left: 10px; }
  .about-section .about-quote__body { font-size: 25px; line-height: 1.2; }
  .about-section .about-quote__attr { letter-spacing: 0.12em; }

  .about-section .about-row__prose p { font-size: 17px; line-height: 1.76; max-width: none; }
  .about-section .about-row__prose--lead p:first-of-type::first-letter {
    font-size: 60px; line-height: 0.78; margin: 0.04em 0.1em 0 0;
  }

  .about-section .about-banner__eyebrow { margin-bottom: 12px; padding-bottom: 6px; }
  .about-section .about-banner__numeral { font-size: 104px; }
  .about-section .about-banner__h2 { font-size: 29px; line-height: 1.12; }
}


/* ============================================================
   ABOUT v5 - GRADIENT ACCENTS. Loads AFTER v4-graft so it wins on
   source order. Keep v3, v4, and v4-graft above. Append this whole
   block at the very end of concept-styles.css.

   Goal (Quin's note): the four sections felt too rigidly color
   coordinated, and the body prose felt plain next to the loud banners
   and quotes. So: each section KEEPS its lead identity (banner fill
   and solid quote fill stay the pure theme color), but every THIN
   accent now flows across the whole palette via gradients, and the
   prose gets real life (gradient drop cap, a gradient spine in the
   gutter, a colored end mark). Reading lines stay pure dark ink. Mint
   stays the signature thread (every keyline starts mint, the headline
   underline stays mint).

   Palette (real tokens):
     c1 pink   #E84A6A   c2 purple #5650B0
     c3 teal   #1D9E75   c4 blue   #378ADD   mint #22D3A5
   The four .about-section divs are consecutive siblings inside
   .about-manifesto__wrap and the only .about-section elements, so
   :nth-of-type(1..4) maps to Origin, Diagnosis, Practice, Proof.
   No markup change required.
   ============================================================ */

/* Expose the whole palette inside every section as named slots, so
   accents can pull any hue. --c-lead mirrors the section's own --mp-c
   for readability of the rules below. */
.about-section {
  --c1: #E84A6A;   /* pink   */
  --c2: #5650B0;   /* purple */
  --c3: #1D9E75;   /* teal   */
  --c4: #378ADD;   /* blue   */
  --cm: #22D3A5;   /* mint   */
}

/* Per-section rotation. Each section names a clockwise NEIGHBOR for the
   drop-cap blend and a supporting cast for the other accents, so every
   hue appears within each section and no two sections rotate the same.
   --wash-rgb is the bottom stop of the two-hue tile wash (grafted),
   kept in sync with the cap neighbor so wash and drop cap agree. */
.about-section:nth-of-type(1) {            /* ORIGIN  pink lead  */
  --c-lead: var(--c1);
  --cap-to: var(--c2);                          /* pink to purple */
  --spine-a: var(--c3); --spine-b: var(--c4);   /* teal to blue   */
  --rule-b: var(--c4);                          /* eyebrow cross hue: blue */
  --key-b: var(--c2);                           /* keyline cross hue: purple */
  --wash-rgb: 86, 80, 176;                      /* purple */
}
.about-section:nth-of-type(2) {            /* DIAGNOSIS  purple lead */
  --c-lead: var(--c2);
  --cap-to: var(--c3);                          /* purple to teal */
  --spine-a: var(--c4); --spine-b: var(--c1);   /* blue to pink   */
  --rule-b: var(--c1);                          /* eyebrow cross hue: pink */
  --key-b: var(--c3);                           /* keyline cross hue: teal */
  --wash-rgb: 29, 158, 117;                     /* teal */
}
.about-section:nth-of-type(3) {            /* PRACTICE  teal lead */
  --c-lead: var(--c3);
  --cap-to: var(--c4);                          /* teal to blue  */
  --spine-a: var(--c1); --spine-b: var(--c2);   /* pink to purple */
  --rule-b: var(--c2);                          /* eyebrow cross hue: purple */
  --key-b: var(--c4);                           /* keyline cross hue: blue */
  --wash-rgb: 55, 138, 221;                     /* blue */
}
.about-section:nth-of-type(4) {            /* PROOF  blue lead */
  --c-lead: var(--c4);
  --cap-to: var(--c1);                          /* blue to pink  */
  --spine-a: var(--c3); --spine-b: var(--c2);   /* teal to purple */
  --rule-b: var(--c3);                          /* eyebrow cross hue: teal */
  --key-b: var(--c1);                           /* keyline cross hue: pink */
  --wash-rgb: 232, 74, 106;                     /* pink */
}

/* ---- TWO HUE TILE WASH (grafted from the panel) ----
   Lead color at the top fading into the cap neighbor at the bottom, so
   even the background quietly carries a second hue. Alphas stay tiny so
   ink holds ~17:1. Overrides the flat v4-graft single-hue wash. */
.about-section {
  background:
    linear-gradient(170deg,
      rgba(var(--mp-c-rgb), 0.05) 0%,
      rgba(var(--mp-c-rgb), 0.02) 50%,
      rgba(var(--wash-rgb), 0.045) 100%),
    var(--white);
}

/* ---- LEGIBILITY RE-ASSERT (judge graft) ----
   Body reading lines can never be inherited away from dark ink. */
.about-section .about-row__prose p { color: var(--mp-ink); }

/* ---------- DROP CAP: two color gradient text fill ----------
   Was a flat single color in v4-graft. Now a vivid theme to clockwise
   neighbor gradient, clipped to the letter. Decorative glyph, so no
   text-contrast minimum. Solid lead fallback if clip is unsupported. */
.about-section .about-row__prose--lead p:first-of-type::first-letter {
  color: var(--c-lead);                  /* fallback if clip unsupported */
  background-image: linear-gradient(135deg, var(--c-lead) 8%, var(--cap-to) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- NEW: gradient spine in the prose gutter ----------
   A thin vertical bar the height of each prose block, in a two color
   SECONDARY gradient. Gives the plain prose an editorial edge and
   pulls two cross hues in without tinting any text. */
.about-section .about-row__prose {
  position: relative;
  padding-left: clamp(16px, 1.8vw, 24px);
}
.about-section .about-row__prose::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--spine-a), var(--spine-b));
  opacity: 0.9;
  pointer-events: none;
}
/* Lead prose blocks carry the drop cap, so start the spine a touch
   lower and make it a hair bolder to balance the big letter. The cap
   floats inside the left padding, so left:0 clears it. */
.about-section .about-row__prose--lead::before {
  top: 0.55em;
  width: 4px;
}

/* ---------- NEW: colored end-mark after each prose block ----------
   A small filled lozenge in the lead-into-neighbor gradient closes the
   plain text with intent. Lives on the prose container, after the copy. */
.about-section .about-row__prose::after {
  content: "";
  display: block;
  width: 26px;
  height: 7px;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--c-lead), var(--cap-to));
  opacity: 0.95;
}

/* ---------- HEADLINE UNDERLINE: keep the native mint signature ----------
   Judge fix: do NOT replace the underline with an inline background
   band (it mispaints on wrapped ems and its lead-color half vanishes on
   the section's own fill). Keep the native mint underline from v4 as the
   constant signature thread. White em text on the lead fill is untouched. */
.about-section .about-banner__h2 em {
  text-decoration: underline;
  text-decoration-color: var(--cm);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* ---------- BANNER EYEBROW RULE: mint into a cross hue ----------
   v4-graft gave it a flat 2px mint border-bottom. Make it a gradient
   rule (mint into a supporting hue) via a background image so the rule
   itself blends. Judge fix: both stops are NON-fill hues (mint + a
   cross color) so the rule reads on every one of the four fills. */
.about-section .about-banner__eyebrow {
  border-bottom: 0;                      /* remove the flat mint rule */
  padding-bottom: 8px;
  background-image: linear-gradient(90deg,
    var(--cm) 0%, var(--rule-b) 70%, rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}

/* ---------- QUOTE KEYLINE: mint into a cross hue ----------
   v4-graft drew a solid mint bar beside the glyph (positioned absolute).
   Keep its position; only swap the fill for a mint-into-cross-hue
   gradient so the keyline carries two palette colors. Quote FILL stays
   pure theme for identity. Mint still starts the keyline (signature). */
.about-section .about-quote::after {
  background: linear-gradient(180deg, var(--cm), var(--key-b));
  opacity: 0.95;
}

/* ---------- STAT HAIRLINE: match the gradient signature ----------
   The stat label rule (section 4) goes gradient too, lead into mint, so
   it reads as part of the same blended system. */
.about-section .about-stat__label {
  border-top: 0;
  padding-top: clamp(10px, 1.1vw, 13px);
  background-image: linear-gradient(90deg, var(--c-lead), var(--cm));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 2px;
}

/* ---------- COMPANION CARDS: solid cross-hue left borders (graft) ----------
   The stat and mini-dict cards otherwise stay pure lead. Push the blend
   into them cheaply with a solid cross-section border color (NOT a
   text-clip tile, which would clip to nothing). No contrast cost. */
.about-section .about-stat { border-left-color: var(--spine-b); }
.about-section .about-mini-dict { border-left-color: var(--spine-a); }

/* ---------- STAT NUMBER: gradient fill (graft) ----------
   The 100% figure is a huge decorative glyph, exempt from text contrast,
   so pull the blend into the single biggest object in section 4: lead
   into the cap neighbor, with a solid lead fallback. */
.about-section .about-stat__num {
  color: var(--c-lead);                  /* fallback if clip unsupported */
  background-image: linear-gradient(135deg, var(--c-lead) 0%, var(--cap-to) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- MOBILE (380px first): keep the blend, protect the read ---------- */
@media (max-width: 760px) {
  .about-section .about-row__prose {
    padding-left: 14px;
  }
  .about-section .about-row__prose::before {
    width: 3px;
    top: 0.3em;
  }
  .about-section .about-row__prose--lead::before {
    width: 3px;
    top: 0.5em;
  }
  .about-section .about-row__prose::after {
    width: 22px;
    height: 6px;
    margin-top: 14px;
  }
  /* keep the dark read explicit on the stacked single column */
  .about-section .about-row__prose p { color: var(--mp-ink); }
  /* the drop-cap gradient and mint underline scale with the text, leave them */
}


/* ============================================================
   PHOTO BAND, full-bleed auto-scrolling photo marquee.
   Generalized from .wedding-band (concept-styles.css ~1378-1426)
   so it is reusable on the home page. Same proven loop: two
   identical img sets back to back, the track animates
   translate3d(0) -> translate3d(-50%) so the seam is invisible.
   --reverse rolls the other direction; --short trims height and
   slows the pace so the second band never reads as a mirror.
   Cool dark surface var(--teal-deeper) #022721 (NO warm cream).
   Edge-fade masks feather the left/right edges so photos enter
   and leave softly. Pauses on hover/focus. prefers-reduced-motion
   becomes a static, manually scrollable row with the mask removed.

   NOTE: the existing .wedding-band block is left untouched. This
   .photo-band block is added alongside it (zero risk to the
   wedding page). The home markup only references .photo-band.
   ============================================================ */
.photo-band {
  position: relative;
  width: 100%;
  height: 280px;
  margin: 0;
  background: var(--teal-deeper); /* #022721, cool dark; barely shows behind cover images */
  overflow: hidden;
  box-shadow:
    inset 0 6px 14px -10px rgba(0, 0, 0, 0.30),
    inset 0 -6px 14px -10px rgba(0, 0, 0, 0.30);
  /* Edge fade: photos dissolve into the page at both ends instead of hard-cutting. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.photo-band__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  gap: 8px;
  width: max-content;
  animation: photo-band-scroll 76s linear infinite;
  will-change: transform;
}
/* Reverse band: same keyframes, run backwards so it scrolls left to right. */
.photo-band--reverse .photo-band__track {
  animation-direction: reverse;
}
/* Short band: shorter and slower (and desynced from the top band's 76s) so the
   second band is visibly NOT a mirror of the first. */
.photo-band--short { height: 232px; }
.photo-band--short .photo-band__track { animation-duration: 88s; }

.photo-band:hover .photo-band__track,
.photo-band:focus-within .photo-band__track {
  animation-play-state: paused;
}
.photo-band__img {
  display: block;
  height: 100%;
  width: auto;
  flex: 0 0 auto;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes photo-band-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 760px) {
  .photo-band { height: 190px; }
  .photo-band--short { height: 158px; }
  .photo-band__track { gap: 6px; animation-duration: 60s; }
  .photo-band--short .photo-band__track { animation-duration: 70s; }
  /* Tighter edge fade on small screens so more photo is visible at 380px. */
  .photo-band {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo-band { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .photo-band__track { animation: none; width: auto; }
  /* Drop the mask so a manually scrolled row does not leave its edge photos
     permanently dimmed. */
  .photo-band {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* PHOTO BAND height fix: percentage height on .photo-band__track did not
   resolve against the fixed-height band in this flex + marquee context
   (track collapsed to ~184px, leaving an empty strip under the photos).
   Pin track + image heights explicitly per variant so the photos fill. */
.photo-band__track { height: 280px; }
.photo-band__img   { height: 280px; }
.photo-band--short .photo-band__track,
.photo-band--short .photo-band__img { height: 232px; }
@media (max-width: 760px) {
  .photo-band__track { height: 190px; }
  .photo-band__img   { height: 190px; }
  .photo-band--short .photo-band__track,
  .photo-band--short .photo-band__img { height: 158px; }
}

/* ============================================================
   SHOP MERGE: the "Your order" upsell + a swapping "what's in
   this pack" story now live on the main configurator, so /shop
   is one page (slider + upsell + packs) with no separate pack
   pages. Cool panel (no warm cream) per the palette rules.
   ============================================================ */
.shop-config__ministats { display: flex; gap: 16px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(4,52,44,0.10); }
.shop-config__ministat { flex: 1; min-width: 0; }
.shop-config__ministat-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8980; margin-bottom: 3px; }
.shop-config__ministat-num { font-size: 20px; font-weight: 700; color: #1A1A1A; }
.shop-config__ministat-num--save { color: #0F6E56; }
.shop-config__ministat-num--tier { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.shop-config__ministat-num--tier .shop-config__tier-swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--mp-tier-color, #1D9E75); display: inline-block; }
.shop-config__ministat-sub { display: block; font-size: 11px; color: #8a8980; margin-top: 1px; }

.shop-order { background: #EEF3F0; border: 1px solid #d7e3dd; border-radius: 16px; padding: 18px 18px 16px; display: flex; flex-direction: column; }
.shop-order__title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #5b7a6f; margin-bottom: 9px; }
.shop-order__row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; color: #1A1A1A; }
.shop-order__muted { color: #5F5E5A; }
.shop-order__row--save { color: #0F6E56; font-style: italic; border-bottom: 1px solid #d7e3dd; padding-bottom: 9px; margin-bottom: 8px; }
.shop-order__addons { display: flex; flex-direction: column; gap: 1px; }
.shop-order__addon { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #2a2a28; padding: 5px 0; cursor: pointer; }
.shop-order__addon input { margin-top: 3px; accent-color: #0F6E56; flex: 0 0 auto; }
.shop-order__addon strong { font-weight: 600; }
.shop-order__addon-desc { display: block; font-size: 11.5px; color: #8a8980; margin-top: 1px; }
.shop-order__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #d7e3dd; margin-top: 9px; padding-top: 10px; }
.shop-order__total span:first-child { font-size: 15px; font-weight: 600; }
.shop-order__total span:last-child { font-size: 22px; font-weight: 700; color: #1A1A1A; }
.shop-order__buy { display: block; text-align: center; text-decoration: none; margin-top: 12px; padding: 14px; background: #0F6E56; color: #fff; font-weight: 600; font-size: 15px; border-radius: 999px; transition: background 0.15s ease, transform 0.05s ease; }
.shop-order__buy:hover { background: #0c5946; }
.shop-order__buy:active { transform: scale(0.99); }
.shop-order__note { font-size: 11px; color: #8a8980; text-align: center; margin: 8px 0 0; }

.shop-story { margin: 14px auto 0; padding: 18px 22px; background: #fff; border: 1px solid rgba(4,52,44,0.10); border-left: 4px solid var(--mp-event-color, #993556); border-radius: 14px; }
.shop-story__eyebrow { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #0F6E56; margin-bottom: 7px; }
.shop-story__body { font-family: 'Source Serif Pro', Georgia, serif; font-size: 16px; line-height: 1.6; color: #2a2a28; margin: 0; }
@media (max-width: 760px) { .shop-config__ministats { gap: 10px; } .shop-config__ministat-num { font-size: 17px; } .shop-order { border-radius: 14px; } }

/* ============================================================
   MULLET MYSTERY, game landing (dark, matched to mystery-quiz.html)
   ============================================================ */
.mys {
  --mys-bg:        #022721;
  --mys-surface:   #04342C;
  --mys-pink:      #D4537E;
  --mys-pink-deep: #993556;
  --mys-mint:      #22D3A5;
  --mys-mustard:   #D4A72C;
  --mys-paper:     #F4F4F0;
  --mys-line:      rgba(244,244,240,0.12);
  --mys-muted:     rgba(244,244,240,0.62);

  background: var(--mys-bg);
  color: var(--mys-paper);
  margin: 0;
}
.mys .emph { color: var(--mys-pink); font-style: italic; }
.mys-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.mys-kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--mys-mustard);
}

/* hero */
.mys-hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 12vw, 110px) 22px clamp(40px, 8vw, 72px);
  text-align: center;
}
.mys-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 75% at 50% -10%, rgba(34,211,165,0.12), transparent 60%),
    radial-gradient(90% 70% at 50% 120%, rgba(212,83,126,0.14), transparent 55%);
}
.mys-hero__inner { position: relative; max-width: 720px; margin: 0 auto; }
.mys-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--mys-mustard);
}
.mys-hero__h1 {
  color: var(--mys-paper);
  font-size: clamp(34px, 8.5vw, 68px);
  line-height: 1.02; letter-spacing: -0.01em; font-weight: 800;
  margin: 14px 0 0;
}
.mys-hero__lede {
  color: var(--mys-muted);
  font-size: clamp(16px, 2.4vw, 19px); line-height: 1.6;
  max-width: 40ch; margin: 18px auto 0;
}
.mys-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 28px;
}
.mys-hero__note {
  margin-top: 16px; color: var(--mys-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.08em;
}
.mys-hero__note a { color: var(--mys-paper); border-bottom: 1px solid var(--mys-line); text-decoration: none; }
.mys-hero__note a:hover { border-bottom-color: var(--mys-pink); }

/* buttons */
.mys-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.06s ease;
}
.mys-btn:active { transform: translateY(1px); }
.mys-btn--pink { background: var(--mys-pink); color: #fff; }
.mys-btn--pink:hover { background: var(--mys-pink-deep); }
.mys-btn--ghost { background: transparent; color: var(--mys-paper); border-color: var(--mys-line); }
.mys-btn--ghost:hover { border-color: var(--mys-pink); }

/* steps */
.mys-steps { padding: clamp(36px, 7vw, 64px) 0; border-top: 1px solid var(--mys-line); }
.mys-steps__grid {
  display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px;
}
.mys-step {
  background: var(--mys-surface);
  border: 1px solid var(--mys-line);
  border-radius: 16px; padding: 22px 20px;
}
.mys-step__n {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(212,83,126,0.16); color: var(--mys-pink);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; font-weight: 700;
  margin-bottom: 12px;
}
.mys-step h3 { color: var(--mys-paper); font-size: 21px; margin: 0 0 8px; font-weight: 750; }
.mys-step p { color: var(--mys-muted); font-size: 15.5px; line-height: 1.58; margin: 0; }

/* pack */
.mys-pack { padding: clamp(36px, 7vw, 64px) 0; border-top: 1px solid var(--mys-line); }
.mys-pack__wrap { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.mys-pack__h2 { color: var(--mys-paper); font-size: clamp(26px, 5vw, 38px); line-height: 1.08; margin: 12px 0 0; font-weight: 800; }
.mys-pack__lede { color: var(--mys-muted); font-size: 16.5px; line-height: 1.6; margin: 14px 0 0; max-width: 48ch; }
.mys-pack__list { list-style: none; margin: 18px 0 0; padding: 0; }
.mys-pack__list li {
  position: relative; padding: 9px 0 9px 26px;
  color: var(--mys-paper); font-size: 15.5px; line-height: 1.45;
  border-bottom: 1px solid var(--mys-line);
}
.mys-pack__list li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--mys-mint);
}
.mys-pack__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.mys-pack__price { color: var(--mys-muted); font-size: 13.5px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; }

/* case-file card (decorative, a nod to the printed kit) */
.mys-pack__card {
  background: linear-gradient(160deg, #06120f, #04342C);
  border: 1px solid var(--mys-line);
  border-radius: 18px; padding: 30px 26px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,0.4);
}
.mys-pack__card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--mys-pink), var(--mys-mint));
}
.mys-pack__cardtag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--mys-mustard);
}
.mys-pack__cardtitle {
  font-size: clamp(40px, 10vw, 62px); line-height: 0.9; font-weight: 800; letter-spacing: 0.01em; color: var(--mys-paper);
}
.mys-pack__cardtitle em { color: var(--mys-mint); font-style: normal; display: block; }
.mys-pack__cardmeta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.1em; color: var(--mys-muted);
}

/* closer */
.mys-closer { padding: clamp(44px, 9vw, 84px) 22px; text-align: center; border-top: 1px solid var(--mys-line); }
.mys-closer__rule { display: block; width: 64px; height: 3px; background: var(--mys-pink); margin: 0 auto 22px; }
.mys-closer__lines { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mys-closer__faint { color: var(--mys-muted); font-size: clamp(18px, 3vw, 24px); }
.mys-closer__loud { color: var(--mys-paper); font-size: clamp(26px, 5.4vw, 44px); font-weight: 800; line-height: 1.05; }

@media (min-width: 760px) {
  .mys-steps__grid { grid-template-columns: repeat(3, 1fr); }
  .mys-pack__wrap { grid-template-columns: 1.25fr 0.75fr; gap: 40px; }
}

/* ============================================================
   HOW TO PARTY (the field manual)
   Accent is hot pink #D4537E (212,83,126), set on the hero via --uc-color.
   ============================================================ */
.howto-method {
  background: var(--mp-cream);
  padding: clamp(48px, 9vw, 96px) 24px;
}
.howto-method__wrap { max-width: 1080px; margin: 0 auto; }
.howto-kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #D4537E; font-weight: 700; margin-bottom: 12px;
}
.howto-method__h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500; font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.08; letter-spacing: -0.01em; color: var(--mp-ink);
  margin: 0 0 32px; max-width: 16ch;
}
.howto-method__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.howto-step {
  background: #fff;
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 16px;
  padding: 26px 24px;
}
.howto-step__n {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(212, 83, 126, 0.12); color: #D4537E;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 17px; font-weight: 700;
  margin-bottom: 14px;
}
.howto-step h3 {
  font-family: 'Source Serif Pro', Georgia, serif;
  color: var(--mp-ink); font-size: 22px; line-height: 1.15;
  margin: 0 0 8px; font-weight: 600;
}
.howto-step p { color: var(--text-secondary); font-size: 16px; line-height: 1.6; margin: 0; }

.howto-close {
  background: var(--teal-deeper);
  padding: clamp(52px, 10vw, 104px) 24px;
  text-align: center;
}
.howto-close__wrap { max-width: 680px; margin: 0 auto; }
.howto-close__kicker {
  display: block;
  font-family: 'Source Serif Pro', Georgia, serif; font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  color: rgba(250, 244, 231, 0.62);
  margin-bottom: 6px;
}
.howto-close__h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 500; font-size: clamp(28px, 5vw, 52px);
  line-height: 1.06; letter-spacing: -0.01em;
  color: var(--mp-cream); margin: 0 0 24px;
}
.howto-close__body {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55;
  color: rgba(250, 244, 231, 0.86);
  margin: 0 auto 30px; max-width: 600px;
}
.howto-close__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px; border-radius: 999px;
  background: #D4537E; color: #fff; text-decoration: none;
  font-family: 'Source Serif Pro', Georgia, serif; font-weight: 700; font-size: 17px;
  letter-spacing: 0.2px;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 14px 28px -12px rgba(212, 83, 126, 0.6);
}
.howto-close__cta:hover {
  background: color-mix(in srgb, #D4537E 85%, black);
  transform: translateY(-1px);
}

@media (min-width: 720px) {
  .howto-method__grid { grid-template-columns: repeat(2, 1fr); }
  .howto-step:last-child { grid-column: 1 / -1; }
}