/* ==========================================================================
   Coming-soon service pages
   Loaded by src/pages/service-soon.njk (front matter: pageCss: service-soon),
   which paginates src/_data/servicesSoon.json into four pages: AIVA,
   Telehealth Callbacks, Patient Requests and Patient Wellness Check-Ins.

   Shared furniture (.mf-h2, .mf-lead, .mf-btn*, .mf-eyebrow*, .mf-reveal,
   .mf-horizon, .mf-chip-icon) comes from framework/components.css. Colour,
   type, radius and shadow all come from tokens — see theme-mediflare.css and
   framework/tokens.css. No raw hex below except inside gradient ramps, where
   the stops are the design itself.

   The four pages share one stylesheet on purpose. They are a family: same
   rhythm (paper → coal → paper), same launch card, same closing CTA, so a
   reader who lands on two of them recognises the second immediately as
   another thing that is not out yet.
   ========================================================================== */

/* ==========================================================================
   Shared section furniture
   ========================================================================== */

.mf-ss-sechead {
  text-align: center;
  max-inline-size: 760px;
  margin: 0 auto 52px;
}

.mf-ss-sechead .mf-eyebrow { margin-block-end: 20px; }


/* ==========================================================================
   The coming-soon badge

   Said once at the very top of the page, before the headline. Everything
   below it describes a product in the present tense, which only works if the
   reader has already been told it is not out yet.
   ========================================================================== */

/* The badge and the eyebrow read as one meta line above the headline, so
   they share a row and wrap together rather than the eyebrow stranding
   itself on a line of its own. */
.mf-ss-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-block-end: 22px;
}

.mf-ss-hero__meta .mf-eyebrow { margin: 0; }

.mf-ss-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 16px 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--flare-a08);
  border: 1px solid var(--flare-a25);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-700);
}

.mf-ss-status__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--grad-cta);
  box-shadow: 0 0 0 0 var(--flare-a40);
  animation: ssPulse 2.4s var(--ease-out) infinite;
}

@keyframes ssPulse {
  0%   { box-shadow: 0 0 0 0 var(--flare-a40); }
  70%  { box-shadow: 0 0 0 8px rgb(232 84 10 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(232 84 10 / 0); }
}


/* ==========================================================================
   Hero
   ========================================================================== */

.mf-ss-hero {
  position: relative;
  overflow: clip;
  padding: 116px 48px 76px;
}

.mf-ss-hero__glow {
  position: absolute;
  inset-block-start: -200px;
  inset-inline-end: -140px;
  inline-size: 760px;
  block-size: 760px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--flare-a12), transparent 62%);
}

.mf-ss-hero__wrap {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.mf-ss-hero__wrap > * { min-inline-size: 0; }

/* --- Hero product shot -------------------------------------------------

   Only the services with a screen built in the app carry one; the rest keep
   the card on its own, so the layout has to read well both ways.

   Where there is a shot, it is captured in the app's own dark theme and sits
   inside the page gutter, whole. It used to run off the right edge of the
   viewport — the "you are looking at the product, not a picture of it" read —
   but the app's screens are dense, and at laptop widths the bleed swallowed a
   whole column of the UI and cut the table mid-cell, which reads as a broken
   image rather than a continuing one. Scale carries the same weight without
   the damage: the shot still leads the hero, and the launch card still floats
   over its lower-left corner. */

/* The wider gap is room for the highlights card, which reaches back over
   the shot's left edge and must not land on the text. */
.mf-ss-hero__wrap:has(.mf-ss-hero__shot) {
  grid-template-columns: 0.92fr 1.08fr;
  column-gap: 96px;
}

/* A little wider than its column — into the gutter, never past it, so the
   whole screen stays on screen at every width. */
.mf-ss-hero__art.mf-ss-hero__art-shot {
  --ss-shot-bleed: clamp(0px, calc((100vw - var(--content-max)) / 2 - 48px), 56px);
  position: relative;
  display: block;
  inline-size: calc(100% + var(--ss-shot-bleed));
}

.mf-ss-hero__shot { margin: 0; }

.mf-ss-hero__shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius-panel);
  border: 1px solid var(--coal-400);
}

.mf-ss-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(32px, 3.3vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 18px 0 0;
  text-wrap: balance;
}

/* Balance works per block, and the accent half follows a <br>, so on its own
   the browser happily leaves a single word behind ("answered before they're /
   asked."). As an inline-block it balances as its own run and splits evenly
   whenever it has to wrap. */
/* Inline, not inline-block: SplitText (the hero's page-load sequence) reads
   the words of an inline-block run without the spaces between them, and
   "have to" came out "haveto" while the lines rose. The balance applies to
   the heading as a whole. */

/* Measure held short of the column: on the shot pages the launch card floats
   back over this edge, and a lead that runs the full column width lands under
   it. */
.mf-ss-hero__lead {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  max-inline-size: 47ch;
  margin: 24px 0 0;
}

.mf-ss-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 32px;
}

.mf-ss-hero__note {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-inline-size: 52ch;
  margin: 22px 0 0;
}

/* --- The art: one visual, small pieces floating on it -------------------

   The same composition as the homepage and Practice Websites heroes: a warm
   disc of light behind the visual, and a couple of small cards drifting on
   its edges. The pieces fade up in turn once service-soon.js arms them
   ([data-ss-floats="armed"]), then bob; without JS they are simply there. */

.mf-ss-hero__art {
  --ss-float-x: -44px;
  position: relative;
}

.mf-ss-hero__disc {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-start: 58%;
  inline-size: min(620px, 110%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(232 84 10 / 0.5) 0%,
    rgb(240 120 40 / 0.32) 34%,
    rgb(248 178 112 / 0.14) 58%,
    rgb(248 178 112 / 0) 74%
  );
  filter: blur(70px);
}

.mf-ss-hero__shot,
.mf-ss-phone { z-index: 1; }

.mf-ss-float {
  position: absolute;
  z-index: 3;
}

/* Hidden instantly when armed, then transitioned in — the transition lives
   on .is-in only, or the hiding itself would be animated. */
[data-ss-floats="armed"] .mf-ss-float:not(.is-in) { opacity: 0; translate: 0 14px; }

.mf-ss-float.is-in {
  transition: opacity 0.7s var(--ease), translate 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: calc(var(--i) * 0.22s + 0.35s);
}

.mf-ss-float.is-in .mf-ss-float__inner { animation: mfFloat 5s ease-in-out infinite alternate; }
.mf-ss-float-list.is-in .mf-ss-float__inner { animation-delay: 1.3s; }

.mf-ss-float__inner { margin: 0; }

/* Paper pill: the service and its stage. */
.mf-ss-float__inner-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 11px;
  border-radius: var(--radius-pill);
  background: var(--ink-on-dark);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-sm);
  white-space: nowrap;
}

.mf-ss-float__name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.mf-ss-float__stage {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-cta);
}

.mf-ss-float__stage-beta { background: var(--grad-beta); }

/* Coal card: the three highlights, the homepage's "Everything, Included". */
.mf-ss-float__inner-dark {
  inline-size: 272px;
  padding: 17px 19px 18px;
  border-radius: var(--radius-panel);
  background: var(--panel-dark);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-card-dark);
}

.mf-ss-float__title {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
}

.mf-ss-float__list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-ss-float__list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  align-items: start;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-on-dark-body);
}

.mf-ss-float__list svg { margin-block-start: 3px; }

/* On a shot: the stage pill rides the top-right corner and the highlights sit
   along the foot on the left, with the demo at the lower right.

   The stage is what the eye should meet first — a real capture of the app has
   to be read next to "Coming soon" or "Beta test", never on its own as a
   finished product — so it takes the corner the reader arrives at rather than
   the one they leave by. The highlights are the slower read and sit low, where
   they follow the lead paragraph opposite them instead of racing the headline. */
