/* ============================================================
   MEDITATION — 1:1 Figma rebuild
   Desktop source: Figma node 4148:1989 (1920 x 6521)
   Section Y-coordinates: hero 175-878 | come-home 879-1624 |
   offerings 1724-2481 | stillness 2581-3482 |
   experience 3581-4629 | upcoming 4729-5697 | footer 5797-6521
   All sizes scale proportionally via min(Xpx, calc(X / 1920 * 100vw)).
   Tokens:
     #5e2a29 maroon (titles, eyebrow, kicker color, CTA pill text)
     #282828 body grey
     #fdfbf3 cream (stillness band copy)
     #fafafa near-white (button bg)
     rgba(240,234,222,0.5) beige half (come-home band bg, card bg)
     #ffffff white
============================================================ */

/* ===== UNIVERSAL RESET ===== */
body[data-page="meditation"] section,
body[data-page="meditation"] [class*="__inner"] {
  padding: 0;
  margin: 0;
  gap: 0;
  min-height: 0;
}
body[data-page="meditation"] section,
body[data-page="meditation"] [class*="__inner"] {
  box-sizing: border-box;
}

/* ============ HERO — Figma 4148:1990 (y=175-877, h=702) ============
   Background photo (full-bleed, masked) + dark gradient veil +
   kicker (149, 700) + H1 "Meditation" (149, 734) + CTA button (1505, 744).
*/
body[data-page="meditation"] .med-hero {
  position: relative;
  width: 100%;
  height: min(702px, calc(702 / 1920 * 100vw));
  overflow: hidden;
}
body[data-page="meditation"] .med-hero__image {
  position: absolute;
  inset: 0;
  background-image: url('assets/meditation-hero.jpg');
  background-size: cover;
  /* User: crop needs more of the LOWER part of the photo (flowers,
     foreground) than the upper (pergola/sky). */
  background-position: center bottom;
}
body[data-page="meditation"] .med-hero__veil {
  /* Figma: linear-gradient from (132,132,132,0.32) @ 63% to (42,42,42,0.8) @ 89.5%, rotated 180.
     So the dark side hangs on the LEFT in original coord; rotate180 puts it on the right.
     Effectively darker right side — we mirror that. */
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(42, 42, 42, 0.8) 10.5%,
    rgba(132, 132, 132, 0.32) 37%,
    rgba(132, 132, 132, 0.0) 100%);
  pointer-events: none;
}
body[data-page="meditation"] .med-hero__kicker {
  position: absolute;
  left: min(149px, calc(149 / 1920 * 100vw));
  /* Figma absolute y=700; hero starts at y=176 (under chrome), so
     content top inside the hero is 700-176=524. */
  top:  min(524px, calc(524 / 1920 * 100vw));
  width: min(622px, calc(622 / 1920 * 100vw));
  height: min(24px, calc(24 / 1920 * 100vw));
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: min(20px, calc(20 / 1920 * 100vw)) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important; /* 2px / 20 */
  text-transform: uppercase !important;
  color: #ffffff !important;
  /* Never wrap — Figma renders this on one line at every viewport. */
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}
body[data-page="meditation"] .med-hero__title {
  position: absolute;
  left: min(149px, calc(149 / 1920 * 100vw));
  /* 734 absolute - 176 chrome = 558 inside hero */
  top:  min(558px, calc(558 / 1920 * 100vw));
  width: min(311px, calc(311 / 1920 * 100vw));
  height: min(80px, calc(80 / 1920 * 100vw));
  font-family: 'STIX Two Text', serif !important;
  font-weight: 500 !important;
  font-size: min(64px, calc(64 / 1920 * 100vw)) !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}
