/* ==========================================================================
   Medspa OS — /medspa-os/

   A light editorial page inside a dark-first site. Every value here resolves
   to a token from tokens.css; the light half of the palette (--paper, --ink,
   --ink-muted, --line, --purple-soft, --purple-strong) exists for exactly
   this. No new hexes.

   Two rules worth knowing before editing:

   1. Only `main` goes light. The reviews marquee and footer that PageShell
      renders after it have no background of their own and inherit the dark
      body, which is what we want — the page ends by returning to the site.

   2. Every band declares `data-surface`, which is now belt and braces: nav.js
      samples the backgrounds under the bar and flips between its dark and
      light treatments on its own. The attribute overrides that measurement,
      which is worth keeping on the bands whose backdrop is a video or a photo
      the sampler cannot read.
   ========================================================================== */

.mos main {
  background: var(--paper);
  color: var(--ink);
  /* Fluid rhythm shared by every band. */
  --mos-band: clamp(4.5rem, 9vw, 8rem);
  --mos-shell: 1180px;
  /* A tint a few percent off paper, mixed rather than hardcoded so it tracks
     the token if --paper or --ink ever move. */
  --mos-surface: color-mix(in srgb, var(--ink) 3.5%, var(--paper));
}

/* --- Layout primitives ---------------------------------------------------- */

.mos-shell {
  max-width: var(--mos-shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mos-band {
  position: relative;
  padding-block: var(--mos-band);
}

.mos-band--tight {
  padding-block: calc(var(--mos-band) * 0.62);
}

.mos-band--surface {
  background: var(--mos-surface);
}

.mos-band--dark {
  background: var(--black);
  color: var(--warm-white);
}

.mos-prose {
  max-width: 68ch;
}

.mos-prose p + p {
  margin-top: 1.15em;
}

/* --- Type ----------------------------------------------------------------- */

.mos-eyebrow {
  /* Matches the homepage section eyebrows: 13px, 600, 0.14em, uppercase. The
     colour stays #6119ac here — the homepage eyebrows are all on dark bands
     where the light tint is the readable one, and this page is paper. */
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 1.4rem;
}

/* #6119AC lands around 2:1 on near-black, so dark bands take the light tint.
   Same reason the prototype did it — keep it if you restyle. */
.mos-band--dark .mos-eyebrow {
  color: var(--purple-strong);
}

.mos-h1,
.mos-h2,
.mos-h3 {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  color: var(--ink);
}

.mos-band--dark .mos-h1,
.mos-band--dark .mos-h2,
.mos-band--dark .mos-h3 {
  color: var(--white);
}

.mos-h1 {
  font-weight: 900;
  /* --h1-hero, not the top of the step scale: --step-7 peaks at 5.97rem and
     this headline is 13 words of uppercase. */
  font-size: var(--h1-hero);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-transform: uppercase;
}

.mos-h2 {
  font-weight: 900;
  font-size: var(--h1-article);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.mos-h3 {
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.mos-lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-muted);
}

.mos-band--dark .mos-lead,
.mos-band--dark .mos-prose {
  color: var(--muted);
}

/* Captions use --ink-muted rather than --ink-soft: #8a8a95 only reaches about
   3.4:1 on paper, which fails for text this size. */
.mos-caption,
.mos-figcap {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-muted);
}

.mos-figcap {
  margin-top: 0.9rem;
}

.mos-band--dark .mos-caption,
.mos-band--dark .mos-figcap {
  color: var(--muted);
}

.mos-accent {
  color: var(--purple);
}

.mos-band--dark .mos-accent {
  color: var(--purple-strong);
}

.mos-note {
  margin-top: 2rem;
  font-size: var(--step-0);
  color: var(--ink-muted);
  max-width: 60ch;
}

/* --- Buttons -------------------------------------------------------------- */

/* The site's .arcrel-lv-btn carries shape, weight and the 4px radius. Only the
   light-surface ghost variant needs adjusting — its default border is tuned
   for dark backgrounds. */
.mos .arcrel-lv-btn--ghost,
.mos .arcrel-lv-btn--ghost:visited {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}

.mos .arcrel-lv-btn--ghost:hover,
.mos .arcrel-lv-btn--ghost:focus-visible {
  color: var(--purple);
  border-color: var(--purple-strong);
  background: transparent;
}

.mos-band--dark .arcrel-lv-btn--ghost,
.mos-band--dark .arcrel-lv-btn--ghost:visited {
  color: var(--white);
  border-color: var(--divider);
}

.mos-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.mos-cta-note {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.mos-band--dark .mos-cta-note {
  color: var(--muted);
}

/* --- Hero ----------------------------------------------------------------- */

.mos-hero {
  position: relative;
  /* The page runs flush-top so the paper reaches behind the nav; the hero
     reserves the bar's height itself. */
  padding-top: calc(var(--nav-h) + clamp(2.25rem, 6vw, 4rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.mos-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mos-hero .mos-h1 {
  max-width: 20ch;
}

/* The hero eyebrow is the homepage's drafting dimension line
   (.arcrel-lv-hero__badge in live.css) rather than the pill it used to be.
   Everything structural comes from there; this only re-tints it, because that
   component is set for a dark hero — its rules use --divider and its figure is
   white, both of which are wrong on paper. */
.mos-hero__tag {
  margin-bottom: 2rem;
  color: var(--ink-muted);
}

.mos-hero__tag .arcrel-lv-hero__rule {
  background: linear-gradient(to right, transparent, var(--line) 65%);
}

.mos-hero__tag .arcrel-lv-hero__rule:last-child {
  background: linear-gradient(to left, transparent, var(--line) 65%);
}

.mos-hero__tag .arcrel-lv-hero__rule::before {
  background: var(--purple);
}

.mos-hero__tag .arcrel-lv-hero__figure {
  color: var(--ink);
}

.mos-dot {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
}

.mos-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--purple);
  opacity: 0;
  animation: mosPulse 2.6s var(--ease-out) infinite;
}

@keyframes mosPulse {
  from { transform: scale(0.6); opacity: 0.75; }
  to   { transform: scale(1.6); opacity: 0; }
}

.mos-hero__media {
  width: 100%;
  max-width: 860px;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.mos-hero__sub {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 60ch;
  font-size: var(--step-1);
  color: var(--ink-muted);
}

.mos-hero__actions {
  margin-top: 2.2rem;
}

.mos-hero__actions .mos-cta-row {
  justify-content: center;
}

/* --- Video facade ---------------------------------------------------------
   Built on the site's existing .arcrel-lv-vid__btn facade, which live.js's
   [data-yt] handler already drives: click swaps the poster button for a
   youtube-nocookie iframe. Only three things are added here — a caption
   overlay, the hero's larger radius, and the pending state for the interview
   that has not been cut yet.
   -------------------------------------------------------------------------- */

.mos-video { position: relative; }

.mos-video .arcrel-lv-vid__btn { border-radius: var(--radius); }
.mos-video--hero .arcrel-lv-vid__btn { border-radius: var(--radius-lg); }
.mos-video .arcrel-lv-vid__iframe { border-radius: var(--radius); }
.mos-video--hero .arcrel-lv-vid__iframe { border-radius: var(--radius-lg); }

/* A CSS-drawn stand-in for the hero, which has no poster yet. */
.mos-video__fallback {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--purple) 40%, transparent), transparent 60%),
    linear-gradient(150deg, var(--card), var(--black));
}

.mos-video__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--black) 72%, transparent),
    color-mix(in srgb, var(--black) 12%, transparent) 55%,
    color-mix(in srgb, var(--black) 30%, transparent)
  );
}

