/* ==========================================================================
   /medspa-marketing/ — page layout.

   The shared house devices live in public/assets/css/service-devices.css,
   loaded first via ServicePageData.extraStyles. This file is layout that is
   genuinely this page's own; it must not redefine anything that sheet owns.
   ========================================================================== */

/* The palette and section rhythm for this page's own sections. Kept per page
   rather than moved into service-devices.css because the selector list is a
   list of THIS page's section names; service-devices.css offers .svcd-section
   for new pages, and these predate it.

   service-page.css scopes its custom properties to its own class list, so a
   sibling section outside that list would resolve them to nothing. */
.mmk-plays,
.mmk-method,
.mmk-proof,
.mmk-offer {
  --surface: #0a0a0f;
  --surface-2: #101018;
  --card-border: #1a1a24;
  --purple: #6119ac;
  --purple-light: #8b5cf6;
  --purple-glow: #7c3aed;
  --purple-border: rgba(139, 92, 246, 0.22);
  --text-primary: #ffffff;
  --text-body: #e8e8f0;
  --text-secondary: #a1a1b5;
  --text-muted: #6a6a77;
  background: var(--surface);
  color: var(--text-body);
  font-family: var(--font-body);
  font-stretch: var(--wdth-body, 100%);
  padding: var(--section-y, clamp(5rem, 10vw, 11rem)) var(--gutter, 24px);
  -webkit-font-smoothing: antialiased;
}

/* Template-owned section tops. service-page.css only sets position on the
   hero, so these four need it before a pseudo-element can pin to them. */
.svc-problem,
.svc-includes,
.svc-proof,
.svc-faq {
  position: relative;
}

/* Hero entrance. The hero is in view at load, so this is a timed beat rather
   than a scroll trigger. motion.js scopes its own hero timeline to
   .hp-b--hero, and widening that selector would change all four sibling
   pages, so the sequence lives here instead. .svc-hero__lead is
   display:contents, which leaves its children in the layout tree, so `> *`
   still matches them. */
.has-motion .svc-hero__lead > *,
.has-motion .svc-hero .svc-stats {
  animation: mmk-rise 0.9s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.has-motion .svc-hero__lead > *:nth-child(2) {
  animation-delay: 0.08s;
}

.has-motion .svc-hero__lead > *:nth-child(3) {
  animation-delay: 0.16s;
}

.has-motion .svc-hero__lead > *:nth-child(4) {
  animation-delay: 0.24s;
}

.has-motion .svc-hero__lead > *:nth-child(5) {
  animation-delay: 0.3s;
}

/* --- Responsive -------------------------------------------------------------- */

@media (max-width: 640px) {
  /* "TREATMENT ROOMS" is long and the H1 runs to four words per line on a
     phone. Narrow the width axis rather than the size: Archivo is variable
     across 62-125%, and that axis is the reason the family was chosen, so this
     buys roughly 14% of line width at the same optical scale. A font-size
     override here would fork this page off typography.css. */
  .svc-hero__h1 {
    font-stretch: 92%;
  }
}


/* ==========================================================================
   PAGE LAYOUTS

   The sections this page has that its twin does not.
   ========================================================================== */

/* --- Problem: copy beside a drawing ---------------------------------------- */

.mmk-figure--aside {
  align-self: center;
}

/* --- The system stack ------------------------------------------------------
   Five channels. A three-column grid with the first cell spanning two columns
   gives exactly five cells, so there is no orphan to pad. The wide cell is the
   channel that compounds, which is also the one we want read first. */

.mmk-stack {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
}

.mmk-stack__lead {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.1rem);
}

.mmk-stack .svc-card,
.mmk-stack__lead {
  transition: border-color var(--dur, 340ms) var(--ease-out),
    transform var(--dur, 340ms) var(--ease-out);
}

.mmk-stack .svc-card:hover {
  border-color: var(--purple-border);
  transform: translateY(-2px);
}

.mmk-stack__body a,
.mmk-plays__body a,
.mmk-proof__p a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--purple-border);
  transition: text-decoration-color var(--dur, 340ms) var(--ease-out);
}

.mmk-stack__body a:hover,
.mmk-plays__body a:hover,
.mmk-proof__p a:hover,
.mmk-stack__body a:focus-visible,
.mmk-plays__body a:focus-visible,
.mmk-proof__p a:focus-visible {
  text-decoration-color: var(--purple-light);
}

/* --- Method: the three-stage spine ------------------------------------------
   Same device as the twin page. how-it-works.html:625-745. */

.mmk-method__lede {
  margin-top: 1.1rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* --- Proof: the money number beside its chart ------------------------------- */

.mmk-proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.mmk-proof__p {
  margin-top: 1.25rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 58ch;
}

/* --- Offer ------------------------------------------------------------------
   The only offer on the page, so it wears the lit panel at full strength. */

.mmk-offer__card {
  padding: clamp(1.75rem, 4vw, 3rem);
}

.mmk-offer__p {
  margin-top: 1.1rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 62ch;
}

.mmk-offer__actions {
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
}

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .mmk-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mmk-stack__lead {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .mmk-stack {
    grid-template-columns: 1fr;
  }
  .mmk-stack__lead {
    grid-template-columns: 1fr;
  }
  .mmk-proof__inner {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 980px) {
  .mmk-play {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mmk-play__body {
    grid-column: 2;
  }
}


@media (max-width: 640px) {
  .mmk-play {
    gap: 0.6rem 1rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  .mmk-stack .svc-card,
  .mmk-stack__body a,
  .mmk-plays__body a,
  .svc-card .mmk-mark {
    transition: none;
  }
}

/* --- Restored page layout ---------------------------------------------------
   This page's own rules: the five-cell stack grid and its links. */

.mmk-stack .svc-card {
  transition: border-color var(--dur, 340ms) var(--ease-out),
    transform var(--dur, 340ms) var(--ease-out);
}

.mmk-stack .svc-card:hover {
  border-color: var(--purple-border);
  transform: translateY(-2px);
}

.svc-card .svcd-mark {
  color: var(--text-muted);
  transition: color var(--dur, 340ms) var(--ease-out);
}

.mmk-stack .svc-card:hover .svcd-mark {
  color: var(--purple-light);
}

.mmk-stack__body a,
.mmk-plays__body a,
.mmk-proof__p a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--purple-border);
  transition: text-decoration-color var(--dur, 340ms) var(--ease-out);
}

.mmk-stack__body a:hover,
.mmk-plays__body a:hover,
.mmk-proof__p a:hover,
.mmk-stack__body a:focus-visible,
.mmk-plays__body a:focus-visible,
.mmk-proof__p a:focus-visible {
  text-decoration-color: var(--purple-light);
}

.mmk-figure--aside {
  align-self: center;
}

@media (max-width: 1080px) {
  .mmk-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mmk-stack__lead {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .mmk-stack {
    grid-template-columns: 1fr;
  }
  .mmk-stack__lead {
    grid-template-columns: 1fr;
  }
  .mmk-proof__inner {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mmk-stack .svc-card,
  .mmk-stack__body a,
  .mmk-plays__body a,
  .svc-card .svcd-mark {
    transition: none;
  }
}