.mf-ss-hero__art-shot .mf-ss-float-stage { inset-block-start: -21px; inset-inline-end: 36px; }
.mf-ss-hero__art-shot .mf-ss-float-list { inset-block-end: -40px; inset-inline-start: var(--ss-float-x); }

/* No visual at all: the pieces simply stack. */
.mf-ss-hero__art-plain { display: grid; justify-items: start; gap: 16px; }
.mf-ss-hero__art-plain .mf-ss-float { position: static; }


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

   Each service plays one small loop in its hero (heroDemo in
   servicesSoon.json). The shot pages float theirs over the shot's
   lower-right corner, opposite the highlights card, so the two sit at either
   end of the foot rather than stacking; kept small so the hero still reads as
   the shot and the card.

   The resting state — no JS, reduced motion — is each demo's finished frame.
   service-soon.js adds [data-play] to fold a demo back to its start and step
   it through with is-* classes on the root. */

.mf-ss-hero__shot { position: relative; }

.mf-ss-demo {
  position: absolute;
  inset-block-end: -26px;
  inset-inline-end: -14px;
  z-index: 2;
}

.mf-ss-demo p { margin: 0; }

/* On laptops the shot is narrower and the launch card relatively larger, so
   the demos scale down from the corner they are anchored to. */
@media (max-width: 1320px) {
  .mf-ss-demo { scale: 0.84; transform-origin: 100% 100%; }
}

/* Laptops: a narrower gap for the shot pages so the text column keeps its
   measure, and on the phone page a smaller phone, a slightly wider art
   column, and a pill that drops the service name (the eyebrow already says
   it) so it cannot reach back across the gap. */
@media (min-width: 1081px) and (max-width: 1320px) {
  .mf-ss-hero__wrap:has(.mf-ss-hero__shot) { column-gap: 72px; }
  .mf-ss-hero__art { --ss-float-x: -30px; }
  .mf-ss-hero__art-shot .mf-ss-float__inner-dark { inline-size: 250px; }

  .mf-ss-hero__wrap .mf-ss-hero__art.mf-ss-hero__art-phone { --ss-phone-w: 256px; padding-block-end: 90px; }
}

/* Beside the phone, the pill is kept to the stage alone until it drops into
   flow on a phone screen: with the full service name it is wide enough to
   run back over the text column, or off the page on a tablet. */
@media (min-width: 701px) and (max-width: 1320px) {
  .mf-ss-hero__art-phone .mf-ss-float__name { display: none; }
}

/* The pointer and its click ring, centred on whatever they are dropped into:
   the pointer's tip lands in the middle, gliding in from up and to the left. */
.mf-ss-demo__cursor {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  translate: -150px -120px;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.25));
  transition: translate 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s var(--ease);
}

.mf-ss-demo__ring {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 2;
  inline-size: 30px;
  block-size: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid var(--flare-500);
  opacity: 0;
  pointer-events: none;
}

.mf-ss-demo[data-play].is-cursor .mf-ss-demo__cursor { opacity: 1; translate: 0 0; }
.mf-ss-demo[data-play].is-click .mf-ss-demo__ring { animation: mf-ss-demo-ping 0.5s ease-out forwards; }

@keyframes mf-ss-demo-ping { 0% { opacity: 0.9; scale: 0.4; } 100% { opacity: 0; scale: 2.2; } }
@keyframes mf-ss-demo-in   { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes mf-ss-demo-tick { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }

/* The small status card Telehealth Callbacks and Patient Requests float. */
.mf-ss-demo__card {
  inline-size: 256px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-dark);
  font-family: var(--font-body);
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}

.mf-ss-demo[data-play]:not(.is-in) .mf-ss-demo__card { opacity: 0; translate: 0 10px; }

.mf-ss-demo__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mf-ss-demo__head .mf-chip-icon { inline-size: 26px; block-size: 26px; border-radius: 8px; }

.mf-ss-demo__title {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.mf-ss-demo__pill {
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--status-soon);
  background: var(--status-soon-soft);
  border: 1px solid var(--status-soon-line);
}

.mf-ss-demo__pill-ok {
  color: var(--status-live);
  background: var(--status-live-soft);
  border-color: var(--status-live-line);
}

.mf-ss-demo .mf-ss-demo__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 10px;
  padding-block-start: 9px;
  border-block-start: 1px solid var(--border-light);
  font-size: 10.5px;
  color: var(--ink-muted);
}

.mf-ss-demo__foot svg { color: var(--status-live); flex: none; }

.mf-aiva-demo { inline-size: 56px; block-size: 56px; }

.mf-aiva-demo__bubble {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-cta);
  box-shadow: 0 10px 24px -6px var(--flare-a40);
  scale: 0;
}

.mf-aiva-demo__panel {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  inline-size: 256px;
  block-size: 318px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-dark);
  z-index: 1;
  transition: block-size 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s var(--ease);
}

.mf-aiva-demo__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: var(--grad-cta);
  color: #fff;
  flex: none;
}

.mf-aiva-demo__headicon {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 8px;
  border: 1.5px solid rgb(255 255 255 / 0.5);
}

.mf-aiva-demo__headtext { flex: 1; display: grid; line-height: 1.2; }
.mf-aiva-demo__name { font-family: var(--font-ui); font-size: 12.5px; font-weight: var(--weight-bold); letter-spacing: 0.04em; }
.mf-aiva-demo__sub { font-family: var(--font-body); font-size: 10px; opacity: 0.85; }

/* A drawn ×, so the header reads as a real widget without another icon. */
.mf-aiva-demo__close {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  opacity: 0.85;
}

.mf-aiva-demo__close::before,
.mf-aiva-demo__close::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 1.8px;
  border-radius: 2px;
  background: #fff;
  rotate: 45deg;
}

.mf-aiva-demo__close::after { rotate: -45deg; }

.mf-aiva-demo__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px;
  font-family: var(--font-body);
}

.mf-aiva-demo__empty {
  margin-block-end: auto;
  padding: 14px 6px 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.mf-aiva-demo .mf-aiva-demo__emptyq {
  margin-block-end: 3px;
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}

.mf-aiva-demo__msg {
  max-inline-size: 84%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
}

.mf-aiva-demo__msg-user {
  align-self: flex-end;
  background: var(--flare-a12);
  color: var(--ink);
  border-end-end-radius: 3px;
}

.mf-aiva-demo__msg-bot {
  align-self: flex-start;
  background: var(--paper-500);
  color: var(--ink-body);
  border-end-start-radius: 3px;
}

.mf-aiva-demo__dots {
  display: none;
  align-self: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border-end-start-radius: 3px;
  background: var(--paper-500);
}

.mf-aiva-demo__dots span {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--ink-soft);
  animation: mf-aiva-dot 1s ease-in-out infinite;
}

.mf-aiva-demo__dots span:nth-child(2) { animation-delay: 0.15s; }
.mf-aiva-demo__dots span:nth-child(3) { animation-delay: 0.3s; }

.mf-aiva-demo__inputbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-block-start: 1px solid var(--border-light);
}

.mf-aiva-demo__field {
  flex: 1;
  display: flex;
  align-items: center;
  min-block-size: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-body);
  white-space: nowrap;
  overflow: hidden;
}

.mf-aiva-demo__placeholder { color: var(--ink-faint); }

.mf-aiva-demo__caret {
  display: none;
  inline-size: 1.3px;
  block-size: 12px;
  margin-inline: 1px;
  background: var(--flare-600);
  animation: mf-aiva-caret 0.9s step-end infinite;
}