.mos-video__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  text-align: left;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--muted);
}

.mos-video__label b {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--white);
}

/* Pending: nothing to play. The markup uses a plain div rather than a button
   so it is never focusable or announced as a control, and live.js skips it
   because there is no [data-yt]. */
.mos-video--pending .mos-video__frame {
  position: relative;
  display: block;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}

.mos-video--pending .arcrel-lv-vid__play {
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
  box-shadow: none;
}

/* Caption above the player: real YouTube posters already carry burned-in
   titles, so an overlay label on top of one reads as clutter. */
.mos-video-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.9rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.mos-video-cap b {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  color: var(--ink);
}

.mos-band--dark .mos-video-cap { color: var(--muted); }
.mos-band--dark .mos-video-cap b { color: var(--white); }

/* --- Proof bar ------------------------------------------------------------ */

.mos-proof {
  background: var(--black);
}

.mos-proof__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

.mos-proof__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.mos-proof__item + .mos-proof__item::before {
  content: "";
  position: absolute;
  left: clamp(-1.75rem, -2vw, -0.5rem);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: var(--divider);
}

.mos-proof__num {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  white-space: nowrap;
}

.mos-proof__label {
  font-size: var(--step--1);
  line-height: 1.3;
  color: var(--muted);
}

@media (max-width: 700px) {
  .mos-proof__inner { grid-template-columns: 1fr; gap: 0; }
  .mos-proof__item {
    justify-content: flex-start;
    gap: 0.6rem;
    padding-block: 1rem;
    border-top: 1px solid var(--divider);
  }
  .mos-proof__item:first-child { border-top: 0; }
  .mos-proof__item + .mos-proof__item::before { display: none; }
  .mos-proof__num { min-width: 5.5ch; }
}

/* --- Splits --------------------------------------------------------------- */

.mos-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.mos-split--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.mos-split--center { align-items: center; }

@media (max-width: 900px) {
  .mos-split,
  .mos-split--flip { grid-template-columns: 1fr; }
  .mos-split--center { align-items: start; }
}

/* --- The problem ---------------------------------------------------------- */

.mos-problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.mos-problem-visual {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  margin: 0;
}

@media (max-width: 900px) {
  .mos-problem-grid { grid-template-columns: 1fr; }
  .mos-problem-visual { position: static; margin-top: 1rem; }
}

.mos-story p {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink);
}

.mos-story p + p { margin-top: 1.3em; }

/* --- Phone mockup --------------------------------------------------------- */

.mos-phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

.mos-phone__frame {
  position: relative;
  padding: 9px;
  border-radius: 36px;
  border: 1px solid var(--divider);
  background: linear-gradient(160deg, var(--card), var(--black));
}

.mos-phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 18.5;
  padding: 2.4rem 0.7rem 0.9rem;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--purple) 35%, transparent), transparent 60%),
    linear-gradient(180deg, var(--card), var(--black));
}

.mos-phone__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 17px;
  border-radius: 100px;
  background: var(--black);
}

.mos-phone__time {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--white);
}

.mos-phone__date {
  margin-top: 0.3rem;
  text-align: center;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mos-phone__stack {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mos-msg {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--white) 13%, transparent);
  background: color-mix(in srgb, var(--white) 10%, transparent);
}

.mos-msg__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--white) 12%, transparent);
  color: var(--white);
}

.mos-msg__icon svg { width: 13px; height: 13px; }

.mos-msg__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.mos-msg__body {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--white);
}

.mos-msg--faded {
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border-color: color-mix(in srgb, var(--white) 7%, transparent);
}

.mos-msg--faded .mos-msg__body { color: var(--muted); }

.mos-phone__verdict {
  margin-top: 0.85rem;
  text-align: center;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

/* --- Benchmarks ----------------------------------------------------------- */

.mos-benchmarks {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}

.mos-benchmark {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.mos-benchmark__num {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}

.mos-benchmark__text {
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .mos-benchmark { grid-template-columns: 1fr; gap: 0.55rem; padding-block: 1.4rem; }
}

/* --- Leak bar ------------------------------------------------------------- */

.mos-leak__stat {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.mos-leak__stat b {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-7);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.mos-leak__stat span {
  max-width: 20ch;
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--ink-muted);
}

.mos-leak__bar {
  display: flex;
  width: 100%;
  height: 66px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.mos-leak__seg {
  display: flex;
  align-items: center;
  padding-inline: 1rem;
  width: var(--w);
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step--1);
}

.mos-leak__seg--reach { background: var(--purple); color: var(--white); }

.mos-leak__seg--lost {
  justify-content: flex-end;
  color: var(--ink-muted);
  background: repeating-linear-gradient(
    -45deg,
    var(--line) 0 7px,
    var(--line-2) 7px 14px
  );
}

.mos-leak__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.1rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.mos-leak__key span { display: inline-flex; align-items: center; gap: 0.5rem; }

.mos-leak__key i {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--purple);
}

.mos-leak__key i.lost {
  background: repeating-linear-gradient(-45deg, var(--line) 0 3px, var(--line-2) 3px 6px);
}

@media (max-width: 520px) {
  .mos-leak__seg { font-size: 0; padding: 0; }
}

/* --- The one number: dashboard tile --------------------------------------- */

.mos-tile {
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.mos-tile--light { border-color: var(--line); background: var(--paper); }

.mos-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--divider);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mos-tile--light .mos-tile__head {
  border-bottom-color: var(--line);
  color: var(--ink-muted);
}

.mos-tile__body { padding: 1.5rem 1.25rem; }

.mos-tile__value {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-6);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
}