body[data-page="meditation"] .med-hero__cta {
  position: absolute;
  left: min(1505px, calc(1505 / 1920 * 100vw));
  /* 744 absolute - 176 chrome = 568 inside hero */
  top:  min(568px, calc(568 / 1920 * 100vw));
  width: min(293px, calc(293 / 1920 * 100vw));
  height: min(60px, calc(60 / 1920 * 100vw));
  background: #fafafa !important;
  border: 0 !important;
  border-radius: min(40px, calc(40 / 1920 * 100vw)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: min(12px, calc(12 / 1920 * 100vw)) !important;
  padding: min(10px, calc(10 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw)) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: min(16px, calc(16 / 1920 * 100vw)) !important;
  line-height: calc(20 / 16) !important;
  color: #5e2a29 !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}
body[data-page="meditation"] .med-hero__cta-arrow {
  /* Filled dark-maroon circle around a tiny white chevron — per Figma
     "Button/Secondary" render (4148:2088). The chevron is centred
     inside the 20px circle. */
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  border-radius: 50%;
  background: #5e2a29;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body[data-page="meditation"] .med-hero__cta-arrow svg {
  width: 60%;
  height: 60%;
}
/* Hover state per Figma Button/Secondary: pill background swaps to
   the dark maroon, text turns white, the arrow circle inverts to
   white with the chevron in maroon. */
body[data-page="meditation"] .med-hero__cta {
  transition: background 0.2s ease, color 0.2s ease !important;
}
body[data-page="meditation"] .med-hero__cta-arrow {
  transition: background 0.2s ease, color 0.2s ease;
}
body[data-page="meditation"] .med-hero__cta:hover {
  background: #5e2a29 !important;
  color: #fafafa !important;
}
body[data-page="meditation"] .med-hero__cta:hover .med-hero__cta-arrow {
  background: #fafafa;
  color: #5e2a29;
}

/* ============ COME HOME TO YOURSELF — Figma 4148:2029 (y=879-1623, h=745) ============
   Full-bleed band, beige-half bg. Photo LEFT at (130, 959, 879x585), copy RIGHT at (1084, 1153).
*/
body[data-page="meditation"] .med-come-home {
  position: relative;
  width: 100%;
  height: min(745px, calc(745 / 1920 * 100vw));
  background: rgba(240, 234, 222, 0.5);
  overflow: hidden;
}
body[data-page="meditation"] .med-come-home__photo {
  position: absolute;
  left: min(130px, calc(130 / 1920 * 100vw));
  top:  min(80px, calc(80 / 1920 * 100vw)); /* 959 - 879 */
  width: min(879px, calc(879 / 1920 * 100vw));
  height: min(586px, calc(586 / 1920 * 100vw));
  background-image: url('assets/meditation-come-home.jpg');
  background-size: cover;
  background-position: center bottom; /* QC r12: Figma shows bottom 38.7% of source */
  border-radius: 8px;
}
body[data-page="meditation"] .med-come-home__copy {
  position: absolute;
  left: min(1084px, calc(1084 / 1920 * 100vw));
  top:  min(274px, calc(274 / 1920 * 100vw)); /* 1153 - 879 */
  width: min(698px, calc(698 / 1920 * 100vw));
}
body[data-page="meditation"] .med-come-home__title {
  font-family: 'STIX Two Text', serif !important;
  font-weight: 500 !important;
  font-size: min(52px, calc(52 / 1920 * 100vw)) !important;
  line-height: calc(58 / 52) !important;
  color: #5e2a29 !important;
  margin: 0 0 min(25px, calc(25 / 1920 * 100vw)) 0 !important;
  padding: 0 !important;
  width: min(698px, calc(698 / 1920 * 100vw));
  /* Figma capitalize CSS renders "Come Home to Yourself" as
     "Come Home To Yourself". */
  text-transform: capitalize !important;
}
body[data-page="meditation"] .med-come-home__body {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: min(20px, calc(20 / 1920 * 100vw)) !important;
  line-height: calc(38 / 20) !important;
  color: #282828 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: min(585px, calc(585 / 1920 * 100vw));
}
body[data-page="meditation"] .med-come-home__body strong {
  font-weight: 500;
}

/* ============ MEDITATION OFFERINGS — Figma 4148:2038 (y=1724-2481) ============
   H2 + intro paragraph + 3 cards.
*/
body[data-page="meditation"] .med-offerings {
  position: relative;
  width: 100%;
  /* From 1724 to 2481 = 757; but we add 100px top breathing (1624->1724) */
  padding: min(100px, calc(100 / 1920 * 100vw)) 0 min(100px, calc(100 / 1920 * 100vw)) 0;
  background: #fafafa;
}
body[data-page="meditation"] .med-offerings__title {
  position: absolute;
  left: min(128px, calc(128 / 1920 * 100vw));
  top:  min(100px, calc(100 / 1920 * 100vw)); /* 1724 - 1624 */
  width: min(499px, calc(499 / 1920 * 100vw));
  font-family: 'STIX Two Text', serif !important;
  font-weight: 500 !important;
  font-size: min(52px, calc(52 / 1920 * 100vw)) !important;
  line-height: calc(58 / 52) !important;
  color: #5e2a29 !important;
  margin: 0 !important;
}
body[data-page="meditation"] .med-offerings__intro {
  position: absolute;
  left: min(1018px, calc(1018 / 1920 * 100vw));
  top:  min(100px, calc(100 / 1920 * 100vw));
  width: min(760px, calc(760 / 1920 * 100vw));
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: min(20px, calc(20 / 1920 * 100vw)) !important;
  line-height: calc(38 / 20) !important;
  color: #282828 !important;
  margin: 0 !important;
}
body[data-page="meditation"] .med-offerings__grid {
  position: absolute;
  left: min(128px, calc(128 / 1920 * 100vw));
  top:  min(329px, calc(329 / 1920 * 100vw)); /* 1953 - 1624 */
  width: min(1634px, calc(1634 / 1920 * 100vw));
  display: grid;
  grid-template-columns: repeat(3, min(530px, calc(530 / 1920 * 100vw)));
  gap: min(22px, calc(22 / 1920 * 100vw));
}
body[data-page="meditation"] .med-offer-card {
  width: min(530px, calc(530 / 1920 * 100vw));
  height: min(528px, calc(528 / 1920 * 100vw));
  background: rgba(240, 234, 222, 0.5);
  border-radius: 4px; /* QC r14: less rounded edges */
  padding: min(24px, calc(24 / 1920 * 100vw));
  display: flex;
  flex-direction: column;
  gap: min(50px, calc(50 / 1920 * 100vw));
  overflow: hidden;
  box-sizing: border-box;
}
body[data-page="meditation"] .med-offer-card__icon {
  width: min(105px, calc(105 / 1920 * 100vw));
  height: min(105px, calc(105 / 1920 * 100vw));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
body[data-page="meditation"] .med-offer-card__icon--1day    { background-image: url('assets/meditation-icon-1day.png'); }
/* Card 2 (3-Day, middle) = venn diagram. Card 3 (Weekday, right) = swirl glyph framed in a square. */
body[data-page="meditation"] .med-offer-card__icon--3day    { background-image: url('assets/meditation-icon-weekday.png'); }
body[data-page="meditation"] .med-offer-card__icon--weekday {
  background-image: url('assets/meditation-icon-3day.png');
  /* Square outline around the icon — only on card 3 per Figma. Thicker
     stroke (2.5px at 1920vp base) so the box reads as deliberately
     framed at small viewport sizes too. */
  /* QC r36: square outline removed */
}
body[data-page="meditation"] .med-offer-card__body {
  display: flex;
  flex-direction: column;
  gap: min(25px, calc(25 / 1920 * 100vw));
  flex: 1 1 auto;
}
body[data-page="meditation"] .med-offer-card__head {
  display: flex;
  flex-direction: column;
  gap: min(12px, calc(12 / 1920 * 100vw));
}
body[data-page="meditation"] .med-offer-card__title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: min(24px, calc(24 / 1920 * 100vw)) !important;
  line-height: 1.45 !important;
  color: #5e2a29 !important;
  margin: 0 !important;
  /* Reserve 2 lines of title height so cards with a single-line title
     (Weekday Classes) push their kicker/body down to align with the
     2-line title cards (1-Day / 3-Day Themed Sadhana Bhatti). */
  min-height: calc(2 * 1.45em) !important;
}
body[data-page="meditation"] .med-offer-card__kicker {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: min(16px, calc(16 / 1920 * 100vw)) !important;
  line-height: calc(24 / 16) !important;
  letter-spacing: 0.04em !important; /* 0.64 / 16 */
  text-transform: uppercase !important;
  color: #282828 !important;
  margin: 0 !important;
}
body[data-page="meditation"] .med-offer-card__copy {
  /* Grow to fill remaining vertical space so the tag row below
     hugs the bottom of the card across all three columns. */
  flex: 1 1 auto !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: min(20px, calc(20 / 1920 * 100vw)) !important;
  line-height: calc(32 / 20) !important;
  color: #282828 !important;
  margin: 0 !important;
}
body[data-page="meditation"] .med-offer-card__tags {
  /* Push the tag row to the bottom of the card body so cards with
     shorter body text (e.g. Weekday Classes' 2-line copy) align
     their tag row with the 3-line-body cards on the left. */
  margin-top: auto !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: min(20px, calc(20 / 1920 * 100vw)) !important;
  line-height: calc(32 / 20) !important;
  color: #5e2a29 !important;
  margin: 0 !important;
}

/* Wrap the absolute children into a position:relative parent so they stack. */
body[data-page="meditation"] .med-offerings {
  position: relative;
  height: min(857px, calc(857 / 1920 * 100vw)); /* 1624 -> 2481 = 857 */
  padding: 0 !important;
}

/* ============ STILLNESS BAND — Figma 4148:2072 (y=2581-3482, h=901) ============
   Full-bleed dark teal/maroon w/ blurred forest background image.
   Title (100, 2929) + body (100, 3058) on left. Circular audio orbits on right.
*/
body[data-page="meditation"] .med-stillness {
  position: relative;
  width: 100%;
  height: min(901px, calc(901 / 1920 * 100vw));
  margin-top: min(100px, calc(100 / 1920 * 100vw));
  background: #5e2a29;
  overflow: hidden;
}
body[data-page="meditation"] .med-stillness__bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/meditation-stillness-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(15px);
  transform: scale(1.05);
  pointer-events: none;
}
body[data-page="meditation"] .med-stillness__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(88deg, rgba(30, 32, 28, 0.4) 17%, rgba(102, 102, 102, 0) 76%),
    linear-gradient(90deg, rgba(30, 32, 28, 0.2) 0%, rgba(30, 32, 28, 0.2) 100%);
  pointer-events: none;
}
body[data-page="meditation"] .med-stillness__copy {
  position: absolute;
  left: min(100px, calc(100 / 1920 * 100vw));
  top:  min(348px, calc(348 / 1920 * 100vw)); /* 2929 - 2581 */
  width: min(758px, calc(758 / 1920 * 100vw));
  z-index: 2;
}
body[data-page="meditation"] .med-stillness__title {
  font-family: 'STIX Two Text', serif !important;
  /* QC r15: Figma is STIX Medium (500) - restore to match the design. */
  font-weight: 500 !important;
  font-size: min(52px, calc(52 / 1920 * 100vw)) !important;
  line-height: calc(58 / 52) !important;
  color: #fdfbf3 !important;
  margin: 0 0 min(13px, calc(13 / 1920 * 100vw)) 0 !important;
  /* User: "Stillness" must stay on the first line — widened 707 -> 900
     so "Your Moment Of Stillness" fits and "Starts Now" wraps below. */
  width: min(900px, calc(900 / 1920 * 100vw));
  text-transform: capitalize !important;
}
body[data-page="meditation"] .med-stillness__body {
  font-family: 'Inter', sans-serif !important;
  /* User: thinner stroke to match Figma — drop Inter Regular (400) to
     Inter Light (300). */
  font-weight: 300 !important;
  font-size: min(20px, calc(20 / 1920 * 100vw)) !important;
  line-height: calc(38 / 20) !important;
  color: #fdfbf3 !important;
  margin: 0 !important;
  width: min(707px, calc(707 / 1920 * 100vw));
}
body[data-page="meditation"] .med-stillness__player {
  position: absolute;
  /* Right half, vertically centered. Player frame ~700x700. */
  right: min(120px, calc(120 / 1920 * 100vw));
  top: 50%;
  transform: translateY(-50%);
  width: min(700px, calc(700 / 1920 * 100vw));
  height: min(700px, calc(700 / 1920 * 100vw));
  z-index: 2;
}
body[data-page="meditation"] .med-stillness__ring-outer,
body[data-page="meditation"] .med-stillness__ring-mid,
body[data-page="meditation"] .med-stillness__ring-inner,
body[data-page="meditation"] .med-stillness__btn,
body[data-page="meditation"] .med-stillness__dot {
  position: absolute;
  border-radius: 50%;
}
body[data-page="meditation"] .med-stillness__ring-outer {
  width: min(693px, calc(693 / 1920 * 100vw));
  height: min(693px, calc(693 / 1920 * 100vw));
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(253, 251, 243, 0.35);
}
body[data-page="meditation"] .med-stillness__ring-mid {
  width: min(451px, calc(451 / 1920 * 100vw));
  height: min(451px, calc(451 / 1920 * 100vw));
  left: 50%; top: 50%;
  /* --breath is driven by the box-breathing script: 1 at rest, EXPAND on the
     inhale/hold, CONTRACT on the exhale/hold. The base transition is a quick
     glide used at rest + on reset; the slow 5s breath ease is applied only
     while a session runs (see .is-running override in the player block). */
  transform: translate(-50%, -50%) scale(var(--breath, 1));
  transition: transform 0.7s ease;
  will-change: transform;
  border: 1px solid rgba(253, 251, 243, 0.5);
  /* User: a faint translucent fill inside the inner ring — per Figma
     render the second ring is filled with a warm semi-transparent
     beige so it reads as a soft halo around the Press to Begin
     button instead of an empty circle. */
  background: rgba(253, 251, 243, 0.12);
}
body[data-page="meditation"] .med-stillness__dot {
  width: min(17px, calc(17 / 1920 * 100vw));
  height: min(17px, calc(17 / 1920 * 100vw));
  left: calc(50% - min(8.5px, calc(8.5 / 1920 * 100vw)));
  top: 0;
  transform-origin: 50% min(350px, calc(350 / 1920 * 100vw)); /* orbit around the player centre */
  background: #fdfbf3;
  animation: med-dot-orbit 20s linear infinite; /* QC r37: slow orbit around the ring */
}
@keyframes med-dot-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body[data-page="meditation"] .med-stillness__dot { animation: none; }
}
body[data-page="meditation"] .med-stillness__btn {
  width: min(184px, calc(184 / 1920 * 100vw));
  height: min(184px, calc(184 / 1920 * 100vw));
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #fdfbf3;
  border: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: min(18px, calc(18 / 1920 * 100vw)) !important;
  color: #5e2a29 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* ============================================================
   BOX-BREATHING PLAYER (interactive) — replaces the old label
   cross-fade. The cream disc is the play / stop control; the filled
   mid-ring expands on the inhale and contracts on the exhale; the
   phase label sits above the disc, the round counter below, and the
   live countdown digit lives inside the disc. Tokens reused:
   #fdfbf3 cream, #5e2a29 maroon.
============================================================ */
/* Slow 5s breath ease — applied only while a session runs. */
body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__ring-mid {
  transition: transform 5s cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
}

/* Disc content: play glyph + "Begin" while idle; countdown while running. */
body[data-page="meditation"] .med-stillness__idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(6px, calc(6 / 1920 * 100vw));
}
body[data-page="meditation"] .med-stillness__play {
  width: min(34px, calc(34 / 1920 * 100vw));
  height: min(34px, calc(34 / 1920 * 100vw));
  color: #5e2a29;
  display: block;
  margin-left: min(3px, calc(3 / 1920 * 100vw)); /* optical centring of the triangle */
}
body[data-page="meditation"] .med-stillness__begin {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: min(16px, calc(16 / 1920 * 100vw)) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5e2a29;
}
body[data-page="meditation"] .med-stillness__active {
  display: none;
  place-items: center;
}
body[data-page="meditation"] .med-stillness__active > * { grid-area: 1 / 1; }
body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__idle { display: none; }
body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__active { display: grid; }
body[data-page="meditation"] .med-stillness__count {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: min(46px, calc(46 / 1920 * 100vw)) !important;
  line-height: 1 !important;
  color: #5e2a29;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.2s ease;
}
body[data-page="meditation"] .med-stillness__pause {
  width: min(30px, calc(30 / 1920 * 100vw));
  height: min(30px, calc(30 / 1920 * 100vw));
  color: #5e2a29;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* Hover reveals the stop affordance — pointer devices ONLY. Touch screens get
   a sticky :hover after a tap, which would hide the live countdown for the
   whole session; gate it so touch users always see the digits (tapping the
   disc still stops, surfaced via its aria-label). */
@media (hover: hover) and (pointer: fine) {
  body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__btn:hover .med-stillness__count { opacity: 0; }
  body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__btn:hover .med-stillness__pause { opacity: 1; }
}
/* Keyboard focus also reveals it. */
body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__btn:focus-visible .med-stillness__count { opacity: 0; }
body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__btn:focus-visible .med-stillness__pause { opacity: 1; }

/* Phase label above the disc, round counter below — both on the dark band. */
body[data-page="meditation"] .med-stillness__phase,
body[data-page="meditation"] .med-stillness__progress {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body[data-page="meditation"] .med-stillness__phase {
  top: 30%;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: min(21px, calc(21 / 1920 * 100vw)) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: #fdfbf3 !important;
}
body[data-page="meditation"] .med-stillness__progress {
  top: 70%;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: min(15px, calc(15 / 1920 * 100vw)) !important;
  letter-spacing: 0.08em !important;
  color: rgba(253, 251, 243, 0.72) !important;
}
body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__phase,
body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__progress { opacity: 1; }

/* Keyboard focus ring on the disc. */
body[data-page="meditation"] .med-stillness__btn:focus-visible {
  outline: 2px solid #fdfbf3;
  outline-offset: 4px;
}

/* Visually-hidden live region for screen-reader phase announcements. */
body[data-page="meditation"] .med-stillness__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the breath cue but soften it: the ring barely scales (magnitude set
     in JS) and the fades become instant. Labels + countdown still drive it. */
  body[data-page="meditation"] .med-stillness__player.is-running .med-stillness__ring-mid {
    transition: transform 5s ease;
  }
  body[data-page="meditation"] .med-stillness__phase,
  body[data-page="meditation"] .med-stillness__progress,
  body[data-page="meditation"] .med-stillness__count,
  body[data-page="meditation"] .med-stillness__pause { transition: none; }
}

/* ============ INSIDE THE EXPERIENCE — Figma 4148:2084 (y=3581-4629) ============
   Heading + spacing rhythm kept from the Figma treatment. Content team
   7/22 (blueforest.org reference): ONE video testimonial (t-meditation-1,
   carousel stage kept, arrows/dots hidden via --has-one) + a WRITTEN
   testimonial quote card below in the original cream card idiom.
   Section is content-height (padding preserves the 29 top / ~150
   bottom internal spacers the fixed 1048 box used to provide).
*/
body[data-page="meditation"] .med-experience {
  position: relative;
  width: 100%;
  margin-top: min(100px, calc(100 / 1920 * 100vw));
  padding: min(29px, calc(29 / 1920 * 100vw)) 0 min(154px, calc(154 / 1920 * 100vw));
  background: #fafafa;
}
body[data-page="meditation"] .med-experience__title {
  font-family: 'STIX Two Text', serif !important;
  font-weight: 500 !important;
  font-size: min(52px, calc(52 / 1920 * 100vw)) !important;
  line-height: calc(58 / 52) !important;
  color: #5e2a29 !important;
  margin: 0 !important;
  text-align: center;
}
/* Video testimonial carousel — one centered 16:9 stage per view (1096
   rhythm, same as our-story's media box); round arrows + dots below,
   the track glides on a 0.5s ease, swipe advances on touch. */
body[data-page="meditation"] .exp-carousel {
  width: min(1096px, calc(1096 / 1920 * 100vw));
  margin: min(70px, calc(70 / 1920 * 100vw)) auto 0;
}
body[data-page="meditation"] .exp-carousel__viewport {
  overflow: hidden;
  border-radius: min(8px, calc(8 / 1920 * 100vw));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
body[data-page="meditation"] .exp-videos {
  display: flex;
  gap: min(24px, calc(24 / 1920 * 100vw));
  transition: transform 0.5s ease;
}
body[data-page="meditation"] .exp-videos.is-dragging { transition: none; }
body[data-page="meditation"] .exp-video {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: min(8px, calc(8 / 1920 * 100vw));
  overflow: hidden;
  background: rgba(240, 234, 222, 0.5);
}
body[data-page="meditation"] .exp-video__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body[data-page="meditation"] .exp-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body[data-page="meditation"] .exp-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(69px, calc(69 / 1920 * 100vw));
  height: min(69px, calc(69 / 1920 * 100vw));
  background: #9D3737;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-page="meditation"] .exp-video__play svg {
  width: 40%;
  height: 40%;
}
body[data-page="meditation"] .exp-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
  border: 0;
}
/* Carousel nav — round arrows (wisdom-events idiom) + event-stage dots. */
body[data-page="meditation"] .exp-carousel__nav {
  margin-top: min(36px, calc(36 / 1920 * 100vw));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(14px, calc(14 / 1920 * 100vw));
}
body[data-page="meditation"] .exp-carousel__arrow {
  width: min(54px, calc(54 / 1920 * 100vw));
  height: min(54px, calc(54 / 1920 * 100vw));
  border: 1px solid #5E2A29;
  background: transparent;
  border-radius: 50%;
  color: #5E2A29;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
body[data-page="meditation"] .exp-carousel__arrow:hover {
  background: #5E2A29;
  color: #FAFAFA;
}
body[data-page="meditation"] .exp-carousel__arrow svg {
  width: min(42px, calc(42 / 1920 * 100vw));
  height: min(42px, calc(42 / 1920 * 100vw));
}
body[data-page="meditation"] .exp-carousel__dots {
  display: flex;
  gap: 10px;
  padding: 0 10px;
}
body[data-page="meditation"] .exp-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(94, 42, 41, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}
body[data-page="meditation"] .exp-carousel__dot.is-active {
  background: #5E2A29;
  width: 22px;
  border-radius: 4px;
}
/* Single clip: no arrows / dots (nav markup is also omitted in the HTML;
   this guard keeps it hidden if the nav ever gets pasted back). */
body[data-page="meditation"] .exp-carousel--has-one .exp-carousel__nav { display: none; }
/* Written testimonial quote — the retired .med-experience__card treatment
   revived (cream rgba(240,234,222,.5) card, 20 radius, STIX italic quote
   + Inter attribution), aligned to the carousel column below the video. */
body[data-page="meditation"] .exp-quotes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(40px, calc(40 / 1920 * 100vw));
  width: min(1096px, calc(1096 / 1920 * 100vw));
  margin: min(60px, calc(60 / 1920 * 100vw)) auto 0;
}
body[data-page="meditation"] .exp-quote {
  width: 100%;
  background: rgba(240, 234, 222, 0.5);
  border-radius: min(20px, calc(20 / 1920 * 100vw));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: min(80px, calc(80 / 1920 * 100vw)) min(40px, calc(40 / 1920 * 100vw));
  box-sizing: border-box;
}
body[data-page="meditation"] .exp-quote__text {
  max-width: min(878px, calc(878 / 1920 * 100vw));
  margin: 0;
  font-family: 'STIX Two Text', serif;
  font-weight: 400;
  font-style: italic;
  font-size: min(36px, calc(36 / 1920 * 100vw));
  line-height: calc(48 / 36);
  letter-spacing: 0.02em;
  color: #282828;
  text-align: center;
}
body[data-page="meditation"] .exp-quote__attribution {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: min(24px, calc(24 / 1920 * 100vw));
  line-height: 1;
  color: #5e2a29;
  margin: min(48px, calc(48 / 1920 * 100vw)) 0 0;
  text-align: center;
}