.mf-aiva-demo__send {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: var(--grad-cta);
  flex: none;
}

.mf-aiva-demo__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0 8px;
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--ink-faint);
}

.mf-aiva-demo__foot svg { color: var(--flare-600); }

/* --- Playing: folded back to a bubble, then stepped through by class ---- */

.mf-aiva-demo[data-play] .mf-aiva-demo__panel { block-size: 0; opacity: 0; border-color: transparent; }
.mf-aiva-demo[data-play].is-open .mf-aiva-demo__panel { block-size: 318px; opacity: 1; border-color: var(--border-light); }

.mf-aiva-demo[data-play].is-bubble .mf-aiva-demo__bubble {
  animation:
    mf-aiva-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) forwards,
    mf-aiva-pulse 2.2s ease-in-out 0.6s infinite;
}

/* Opened, the panel takes the bubble's place, as the real widget does. */
.mf-aiva-demo[data-play].is-open .mf-aiva-demo__bubble { animation: none; scale: 0; }


.mf-aiva-demo[data-play]:not(.is-sent) .mf-aiva-demo__msg-user,
.mf-aiva-demo[data-play]:not(.is-replied) .mf-aiva-demo__msg-bot { display: none; }
.mf-aiva-demo[data-play].is-sent .mf-aiva-demo__empty { display: none; }
.mf-aiva-demo[data-play].is-sent .mf-aiva-demo__msg-user,
.mf-aiva-demo[data-play].is-replied .mf-aiva-demo__msg-bot { animation: mf-aiva-msg 0.35s var(--ease) both; }
.mf-aiva-demo[data-play].is-thinking .mf-aiva-demo__dots { display: flex; animation: mf-aiva-msg 0.3s var(--ease) both; }
.mf-aiva-demo[data-play]:not(.is-sent) .mf-aiva-demo__empty { display: block; }

.mf-aiva-demo:not([data-play]) .mf-aiva-demo__empty { display: none; }

.mf-aiva-demo[data-play].is-typing .mf-aiva-demo__placeholder { display: none; }
.mf-aiva-demo[data-play].is-typing .mf-aiva-demo__caret { display: inline-block; }

@keyframes mf-aiva-pop   { from { scale: 0; } to { scale: 1; } }
@keyframes mf-aiva-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes mf-aiva-msg   { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes mf-aiva-dot   { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -4px; } }
@keyframes mf-aiva-caret { 50% { opacity: 0; } }


/* --- Telehealth Callbacks: the queue ticking down ----------------------- */

.mf-tq-demo__queue {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 10px;
  margin-block-start: 12px;
}

.mf-tq-demo__label,
.mf-tq-demo__wait { font-size: 10.5px; color: var(--ink-soft); }

.mf-tq-demo__wait b { font-weight: var(--weight-bold); color: var(--ink-body); }

.mf-tq-demo__pos {
  grid-row: span 2;
  grid-column: 2;
  grid-row-start: 1;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  background: var(--grad-brand-flat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mf-tq-demo.is-tick .mf-tq-demo__pos { animation: mf-ss-demo-tick 0.4s var(--ease) both; }

.mf-tq-demo__called {
  display: none;
  align-items: center;
  gap: 10px;
  margin-block-start: 12px;
}

.mf-tq-demo__ring {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--status-live);
  flex: none;
}

.mf-tq-demo__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--status-live);
  animation: mf-tq-ring 1.6s ease-out infinite;
}

.mf-tq-demo__who { display: block; font-size: 12px; font-weight: var(--weight-bold); color: var(--ink); line-height: 1.3; }
.mf-tq-demo__hint { display: block; font-size: 10.5px; color: var(--ink-soft); }

/* Resting (and finished) state is approved; while playing, the queue shows
   until .is-approved swaps it for the call. */
.mf-tq-demo__queued, .mf-tq-demo__queue { display: none; }
.mf-tq-demo__called { display: flex; }

.mf-tq-demo[data-play]:not(.is-approved) .mf-tq-demo__queued { display: inline; }
.mf-tq-demo[data-play]:not(.is-approved) .mf-tq-demo__queue { display: grid; }
.mf-tq-demo[data-play]:not(.is-approved) .mf-tq-demo__approved,
.mf-tq-demo[data-play]:not(.is-approved) .mf-tq-demo__called,
.mf-tq-demo[data-play]:not(.is-approved) .mf-ss-demo__foot { display: none; }
.mf-tq-demo[data-play].is-approved .mf-tq-demo__called,
.mf-tq-demo[data-play].is-approved .mf-ss-demo__foot { animation: mf-ss-demo-in 0.4s var(--ease) both; }

@keyframes mf-tq-ring { from { opacity: 0.7; scale: 1; } to { opacity: 0; scale: 1.7; } }


/* --- Patient Requests: approved with a click --------------------------- */

.mf-ss-demo .mf-pr-demo__med {
  margin-block-start: 11px;
  font-size: 13.5px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.mf-pr-demo__meta { font-size: 10.5px; color: var(--ink-soft); }

.mf-ss-demo .mf-pr-demo__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 10px;
  padding-block-start: 9px;
  border-block-start: 1px solid var(--border-light);
  font-size: 10.5px;
  color: var(--ink-soft);
}

.mf-pr-demo__fee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.mf-pr-demo__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-block-start: 11px;
}

.mf-pr-demo__btn {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 28px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  background: #fff;
}

.mf-pr-demo__btn-yes {
  color: var(--ink-on-dark);
  background: var(--grad-cta);
  border-color: transparent;
}

/* Resting state is approved: paid, confirmed, no buttons left to press. */
.mf-pr-demo__waiting, .mf-pr-demo__auth, .mf-pr-demo__actions { display: none; }

.mf-pr-demo[data-play]:not(.is-approved) .mf-pr-demo__waiting,
.mf-pr-demo[data-play]:not(.is-approved) .mf-pr-demo__auth { display: inline; }
.mf-pr-demo[data-play]:not(.is-approved) .mf-pr-demo__actions { display: grid; }
.mf-pr-demo[data-play]:not(.is-approved) .mf-pr-demo__done,
.mf-pr-demo[data-play]:not(.is-approved) .mf-pr-demo__paid,
.mf-pr-demo[data-play]:not(.is-approved) .mf-pr-demo__confirm { display: none; }
.mf-pr-demo[data-play].is-approved .mf-pr-demo__done,
.mf-pr-demo[data-play].is-approved .mf-pr-demo__paid,
.mf-pr-demo[data-play].is-approved .mf-pr-demo__confirm { animation: mf-ss-demo-in 0.35s var(--ease) both; }


/* --- Wellness Check-Ins: a reminder landing on a phone -----------------

   No screen in the app to show yet, so a phone takes the shot's place: right
   of the column, with the launch card floated over its lower-left the way it
   floats over a shot. Kept to roughly the card's own height. */

/* The phone is the visual, centred in the column and sized by --ss-phone-w
   (it is twice as tall as it is wide). Neither piece may cover a
   notification: the pill only meets the phone's left bezel, beside the
   notifications rather than on them, and the highlights card floats over
   the empty foot of the lock screen, starting below where the third
   notification ends (about 424px down the phone at every width, since the
   notifications are fixed-size). */
.mf-ss-hero__wrap:has(.mf-ss-phone) { grid-template-columns: 1fr 1fr; }

.mf-ss-hero__art.mf-ss-hero__art-phone {
  --ss-phone-w: 290px;
  /* The phone is centred in the art box and the box is exactly the phone plus
     this padding, so the phone's top edge sits exactly --ss-phone-pad down.
     The stage pill is positioned off that, which is why it is named rather
     than written twice. */
  --ss-phone-pad: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: var(--ss-phone-pad);
}