.mos-tile--light .mos-tile__value { color: var(--ink); }

.mos-tile__sub {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.mos-tile--light .mos-tile__sub { color: var(--ink-muted); }

.mos-tile__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--divider);
}

.mos-tile--light .mos-tile__row { border-top-color: var(--line); }

.mos-tile__cell {
  padding: 0.9rem 1.25rem;
  border-right: 1px solid var(--divider);
}

.mos-tile--light .mos-tile__cell { border-right-color: var(--line); }
.mos-tile__cell:last-child { border-right: 0; }

.mos-tile__k {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.mos-tile--light .mos-tile__k { color: var(--ink-muted); }

.mos-tile__v {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--white);
}

.mos-tile--light .mos-tile__v { color: var(--ink); }

.mos-caret {
  display: inline-block;
  width: 4px;
  height: 0.78em;
  margin-left: 0.06em;
  vertical-align: baseline;
  background: var(--purple-strong);
  animation: mosBlink 1.15s steps(1) infinite;
}

@keyframes mosBlink { 50% { opacity: 0; } }

.mos-pill-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--purple);
}

.mos-band--dark .mos-pill-live { color: var(--purple-strong); }

.mos-hook__q {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-4);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--white);
  max-width: 24ch;
}

/* --- Unified inbox -------------------------------------------------------- */

.mos-inbox {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.mos-inbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--mos-surface);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mos-thread {
  padding: 1.1rem;
  border-bottom: 1px solid var(--line-2);
}

.mos-thread:last-child { border-bottom: 0; }

.mos-thread__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mos-bubble {
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  font-size: var(--step--1);
  line-height: 1.5;
}

.mos-bubble--in {
  background: var(--mos-surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
  color: var(--ink);
}

.mos-bubble--out {
  margin-left: auto;
  margin-top: 0.4rem;
  background: var(--purple);
  border-bottom-right-radius: 3px;
  color: var(--white);
}

.mos-sla {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--purple) 5%, transparent);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--purple);
}

/* --- The room ------------------------------------------------------------- */

.mos-room {
  display: grid;
  grid-template-columns: 1fr minmax(130px, 200px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.mos-room__title {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
}

.mos-room ul { list-style: none; margin: 0; padding: 0; }

.mos-room li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
}

.mos-room li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 7px;
  height: 1px;
  background: var(--purple);
}

.mos-room__center {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black);
}

.mos-room__img {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  /* Bias toward the chair rather than the empty wall. */
  object-position: 58% 72%;
}

.mos-room__center::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--black) 18%, transparent),
    color-mix(in srgb, var(--black) 48%, transparent)
  );
}

.mos-room__word {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--white);
  /* The photo is a pale room and the scrim is deliberately light so it stays
     readable as a room, so the label carries its own contrast. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}

.mos-room__closer {
  margin: clamp(3rem, 5vw, 4.5rem) auto 0;
  max-width: 34ch;
  text-align: center;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (max-width: 800px) {
  .mos-room { grid-template-columns: 1fr; gap: 2.5rem; }
  .mos-room__center { min-height: 0; aspect-ratio: 16 / 7; }
  .mos-room__word { writing-mode: horizontal-tb; }
}

/* --- EMR separation ------------------------------------------------------- */

.mos-sep {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 420px;
}

.mos-sep__card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.mos-sep__card--os {
  border-color: var(--purple-strong);
  box-shadow: 0 12px 30px -22px color-mix(in srgb, var(--purple) 60%, transparent);
}

.mos-sep__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--mos-surface);
  color: var(--ink-muted);
}

.mos-sep__card--os .mos-sep__ico {
  background: color-mix(in srgb, var(--purple) 8%, transparent);
  color: var(--purple);
}

.mos-sep__ico svg { width: 22px; height: 22px; }

.mos-sep__card b {
  display: block;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
}

.mos-sep__card span span,
.mos-sep__card > span > span {
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--ink-muted);
}

.mos-sep__tag {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.mos-sep__tag--os {
  color: var(--purple);
  border-color: var(--purple-soft);
  background: color-mix(in srgb, var(--purple) 5%, transparent);
}

.mos-sep__gap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.5rem;
}

.mos-sep__gap-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px);
}

.mos-sep__gap-label {
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* The accent is a hairline across the top edge, the same one the stat cards
   carry — it used to be a thicker purple border down the left. The frame drops
   to --line with it: a purple box under a purple accent is two claims on the
   same emphasis, and the .mos-sep__card siblings in this section are already
   on --line. */
.mos-callout {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 34ch;
  color: var(--ink);
}

.mos-callout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
}

@media (max-width: 900px) {
  .mos-sep { margin-inline: auto; }
}

@media (max-width: 420px) {
  .mos-sep__card { grid-template-columns: 40px 1fr; }
  .mos-sep__tag { grid-column: 2; justify-self: start; }
}

/* --- Stages --------------------------------------------------------------- */

.mos-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.mos-stage { position: relative; padding-top: 2.5rem; }

.mos-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
}

.mos-stage::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--purple);
}

.mos-band--surface .mos-stage::after { background: var(--mos-surface); }

.mos-stage__step {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mos-stage__name {
  margin: 0.5rem 0 0.9rem;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  color: var(--ink);
}

.mos-stage p { font-size: var(--step-0); color: var(--ink-muted); }

@media (max-width: 800px) {
  .mos-stages { grid-template-columns: 1fr; gap: 2.5rem; }
}

.mos-tagline {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  text-align: center;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* --- Case study metrics --------------------------------------------------- */

.mos-quote {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--divider);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--warm-white);
}

.mos-quote__attr {
  display: block;
  margin-top: 1rem;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mos-metrics {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--divider);
  border-left: 1px solid var(--divider);
}

.mos-metric {
  padding: 1.6rem 1.4rem;
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.mos-metric__value {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
}

.mos-metric__value .unit {
  margin-left: 0.15em;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--purple-strong);
}

.mos-metric__label {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--muted);
}