/* ============ UPCOMING MEDITATION EXPERIENCES — Figma 4148:2089 (y=4729-5697) ============
   H2 centered (554, 4729). 3 event cards 530x715 at y=4857 (left 131, 684, 1237).
   Nav arrows centered at y=5643.
*/
body[data-page="meditation"] .med-upcoming {
  position: relative;
  width: 100%;
  height: min(968px, calc(968 / 1920 * 100vw)); /* 4729 -> 5697 = 968 */
  margin-top: min(100px, calc(100 / 1920 * 100vw));
  background: #fafafa;
}
body[data-page="meditation"] .med-upcoming__title {
  position: absolute;
  left: 50%;
  top:  0; /* Figma title y=4729 = section top, no offset. */
  transform: translateX(-50%);
  font-family: 'STIX Two Text', serif !important;
  font-weight: 500 !important;
  font-size: min(52px, calc(52 / 1920 * 100vw)) !important;
  line-height: calc(58 / 52) !important;
  color: #5e2a29 !important;
  margin: 0 !important;
  text-align: center;
  white-space: nowrap;
}
body[data-page="meditation"] .med-upcoming__grid {
  position: absolute;
  left: min(131px, calc(131 / 1920 * 100vw));
  top:  min(128px, calc(128 / 1920 * 100vw)); /* 4857 - 4729 = 128 */
  width: min(1636px, calc(1636 / 1920 * 100vw));
  display: grid;
  grid-template-columns: repeat(3, min(530px, calc(530 / 1920 * 100vw)));
  gap: min(23px, calc(23 / 1920 * 100vw));
}
body[data-page="meditation"] .med-event-card {
  width: min(530px, calc(530 / 1920 * 100vw));
  height: min(715px, calc(715 / 1920 * 100vw));
  background: rgba(240, 234, 222, 0.5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: min(24px, calc(24 / 1920 * 100vw));
  padding-bottom: min(24px, calc(24 / 1920 * 100vw));
  overflow: hidden;
  box-sizing: border-box;
}
body[data-page="meditation"] .med-event-card__photo {
  position: relative;
  width: 100%;
  height: min(368px, calc(368 / 1920 * 100vw));
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
body[data-page="meditation"] .med-event-card__chips {
  position: absolute;
  left: min(25px, calc(25 / 1920 * 100vw));
  top:  min(307px, calc(307 / 1920 * 100vw));
  display: flex;
  gap: min(9px, calc(9 / 1920 * 100vw));
}
body[data-page="meditation"] .med-event-card__chip {
  height: min(34px, calc(34 / 1920 * 100vw));
  background: #ffffff;
  border-radius: 20px;
  padding: 0 min(20px, calc(20 / 1920 * 100vw));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: min(19px, calc(19 / 1920 * 100vw)) !important;
  color: #46474b !important;
}
body[data-page="meditation"] .med-event-card__body {
  display: flex;
  flex-direction: column;
  gap: min(32px, calc(32 / 1920 * 100vw));
  padding: 0 min(36px, calc(36 / 1920 * 100vw));
  flex: 1 1 auto;
}
body[data-page="meditation"] .med-event-card__head {
  display: flex;
  flex-direction: column;
  gap: min(16px, calc(16 / 1920 * 100vw));
}
body[data-page="meditation"] .med-event-card__date-row {
  display: flex;
  gap: min(14px, calc(14 / 1920 * 100vw));
  align-items: center;
}
body[data-page="meditation"] .med-event-card__date-icon {
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  color: #5e2a29;
}
body[data-page="meditation"] .med-event-card__date {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: min(18px, calc(18 / 1920 * 100vw)) !important;
  line-height: calc(28 / 18) !important;
  letter-spacing: 0.04em !important; /* 0.72 / 18 */
  text-transform: uppercase !important;
  color: #5e2a29 !important;
  margin: 0 !important;
}
body[data-page="meditation"] .med-event-card__title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: min(28px, calc(28 / 1920 * 100vw)) !important;
  line-height: 1.458 !important;
  color: #5e2a29 !important;
  margin: 0 !important;
}
body[data-page="meditation"] .med-event-card__copy {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: min(20px, calc(20 / 1920 * 100vw)) !important;
  line-height: calc(30 / 20) !important;
  color: #282828 !important;
  margin: 0 !important;
}
body[data-page="meditation"] .med-event-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(48px, calc(48 / 1920 * 100vw));
  background: #5e2a29 !important;
  border-radius: 20px;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: min(18px, calc(18 / 1920 * 100vw)) !important;
  text-decoration: none !important;
  margin-top: auto;
}