/* Same reading order as the shot pages — stage high on the right, highlights
   low on the left — but anchored to the art box rather than measured out from
   the phone. The pill is the full service name plus its stage, wider than the
   gap beside the phone, so hanging it off the phone's right edge ran it off
   the side of the page. Anchored to the art it floats over the phone instead,
   which is what the shot pages already do with theirs. */
/* Pinned to the top of the art, which puts it across the phone's top edge —
   the pill is a label on the device, and it reads as one straddling the edge
   rather than floating a third of the way down the screen. Starting it above
   the phone rather than at a measured offset means it still straddles if the
   pill's own height changes. */
.mf-ss-hero__art-phone .mf-ss-float-stage {
  inset-block-start: 0;
  inset-inline-end: 0;
}

.mf-ss-hero__art-phone .mf-ss-float-list {
  inset-block-start: calc(20px + 428px);
  inset-inline-start: 0;
}

.mf-ss-phone {
  position: relative;
  inline-size: var(--ss-phone-w);
  block-size: calc(var(--ss-phone-w) * 2);
  padding: 7px;
  border-radius: 38px;
  background: var(--coal-900);
  box-shadow: var(--shadow-card-dark);
  flex: none;
}

.mf-ss-phone p { margin: 0; }

.mf-ss-phone__screen {
  position: relative;
  block-size: 100%;
  overflow: hidden;
  padding: 12px 10px;
  border-radius: 31px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(254 142 19 / 0.55), transparent 70%),
    linear-gradient(180deg, var(--flare-700), var(--coal-800));
  font-family: var(--font-body);
  color: #fff;
}

.mf-ss-phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 12px;
  font-size: 10px;
  font-weight: var(--weight-bold);
}

.mf-ss-phone__bars { display: flex; align-items: end; gap: 2px; }
.mf-ss-phone__bars i { inline-size: 3px; border-radius: 1px; background: #fff; }
.mf-ss-phone__bars i:nth-child(1) { block-size: 4px; }
.mf-ss-phone__bars i:nth-child(2) { block-size: 6px; }
.mf-ss-phone__bars i:nth-child(3) { block-size: 8px; }

.mf-ss-phone .mf-ss-phone__clock {
  margin-block-start: 26px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 58px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.mf-ss-phone .mf-ss-phone__date {
  margin-block-start: 4px;
  text-align: center;
  font-size: 11.5px;
  opacity: 0.85;
}

.mf-wc-demo__stack {
  display: grid;
  margin-block-start: 26px;
}

/* The lock screen's torch and camera, and the home bar: the empty foot of
   the screen the highlights card floats over. */
.mf-ss-phone__foot {
  position: absolute;
  inset-inline: 22px;
  inset-block-end: 26px;
  display: flex;
  justify-content: space-between;
}

.mf-ss-phone__foot i {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mf-ss-phone__foot::after {
  content: "";
  position: absolute;
  inset-block-end: -16px;
  inset-inline-start: 50%;
  inline-size: 36%;
  block-size: 4px;
  translate: -50% 0;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.85);
}

/* Each notification sits in a slot that opens from nothing, so a new one
   pushes the older ones down rather than jumping in over them. */
.mf-wc-demo__slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mf-wc-demo__slot > .mf-ss-phone__note { min-block-size: 0; overflow: hidden; }

.mf-ss-phone__note {
  margin-block-end: 7px;
  padding: 8px 10px 9px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.86);
  color: var(--ink);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}

.mf-ss-phone__app {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mf-ss-phone__appicon {
  display: grid;
  place-items: center;
  inline-size: 15px;
  block-size: 15px;
  border-radius: 4px;
}

.mf-ss-phone__appicon-sms { background: var(--status-beta); }
.mf-ss-phone__appicon-mail { background: var(--grad-cta); }

.mf-ss-phone__when { margin-inline-start: auto; text-transform: none; letter-spacing: 0; font-weight: var(--weight-normal); }

.mf-ss-phone .mf-ss-phone__from { margin-block-start: 3px; font-size: 11.5px; font-weight: var(--weight-bold); }

.mf-ss-phone__text {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mf-wc-demo__skip {
  position: absolute;
  inset-block-start: 46%;
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

/* Resting: all three in, the first two a week old. */
.mf-wc-demo__now { display: none; }

.mf-wc-demo[data-play] .mf-wc-demo__slot { grid-template-rows: 0fr; }
.mf-wc-demo[data-play] .mf-ss-phone__note { opacity: 0; translate: 0 -8px; }
.mf-wc-demo[data-play].is-sms .mf-wc-demo__slot-1,
.mf-wc-demo[data-play].is-mail .mf-wc-demo__slot-2,
.mf-wc-demo[data-play].is-reminder .mf-wc-demo__slot-3 { grid-template-rows: 1fr; }
.mf-wc-demo[data-play].is-sms .mf-wc-demo__slot-1 .mf-ss-phone__note,
.mf-wc-demo[data-play].is-mail .mf-wc-demo__slot-2 .mf-ss-phone__note,
.mf-wc-demo[data-play].is-reminder .mf-wc-demo__slot-3 .mf-ss-phone__note { opacity: 1; translate: 0 0; }
.mf-wc-demo[data-play]:not(.is-later) .mf-wc-demo__now { display: inline; }
.mf-wc-demo[data-play]:not(.is-later) .mf-wc-demo__ago { display: none; }
.mf-wc-demo[data-play].is-skip .mf-wc-demo__skip { opacity: 1; }
.mf-wc-demo[data-play].is-out .mf-ss-phone__note { opacity: 0; }


/* ==========================================================================
   How it works
   ========================================================================== */

/* Flat paper rather than the page wash, because the arch above it closes on a
   flat dome (--wave-fill, paper-500) — left transparent, the fixed wash would
   step against that dome, and the step would slide as the page scrolled. The
   .mf-horizon below opens on paper-600, close enough to paper-500 that the
   section's other edge stays seamless. Top padding is trimmed: the dome
   already carries most of the air the heading used to need. */
.mf-ss-how {
  background: var(--paper-500);
  padding: 40px 40px 100px;
}

.mf-ss-how__inner {
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

/* Open, not boxed: two sides facing each other across a spine — a hairline
   that fades in and out of the brand orange down the middle of the gap. */
.mf-ss-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 136px;
  max-inline-size: 1040px;
  margin-inline: auto;
}

.mf-ss-cols__spine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 1px;
  translate: -50% 0;
  background: linear-gradient(180deg, transparent, var(--flare-a30) 18%, var(--flare-a30) 82%, transparent);
}

/* One perspective only (Wellness Check-Ins): the heading takes the left of
   the pair and the column the right, the spine between them — the shape
   the two-column pages have, with the heading standing in for the other
   side. */
.mf-ss-how-solo .mf-ss-how__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 136px;
  align-items: center;
  max-inline-size: 1040px;
  position: relative;
}

.mf-ss-how-solo .mf-ss-sechead {
  text-align: start;
  max-inline-size: none;
  margin: 0;
}

.mf-ss-how-solo .mf-ss-sechead .mf-h2 br { display: none; }
.mf-ss-how-solo .mf-ss-sechead .mf-h2 { text-wrap: balance; }

.mf-ss-cols-solo {
  grid-template-columns: 1fr;
  max-inline-size: none;
  margin-inline: 0;
}

/* The spine sits in the inner's gap, not the column's. */
.mf-ss-cols-solo .mf-ss-cols__spine { inset-inline-start: -68px; inset-block: -20px; }

.mf-ss-col .mf-chip-icon { margin-block-end: 18px; }

.mf-ss-col__label {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}

.mf-ss-col__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-muted);
  margin: 0;
}