.mos-attr {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.mos-attr__name {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
}

.mos-attr__title {
  margin-top: 0.3rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .mos-metric { padding: 1.25rem 1rem; }
}

/* --- Offer ---------------------------------------------------------------- */

.mos-offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.mos-offer-visuals {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mos-offer-visuals figure { margin: 0; }

@media (max-width: 940px) {
  .mos-offer-grid { grid-template-columns: 1fr; }
  .mos-offer-visuals { position: static; }
}

.mos-stack { border-top: 1px solid var(--line); }

.mos-stack__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.mos-stack__check { margin-top: 0.25rem; color: var(--purple); }
.mos-stack__item h3 { margin-bottom: 0.45rem; }

.mos-stack__item p {
  max-width: 64ch;
  font-size: var(--step-0);
  color: var(--ink-muted);
}

/* --- SERP ----------------------------------------------------------------- */

.mos-serp {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.mos-serp__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--mos-surface);
}

.mos-serp__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.mos-serp__q {
  margin-left: 0.6rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.mos-serp__item {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--line-2);
}

.mos-serp__item:last-child { border-bottom: 0; }

.mos-serp__item--top {
  background: color-mix(in srgb, var(--purple) 4.5%, transparent);
  border-left: 2px solid var(--purple);
}

.mos-serp__rank {
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mos-serp__item--top .mos-serp__rank { color: var(--purple); }

.mos-serp__title {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
}

.mos-serp__meta {
  margin-top: 0.25rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* Deep amber. Bright gold only reaches ~2.4:1 on paper. */
.mos-stars { color: #8f6a00; letter-spacing: 0.08em; }

/* --- Fit ------------------------------------------------------------------ */

.mos-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.mos-fit__col h3 {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.mos-fit ul { list-style: none; margin: 0; padding: 0; }

.mos-fit li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.6rem;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-muted);
}

.mos-fit li::before {
  position: absolute;
  left: 0;
  top: 0.7rem;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
}

.mos-fit__no li::before { content: "—"; color: var(--ink-muted); }
.mos-fit__yes li::before { content: "+"; color: var(--purple); }

@media (max-width: 760px) {
  .mos-fit { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* --- FAQ ------------------------------------------------------------------ */

.mos-band--faq {
  position: relative;
  overflow: hidden;
  background: var(--mos-surface);
}

/* Two soft colour fields give the glass something to refract.

   These used to be smaller circles pushed through filter: blur(70px). A 70px
   blur on a ~450px box is an expensive raster, and it sat directly behind nine
   backdrop-filter panels — so the blurred layer was what all nine had to
   re-sample, continuously, because Lenis means the page is never quite still.

   A radial gradient is already a blur. The falloff is written into the stops
   instead and the boxes are grown to the size the blur was spreading them to,
   which lands in the same place with no filter pass at all. */
.mos-band--faq::before,
.mos-band--faq::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.mos-band--faq::before {
  top: -14%;
  right: -12%;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--purple) 11%, transparent) 0%,
    color-mix(in srgb, var(--purple) 6.5%, transparent) 32%,
    color-mix(in srgb, var(--purple) 2.5%, transparent) 56%,
    transparent 76%
  );
}

.mos-band--faq::after {
  bottom: -20%;
  left: -14%;
  width: 560px;
  height: 560px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--purple-light) 9%, transparent) 0%,
    color-mix(in srgb, var(--purple-light) 5.5%, transparent) 32%,
    color-mix(in srgb, var(--purple-light) 2.5%, transparent) 56%,
    transparent 76%
  );
}

.mos-band--faq > .mos-shell { position: relative; z-index: 1; }

.mos-faq {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* The fill carries the glass on its own. backdrop-filter here was nine
   independent blur passes over a backdrop that is a flat tint plus two very
   soft gradients — blurring something that low-frequency changes almost
   nothing you can see, while costing a re-raster of all nine panels on every
   frame the page moves. The opacity below is tuned so the resolved panel
   colour matches what the blur was producing. */
.mos-faq details {
  border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--white) 62%, transparent);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.mos-faq details[open] {
  border-color: var(--purple-strong);
  background: color-mix(in srgb, var(--white) 76%, transparent);
}

.mos-faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 1.35rem clamp(3rem, 8vw, 3.75rem) 1.35rem clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.mos-faq summary::-webkit-details-marker { display: none; }
.mos-faq summary:hover { color: var(--purple); }

/* Circular chevron chip, echoing the video play button.

   The chip and the glyph share one anchor. v2 gave them two independent
   `right` clamps that disagreed: the circle's centre sits at its right offset
   + 15px, the 8px glyph box's at its own + 4px, so centring needed a gap of
   exactly 11px and the sheet used 8.8px at both clamp ends and 8px through the
   fluid middle. The chevron sat 2-3px right of centre and the error drifted as
   the viewport crossed the breakpoints.

   Rather than correct the number, the second anchor is gone: the glyph box is
   laid exactly over the chip and the chevron is a centred mask inside it. So
   centring falls out of mask-position and cannot drift, the open-state
   rotation pivots on the true centre of the circle, and the colour swap is one
   background-color instead of two border-colors. */
.mos-faq summary {
  --chip-right: clamp(1rem, 3vw, 1.4rem);
  --chip-size: 30px;
  /* Stroke is black because a mask reads only the alpha channel. */
  --chip-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mos-faq summary::before {
  content: "";
  position: absolute;
  right: var(--chip-right);
  top: 50%;
  width: var(--chip-size);
  height: var(--chip-size);
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid var(--purple-strong);
  background: color-mix(in srgb, var(--white) 60%, transparent);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.mos-faq summary::after {
  content: "";
  position: absolute;
  right: var(--chip-right);
  top: 50%;
  width: var(--chip-size);
  height: var(--chip-size);
  transform: translateY(-50%);
  background-color: var(--purple);
  -webkit-mask: var(--chip-chevron) center / 11px 7px no-repeat;
  mask: var(--chip-chevron) center / 11px 7px no-repeat;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.mos-faq details[open] summary::before { background: var(--purple); border-color: var(--purple); }

.mos-faq details[open] summary::after {
  background-color: var(--white);
  transform: translateY(-50%) rotate(180deg);
}

.mos-faq__a {
  padding: 0 clamp(1.25rem, 3vw, 1.75rem) 1.5rem;
  max-width: 66ch;
  color: var(--ink-muted);
}

/* --- Final CTA + audit report --------------------------------------------- */

.mos-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

@media (max-width: 940px) {
  .mos-final-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); }
}

.mos-final__list {
  list-style: none;
  margin: 2.25rem 0;
  padding: 0;
  max-width: 60ch;
}

.mos-final__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.9rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--divider);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--warm-white);
}

.mos-final__list svg { margin-top: 0.3rem; color: var(--purple-strong); }

.mos-contact {
  margin-top: 1.75rem;
  font-size: var(--step-0);
  color: var(--muted);
}

.mos-contact a {
  color: var(--warm-white);
  text-decoration: none;
  border-bottom: 1px solid var(--divider);
}

.mos-contact a:hover { color: var(--white); border-bottom-color: var(--purple-strong); }

.mos-report {
  position: relative;
  margin: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--purple) 28%, transparent), transparent 70%),
    linear-gradient(180deg, var(--card), var(--black));
}