body[data-page="meditation"] .med-upcoming__nav {
  position: absolute;
  left: 50%;
  bottom: min(54px, calc(54 / 1920 * 100vw)); /* 5697 - 5643 = 54 */
  transform: translateX(-50%);
  display: flex;
  gap: min(35px, calc(35 / 1920 * 100vw));
}
/* Upcoming Meditation Experiences nav — the same Figma button as the
   other pages' carousels: 54x54 round maroon outline, 42x42 chevron
   inside, fills on hover. */
body[data-page="meditation"] .med-upcoming__nav button {
  width: min(54px, calc(54 / 1920 * 100vw)) !important;
  height: min(54px, calc(54 / 1920 * 100vw)) !important;
  border: 1px solid #5e2a29 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5e2a29 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
body[data-page="meditation"] .med-upcoming__nav svg {
  /* Verbatim copy of wisdom-figma.css lines 662-666: 42x42 svg in
     54x54 button. Verified Wisdom renders exactly these dimensions. */
  width: min(42px, calc(42 / 1920 * 100vw)) !important;
  height: min(42px, calc(42 / 1920 * 100vw)) !important;
}
body[data-page="meditation"] .med-upcoming__nav button:hover {
  background: #5e2a29 !important;
  color: #fafafa !important;
}

/* ============================================================
   MOBILE (<768) — Figma uk09oojES0Fa629QvQ2RJg node 4149:5258.
   1:1 mobile rebuild. TEXT = fixed px; LAYOUT = min(Xpx, X/390*100vw).
   Overrides the desktop (1920-based) absolute layout above.
   ============================================================ */
/* ===== QC Phase-1 hides ===== */
body[data-page="meditation"] .med-hero__cta { display: none !important; } /* QC r31 */
body[data-page="meditation"] .med-upcoming { display: none !important; }   /* QC r38: hide upcoming-events section */

@media (max-width: 1023px) {

  /* ---------- HERO (4149:5260-5266): centered text near bottom ---------- */
  body[data-page="meditation"] .med-hero {
    height: min(607px, calc(607 / 390 * 100vw)) !important;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    padding: 0 min(20px, calc(20 / 390 * 100vw)) min(40px, calc(40 / 390 * 100vw));
    text-align: center;
  }
  body[data-page="meditation"] .med-hero__image { background-position: 50% 58%; }
  /* Figma: strong dark vignette so the white kicker/title/CTA stay readable.
     The photo's lower area is bright fog, so the bottom ~45% needs heavy
     darkening (earlier 0.82 was still too weak over the fog). */
  body[data-page="meditation"] .med-hero__veil {
    z-index: 1 !important;   /* behind the text (kicker/title/CTA are z-index:2) */
    background: linear-gradient(180deg,
      rgba(20,20,18,0.20) 0%,
      rgba(20,20,18,0.12) 28%,
      rgba(20,20,18,0.55) 60%,
      rgba(20,20,18,0.88) 85%,
      rgba(20,20,18,0.95) 100%) !important;
  }
  body[data-page="meditation"] .med-hero__kicker {
    position: relative; z-index: 2; left: auto; top: auto; height: auto;
    width: auto; max-width: min(240px, calc(240 / 390 * 100vw));
    white-space: normal !important;
    font-size: 12px !important; line-height: 20px !important;
    letter-spacing: 0.84px !important; text-align: center;
    margin: 0 0 min(12px, calc(12 / 390 * 100vw)) !important;
  }
  body[data-page="meditation"] .med-hero__title {
    position: relative; z-index: 2; left: auto; top: auto; width: auto; height: auto;
    font-size: 32px !important; line-height: 1.05 !important;
    margin: 0 0 min(18px, calc(18 / 390 * 100vw)) !important;
  }
  body[data-page="meditation"] .med-hero__cta {
    position: relative; z-index: 2; left: auto; top: auto; width: auto; height: auto;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 20px !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    font-size: 12px !important; line-height: normal !important;
  }
  /* mobile CTA arrow is a plain chevron, not the filled maroon circle */
  body[data-page="meditation"] .med-hero__cta-arrow {
    width: 16px; height: 16px; background: transparent; color: #5e2a29;
  }
  body[data-page="meditation"] .med-hero__cta-arrow svg { width: 100%; height: 100%; }
  body[data-page="meditation"] .med-hero__cta:hover { background: rgba(255,255,255,0.9) !important; color: #5e2a29 !important; }
  body[data-page="meditation"] .med-hero__cta:hover .med-hero__cta-arrow { background: transparent; color: #5e2a29; }

  /* ---------- COME HOME (4149:5334): copy on beige band, full-bleed photo ---------- */
  body[data-page="meditation"] .med-come-home {
    height: auto !important; background: transparent !important;
    /* DOM order is photo-then-copy; Figma wants copy (beige band) on TOP,
       photo below — so reverse. */
    display: flex; flex-direction: column-reverse; overflow: visible !important;
  }
  body[data-page="meditation"] .med-come-home__copy {
    position: static; left: auto; top: auto; width: auto;
    background: rgba(240, 234, 222, 0.5);
    padding: min(38px, calc(38 / 390 * 100vw)) min(37px, calc(37 / 390 * 100vw)) min(44px, calc(44 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-come-home__title {
    font-size: 28px !important; line-height: 1.2 !important;
    width: auto !important; text-transform: none !important;
    margin: 0 0 min(16px, calc(16 / 390 * 100vw)) 0 !important;
  }
  body[data-page="meditation"] .med-come-home__body {
    font-size: 14px !important; line-height: 26px !important; width: auto !important;
  }
  body[data-page="meditation"] .med-come-home__photo {
    position: static; left: auto; top: auto;
    width: 100%; height: min(254px, calc(254 / 390 * 100vw));
    border-radius: 8px; background-position: center 65%;
    /* chrome.js applies an inline parallax transform (translateY+scale) to the
       [data-parallax] photo on scroll — on mobile that makes it drift/overflow.
       Stylesheet !important overrides the inline style → static photo. */
    transform: none !important;
  }

  /* ---------- MEDITATION OFFERINGS (4149:5384) ---------- */
  body[data-page="meditation"] .med-offerings {
    position: static !important; height: auto !important;
    padding: min(40px, calc(40 / 390 * 100vw)) 0 min(48px, calc(48 / 390 * 100vw)) 0 !important;
    background: #fafafa;
  }
  body[data-page="meditation"] .med-offerings__title {
    position: static; left: auto; top: auto;
    width: auto; font-size: 28px !important; line-height: 1.2 !important;
    margin: 0 min(37px, calc(37 / 390 * 100vw)) min(16px, calc(16 / 390 * 100vw)) !important;
  }
  body[data-page="meditation"] .med-offerings__intro {
    position: static; left: auto; top: auto;
    width: auto; font-size: 14px !important; line-height: 26px !important;
    margin: 0 min(37px, calc(37 / 390 * 100vw)) min(25px, calc(25 / 390 * 100vw)) !important;
  }
  body[data-page="meditation"] .med-offerings__grid {
    position: static; left: auto; top: auto; width: auto;
    display: flex; flex-direction: column; gap: min(15px, calc(15 / 390 * 100vw));
    padding: 0 min(1.5px, calc(1.5 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-offer-card {
    width: 100%; height: min(320px, calc(320 / 390 * 100vw));
    border-radius: 8px; gap: min(12px, calc(12 / 390 * 100vw));
    padding: min(10px, calc(10 / 390 * 100vw)) min(24px, calc(24 / 390 * 100vw)) min(24px, calc(24 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-offer-card__icon {
    width: min(63px, calc(63 / 390 * 100vw)); height: min(63px, calc(63 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-offer-card__icon--weekday { border: 0 !important; }
  body[data-page="meditation"] .med-offer-card__body { gap: min(16px, calc(16 / 390 * 100vw)); }
  body[data-page="meditation"] .med-offer-card__head { gap: min(8px, calc(8 / 390 * 100vw)); }
  body[data-page="meditation"] .med-offer-card__title {
    font-size: 18px !important; line-height: 1.45 !important;
    min-height: calc(2 * 1.45em) !important;
  }
  body[data-page="meditation"] .med-offer-card__kicker {
    font-size: 12px !important; line-height: 20px !important; letter-spacing: 0.48px !important;
  }
  body[data-page="meditation"] .med-offer-card__copy {
    font-size: 12px !important; line-height: 20px !important;
  }
  body[data-page="meditation"] .med-offer-card__tags {
    font-size: 12px !important; line-height: 32px !important;
    font-style: italic !important;
  }

  /* ---------- STILLNESS (4149:5320): dark band, copy top-left, ring player ---------- */
  body[data-page="meditation"] .med-stillness {
    height: min(527px, calc(527 / 390 * 100vw)) !important;
    margin-top: 0 !important;
  }
  body[data-page="meditation"] .med-stillness__copy {
    left: min(40px, calc(40 / 390 * 100vw));
    top: min(33px, calc(33 / 390 * 100vw));
    width: min(317px, calc(317 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-stillness__title {
    /* Figma mobile (4149:5332) is STIX Two Text Medium = weight 500; the
       desktop rule sets 400 (intentionally thinner) → override back to 500
       on mobile so the heading reads bold like the Figma. */
    font-weight: 500 !important;
    font-size: 28px !important; line-height: 1.2 !important;
    width: min(302px, calc(302 / 390 * 100vw)) !important;
    margin: 0 0 min(14px, calc(14 / 390 * 100vw)) 0 !important;
    text-transform: none !important;   /* Figma: "of" stays lowercase */
  }
  body[data-page="meditation"] .med-stillness__body {
    font-size: 14px !important; line-height: 26px !important;
    width: min(317px, calc(317 / 390 * 100vw)) !important;
  }
  body[data-page="meditation"] .med-stillness__player {
    width: min(256px, calc(256 / 390 * 100vw)) !important;
    height: min(256px, calc(256 / 390 * 100vw)) !important;
    /* Figma: the ring player is CENTERED (Press-to-Begin button at x=195 =
       screen centre; ring strokes span x60–327). Was left:169 → button at 297,
       pushed 100px right. Centre it. Button cy≈338 → top 210. */
    left: 50% !important; right: auto !important;
    top: min(210px, calc(210 / 390 * 100vw)) !important;
    transform: translateX(-50%) !important;
  }
  body[data-page="meditation"] .med-stillness__ring-outer {
    width: min(256px, calc(256 / 390 * 100vw)); height: min(256px, calc(256 / 390 * 100vw));
    border-color: rgba(253, 251, 243, 0.55) !important;
  }
  body[data-page="meditation"] .med-stillness__ring-mid {
    width: min(166px, calc(166 / 390 * 100vw)); height: min(166px, calc(166 / 390 * 100vw));
    border-color: rgba(253, 251, 243, 0.75) !important;
    background: rgba(253, 251, 243, 0.15) !important;
  }
  body[data-page="meditation"] .med-stillness__dot {
    width: min(6px, calc(6 / 390 * 100vw)); height: min(6px, calc(6 / 390 * 100vw));
    left: calc(50% - min(3px, calc(3 / 390 * 100vw)));
    transform-origin: 50% min(128px, calc(128 / 390 * 100vw)); /* mobile player centre */
  }
  body[data-page="meditation"] .med-stillness__btn {
    width: min(68px, calc(68 / 390 * 100vw)); height: min(68px, calc(68 / 390 * 100vw));
    font-size: 8px !important;
  }
  /* box-breathing player — mobile sizing */
  body[data-page="meditation"] .med-stillness__idle { gap: 3px; }
  body[data-page="meditation"] .med-stillness__play { width: 16px; height: 16px; margin-left: 2px; }
  body[data-page="meditation"] .med-stillness__begin { font-size: 8px !important; letter-spacing: 0.06em; }
  body[data-page="meditation"] .med-stillness__count { font-size: 22px !important; }
  body[data-page="meditation"] .med-stillness__pause { width: 15px; height: 15px; }
  body[data-page="meditation"] .med-stillness__phase {
    top: 28%; font-size: 11px !important; letter-spacing: 0.12em !important;
  }
  body[data-page="meditation"] .med-stillness__progress {
    top: 72%; font-size: 9px !important; letter-spacing: 0.06em !important;
  }

  /* ---------- INSIDE THE EXPERIENCE (video testimonials, stacked) ---------- */
  body[data-page="meditation"] .med-experience {
    position: relative; height: auto !important; margin-top: 0 !important;
    padding: min(40px, calc(40 / 390 * 100vw)) min(20px, calc(20 / 390 * 100vw)) min(48px, calc(48 / 390 * 100vw));
    background: #fafafa;
  }
  body[data-page="meditation"] .med-experience__title {
    position: static; left: auto; top: auto; transform: none; padding-top: 0;
    font-size: 28px !important; line-height: 1.2 !important;
    text-align: center; white-space: normal !important;
    margin: 0 0 min(24px, calc(24 / 390 * 100vw)) !important;
  }
  body[data-page="meditation"] .exp-carousel {
    width: min(350px, calc(350 / 390 * 100vw));
    margin: 0 auto;
  }
  body[data-page="meditation"] .exp-videos { gap: min(16px, calc(16 / 390 * 100vw)); }
  body[data-page="meditation"] .exp-carousel__nav { margin-top: min(24px, calc(24 / 390 * 100vw)); gap: min(12px, calc(12 / 390 * 100vw)); }
  body[data-page="meditation"] .exp-carousel__arrow {
    width: min(28px, calc(28 / 390 * 100vw)); height: min(28px, calc(28 / 390 * 100vw));
  }
  body[data-page="meditation"] .exp-carousel__arrow svg { width: 20px; height: 20px; }
  body[data-page="meditation"] .exp-carousel__dot { width: 5px; height: 5px; }
  body[data-page="meditation"] .exp-carousel__dot.is-active { width: 18px; }
  body[data-page="meditation"] .exp-video { border-radius: min(8px, calc(8 / 390 * 100vw)); }
  body[data-page="meditation"] .exp-video__play {
    width: min(48px, calc(48 / 390 * 100vw));
    height: min(48px, calc(48 / 390 * 100vw));
  }
  body[data-page="meditation"] .exp-quotes {
    width: min(350px, calc(350 / 390 * 100vw));
    gap: min(20px, calc(20 / 390 * 100vw));
    margin: min(24px, calc(24 / 390 * 100vw)) auto 0;
  }
  body[data-page="meditation"] .exp-quote {
    border-radius: min(12px, calc(12 / 390 * 100vw));
    padding: min(40px, calc(40 / 390 * 100vw)) min(28px, calc(28 / 390 * 100vw));
  }
  body[data-page="meditation"] .exp-quote__text { max-width: none; font-size: 18px; line-height: 1.5; letter-spacing: 0; }
  body[data-page="meditation"] .exp-quote__attribution { font-size: 14px; margin: min(18px, calc(18 / 390 * 100vw)) 0 0; }

  /* ---------- UPCOMING (4149:5346): single event card carousel ---------- */
  body[data-page="meditation"] .med-upcoming {
    position: static !important; height: auto !important; margin-top: 0 !important;
    padding: min(40px, calc(40 / 390 * 100vw)) 0 min(48px, calc(48 / 390 * 100vw));
    background: #fafafa;
  }
  body[data-page="meditation"] .med-upcoming__title {
    position: static; left: auto; top: auto; transform: none;
    font-size: 28px !important; line-height: 1.2 !important;
    text-align: center; white-space: normal !important;
    max-width: min(271px, calc(271 / 390 * 100vw));
    margin: 0 auto min(25px, calc(25 / 390 * 100vw)) !important;
  }
  body[data-page="meditation"] .med-upcoming__grid {
    position: static; left: auto; top: auto; width: auto;
    display: flex; flex-direction: row; justify-content: flex-start;
    /* SINGLE-SLIDE: card 300 + gap 90 = one viewport, so the next card sits
       fully off-screen (no peek). scroll-padding centres the snapped card. */
    gap: min(90px, calc(90 / 390 * 100vw));
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: min(45px, calc(45 / 390 * 100vw));
    padding: 0 min(45px, calc(45 / 390 * 100vw)) min(8px, calc(8 / 390 * 100vw));
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  body[data-page="meditation"] .med-upcoming__grid::-webkit-scrollbar { display: none; }
  body[data-page="meditation"] .med-event-card {
    flex: 0 0 min(300px, calc(300 / 390 * 100vw)); scroll-snap-align: start; scroll-snap-stop: always;
    width: min(300px, calc(300 / 390 * 100vw)); height: auto;
    border-radius: 12px; gap: min(9px, calc(9 / 390 * 100vw));
    padding-bottom: min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-event-card__photo {
    height: min(200px, calc(200 / 390 * 100vw)); border-radius: 0;
  }
  body[data-page="meditation"] .med-event-card__chips {
    left: min(16px, calc(16 / 390 * 100vw));
    top: auto; bottom: min(16px, calc(16 / 390 * 100vw));
    gap: min(8px, calc(8 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-event-card__chip {
    height: min(22px, calc(22 / 390 * 100vw)); border-radius: 20px;
    padding: 0 min(14px, calc(14 / 390 * 100vw)); font-size: 11px !important;
  }
  body[data-page="meditation"] .med-event-card__body {
    gap: min(10px, calc(10 / 390 * 100vw)); padding: 0 min(14px, calc(14 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-event-card__head { gap: min(8px, calc(8 / 390 * 100vw)); }
  body[data-page="meditation"] .med-event-card__date-row { gap: min(8px, calc(8 / 390 * 100vw)); }
  body[data-page="meditation"] .med-event-card__date-icon {
    width: min(12px, calc(12 / 390 * 100vw)); height: min(12px, calc(12 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-event-card__date { font-size: 11px !important; line-height: 1.4 !important; letter-spacing: 0.44px !important; }
  body[data-page="meditation"] .med-event-card__title { font-size: 17.5px !important; line-height: 1.458 !important; }
  body[data-page="meditation"] .med-event-card__copy { font-size: 12px !important; line-height: 20px !important; }
  body[data-page="meditation"] .med-event-card__cta {
    height: min(36px, calc(36 / 390 * 100vw)); border-radius: 18px; font-size: 11px !important;
  }
  body[data-page="meditation"] .med-upcoming__nav {
    position: static; left: auto; bottom: auto; transform: none;
    justify-content: center; gap: min(20px, calc(20 / 390 * 100vw));
    margin-top: min(24px, calc(24 / 390 * 100vw));
  }
  body[data-page="meditation"] .med-upcoming__nav button {
    width: min(40px, calc(40 / 390 * 100vw)) !important; height: min(40px, calc(40 / 390 * 100vw)) !important;
  }
  body[data-page="meditation"] .med-upcoming__nav svg {
    width: min(20px, calc(20 / 390 * 100vw)) !important; height: min(20px, calc(20 / 390 * 100vw)) !important;
  }
}