.mf-ss-col__body + .mf-ss-col__body { margin-block-start: 16px; }

.mf-ss-col__points {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* A short brand-gradient dash rather than a tick — the ticks belong to the
   At a glance list further down, and these are steps, not inclusions. */
.mf-ss-col__points li {
  position: relative;
  padding-inline-start: 26px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.mf-ss-col__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.8em;
  inline-size: 12px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--grad-brand-flat);
}


/* ==========================================================================
   Detail run — the dark section
   ========================================================================== */

.mf-ss-detail {
  position: relative;
  /* Clipped at the sides only. The pinned stage's glow is a screen-sized box
     centred on the stage, and cutting it at the section's top edge left a
     hard line under the horizon ramp; let it run up over the ramp instead,
     where its own fade-out ends it. */
  overflow: clip visible;
  padding: 92px 40px 104px;
  background: var(--coal-900);
  /* Closes the hairline the horizon band above can leave at some zoom
     levels — the same margin the other pages' coal sections carry. */
  margin-block-start: -2px;
}

.mf-ss-detail__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Both blooms sit wholly inside the section: one that reached past the
     top edge was cut off there and drew a line under the horizon ramp. */
  background:
    radial-gradient(ellipse 50% 32% at 12% 34%, rgb(232 84 10 / 0.18), transparent 62%),
    radial-gradient(ellipse 45% 30% at 90% 68%, rgb(160 50 8 / 0.14), transparent 62%);
}

.mf-ss-detail__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

.mf-ss-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.mf-ss-tile {
  padding: 26px 24px;
  border-radius: var(--radius-tile);
  background: var(--panel-dark);
  border: 1px solid var(--coal-400);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.mf-ss-tile:hover { border-color: var(--flare-a30); transform: translateY(-3px); }

.mf-ss-tile .mf-chip-icon { margin-block-end: 18px; }

.mf-ss-tile__title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  color: var(--ink-on-dark);
  margin: 0;
}

.mf-ss-tile__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 9px 0 0;
}

/* --- The plain-speaking run ----------------------------------------------
   The part of the page that answers "yes, but what does it actually not do".
   It used to be a pair of rounded cards, which gave the two notes equal weight
   and equal shape and made them read as two more features. There are no cards
   here now: a note is a statement carried by type, and the rules and numerals
   do the separating.

   Stacked rather than side by side, because these are meant to be read in
   order and at a real measure, not scanned in parallel. */

.mf-ss-run {
  display: grid;
  gap: 72px;
}

.mf-ss-run-after { margin-block-start: 60px; }

.mf-ss-say .mf-eyebrow { margin-block-end: 18px; }

/* The statement. Display face at lead size, wide enough to carry weight but
   held to a measure so it stays a sentence rather than a banner. */
.mf-ss-say__lead {
  margin: 0;
  max-inline-size: 60ch;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--ink-on-dark-strong);
  text-wrap: balance;
}

/* The one clause a practice has to leave with — "It does not give medical
   advice". Carried by weight and colour, not by a callout box around it. */
.mf-ss-say__lead strong {
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
}

/* Fallback for a note that has no `lead` in the data yet. */
.mf-ss-say__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 25px;
  line-height: 1.25;
  color: var(--ink-on-dark);
}

.mf-ss-say__body {
  margin: 18px 0 0;
  max-inline-size: 62ch;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-on-dark-dim);
}

/* A note that names a count and then lists it — Setup says "three things" —
   gets the count drawn instead of buried in the sentence. The lead sits above
   the spine, so the body underneath is the sign-off rather than the content. */
.mf-ss-say-steps .mf-ss-say__lead {
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
}

.mf-ss-say-steps .mf-ss-say__body { color: var(--ink-on-dark-body); }

.mf-ss-spine {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* The spine itself: a rule along the top with each step hanging off it, so the
   three read as one run rather than as three tiles that happen to be adjacent.
   The rule is the only edge in this section — deliberately. */
.mf-ss-spine__step {
  padding: 24px 32px 4px 0;
  border-block-start: 2px solid var(--flare-a20);
}

.mf-ss-spine__num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-2);
  line-height: 1;
  background: var(--grad-icon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mf-ss-spine__title {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--step-0);
  color: var(--ink-on-dark);
}

.mf-ss-spine__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-on-dark-dim);
}


/* ==========================================================================
   The library on an age ruler — Patient Wellness Check-Ins
   (partials/service-soon/library-life.njk, chosen by list.layout "life")
   ========================================================================== */

/* The heading, readout and ruler are one stage. Pinned, it sticks at the
   offset that centres it in the screen under the nav (--ss-life-top, from
   service-soon.js) and holds while the patient ages. Without the script (or
   under reduced motion) nothing pins. */
.mf-ss-life { --p: 1; position: relative; }

.mf-ss-life__stage {
  position: relative;
  display: grid;
  gap: 40px;
}

/* Pinned at an offset that centres it in the room under the nav (set by
   service-soon.js), rather than being made as tall as the room and centring
   its content inside — that put half the room's worth of empty stage above
   the heading as the section scrolled in. */
.mf-ss-life.is-live .mf-ss-life__stage {
  position: sticky;
  inset-block-start: var(--ss-life-top, 100px);
}

/* Pinned, the whole library has to fit one screen, so the stage closes up:
   less air between its parts and inside the sections under the ruler. */
.mf-ss-life.is-live .mf-ss-life__stage { gap: 28px; }
.mf-ss-life.is-live .mf-ss-life__head .mf-h2 { font-size: clamp(28px, 2.6vw, 38px); }
.mf-ss-life.is-live .mf-ss-life__head .mf-eyebrow { margin-block-end: 10px; }
.mf-ss-life.is-live .mf-ss-life__age span { font-size: clamp(80px, 8vw, 120px); }
.mf-ss-life.is-live .mf-ss-life__title { font-size: clamp(24px, 2.2vw, 32px); }
.mf-ss-life.is-live .mf-ss-life__note { font-size: 15.5px; margin-block-start: 6px; }
.mf-ss-life.is-live .mf-ss-yearly { margin-block-start: 8px; padding-block-start: 28px; }
.mf-ss-life.is-live .mf-ss-yearly__grid { margin-block-start: 18px; gap: 24px 48px; }
.mf-ss-life.is-live .mf-ss-custom { margin-block-start: 28px; padding-block-start: 28px; }

/* The panes under the ruler. Pinned, they share one cell, so the stage is
   as tall as the tallest (the last) and never moves as they swap; the one
   for the patient's age shows, and the last once the ruler is run. Not
   pinned, only the last is in the page. */
.mf-ss-life__more { display: grid; }
.mf-ss-life__pane { grid-area: 1 / 1; }
.mf-ss-life:not(.is-live) .mf-ss-life__pane:not(.mf-ss-life__pane-last) { display: none; }
.mf-ss-life.is-live .mf-ss-life__pane { opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.mf-ss-life.is-live:not([data-end])[data-at="0"] [data-ss-pane="0"],
.mf-ss-life.is-live:not([data-end])[data-at="1"] [data-ss-pane="1"],
.mf-ss-life.is-live:not([data-end])[data-at="2"] [data-ss-pane="2"],
.mf-ss-life.is-live:not([data-end])[data-at="3"] [data-ss-pane="3"],
.mf-ss-life.is-live:not([data-end])[data-at="4"] [data-ss-pane="4"],
.mf-ss-life.is-live[data-end] [data-ss-pane="last"] { opacity: 1; pointer-events: auto; }
/* Before the first birthday, the first pane is in view held back, as its
   caption is. */
.mf-ss-life.is-live:not([data-end])[data-at="-1"] [data-ss-pane="0"] { opacity: 0.45; }

/* A milestone's facts: three up, kicker and a line each, under a rule —
   the shape the yearly reminders take, so the swap to them reads as the
   same furniture refilled. */
.mf-ss-life__pane:not(.mf-ss-life__pane-last) {
  padding-block-start: 28px;
  border-block-start: 1px solid var(--coal-400);
}

.mf-ss-life__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 48px;
  margin: 18px 0 0;
}