.mos-report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--divider);
}

.mos-report__title {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--white);
}

.mos-report__title span {
  display: block;
  margin-top: 0.15rem;
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mos-report__stamp {
  flex: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--purple-light) 40%, transparent);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-strong);
}

.mos-report__gauge {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.75rem 1.4rem;
  border-bottom: 1px solid var(--divider);
}

.mos-gauge { position: relative; flex: none; width: 108px; height: 108px; }
.mos-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mos-gauge__track { fill: none; stroke: color-mix(in srgb, var(--white) 9%, transparent); stroke-width: 9; }

.mos-gauge__arc {
  fill: none;
  stroke: url(#mosGauge);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 108;
}

.mos-gauge__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 900;
  font-size: var(--step-4);
  color: var(--white);
}

.mos-report__gauge-label { min-width: 0; }

.mos-report__gauge-label b {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--white);
}

.mos-report__gauge-label span {
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--muted);
}

.mos-report__lines { padding: 0.6rem 1.4rem 1.4rem; }

.mos-report__line {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--divider);
  font-size: var(--step--1);
  color: var(--warm-white);
}

.mos-report__line:last-child { border-bottom: 0; }

.mos-report__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--purple) 22%, transparent);
  color: var(--purple-strong);
}

.mos-report__check svg { width: 12px; height: 12px; }

.mos-report__found {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-strong);
  white-space: nowrap;
}


/* ==========================================================================
   v1 sections
   ==========================================================================

   Six bands on this page come from the v1 landing page and are meant to render
   exactly as they do there. Their markup is pasted verbatim; everything below
   is v1's own inline <style> block, also verbatim, with one mechanical change:
   every selector is prefixed with .mos-v1, the wrapper each v1 section sits in.

   That prefix is what makes the sections safe here. v1 was built to render
   with its own inline nav and footer and no shared chrome, so it carries a
   global `* { margin: 0; padding: 0 }` reset, rules on `body`, and generic
   class names — .container, .headline, .eyebrow, .accent, nav, footer. Dropped
   into a PageShell page unscoped, those would reach straight into the site
   header, the reviews marquee and the footer. Scoped, they cannot leave the
   band they belong to.

   The prefix raises every v1 rule by exactly one class, uniformly, so the
   relative order inside this block is v1's order untouched. `body` and `:root`
   became .mos-v1 itself; `html { scroll-behavior: smooth }` was dropped
   because Lenis owns scrolling here; and v1's three animation names
   (floatGlow, pulse, fadeUp) are prefixed mosV1 because @keyframes names are
   global no matter where the rule lives.

   Do not hand-edit this block to restyle a section. It is a transcription — if
   v1 changes, re-derive it.
   ========================================================================== */

.mos-v1 {
        --black: #0a0612;
        --true-black: #000000;
        --white: #ffffff;
        --purple: #6119ac;
        --purple-light: #8a3dd4;
        --purple-soft: rgba(97, 25, 172, 0.08);
        --purple-glow: rgba(97, 25, 172, 0.28);
        --gold: #fbbf24;
        --green: #4ade80;
        --gray-50: #fafafa;
        --gray-100: #f4f4f5;
        --gray-200: #e4e4e7;
        --gray-300: #d4d4d8;
        --gray-400: #a1a1aa;
        --gray-600: #52525b;
        --gray-700: #3f3f46;
        --gray-800: #27272a;
      }
.mos-v1, .mos-v1 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

.mos-v1 {
        font-family: var(--font-body);
        background: var(--white);
        color: var(--black);
        font-weight: 400;
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }
.mos-v1 h1,
.mos-v1 h2,
.mos-v1 h3,
.mos-v1 h4,
.mos-v1 h5,
.mos-v1 h6,
.mos-v1 .headline {
        line-height: 1.05;
      }
.mos-v1 .container {
        max-width: 1500px;
        margin: 0 auto;
        padding: 0 2rem;
      }
/* The v1 sections' eyebrow, brought onto the same footing as .mos-eyebrow and
   the homepage's — 13px, 600, 0.14em — so the page reads as one page. */
.mos-v1 .eyebrow {
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--purple);
      }
/* ============ HERO ============ */
.mos-v1 .hero {
        padding: 11rem 0 6.5rem;
        position: relative;
        overflow: hidden;
        background: var(--white);
      }
.mos-v1 .hero::before {
        content: "";
        position: absolute;
        top: 12%;
        right: -18%;
        width: 720px;
        height: 720px;
        background: radial-gradient(
          circle,
          var(--purple-glow) 0%,
          transparent 60%
        );
        z-index: 0;
        animation: mosV1FloatGlow 13s ease-in-out infinite;
      }
.mos-v1 .hero::after {
        content: "";
        position: absolute;
        bottom: -12%;
        left: -15%;
        width: 520px;
        height: 520px;
        background: radial-gradient(
          circle,
          rgba(97, 25, 172, 0.12) 0%,
          transparent 60%
        );
        z-index: 0;
        animation: mosV1FloatGlow 16s ease-in-out infinite reverse;
      }
@keyframes mosV1FloatGlow {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        50% {
          transform: translate(-30px, 30px) scale(1.1);
        }
      }
.mos-v1 .hero-inner {
        position: relative;
        z-index: 1;
        max-width: 1100px;
      }
@keyframes mosV1Pulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.5;
          transform: scale(1.3);
        }
      }
.mos-v1 .hero h1 {
        margin-bottom: 1.75rem;
        max-width: 18ch;
        animation: mosV1FadeUp 0.9s ease 0.2s both;
      }
.mos-v1 .hero h1 .accent {
        color: var(--purple);
        font-style: italic;
      }
.mos-v1 .hero-stats {
        margin-top: 5rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        padding-top: 3rem;
        border-top: 1px solid var(--gray-200);
        animation: mosV1FadeUp 0.9s ease 0.65s both;
      }
.mos-v1 .hero-stat .num {
        font-family: var(--font-display);
        font-size: 2.75rem;
        font-weight: 800;
        color: var(--black);
        line-height: 1;
        margin-bottom: 0.6rem;
        letter-spacing: -0.04em;
      }
.mos-v1 .hero-stat .num .small {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--purple);
      }
.mos-v1 .hero-stat .label {
        font-size: 0.78rem;
        color: var(--gray-600);
        font-weight: 500;
        line-height: 1.4;
      }
@keyframes mosV1FadeUp {
        from {
          opacity: 0;
          transform: translateY(24px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
/* ============ SCROLL REVEAL ============ */
.mos-v1 [data-reveal] {
        opacity: 0;
        transform: translateY(34px);
        transition:
          opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
          transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, transform;
      }
.mos-v1 [data-reveal="fade"] {
        transform: none;
      }
.mos-v1 [data-reveal="left"] {
        transform: translateX(-44px);
      }
.mos-v1 [data-reveal="right"] {
        transform: translateX(44px);
      }
.mos-v1 [data-reveal="scale"] {
        transform: scale(0.96);
      }
@media (prefers-reduced-motion: reduce) {
.mos-v1 [data-reveal] {
          opacity: 1 !important;
          transform: none !important;
          transition: none !important;
        }
}
/* ============ TRUST BAR ============ */
.mos-v1 .trust-bar {
        padding: 3.5rem 0;
        background: var(--gray-50);
        border-top: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
      }
.mos-v1 .trust-content {
        text-align: center;
      }
.mos-v1 .trust-label {
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--gray-400);
        margin-bottom: 1.5rem;
      }
.mos-v1 .trust-quote {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(1.2rem, 2.5vw, 1.8rem);
        color: var(--black);
        max-width: 920px;
        margin: 0 auto 1rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
      }
.mos-v1 .trust-quote .highlight {
        color: var(--purple);
      }
.mos-v1 .trust-attribution {
        font-size: 0.9rem;
        color: var(--gray-600);
        font-weight: 500;
      }
/* ============ PROBLEM ============ */
.mos-v1 .problem {
        padding: 8rem 0;
        background: var(--white);
      }
.mos-v1 .problem-header {
        max-width: 760px;
        margin: 0 auto 4rem;
        text-align: center;
      }
.mos-v1 .problem-header .eyebrow {
        margin-bottom: 1.25rem;
        display: block;
      }
.mos-v1 .problem-header h2 {
  }
.mos-v1 .problem-header h2 .accent {
        color: var(--purple);
        font-style: italic;
      }
.mos-v1 .problem-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
      }
.mos-v1 .problem-item {
        display: flex;
        gap: 1.5rem;
        padding: 2.25rem;
        border: 1px solid var(--gray-200);
        border-radius: 18px;
        transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
        background: var(--white);
      }
.mos-v1 .problem-item:hover {
        border-color: var(--purple);
        transform: translateY(-4px);
        box-shadow: 0 24px 50px -28px var(--purple-glow);
      }
.mos-v1 .problem-num {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.1rem;
        color: var(--purple);
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--purple-soft);
        display: flex;
        align-items: center;
        justify-content: center;
      }
.mos-v1 .problem-text h4 {
        margin-bottom: 0.6rem;
        color: var(--black);
      }
.mos-v1 .problem-text p {
        font-size: 0.95rem;
        color: var(--gray-600);
        line-height: 1.6;
      }
/* ============ SYSTEM OVERVIEW (Medspa OS) ============ */
.mos-v1 .system {
        padding: 8rem 0;
        background: linear-gradient(
          180deg,
          var(--gray-50) 0%,
          var(--white) 100%
        );
        position: relative;
        overflow: hidden;
      }
.mos-v1 .system-header {
        text-align: center;
        max-width: 820px;
        margin: 0 auto 4.5rem;
      }
.mos-v1 .system-header .eyebrow {
        margin-bottom: 1.5rem;
        display: block;
      }
.mos-v1 .system-header h2 {
        margin-bottom: 1.5rem;
      }
.mos-v1 .system-header h2 .accent {
        color: var(--purple);
        font-style: italic;
      }
.mos-v1 .system-header p {
        font-size: 1.15rem;
        color: var(--gray-600);
        line-height: 1.65;
      }
.mos-v1 .phases {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
      }
.mos-v1 .phase {
        background: var(--white);
        border: 1px solid var(--gray-200);
        padding: 3rem 2.5rem;
        border-radius: 20px;
        position: relative;
        transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
        overflow: hidden;
      }
.mos-v1 .phase::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          var(--purple-soft) 0%,
          transparent 50%
        );
        opacity: 0;
        transition: opacity 0.4s ease;
      }
.mos-v1 .phase:hover {
        border-color: var(--purple);
        transform: translateY(-8px);
        box-shadow: 0 30px 60px -25px var(--purple-glow);
      }
.mos-v1 .phase:hover::before {
        opacity: 1;
      }
.mos-v1 .phase > * {
        position: relative;
        z-index: 1;
      }
.mos-v1 .phase-num {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.7rem;
        color: var(--purple);
        letter-spacing: 0.2em;
        margin-bottom: 1.25rem;
        text-transform: uppercase;
      }
.mos-v1 .phase-name {
        font-family: var(--font-display);
        font-size: 1.85rem;
        font-weight: 800;
        color: var(--black);
        letter-spacing: -0.03em;
        line-height: 1.1;
        margin-bottom: 0.5rem;
      }
.mos-v1 .phase-tag {
        font-family: var(--font-body);
        font-size: 0.85rem;
        color: var(--purple);
        font-weight: 500;
        margin-bottom: 1.75rem;
        font-style: italic;
      }
.mos-v1 .phase-desc {
        font-size: 0.98rem;
        color: var(--gray-600);
        margin-bottom: 2rem;
        line-height: 1.65;
      }
.mos-v1 .phase-list {
        list-style: none;
        padding-top: 1.75rem;
        border-top: 1px solid var(--gray-200);
      }
.mos-v1 .phase-list li {
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--black);
        padding: 0.55rem 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 500;
      }
.mos-v1 .phase-list li svg {
        flex-shrink: 0;
        color: var(--purple);
      }
/* ============ WEBSITE + SEO ============ */
.mos-v1 .website-seo {
        padding: 8rem 0;
        background: var(--white);
      }
.mos-v1 .ws-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: center;
      }
.mos-v1 .ws-copy .eyebrow {
        margin-bottom: 1.5rem;
        display: block;
      }
.mos-v1 .ws-copy h2 {
        margin-bottom: 1.5rem;
      }
.mos-v1 .ws-copy h2 .accent {
        color: var(--purple);
        font-style: italic;
      }
.mos-v1 .ws-copy > p {
        font-size: 1.1rem;
        color: var(--gray-600);
        margin-bottom: 1.25rem;
        line-height: 1.7;
      }
.mos-v1 .ws-features {
        list-style: none;
        margin-top: 2rem;
      }
.mos-v1 .ws-features li {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        padding: 1rem 0;
        border-top: 1px solid var(--gray-200);
      }
.mos-v1 .ws-features li svg {
        color: var(--purple);
        flex-shrink: 0;
        margin-top: 3px;
      }
.mos-v1 .ws-features li strong {
        display: block;
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--black);
        margin-bottom: 0.2rem;
        font-size: 1rem;
      }