.mf-ss-life__facts dt {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
}

.mf-ss-life__facts dd {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-on-dark-body);
}

/* The pane's second row: the custom row's shape (copy left, the thing
   right), filled with what the patient gets — the SMS as a bubble and the
   email as its inbox line. */
.mf-ss-life__seen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px 64px;
  align-items: center;
  margin-block-start: 28px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--coal-400);
}

.mf-ss-msgs { display: grid; gap: 12px; }

.mf-ss-msg {
  padding: 12px 16px 14px;
  border-radius: var(--radius-tile);
  background: var(--coal-760);
  border: 1px solid var(--coal-400);
}

.mf-ss-msg__from {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
}

.mf-ss-msg__from svg { color: var(--flare-500); }
.mf-ss-msg__from span { margin-inline-start: auto; font-weight: var(--weight-semibold); color: var(--ink-on-dark-dim); }

.mf-ss-msg__bubble {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: var(--coal-600);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-on-dark-body);
  max-inline-size: 40ch;
}

.mf-ss-msg__subject {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
}

.mf-ss-msg__pre {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-on-dark-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shorter screens (a 900 or 864 laptop): the heading folds into one line
   beside nothing it needs, the age comes down, and the rule's rows close
   up. service-soon.js sets data-ss-fit="tight" when the roomy form does
   not fit and tries again. */
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__stage { gap: 14px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__head .mf-eyebrow { display: none; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__head .mf-h2 { font-size: clamp(24px, 2.2vw, 30px); }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__age span { font-size: clamp(64px, 6.5vw, 96px); }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__age small { margin-block-end: 4px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__title { font-size: clamp(22px, 1.9vw, 26px); margin-block-start: 6px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__note { font-size: 14.5px; line-height: 1.5; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-ruler { transform: scale(0.92); transform-origin: left center; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-yearly { margin-block-start: 0; padding-block-start: 14px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-yearly__grid { margin-block-start: 12px; gap: 16px 40px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-yearly__note { font-size: 14.5px; line-height: 1.5; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-custom { margin-block-start: 14px; padding-block-start: 14px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-custom__title { font-size: 24px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-custom__body { font-size: 14.5px; line-height: 1.5; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-rule__row { padding-block: 8px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__seen { margin-block-start: 10px; padding-block-start: 10px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__facts { gap: 16px 40px; margin-block-start: 8px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__facts dt { font-size: 19px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-life__facts dd { font-size: 14.5px; line-height: 1.5; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-msgs { gap: 6px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-msg { padding: 7px 12px 8px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-msg__from { margin-block-end: 5px; }
.mf-ss-life.is-live[data-ss-fit="tight"] .mf-ss-rule__value { font-size: 22px; }

/* The distance the stage stays pinned for. Nothing is drawn in it; by the
   time the stage releases it has scrolled away above, so it never shows as a
   gap under the ruler. */
.mf-ss-life__travel { display: none; }
.mf-ss-life.is-live .mf-ss-life__travel { display: block; block-size: 180svh; }

.mf-ss-life__head .mf-eyebrow { margin-block-end: 16px; }

.mf-ss-life__readout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px 64px;
  align-items: center;
}

.mf-ss-life__age {
  display: grid;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.mf-ss-life__age small {
  margin-block-end: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-on-dark-dim);
}

.mf-ss-life__age span {
  /* Wide enough for two digits at all times, so the caption beside it does
     not shift as the age ticks. */
  min-inline-size: 1.25em;
  font-size: clamp(96px, 11vw, 160px);
  letter-spacing: -0.03em;
  background: var(--grad-brand-flat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mf-ss-life__captions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

/* Not live: every milestone listed, one under the next. */
.mf-ss-life:not(.is-live) .mf-ss-life__caption + .mf-ss-life__caption {
  margin-block-start: 24px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--coal-400);
}

/* Live: one at a time, stacked in one cell so the stage never changes
   height as they swap. The row above is the hint's. */
.mf-ss-life.is-live .mf-ss-life__caption {
  grid-area: 2 / 1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Before the first birthday the first milestone is already in view, held
   back, so the stage never reads as empty: what is coming is shown, and
   the hint above says how to get there. */
.mf-ss-life.is-live[data-at="-1"] [data-ss-caption="0"] { opacity: 0.45; }

.mf-ss-life[data-at="0"] [data-ss-caption="0"],
.mf-ss-life[data-at="1"] [data-ss-caption="1"],
.mf-ss-life[data-at="2"] [data-ss-caption="2"],
.mf-ss-life[data-at="3"] [data-ss-caption="3"],
.mf-ss-life[data-at="4"] [data-ss-caption="4"],
.mf-ss-life[data-at="5"] [data-ss-caption="5"] { opacity: 1; }

/* The hint row: always there at the same height, so the stage does not
   shift when the hint goes; it only carries the words before the first
   birthday. */
.mf-ss-life.is-live .mf-ss-life__captions::before {
  content: "";
  grid-area: 1 / 1;
  block-size: 18px;
  margin-block-end: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 18px;
  color: var(--ink-on-dark-faint);
  transition: opacity 0.35s ease;
}

.mf-ss-life.is-live[data-at="-1"] .mf-ss-life__captions::before { content: attr(data-hint); }

.mf-ss-life__group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-500);
}

.mf-ss-life__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: var(--weight-semibold);
  line-height: 1.12;
  color: var(--ink-on-dark);
  margin: 10px 0 0;
}

.mf-ss-life__note {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-on-dark-body);
  margin: 10px 0 0;
  max-inline-size: 54ch;
}

/* --- Step chips: send → wait → send --------------------------------------- */

.mf-ss-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 14px 0 0;
}

.mf-ss-steps span {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--flare-a40);
  background: var(--flare-a10);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
  white-space: nowrap;
}

/* Two chips with no wait between them still need a gap. */
.mf-ss-steps span:not(.is-wait) + span:not(.is-wait) { margin-inline-start: 8px; }

/* The wait is a dashed gap, not a chip, so the rhythm reads at a glance. */
.mf-ss-steps span.is-wait {
  border: 0;
  background: none;
  padding-inline: 10px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-dim);
}

.mf-ss-steps span.is-wait::before,
.mf-ss-steps span.is-wait::after {
  content: "";
  inline-size: 18px;
  border-block-start: 1.5px dashed var(--coal-300);
}

.mf-ss-steps span.is-wait::before { margin-inline-end: 8px; }
.mf-ss-steps span.is-wait::after { margin-inline-start: 8px; }

/* A custom reminder's chips are filters the practice sets, so they are
   dashed like the filter pills in the custom sentence below. */
.mf-ss-steps span.is-filter { border-style: dashed; color: var(--flare-400); }

/* --- The ruler ------------------------------------------------------------ */

/* Room above the line for the pins' labels. */
.mf-ss-ruler { padding-block-start: 62px; }

.mf-ss-ruler__line {
  position: relative;
  block-size: 4px;
  border-radius: var(--radius-pill);
  background: var(--coal-400);
}

.mf-ss-ruler__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--p) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--coal-300), var(--flare-600));
}

.mf-ss-ruler__patient {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--p) * 100%);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--paper-100);
  box-shadow: 0 0 0 6px var(--flare-a30);
}

.mf-ss-ruler__patient i {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--grad-cta);
}

.mf-ss-ruler__pin {
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--x);
  inset-block-end: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-block-end: 14px;
  color: var(--ink-on-dark-faint);
  transition: color 0.3s ease;
}

.mf-ss-ruler__pin::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inline-size: 1.5px;
  block-size: 12px;
  background: currentColor;
}

.mf-ss-ruler__pin b {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.mf-ss-ruler__pin > span {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mf-ss-ruler__pin.is-lit,
.mf-ss-life:not(.is-live) .mf-ss-ruler__pin { color: var(--flare-500); }

.mf-ss-ruler__pin.is-lit > span,
.mf-ss-life:not(.is-live) .mf-ss-ruler__pin > span {
  background: var(--grad-cta);
  border-color: transparent;
  color: var(--paper-100);
}

.mf-ss-ruler__pin.is-now > span { box-shadow: 0 0 0 8px var(--flare-a20); }

/* The age-50 pin is not in the library, so it never fills: dashed ring,
   flare outline, the same language as the custom filter pills. */
.mf-ss-ruler__pin.is-custom > span { border-style: dashed; }

.mf-ss-ruler__pin.is-custom.is-lit > span,
.mf-ss-life:not(.is-live) .mf-ss-ruler__pin.is-custom > span {
  background: var(--flare-a15);
  border-color: var(--flare-500);
  color: var(--flare-400);
}

.mf-ss-ruler__ticks {
  display: flex;
  justify-content: space-between;
  block-size: 26px;
  margin-block-start: 10px;
}

.mf-ss-ruler__ticks i {
  position: relative;
  inline-size: 1px;
  block-size: 5px;
  background: var(--coal-300);
}

.mf-ss-ruler__ticks i.is-major { block-size: 10px; background: var(--ink-on-dark-faint); }

.mf-ss-ruler__ticks em {
  position: absolute;
  inset-block-start: 13px;
  inset-inline-start: 50%;
  translate: -50% 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark-dim);
}

/* --- Every year ----------------------------------------------------------- */

.mf-ss-kicker {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flare-500);
}

.mf-ss-yearly,
.mf-ss-custom {
  margin-block-start: 56px;
  padding-block-start: 48px;
  border-block-start: 1px solid var(--coal-400);
}

.mf-ss-yearly__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 56px;
  margin-block-start: 26px;
}

.mf-ss-yearly__item { transition-delay: calc(var(--i, 0) * 90ms); }

.mf-ss-yearly__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink-on-dark);
}

.mf-ss-yearly__note {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 10px 0 0;
}

.mf-ss-months {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

.mf-ss-months li {
  display: grid;
  place-items: center;
  block-size: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--coal-400);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark-faint);
}