.mos-v1 .ws-features li span {
        font-size: 0.92rem;
        color: var(--gray-600);
        line-height: 1.55;
      }
.mos-v1 .ws-visual {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        background: linear-gradient(160deg, #140a24 0%, var(--black) 100%);
        padding: 2.5rem;
        box-shadow: 0 40px 80px -30px var(--purple-glow);
        border: 1px solid var(--gray-200);
      }
.mos-v1 .browser-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
      }
.mos-v1 .browser-dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
      }
.mos-v1 .browser-url {
        margin-left: 0.75rem;
        flex: 1;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 0.45rem 0.9rem;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.6);
        font-family: var(--font-body);
      }
.mos-v1 .serp-result {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 1.1rem 1.25rem;
        margin-bottom: 0.9rem;
      }
.mos-v1 .serp-result.top {
        border-color: var(--purple);
        background: rgba(97, 25, 172, 0.18);
        position: relative;
      }
.mos-v1 .serp-rank {
        font-family: var(--font-display);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--purple-light);
        margin-bottom: 0.4rem;
      }
.mos-v1 .serp-result.top .serp-rank {
        color: var(--gold);
      }
.mos-v1 .serp-title {
        color: var(--white);
        margin-bottom: 0.25rem;
      }
.mos-v1 .serp-meta {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.45);
      }
.mos-v1 .serp-stars {
        color: var(--gold);
        font-size: 0.85rem;
        letter-spacing: 1px;
      }
/* ============ LIFECYCLE LOOP ============ */
.mos-v1 .lifecycle {
        padding: 8rem 0;
        background: var(--white);
      }
.mos-v1 .lifecycle-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 4.5rem;
      }
.mos-v1 .lifecycle-header .eyebrow {
        margin-bottom: 1.5rem;
        display: block;
      }
.mos-v1 .lifecycle-header h2 {
        margin-bottom: 1.5rem;
      }
.mos-v1 .lifecycle-header h2 .accent {
        color: var(--purple);
        font-style: italic;
      }
.mos-v1 .lifecycle-header p {
        font-size: 1.15rem;
        color: var(--gray-600);
        line-height: 1.65;
      }
.mos-v1 .loop {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        position: relative;
      }
.mos-v1 .loop-step {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 18px;
        padding: 2.25rem 1.75rem;
        position: relative;
        transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
      }
.mos-v1 .loop-step:hover {
        border-color: var(--purple);
        transform: translateY(-6px);
        box-shadow: 0 24px 50px -28px var(--purple-glow);
      }
.mos-v1 .loop-step .step-index {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 0.72rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--purple);
        margin-bottom: 1.25rem;
      }
.mos-v1 .loop-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: var(--purple-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.25rem;
        color: var(--purple);
      }
.mos-v1 .loop-step h4 {
        color: var(--black);
        margin-bottom: 0.6rem;
      }
.mos-v1 .loop-step p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.6;
      }
.mos-v1 .loop-step .stat-chip {
        display: inline-block;
        margin-top: 1rem;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 0.82rem;
        color: var(--purple);
        background: var(--purple-soft);
        padding: 0.35rem 0.8rem;
        border-radius: 100px;
      }
.mos-v1 .loop-arrow {
        position: absolute;
        top: 50%;
        right: -0.95rem;
        transform: translateY(-50%);
        color: var(--purple);
        z-index: 2;
        background: var(--white);
        border-radius: 50%;
      }
.mos-v1 .loop-step:last-child .loop-arrow {
        display: none;
      }
.mos-v1 .loop-closer {
        margin-top: 3rem;
        text-align: center;
        background: var(--purple-soft);
        border: 1px solid rgba(97, 25, 172, 0.2);
        border-radius: 18px;
        padding: 2rem 2.5rem;
      }
.mos-v1 .loop-closer p {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--black);
        max-width: 70ch;
        margin: 0 auto;
        letter-spacing: -0.01em;
      }
.mos-v1 .loop-closer p .accent {
        color: var(--purple);
        font-style: italic;
      }
/* ============ CASE STUDY ============ */
.mos-v1 .case-study {
        padding: 8rem 0;
        background: var(--black);
        color: var(--white);
        position: relative;
        overflow: hidden;
      }
.mos-v1 .case-study::before {
        content: "";
        position: absolute;
        bottom: -10%;
        left: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          var(--purple-glow) 0%,
          transparent 60%
        );
      }
.mos-v1 .case-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: center;
      }
.mos-v1 .case-left .eyebrow {
        color: var(--purple-light);
        margin-bottom: 1.5rem;
        display: block;
      }
.mos-v1 .case-left h2 {
        margin-bottom: 2rem;
        color: var(--white);
      }
.mos-v1 .case-left h2 .accent {
        color: var(--purple-light);
        font-style: italic;
      }
.mos-v1 .case-left p {
        font-size: 1.08rem;
        color: rgba(255, 255, 255, 0.72);
        margin-bottom: 1.5rem;
        line-height: 1.65;
      }
/* A short rule above the quote rather than a bar down its left: same accent
   language as the stat cards, and the quote sits in the text column instead of
   being indented away from it. */
.mos-v1 .case-quote {
        position: relative;
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.05rem;
        font-style: italic;
        color: var(--white);
        line-height: 1.5;
      }
.mos-v1 .case-quote::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 56px;
        height: 2px;
        background: linear-gradient(90deg, var(--purple-light), transparent);
      }
.mos-v1 .case-quote .attr {
        display: block;
        margin-top: 1rem;
        font-style: normal;
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--purple-light);
        font-family: var(--font-body);
      }
.mos-v1 .case-right {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
      }
.mos-v1 .case-video-cap {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.62);
        margin-bottom: -0.4rem;
      }
.mos-v1 .case-video-cap .live-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--purple-light);
        box-shadow: 0 0 0 0 rgba(138, 61, 212, 0.6);
        animation: mosV1Pulse 2s ease-in-out infinite;
        flex-shrink: 0;
      }
.mos-v1 .case-video {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: 18px;
        overflow: hidden;
        background: #000;
        border: 1px solid rgba(138, 61, 212, 0.3);
        box-shadow:
          0 45px 90px -40px var(--purple-glow),
          0 0 0 1px rgba(255, 255, 255, 0.05),
          inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        transition:
          transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.5s ease;
      }
.mos-v1 .case-video::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        pointer-events: none;
        box-shadow: inset 0 0 60px -20px rgba(138, 61, 212, 0.4);
      }
.mos-v1 .case-video:hover {
        transform: translateY(-4px);
        box-shadow:
          0 55px 100px -38px rgba(138, 61, 212, 0.5),
          0 0 0 1px rgba(138, 61, 212, 0.4);
      }
.mos-v1 .case-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        z-index: 1;
      }
.mos-v1 .case-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
      }
.mos-v1 .case-right .metric-card {
        padding: 1.85rem 1.6rem;
      }
.mos-v1 .case-right .metric-value {
        font-size: 2.7rem;
      }
.mos-v1 .metric-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2.5rem 2rem;
        border-radius: 16px;
        transition: border-color 0.4s ease, transform 0.4s ease, background 0.4s ease;
        position: relative;
        overflow: hidden;
      }
.mos-v1 .metric-card:hover {
        border-color: var(--purple);
        background: rgba(97, 25, 172, 0.08);
        transform: translateY(-4px);
      }
.mos-v1 .metric-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--purple);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
      }
.mos-v1 .metric-card:hover::before {
        transform: scaleX(1);
      }
.mos-v1 .metric-value {
        font-family: var(--font-display);
        font-size: 3.2rem;
        font-weight: 800;
        color: var(--white);
        line-height: 1;
        margin-bottom: 0.6rem;
        letter-spacing: -0.04em;
      }
.mos-v1 .metric-value .unit {
        font-size: 1.4rem;
        color: var(--purple-light);
      }
.mos-v1 .metric-label {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
        line-height: 1.4;
      }
/* ============ TESTIMONIAL VIDEO ============ */
.mos-v1 .testimonial-section {
        padding: 8rem 0;
        background: var(--white);
      }
.mos-v1 .testimonial-grid {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: 5rem;
        align-items: center;
      }
.mos-v1 .testimonial-left .eyebrow {
        margin-bottom: 1.5rem;
        display: block;
      }
.mos-v1 .testimonial-left h2 {
        margin-bottom: 2rem;
      }
.mos-v1 .testimonial-left h2 .accent {
        color: var(--purple);
        font-style: italic;
      }
.mos-v1 .testimonial-left p {
        font-size: 1.08rem;
        color: var(--gray-600);
        margin-bottom: 1.5rem;
        line-height: 1.7;
      }
.mos-v1 .testimonial-attribution {
        margin-top: 2.5rem;
        padding-top: 2rem;
        border-top: 1px solid var(--gray-200);
      }
.mos-v1 .testimonial-name {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--black);
        margin-bottom: 0.25rem;
      }
.mos-v1 .testimonial-title {
        color: var(--gray-600);
      }
.mos-v1 .video-wrap {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: 20px;
        overflow: hidden;
        background: var(--black);
        box-shadow:
          0 40px 80px -30px var(--purple-glow),
          0 0 0 1px var(--gray-200);
      }
.mos-v1 .video-wrap iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
.mos-v1 .container {
          padding: 0 1.5rem;
        }
.mos-v1 .hero {
          padding: 8.5rem 0 4.5rem;
        }
.mos-v1 .hero-stats {
          grid-template-columns: 1fr 1fr;
          gap: 2rem 1rem;
        }
.mos-v1 .problem-grid {
          grid-template-columns: 1fr;
        }
.mos-v1 .phases {
          grid-template-columns: 1fr;
        }
.mos-v1 .ws-grid {
          grid-template-columns: 1fr;
          gap: 3rem;
        }
.mos-v1 .loop {
          grid-template-columns: 1fr;
        }
.mos-v1 .loop-arrow {
          top: auto;
          bottom: -0.95rem;
          right: 50%;
          transform: translateX(50%) rotate(90deg);
        }
.mos-v1 .case-grid {
          grid-template-columns: 1fr;
          gap: 3rem;
        }
.mos-v1 .testimonial-grid {
          grid-template-columns: 1fr;
          gap: 3rem;
        }
}

/* --- v3-only: the stats band ---------------------------------------------- */

/* This band used to be v1's hero stat strip — four numbers over a hairline
   rule, borrowed out of a hero we do not use here. It is now the card design
   the how-it-works and homepage stat bars share, in this page's light palette:
   the card sits on paper rather than a tint, so the border and the purple
   hairline across its top edge are what separate it from the band. */
.mos-statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.mos-statbar__stat {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 40px 24px 34px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(21, 21, 27, 0.04);
}

.mos-statbar__stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
}

.mos-statbar__num {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  /* Capped at 48px, not the 54px the dark bars use: "<30sec" is the longest
     value here and overruns a 251px card above that. */
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mos-statbar__label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .mos-statbar {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .mos-statbar {
    grid-template-columns: 1fr;
  }

  .mos-statbar__stat {
    padding: 32px 20px 28px;
  }

  .mos-statbar__label {
    font-size: 12px;
  }
}


/* --- v3-only: retire v1's reveal scaffolding ------------------------------ */

/* v1 hid every [data-reveal] element at opacity 0 — and, for the directional
   variants, pushed it off its resting position — then relied on its own inline
   IntersectionObserver to add .is-visible and release it. That script belongs
   to the v1 page shell and is not shipped here; on this page the site's
   motion.js drives the reveal for every band, v1 and v2 alike.

   Left in place, the leftovers do real damage. motion.js animates opacity and
   y, never x, so nothing ever cleared the x offset on [data-reveal="left"] and
   .case-left rendered a permanent 44px to the left of its column — the case
   study's copy was clipped by the viewport edge. The 1s CSS transition was the
   quieter half of the same bug: it sat on top of every GSAP tween and dragged
   the v1 bands in more slowly than the v2 ones.

   Resting appearance is unchanged — a revealed v1 element was always opacity 1
   with no transform. This only removes the starting state that had nothing
   left to end it. */
.mos-v1 [data-reveal],
.mos-v1 [data-reveal="fade"],
.mos-v1 [data-reveal="left"],
.mos-v1 [data-reveal="right"],
.mos-v1 [data-reveal="scale"] {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}


/* --- Patient Leak Audit: the accent purple --------------------------------- */

/* Everything tinted in this band — the eyebrow, the accent words in the
   headline, both sets of checkmarks, the "15 min" stamp and the
   REVIEWED/INCLUDED labels — reads from --purple-strong. Rebinding the token
   on the section swaps all of them at once and cannot leak: #audit is the only
   mos-band--dark left on the page, and the global token in tokens.css is
   untouched, so every other page keeps the lavender.

   Note this is the brand purple on a near-black band, which is about 2.1:1 —
   under the 4.5:1 that body text wants and under the 3:1 for large text and
   icons. Asked for deliberately; see the section notes if it needs revisiting. */
#audit {
  --purple-strong: var(--purple);
}