.mf-ss-months li.is-lit {
  border-color: transparent;
  background: var(--grad-cta);
  color: var(--paper-100);
}

.mf-ss-yearly__seasons {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-on-dark-body);
}

.mf-ss-yearly__seasons b { margin-inline-end: 4px; font-weight: var(--weight-bold); color: var(--ink-on-dark); }

/* --- Custom reminders, as a rule ------------------------------------------
   The filters are a rule, not prose. Drawn as prose the chips were display
   sized, so the punctuation that held the sentence together — the comma, the
   "and" — was stranded at the ends of lines and the sentence stopped reading
   as one. A row per condition instead, fields aligned in their own column so
   they can be compared, joined by the word that joins them. It also survives a
   fourth or fifth filter, which the sentence did not. */

.mf-ss-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px 64px;
  align-items: start;
}

.mf-ss-custom__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink-on-dark);
}

.mf-ss-custom__body {
  margin: 12px 0 0;
  max-inline-size: 46ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
}

.mf-ss-custom__lead {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-on-dark-body);
}

/* "For example" — a caveat, not a heading. Legible enough to do its job (these
   values illustrate, they are not a template in the app) and quiet enough not
   to lead the eye. */
.mf-ss-custom__eg {
  display: inline-block;
  margin-inline-end: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
}

.mf-ss-rule {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-ss-rule__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding-block: 16px;
  border-block-start: 1px solid var(--coal-400);
}

.mf-ss-rule__row:last-child { border-block-end: 1px solid var(--coal-400); }

.mf-ss-rule__field {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-on-dark-faint);
}

.mf-ss-rule__value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--flare-400);
}

/* The join sits *on* the rule between two rows rather than at the end of the
   line above — that stranding is the whole fault this layout fixes, so it must
   not be reintroduced here. Centred on the line: half the 14px line box below
   the row's edge, with the section's own background knocking the rule out
   behind it. Keep the background in step with .mf-ss-detail. */
.mf-ss-rule__join {
  position: absolute;
  inset-block-end: -7px;
  inset-inline-start: 0;
  padding-inline-end: 10px;
  background: var(--coal-760);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 14px;
  font-style: italic;
  color: var(--ink-on-dark-dim);
}


/* ==========================================================================
   Checklist
   ========================================================================== */

/* The coal ramp above ends on flat paper-600, and the page wash below it is
   tinted and textured, so the section picks up that paper and fades it out
   rather than leaving a seam where the ramp stops. */
.mf-ss-check {
  padding: 96px 40px 40px;
  background: linear-gradient(180deg, var(--paper-600), transparent);
}

/* Straight after How It Works, with no coal run between (Telehealth Callbacks).
   How It Works is solid paper and the page below is the textured wash, which
   the coal ramp used to hide — so the checklist picks up the paper and lets it
   fade out into the wash, and drops the top padding the ramp needed. */
.mf-ss-check-follow {
  padding-block-start: 0;
  margin-block-start: -2px;
  background-image: linear-gradient(180deg, var(--paper-500), transparent);
}

.mf-ss-check__inner {
  max-inline-size: 1000px;
  margin-inline: auto;
}

/* No panel — the page has its share of them, and this is a summary of
   what was already said above. The points sit two-up, numbered and ticked,
   with a hairline between rows; the stage line under them is the only
   other furniture. */
.mf-ss-sheet { position: relative; }

.mf-ss-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}

.mf-ss-ticks li {
  display: grid;
  grid-template-columns: auto 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: 20px;
  border-block-end: 1px solid var(--border-light);
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.55;
  color: var(--ink);
  /* Staggered in with the panel: each row a beat after the last. */
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.5s ease, translate 0.5s var(--ease-out);
  transition-delay: calc(120ms + var(--i) * 70ms);
}

.mf-ss-sheet.is-in .mf-ss-ticks li { opacity: 1; translate: 0 0; }

/* The last row of each column loses its rule, so the panel's foot is the
   only line under the list. */
.mf-ss-ticks li:nth-last-child(-n + 2):nth-child(odd),
.mf-ss-ticks li:last-child { border-block-end: 0; }

.mf-ss-ticks__num {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  line-height: 1.55;
  padding-block-start: 0.2em;
  color: var(--flare-600);
}

.mf-ss-ticks__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px;
  border-radius: 50%;
  background: var(--grad-brand);
}

.mf-ss-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 28px 0 0;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--border-light);
  /* base.css caps every <p> at 65ch, which would stop this spanning. */
  max-inline-size: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-muted);
}


/* ==========================================================================
   Closing CTA — a dark panel floating on the page wash, the same shape the
   homepage and the live service pages close on.
   ========================================================================== */

.mf-ss-cta { padding: 60px 40px 120px; }

.mf-ss-cta__panel {
  position: relative;
  overflow: hidden;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  padding: 68px 48px;
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-panel);
  text-align: center;
}

.mf-ss-cta__glow {
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 720px;
  block-size: 720px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(232 84 10 / 0.22), transparent 60%);
}

.mf-ss-cta__body { position: relative; z-index: 1; }
.mf-ss-cta__body .mf-eyebrow { margin-block-end: 24px; }
.mf-ss-cta__body .mf-h2 { max-inline-size: 720px; margin-inline: auto; }

.mf-ss-cta__lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
  margin: 20px auto 0;
  max-inline-size: 560px;
}

.mf-ss-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: 34px;
}

.mf-ss-cta__actions .mf-btn { padding: 16px 32px; }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .mf-ss-hero { padding-inline: 32px; }
  .mf-ss-hero__wrap { grid-template-columns: 1fr; gap: 44px; }
  /* Same specificity as the :has() rule above, or the two-column split for
     shot pages survives the collapse and squeezes the hero at phone widths. */
  .mf-ss-hero__wrap:has(.mf-ss-hero__shot) { grid-template-columns: 1fr; }
  /* One column: the shot fills it, and the highlights card tucks inside the
     top-left corner rather than reaching past the page gutter. */
  .mf-ss-hero__art.mf-ss-hero__art-shot { inline-size: 100%; margin-block-start: 30px; }
  .mf-ss-hero__art { --ss-float-x: -12px; }

  .mf-ss-hero__wrap:has(.mf-ss-phone) { grid-template-columns: 1fr; }

  .mf-ss-how, .mf-ss-detail, .mf-ss-check, .mf-ss-cta { padding-inline: 32px; }
}

@media (max-width: 1023px) {
  .mf-ss-life__stage { gap: 28px; }
  .mf-ss-life__readout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mf-ss-life__age { grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 14px; }
  .mf-ss-life__age small { margin: 0; }
  .mf-ss-life__age span { font-size: 80px; }
  .mf-ss-yearly__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mf-ss-life__facts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mf-ss-life__seen { grid-template-columns: minmax(0, 1fr); }
  .mf-ss-custom { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .mf-ss-life__stage { gap: 20px; }
  .mf-ss-life__age span { font-size: 60px; }
  .mf-ss-life__title { font-size: 25px; }
  .mf-ss-life__note { font-size: 15.5px; }
  .mf-ss-ruler { padding-block-start: 54px; }
  .mf-ss-ruler__pin b { font-size: 14px; }
  .mf-ss-ruler__pin > span { inline-size: 24px; block-size: 24px; }
  .mf-ss-ruler__pin > span svg { inline-size: 11px; block-size: 11px; }
  .mf-ss-ruler__ticks i:not(.is-major) { display: none; }
  .mf-ss-yearly,
  .mf-ss-custom { margin-block-start: 44px; padding-block-start: 36px; }
  .mf-ss-custom__title { font-size: 23px; }
  .mf-ss-rule__value { font-size: 18px; }

  /* Keep a sequence on one line where it can — a wrapped run of chips makes
     the pinned caption, and so the whole stage, taller. */
  .mf-ss-steps span { padding: 4px 9px; font-size: 11.5px; }
  .mf-ss-steps span.is-wait { padding-inline: 6px; }
  .mf-ss-steps span.is-wait::before,
  .mf-ss-steps span.is-wait::after { inline-size: 8px; }
  .mf-ss-steps span.is-wait::before { margin-inline-end: 5px; }
  .mf-ss-steps span.is-wait::after { margin-inline-start: 5px; }
}

@media (max-width: 760px) {
  /* Stacked, the spine turns on its side: a hairline between the two
     perspectives. */
  .mf-ss-cols { grid-template-columns: 1fr; row-gap: 0; }
  .mf-ss-cols__spine { display: none; }
  .mf-ss-how-solo .mf-ss-how__inner { grid-template-columns: 1fr; row-gap: 36px; }
  .mf-ss-how-solo .mf-ss-sechead { text-align: center; }
  .mf-ss-cols-solo .mf-ss-cols__spine { display: none; }
  .mf-ss-col + .mf-ss-col {
    margin-block-start: 36px;
    padding-block-start: 36px;
    border-block-start: 1px solid var(--flare-a30);
  }
  /* The spine collapses to one column, so each step needs the rule to itself
     rather than sharing one across a row that no longer exists. */
  .mf-ss-run { gap: 52px; }
  .mf-ss-spine__step { padding-inline-end: 0; padding-block-end: 18px; }
  .mf-ss-ticks { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .mf-ss-hero { padding: 96px 20px 56px; }
  .mf-ss-how { padding: 72px 20px 80px; }
  .mf-ss-detail { padding: 76px 20px 84px; }
  .mf-ss-check { padding: 76px 20px 32px; }
  .mf-ss-ticks { grid-template-columns: 1fr; }
  .mf-ss-ticks li { padding-block: 16px; border-block-end: 1px solid var(--border-light); }
  .mf-ss-ticks li:last-child { border-block-end: 0; }
  .mf-ss-sheet__foot { align-items: flex-start; justify-content: flex-start; }
  .mf-ss-check-follow { padding-block-start: 0; }
  .mf-ss-cta { padding: 48px 20px 96px; }
  .mf-ss-cta__panel { padding: 46px 24px; }

  .mf-ss-sechead { margin-block-end: 40px; }
  .mf-ss-hero__ctas .mf-btn { inline-size: 100%; justify-content: center; }

  /* Too narrow for pieces on top of the visual: the pill leads it and the
     highlights card follows, both in flow. */
  .mf-ss-hero__art.mf-ss-hero__art-shot { display: flex; flex-direction: column; margin-block-start: 0; }
  .mf-ss-hero__art.mf-ss-hero__art-phone { flex-direction: column; padding-block: 0; --ss-phone-w: 236px; }
  /* inset: auto has to be restated on each float, not just on .mf-ss-float —
     the corner rules up the file are two classes deep and would otherwise
     out-specify this and keep nudging a now-in-flow box off the screen edge. */
  .mf-ss-float { position: relative; inset: auto; }
  .mf-ss-hero__art .mf-ss-float-stage { inset: auto; order: -1; align-self: flex-start; margin-block-end: 16px; }
  .mf-ss-hero__art-shot .mf-ss-float-list { inset: auto; margin-block-start: 18px; }
  .mf-ss-hero__art-phone .mf-ss-float-stage { align-self: center; inset: auto; }
  .mf-ss-hero__art-phone .mf-ss-float-list { inset: auto; margin-block-start: 18px; }
  /* The narrower phone wraps its notifications onto more lines, so the torch
     and camera would sit on the third one. */
  .mf-ss-phone__foot i { visibility: hidden; }
  .mf-ss-float__inner-dark { inline-size: min(300px, calc(100vw - 40px)); }

  /* The shot is only a couple of hundred pixels tall here, so the widget
     shrinks further and tucks into the corner rather than hanging off it. */
  .mf-ss-demo { scale: 0.7; inset-block-end: -8px; inset-inline-end: -4px; }
  .mf-ss-demo:has(.mf-ss-demo__card) { scale: 0.62; }

}

@media (prefers-reduced-motion: reduce) {
  .mf-ss-life__caption,
  .mf-ss-ruler__pin,
  .mf-ss-ruler__pin > span { transition: none; }

  .mf-ss-float { transition: none; }
  .mf-ss-float.is-in .mf-ss-float__inner { animation: none; }
  .mf-ss-status__dot { animation: none; }
  .mf-ss-tile:hover { transform: none; }
}