/* ==========================================================================
   Practice Websites
   Loaded only by src/pages/practice-websites.njk (front matter:
   pageCss: practice-websites).

   Shared furniture (.mf-h2, .mf-lead, .mf-btn*, .mf-eyebrow*, .mf-reveal,
   .mf-horizon, .mf-chip-icon, .mf-badge) 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 multi-stop gradient ramps, where the stops are the design itself.
   ========================================================================== */

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

.mf-pw-hero {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  padding: 120px 48px 64px;

  /* The colour the benefits pane below opens on. The hero itself has no
     background — it shows the fixed --page-wash — so without this the flat
     pane butts against a wash that is a different tone at that scroll
     position, and the seam reads as a drawn line. Overridden to coal at the
     breakpoints where the pane falls back to the dark grid; see --pw-pin. */
  --pw-seam: var(--paper-100);
}

/* Resolves the last stretch of the hero to exactly --pw-seam, so the two
   surfaces meet on the same colour and the join disappears.

   Flat fill plus a mask rather than a gradient of transparent stops: the
   seam colour is a variable, so shaping the ramp in the colour itself would
   need per-stop alpha of that variable. Masking a solid fill keeps the one
   token doing the work and puts the ramp shape where it can be read. The
   stops are weighted late — the eye catches the start of a linear paper
   fade as a band, so most of the travel happens in the last third. */
.mf-pw-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 260px;
  pointer-events: none;
  background: var(--pw-seam);
  -webkit-mask-image: linear-gradient(
    180deg, transparent 0%, rgb(0 0 0 / 0.3) 38%,
    rgb(0 0 0 / 0.72) 68%, rgb(0 0 0 / 0.94) 87%, #000 100%
  );
  mask-image: linear-gradient(
    180deg, transparent 0%, rgb(0 0 0 / 0.3) 38%,
    rgb(0 0 0 / 0.72) 68%, rgb(0 0 0 / 0.94) 87%, #000 100%
  );
}

.mf-pw-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.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}

.mf-pw-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 20px 0 0;
  text-wrap: balance;
}

.mf-pw-hero__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  max-inline-size: 460px;
  margin: 24px 0 0;
}

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

.mf-pw-hero__trust {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}

.mf-pw-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* --- Art column --------------------------------------------------------- */

.mf-pw-hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sized to the frame so the floating cards hang off the frame's own edges. */
.mf-pw-hero__stage {
  position: relative;
  inline-size: min(100%, 480px);
}

.mf-pw-hero__glow {
  position: absolute;
  z-index: 0;
  inline-size: min(560px, 116%);
  aspect-ratio: 1;
  inset-inline-start: 52%;
  inset-block-start: 48%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(232 84 10 / 0.32) 0%,
    rgb(240 120 40 / 0.18) 36%,
    rgb(248 178 112 / 0.07) 60%,
    rgb(248 178 112 / 0) 76%
  );
  filter: blur(80px);
  pointer-events: none;
}

/* --- The browser frame and the site drawn inside it --- */

.mf-pw-frame {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  background: var(--ink-on-dark);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-tile);
  overflow: hidden;
  box-shadow: 0 34px 70px -26px rgb(80 50 15 / 0.34);
}

.mf-pw-frame__bar {
  block-size: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 14px;
  border-block-end: 1px solid var(--paper-800);
  background: var(--paper-200);
}

.mf-pw-frame__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--border-light-strong);
}

.mf-pw-frame__url {
  margin-inline-start: 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.mf-pw-frame__body { padding: 0; }

.mf-pw-site {
  display: grid;
  gap: 14px;
  padding: 14px 16px 18px;
}

.mf-pw-site__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--paper-800);
}

.mf-pw-site__mark {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 8px;
  background: var(--grad-brand);
  flex: none;
}

.mf-pw-site__nav ul {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.mf-pw-site__nav li.is-cta {
  color: var(--ink-on-dark);
  background: var(--grad-cta);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
}

/* Copy beside a stand-in for the practice photography — the two-column hero
   is what a real practice homepage looks like, and it reads as a designed
   page rather than a wireframe. */
.mf-pw-site__hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--radius-inset);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, var(--flare-a10), transparent 60%),
    var(--paper-300);
}

.mf-pw-site__shot {
  display: block;
  block-size: 100%;
  min-block-size: 96px;
  border-radius: var(--radius-chip);
  background:
    radial-gradient(ellipse 70% 55% at 50% 118%, rgb(255 255 255 / 0.5), transparent 60%),
    linear-gradient(150deg, #f0b27f, #d9713a 55%, #b4501f);
}

.mf-pw-site__headline {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.mf-pw-site__blurb {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 8px 0 0;
  max-inline-size: 30ch;
}

.mf-pw-site__btn {
  display: inline-block;
  margin-block-start: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  color: var(--ink-on-dark);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The three at-a-glance tiles every practice site carries. Real labels, not
   grey bars — a wireframe under the headline undersells the product. */
.mf-pw-site__tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mf-pw-site__tiles li {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--paper-800);
  background: var(--paper-200);
}

.mf-pw-site__tile-icon { display: block; block-size: 12px; }

.mf-pw-site__tile-label {
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flare-600);
}

.mf-pw-site__tile-value {
  font-family: var(--font-body);
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--ink-muted);
}


/* --- The phone hung off the desktop frame's corner --- */

.mf-pw-phone {
  position: absolute;
  z-index: 5;
  /* Far enough out that it only clips the desktop's corner — any closer and
     it sits over the page content the frame is there to show. */
  inset-inline-start: -86px;
  inset-block-end: -58px;
  inline-size: 112px;
  aspect-ratio: 9 / 19;
  padding: 5px;
  border-radius: 20px;
  background: var(--coal-800);
  box-shadow: 0 26px 54px -20px rgb(80 50 15 / 0.44);
}

.mf-pw-phone__screen {
  position: relative;
  block-size: 100%;
  border-radius: 15px;
  overflow: hidden;
  padding: 12px 9px 9px;
  display: grid;
  align-content: start;
  gap: 7px;
  background: var(--paper-100);
}

.mf-pw-phone__notch {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 34px;
  block-size: 4px;
  border-radius: var(--radius-pill);
  background: var(--paper-800);
}

.mf-pw-phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 4px;
}

.mf-pw-phone__mark {
  inline-size: 15px;
  block-size: 15px;
  border-radius: 5px;
  background: var(--grad-brand);
}

.mf-pw-phone__burger {
  inline-size: 11px;
  block-size: 7px;
  border-block: 1.5px solid var(--border-light-strong);
  border-block-end-width: 1.5px;
}

.mf-pw-phone__shot {
  display: block;
  block-size: 46px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 118%, rgb(255 255 255 / 0.5), transparent 60%),
    linear-gradient(150deg, #f0b27f, #d9713a 55%, #b4501f);
}

.mf-pw-phone__headline {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 10px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.mf-pw-phone__btn {
  display: block;
  text-align: center;
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  color: var(--ink-on-dark);
  font-family: var(--font-ui);
  font-size: 7.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mf-pw-phone__line {
  display: block;
  block-size: 4px;
  border-radius: 3px;
  background: var(--paper-800);
}

.mf-pw-phone__line-sm { inline-size: 62%; }

/* --- Floating cards --- */

.mf-pw-fcard {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.mf-pw-fcard.is-in { opacity: 1; transform: none; }
.mf-pw-fcard.is-in .mf-bob { animation: mfFloat 5s ease-in-out infinite alternate; }

/* Anchored to the frame's edges, and only ever hanging a little way past
   them — the hero clips its overflow, so a card pushed further out than the
   art column is simply cut in half. The update card sits over the site body
   rather than the chrome so it never covers the address bar. */
/* One card to each corner, with the phone holding the fourth — the phone now
   owns the lower left, so the update card moved up out of its way. */
.mf-pw-fcard-update {
  inset-inline-end: calc(100% - 20px);
  inset-block-start: -20%;
  transition-delay: 0.1s;
}

.mf-pw-fcard-score {
  inset-inline-end: -56px;
  inset-block-start: -24%;
  transition-delay: 0.25s;
}

/* Narrower than the other cards so it can clear the frame's top-right corner
   without reaching across the mock's navigation. */
.mf-pw-fcard-score .mf-pw-fcard__inner { inline-size: 150px; }

.mf-pw-fcard-uptime {
  inset-inline-end: -20px;
  inset-block-end: -12%;
  transition-delay: 0.4s;
}

.mf-pw-fcard-score .mf-bob { animation-delay: 0.8s; }
.mf-pw-fcard-uptime .mf-bob { animation-delay: 1.6s; }

.mf-pw-fcard__inner {
  inline-size: 190px;
  padding: 16px 18px;
  border-radius: var(--radius-tile);
  background: var(--ink-on-dark);
  border: 1px solid var(--paper-800);
  box-shadow: var(--shadow-card-sm);
}

.mf-pw-fcard__inner-dark {
  background: var(--coal-720);
  border-color: var(--coal-400);
  box-shadow: var(--shadow-card-dark-sm);
}

.mf-pw-fcard__inner-pill {
  inline-size: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 12px;
  border-radius: var(--radius-pill);
}

.mf-pw-fcard__row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.mf-pw-fcard__title {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
}

.mf-pw-fcard__note {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-on-dark-body);
  margin: 8px 0 0;
}

.mf-pw-fcard__inner:not(.mf-pw-fcard__inner-dark) .mf-pw-fcard__note { color: var(--ink-soft); }

.mf-pw-fcard__status {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 9px;
  border-radius: var(--radius-nav);
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--status-live);
  background: var(--status-live-soft);
  border: 1px solid var(--status-live-line);
}

.mf-pw-fcard__stat {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 34px;
  line-height: 1;
  margin: 0;
}

.mf-pw-fcard__stat-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 7px 0 0;
}

.mf-pw-fcard__pill-text {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  white-space: nowrap;
}


/* ==========================================================================
   Benefits — the scroll-pinned ring

   The track is tall, the pane inside it sticks: the browser does the pinning
   natively, exactly as the homepage services scrub does. JS only reports how
   far through the track the reader is, by setting data-idx on the section
   and toggling .is-dark on the pane.

   --pw-scrub is the only place the scroll length is set. --pw-ring is the
   ring's diameter; every orbit measurement is derived from it, so the ring
   can be resized from one value.
   ========================================================================== */

.mf-pw-benefits {
  --pw-scrub: 480vh;

  /* The nav pill sticks at top:16 and stands 84px tall, so it permanently
     covers this much of the pinned pane. Everything below is measured
     against the strip underneath it — centring the ring on the raw viewport
     puts the top nodes and their cards behind the nav. */
  --pw-nav-clear: 116px;
  --pw-band: calc(100vh - var(--pw-nav-clear));

  /* Radius of a benefit's node, and the clear space left between the node
     circles and the nearest edge of a card. */
  --pw-node-r: 24px;
  --pw-card-gap: 32px;
  --pw-card-w: 250px;
  --pw-card-min: 200px;

  /* Height of the tallest benefit card. Only a rough default — the stylesheet
     cannot measure wrapped text, so practice-websites.js overwrites this with
     the real measurement. Everything below sizes off it. */
  --pw-card-h: 190px;

  /* The largest ring whose outermost cards still fit the strip on both axes.

     Vertically the outermost card reaches (0.556 x ring) for the node, plus
     its own half height, plus the 37.5px fan, past the centre; 72px covers
     the fan and leaves a little breathing room, and 1.8 is 1/0.556 solved
     back for the ring. Horizontally the ring must leave a card beside it.

     Deriving the ring rather than fixing it at 54vh is what keeps the top
     nodes and cards clear of the sticky nav on short screens, and clear of
     the viewport edges on narrow ones. */
  --pw-ring: min(
    600px,
    calc((var(--pw-band) / 2 - var(--pw-card-h) * 0.964 - 16px) * 1.8),
    calc(
      (50vw - var(--pw-node-r) - var(--pw-card-gap) - var(--pw-card-min) - 24px) / 0.6
    )
  );
  --pw-ring-radius: 60%;

  /* Whether the ring may pin. The stylesheet owns this decision — it is the
     only layer that knows the breakpoint and the motion preference — and
     practice-websites.js reads it back to decide whether to run the scrub.
     It has to be a custom property rather than something like the pane's
     `position`, because the off state restyles that pane: reading a value
     the off state itself sets would latch the pin off permanently. */
  --pw-pin: 1;

  position: relative;
}

.mf-pw-benefits__track {
  position: relative;
  block-size: var(--pw-scrub);
}

.mf-pw-benefits__pane {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reserves the band the nav sits over, so `align-items: center` centres the
     ring in the strip the reader can actually see. box-sizing is border-box
     site-wide, so this shortens the content box rather than the pane. */
  padding-block-start: var(--pw-nav-clear);
  /* Paper for the first half of the scrub, coal for the second — the flip
     is what carries the page into the dark What's Included section below. */
  background: var(--paper-100);
  transition: background 1.1s ease;
}

.mf-pw-benefits__pane.is-dark { background: var(--coal-900); }

/* --- Ambient glows ------------------------------------------------------
   Two stacks, one warm-on-paper and one ember-on-coal, crossfaded by the
   pane's .is-dark.

   Each blob's position and strength come from --gx/--gy/--go, which
   practice-websites.js reshuffles every time the scrub advances to the next
   benefit — so the light behind the ring drifts somewhere new on each step
   rather than sitting still. The values below are the pre-JS defaults; the
   long transitions are what turn a reshuffle into a slow wander instead of
   a jump. */

.mf-pw-amb {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1.1s ease;
}

.mf-pw-amb span {
  position: absolute;
  inset-inline-start: var(--gx);
  inset-block-start: var(--gy);
  opacity: var(--go, 1);
  border-radius: 50%;
  translate: -50% -50%;
  animation: pwDrift 16s ease-in-out infinite;
  transition:
    inset-inline-start 1.8s ease,
    inset-block-start 1.8s ease,
    opacity 1.4s ease;
}

.mf-pw-amb-light { opacity: 1; }
.mf-pw-amb-dark { opacity: 0; }
.mf-pw-benefits__pane.is-dark .mf-pw-amb-light { opacity: 0; }
.mf-pw-benefits__pane.is-dark .mf-pw-amb-dark { opacity: 1; }

.mf-pw-amb-light span:nth-child(1) {
  --gx: 22%;
  --gy: 16%;
  inline-size: 74vh;
  block-size: 74vh;
  background: radial-gradient(circle at 50% 50%, rgb(248 178 112 / 0.5), rgb(248 178 112 / 0.14) 44%, transparent 70%);
  filter: blur(70px);
}

.mf-pw-amb-light span:nth-child(2) {
  --gx: 74%;
  --gy: 78%;
  inline-size: 46vh;
  block-size: 46vh;
  background: radial-gradient(circle at 50% 50%, rgb(240 120 40 / 0.38), transparent 70%);
  filter: blur(60px);
  animation-duration: 19s;
  animation-direction: alternate-reverse;
}

.mf-pw-amb-light span:nth-child(3) {
  --gx: 88%;
  --gy: 30%;
  inline-size: 34vh;
  block-size: 34vh;
  background: radial-gradient(circle at 50% 50%, rgb(254 142 19 / 0.3), transparent 72%);
  filter: blur(52px);
  animation-duration: 12s;
}

.mf-pw-amb-light span:nth-child(4) {
  --gx: 14%;
  --gy: 72%;
  inline-size: 24vh;
  block-size: 24vh;
  background: radial-gradient(circle at 50% 50%, rgb(232 84 10 / 0.24), transparent 72%);
  filter: blur(44px);
  animation-duration: 22s;
}

.mf-pw-amb-dark span:nth-child(1) {
  --gx: -6%;
  --gy: 28%;
  inline-size: 78vh;
  block-size: 78vh;
  background: radial-gradient(circle at 50% 50%, rgb(232 84 10 / 0.22), rgb(232 84 10 / 0.07) 42%, transparent 68%);
  filter: blur(72px);
  animation-duration: 13s;
}

.mf-pw-amb-dark span:nth-child(2) {
  --gx: 96%;
  --gy: 66%;
  inline-size: 62vh;
  block-size: 62vh;
  background: radial-gradient(circle at 50% 50%, rgb(245 130 20 / 0.18), rgb(245 130 20 / 0.05) 44%, transparent 70%);
  filter: blur(64px);
  animation-duration: 17s;
  animation-direction: alternate-reverse;
}

.mf-pw-amb-dark span:nth-child(3) {
  --gx: 30%;
  --gy: 84%;
  inline-size: 34vh;
  block-size: 34vh;
  background: radial-gradient(circle at 50% 50%, rgb(254 142 19 / 0.16), transparent 70%);
  filter: blur(46px);
  animation-duration: 11s;
}

.mf-pw-amb-dark span:nth-child(4) {
  --gx: 72%;
  --gy: 14%;
  inline-size: 22vh;
  block-size: 22vh;
  background: radial-gradient(circle at 50% 50%, rgb(201 74 8 / 0.2), transparent 72%);
  filter: blur(38px);
  animation-duration: 20s;
  animation-direction: alternate-reverse;
}

/* --- The ring itself --- */

.mf-pw-ring {
  position: relative;
  z-index: 1;
  inline-size: var(--pw-ring);
  block-size: var(--pw-ring);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mf-pw-ring__spin,
.mf-pw-ring__track,
.mf-pw-ring__arc {
  position: absolute;
  overflow: visible;
  /* The reset gives every svg `max-width: 100%`. That is a different property
     from the inline-size set below, so it is not overridden by it and silently
     clamped the oversized track and arc back to the ring's own width — while
     block-size stayed at 130%, leaving them 15% left of centre and crossing
     the gradient ring. Releasing the cap is what keeps the three circles
     concentric. */
  max-inline-size: none;
}

.mf-pw-ring__spin {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  animation: pwSpin 30s linear infinite;
}

.mf-pw-ring__track,
.mf-pw-ring__arc {
  /* r=228 of a 500 viewBox is 91.2% of the ring; the SVG is oversized so the
     stroke's round caps are never clipped by the element box. */
  inset-inline-start: -15%;
  inset-block-start: -15%;
  inline-size: 130%;
  block-size: 130%;
}

.mf-pw-ring__track path {
  stroke: var(--flare-a15);
  transition: stroke 1.1s ease;
}

.mf-pw-benefits__pane.is-dark .mf-pw-ring__track path { stroke: rgb(255 255 255 / 0.12); }

/* The fill runs from the first benefit's node, so the arc starts where the
   orbit starts (113deg, see .mf-pw-orbit__item below). */
.mf-pw-ring__arc { rotate: 113deg; }

.mf-pw-ring__arc circle {
  transition: stroke-dasharray 1.1s cubic-bezier(0.33, 1, 0.68, 1);
}

.mf-pw-ring__core {
  position: relative;
  z-index: 1;
  inline-size: 74%;
  text-align: center;
}

/* Sized off the ring rather than the viewport: the ring now shrinks on short
   and narrow screens, and type keyed to vw would keep its size and burst out
   of the circle. */
.mf-pw-ring__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(22px, calc(var(--pw-ring) * 0.072), 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 14px 0 0;
  transition: color 1.1s ease;
}

.mf-pw-ring__lead {
  font-family: var(--font-body);
  font-size: clamp(13px, calc(var(--pw-ring) * 0.027), 15px);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 13px auto 0;
  max-inline-size: 34ch;
  transition: color 1.1s ease;
}

.mf-pw-benefits__pane.is-dark .mf-pw-ring__title { color: var(--ink-on-dark); }
.mf-pw-benefits__pane.is-dark .mf-pw-ring__lead { color: var(--ink-on-dark-body); }

/* --- Orbit ------------------------------------------------------------
   Each item is a zero-size anchor placed on the ring from its own --i, so
   adding a benefit to practiceWebsites.json re-spaces the ring with no CSS
   change. --pw-ring-n is emitted on the section by the template. */

.mf-pw-orbit {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-pw-orbit__item {
  /* 113deg puts the first node at lower-left and runs the ring anticlockwise
     from there, matching the arc's rotation and spin direction. */
  --angle: calc(113deg + var(--i) * (360deg / var(--pw-ring-n)));
  position: absolute;
  inset-inline-start: calc(50% + var(--pw-ring-radius) * cos(var(--angle)));
  inset-block-start: calc(50% + var(--pw-ring-radius) * sin(var(--angle)));
  inline-size: 0;
  block-size: 0;
  z-index: 3;
}

.mf-pw-orbit__node {
  position: absolute;
  inset-inline-start: -24px;
  inset-block-start: -24px;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Opaque, so the dashed track never shows through a node. */
  background: var(--paper-300);
  border: 1px solid var(--flare-a18);
  color: var(--flare-600);
  transition:
    background 0.45s ease,
    border-color 0.45s ease,
    color 0.45s ease,
    transform 0.45s ease;
}

.mf-pw-benefits__pane.is-dark .mf-pw-orbit__node {
  background: var(--coal-700);
  border-color: var(--flare-a22);
}

/* Reached: filled and left filled, so the ring reads as a progress track. */
.mf-pw-orbit__item.is-done .mf-pw-orbit__node,
.mf-pw-benefits__pane.is-dark .mf-pw-orbit__item.is-done .mf-pw-orbit__node {
  background: var(--grad-icon);
  border-color: transparent;
  color: var(--ink-on-dark);
}

.mf-pw-orbit__item.is-active .mf-pw-orbit__node {
  transform: scale(1.16);
  animation: pwNodePulse 2.2s ease-out infinite;
}

/* --- The card that hangs off a node --- */

.mf-pw-bcard {
  position: absolute;
  inset-block-start: 50%;
  /* Both offsets are computed per card by practice-websites.js — see
     placeCards() there for why they cannot be static. */
  margin-block-start: var(--pw-card-shift, 0px);
  inline-size: min(
    var(--pw-card-w),
    calc(
      50vw - 0.6 * var(--pw-ring) - var(--pw-node-r) - var(--pw-card-gap) - 24px
    )
  );
  padding: 18px 20px;
  border-radius: 15px;
  background: var(--ink-on-dark);
  border: 1px solid var(--paper-800);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(-50%) scale(0.94);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  pointer-events: none;
}

.mf-pw-orbit__item.is-active .mf-pw-bcard {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* First half of the ring sits on the dark side of the flip, second half on
   the light — so those cards invert to stay legible against the pane. */
.mf-pw-benefits__pane.is-dark .mf-pw-bcard {
  background: var(--coal-720);
  border-color: var(--coal-400);
  box-shadow: var(--shadow-card-dark);
}

/* Cards on the left half open to the left of their node, the right half to
   the right, so a card never crosses the ring. */
/* Each card sits just outside the ring, beside its own node.

   The two offsets are solved per card by the JS rather than fixed here,
   because the horizontal clearance a card needs depends on how far its own
   vertical span reaches back towards the ring's centre line. A single static
   offset cannot satisfy both ends: small enough to keep the top and bottom
   cards near their nodes, and large enough to keep the left and right ones
   off the dashed track. */
.mf-pw-orbit__item-start .mf-pw-bcard {
  inset-inline-end: var(--pw-card-inset, 112px);
}

.mf-pw-orbit__item-end .mf-pw-bcard {
  inset-inline-start: var(--pw-card-inset, 112px);
}

.mf-pw-bcard__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 6px;
}

.mf-pw-bcard__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.mf-pw-benefits__pane.is-dark .mf-pw-bcard__title { color: var(--ink-on-dark); }
.mf-pw-benefits__pane.is-dark .mf-pw-bcard__body { color: var(--ink-on-dark-body); }

/* --- Pin off ------------------------------------------------------------
   The ring needs both room for the cards either side of it and a viewport
   tall enough to hold it, so below the breakpoint (and under reduced motion,
   and with no JS at all) the whole thing degrades to a plain card grid on
   coal. Keyed on :not([data-pw-pin="on"]) so the grid is the default and the
   pin is what has to be switched on — practice-websites.js only sets that
   attribute once it has confirmed the stylesheet actually made the pane
   sticky. */

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-benefits__track { block-size: auto; }

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-benefits__pane {
  position: static;
  block-size: auto;
  display: block;
  padding: 90px 40px 100px;
  background: var(--coal-900);
}

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-amb-light { opacity: 0; }
.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-amb-dark { opacity: 1; }

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-ring {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-ring__spin,
.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-ring__track,
.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-ring__arc { display: none; }

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-ring__core {
  inline-size: 100%;
  max-inline-size: 680px;
  margin-inline: auto;
  margin-block-end: 52px;
}

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-ring__title { color: var(--ink-on-dark); }
.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-ring__lead { color: var(--ink-on-dark-body); }

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-orbit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-orbit__item {
  position: static;
  inline-size: auto;
  block-size: auto;
  padding: 24px;
  border-radius: var(--radius-panel);
  background: var(--coal-720);
  border: 1px solid var(--coal-400);
}

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-orbit__node {
  position: static;
  inline-size: 44px;
  block-size: 44px;
  background: var(--grad-icon);
  border-color: transparent;
  color: var(--ink-on-dark);
  margin-block-end: 16px;
  transform: none;
  animation: none;
}

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-bcard {
  position: static;
  inline-size: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-bcard__title { color: var(--ink-on-dark); }
.mf-pw-benefits:not([data-pw-pin="on"]) .mf-pw-bcard__body { color: var(--ink-on-dark-body); }


/* ==========================================================================
   What's included — the dark bento
   ========================================================================== */

.mf-pw-inc {
  position: relative;
  padding: 90px 40px 110px;
  overflow: clip;
  background: var(--coal-900);
  margin-block-start: -2px;
}

.mf-pw-inc__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 100% 30%, rgb(232 84 10 / 0.2), transparent 62%),
    radial-gradient(ellipse 45% 40% at 0% 82%, rgb(160 50 8 / 0.13), transparent 62%);
}

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

.mf-pw-inc__intro {
  text-align: center;
  max-inline-size: 720px;
  margin: 0 auto 52px;
}

.mf-pw-inc__intro .mf-eyebrow { margin-block-end: 22px; }

.mf-pw-inc__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 18px auto 0;
  max-inline-size: 560px;
}

/* --- Grid ---------------------------------------------------------------
   Six columns with explicit placements for the eight feature cells; the five
   slim tiles then flow into whatever is left. Below the breakpoint the whole
   thing collapses to auto-fit (see the media queries at the foot). */

.mf-pw-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(92px, auto);
  gap: 16px;
}

.mf-pw-cell {
  background: var(--coal-720);
  border: 1px solid var(--coal-400);
  border-radius: var(--radius-panel);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mf-pw-inc__head {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.mf-pw-inc__head > svg { flex: none; margin-block-start: 2px; }

.mf-pw-inc__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  color: var(--ink-on-dark);
  margin: 0 0 6px;
}

.mf-pw-inc__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-on-dark-body);
  margin: 0;
}

.mf-pw-cell-design { grid-column: 1 / span 4; grid-row: 1 / span 5; padding: 28px; }
.mf-pw-cell-bookings { grid-column: 5 / span 2; grid-row: 1 / span 5; }
.mf-pw-cell-photos { grid-column: 1 / span 3; grid-row: 6 / span 2; padding: 26px; }
.mf-pw-cell-banners { grid-column: 4 / span 3; grid-row: 6 / span 2; }
.mf-pw-cell-seo { grid-column: 1 / span 2; grid-row: 8 / span 2; }
.mf-pw-cell-monitor { grid-column: 3 / span 2; grid-row: 8 / span 2; }
.mf-pw-cell-updates { grid-column: 5 / span 2; grid-row: 8 / span 2; }
.mf-pw-cell-speed { grid-column: 1 / span 4; grid-row: 10 / span 2; }
.mf-pw-cell-slim { grid-column: span 2; }

/* The five slim tiles are the last five cells in the grid, so they are
   placed from the end — that way the count of feature cells above them can
   change without renumbering anything here. Two tuck in beside the speed
   cell, the remaining three close the grid off on their own row. */
.mf-pw-bento > :nth-last-child(5) { grid-column: 5 / span 2; grid-row: 10; }
.mf-pw-bento > :nth-last-child(4) { grid-column: 5 / span 2; grid-row: 11; }
.mf-pw-bento > :nth-last-child(3) { grid-column: 1 / span 2; grid-row: 12; }
.mf-pw-bento > :nth-last-child(2) { grid-column: 3 / span 2; grid-row: 12; }
.mf-pw-bento > :nth-last-child(1) { grid-column: 5 / span 2; grid-row: 12; }

/* --- Website mock inside the design cell --- */

.mf-pw-mock {
  flex: 1;
  min-block-size: 240px;
  border-radius: var(--radius-inset);
  overflow: hidden;
  border: 1px solid var(--coal-400);
  display: flex;
  flex-direction: column;
}

.mf-pw-mock__bar {
  block-size: 30px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline: 13px;
  background: var(--coal-600);
  border-block-end: 1px solid var(--coal-400);
}

.mf-pw-mock__bar > span:not(.mf-pw-mock__url) {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--coal-300);
}

.mf-pw-mock__url {
  margin-inline-start: 7px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-faint);
}

.mf-pw-mock__body {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--coal-800);
}

/* Grows to fill the cell — this is the mock's hero image area, and leaving
   it fixed left a dead band through the middle of the tallest tile. */
.mf-pw-mock__band {
  flex: 1;
  min-block-size: 74px;
  border-radius: var(--radius-chip);
  background:
    radial-gradient(ellipse 80% 120% at 15% 20%, rgb(232 84 10 / 0.4), transparent 62%),
    var(--coal-600);
}

.mf-pw-mock__line {
  block-size: 8px;
  border-radius: 4px;
  background: var(--coal-500);
  flex: none;
}

.mf-pw-mock__line-lg { inline-size: 72%; background: var(--coal-400); block-size: 10px; }
.mf-pw-mock__line-sm { inline-size: 48%; }

.mf-pw-mock__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mf-pw-mock__row span {
  block-size: 44px;
  border-radius: var(--radius-chip);
  background: var(--coal-600);
  border: 1px solid var(--coal-400);
}

/* --- Bookings calendar --- */

.mf-pw-cal {
  flex: 1;
  background: var(--coal-600);
  border: 1px solid var(--coal-400);
  border-radius: var(--radius-inset);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.mf-pw-cal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 11px;
  font-family: var(--font-ui);
}

.mf-pw-cal__month {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flare-500);
}

.mf-pw-cal__days { font-size: 9.5px; color: var(--ink-faint); }

.mf-pw-cal__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  flex: 1;
  min-block-size: 90px;
}

.mf-pw-cal__grid span {
  border-radius: 5px;
  background: var(--coal-400);
}

.mf-pw-cal__grid span.is-picked { background: var(--grad-brand); }
.mf-pw-cal__grid span.is-taken { background: var(--flare-a30); }

.mf-pw-cal__foot {
  margin-block-start: 11px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  color: var(--ink-on-dark-body);
}

.mf-pw-cal__state { color: var(--flare-500); }

/* --- Stock photography --- */

.mf-pw-photos {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-block-size: 104px;
}

.mf-pw-photo {
  border-radius: 11px;
  border: 1px solid var(--coal-400);
}

.mf-pw-photo-a { background: linear-gradient(140deg, #3a2a18, #7c4118 60%, #b4601f); }
.mf-pw-photo-b { background: linear-gradient(140deg, #24303a, #3f5b63 55%, #7fa08d); }
.mf-pw-photo-c { background: linear-gradient(140deg, #2e2418, #6b4a2c 55%, #c98b52); }

/* --- Seasonal banner --- */

.mf-pw-banner {
  flex: 1;
  min-block-size: 62px;
  border-radius: var(--radius-inset);
  border: 1px solid var(--coal-400);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    radial-gradient(ellipse 60% 140% at 8% 50%, rgb(232 84 10 / 0.34), transparent 60%),
    var(--coal-600);
}

.mf-pw-banner__mark {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-icon);
  color: var(--ink-on-dark);
}

.mf-pw-banner__text {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-on-dark-body);
}

.mf-pw-banner__text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--ink-on-dark);
  margin-block-end: 2px;
}

/* --- SEO results --- */

.mf-pw-seo {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.mf-pw-seo li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-chip);
  background: var(--coal-600);
  border: 1px solid var(--coal-400);
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-on-dark-body);
}

.mf-pw-seo li span { flex: 1; min-inline-size: 0; }

.mf-pw-seo li em {
  font-style: normal;
  font-weight: var(--weight-bold);
  font-size: 10.5px;
  color: var(--flare-500);
}

/* --- Monitoring trace --- */

.mf-pw-monitor {
  flex: 1;
  min-block-size: 96px;
  border-radius: var(--radius-inset);
  border: 1px solid var(--coal-400);
  background: var(--coal-600);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mf-pw-monitor__pulse {
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--status-live);
  box-shadow: 0 0 0 0 var(--status-live-line);
  animation: pwNodePulse 2.4s ease-out infinite;
}

.mf-pw-monitor svg {
  flex: 1;
  min-inline-size: 0;
  block-size: 40px;
}

/* --- Update log --- */

.mf-pw-log {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-on-dark-body);
}

.mf-pw-log li {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* --- PageSpeed --- */

.mf-pw-speed {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mf-pw-speed__score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
}

.mf-pw-speed__score span {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 30px;
  line-height: 1;
}

.mf-pw-speed__score em {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-faint);
}

.mf-pw-speed svg { inline-size: 100%; block-size: 38px; }


/* ==========================================================================
   Shared section header for the light half of the page
   ========================================================================== */

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

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


/* ==========================================================================
   Pricing
   ========================================================================== */

.mf-pw-pricing {
  position: relative;
  padding: 40px 40px 90px;
}

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

/* Plans and the one-off-project comparison sit side by side — the contrast
   is the argument the section is making, so it gets equal billing rather
   than being tucked underneath. */
.mf-pw-plans {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 24px;
  align-items: stretch;
}

.mf-pw-plans__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.mf-pw-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--radius-stage);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-tile);
}

/* Gradient ring on the featured plan, painted into the border box so the
   card keeps its paper fill. */
.mf-pw-plan.is-featured {
  border-color: transparent;
  background:
    linear-gradient(var(--paper-100), var(--paper-100)) padding-box,
    var(--grad-border) border-box;
  border-width: 1.5px;
  box-shadow: var(--shadow-card);
}

.mf-pw-plan__flag {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 28px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  color: var(--ink-on-dark);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mf-pw-plan__name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.mf-pw-plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0;
}

.mf-pw-plan__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
}

.mf-pw-plan.is-featured .mf-pw-plan__figure {
  background: var(--grad-brand-flat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mf-pw-plan__unit {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-soft);
}

.mf-pw-plan__summary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-body);
}

.mf-pw-plan__addon {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0 26px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-muted);
}

.mf-pw-plan__addon-price {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  white-space: nowrap;
}

/* `auto` pushes the button to the card's foot so both plans' buttons line up
   however tall their copy runs. The gap above it is carried by the addon
   row's bottom margin, because an auto margin collapses to 0 on the taller
   card and would otherwise leave that one with no breathing room. */
.mf-pw-plan__cta {
  margin-block-start: auto;
  padding: 15px 24px;
  font-size: 14px;
  text-align: center;
}

/* --- One-off project contrast --- */

.mf-pw-contrast {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 32px;
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-card-dark);
}

.mf-pw-contrast__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-500);
  margin: 0;
}

.mf-pw-contrast__lead {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-on-dark-body);
  margin: 14px 0 0;
}

.mf-pw-contrast__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 40px;
  line-height: 1.05;
  color: var(--ink-on-dark);
  margin: 16px 0 0;
}

.mf-pw-contrast__note {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-on-dark-dim);
  margin: 10px 0 0;
}

.mf-pw-contrast__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 20px 0 0;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--flare-a15);
}

/* --- Billing and trust: three plain columns, deliberately not cards --- */

.mf-pw-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-block-start: 72px;
  padding-block-start: 56px;
  border-block-start: 1px solid var(--border-light);
}

.mf-pw-trust__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 20px;
}

.mf-pw-trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.mf-pw-trust__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.mf-pw-trust__list svg { flex: none; margin-block-start: 4px; }

/* --- Extras and footnote --- */

.mf-pw-extras {
  max-inline-size: 860px;
  margin: 64px auto 0;
  padding: 32px 34px;
  border-radius: var(--radius-panel);
  background: var(--paper-200);
  border: 1px solid var(--border-light);
}

.mf-pw-extras__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 14px;
}

.mf-pw-extras__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

.mf-pw-extras__body:last-child { margin-block-end: 0; }
.mf-pw-extras__body a { color: var(--flare-600); font-weight: var(--weight-semibold); }

.mf-pw-footnote {
  max-inline-size: 860px;
  margin: 24px auto 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}


/* ==========================================================================
   Timeline — a circular portrait beside three stacked step cards
   ========================================================================== */

.mf-pw-timeline {
  position: relative;
  padding: 60px 40px 90px;
}

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

.mf-pw-tl {
  margin-block-start: 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

/* --- Portrait disc ------------------------------------------------------ */

.mf-pw-tl__figure {
  position: relative;
  margin: 0;
  justify-self: center;
  /* The halo sits outside the figure's box — 44px past its leading edge and
     16px past its trailing one — so the figure gives that back or the ring
     clips against the section padding on a tight column. */
  margin-inline: 44px 16px;
  inline-size: min(100% - 60px, 460px);
  aspect-ratio: 1;
}

/* Outline-only circle, larger than the disc and nudged up-left, so it reads
   as a halo behind the photo rather than a border on it. */
.mf-pw-tl__halo {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1.5px solid var(--flare-a30);
  translate: -14px -12px;
}

.mf-pw-tl__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    120% 120% at 30% 20%,
    var(--paper-300),
    var(--paper-100)
  );
  box-shadow: var(--shadow-card);
}

.mf-pw-tl__disc img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* --- Step cards --------------------------------------------------------- */

.mf-pw-tl__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.mf-pw-tlcard {
  --pw-tl-x: 0px;

  position: relative;
  padding: 24px 112px 24px 46px;
  border-radius: 26px;
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-sm);
  translate: var(--pw-tl-x) 0;
  transition-delay: calc(var(--pw-tl-i, 0) * 90ms);
}

/* The end cards pull in toward the disc while the middle stays out, so the
   stack's left edge curves around the circle instead of running straight
   past it. Written as first/last rather than nth so a fourth step would
   simply join the flush middle. Set on the list so the arc can be zeroed
   at one specificity when the portrait moves above the cards. */
.mf-pw-tl__steps > .mf-pw-tlcard:first-child,
.mf-pw-tl__steps > .mf-pw-tlcard:last-child {
  --pw-tl-x: -28px;
}

/* Half on, half off the card's leading edge — the chip reads as a layer
   above the card rather than another item inside its padding. */
.mf-pw-tlcard .mf-chip-icon-round {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  translate: -50% -50%;
  box-shadow: var(--shadow-md);
}

.mf-pw-tlcard__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}

.mf-pw-tlcard__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}

/* The step number is decoration, not a label — it sits behind the copy at
   low opacity and never competes with the heading. */
.mf-pw-tlcard__num {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 22px;
  translate: 0 -50%;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 58px;
  line-height: 1;
  color: var(--flare-a15);
  pointer-events: none;
}

/* --- Mirrored variant --------------------------------------------------- */

/* .mf-pw-tl-flip puts the disc on the trailing side. Scoped to the width
   where the two columns actually exist — once the disc sits above the stack
   there is nothing to mirror, and an `order` here would drop it underneath. */
@media (min-width: 1024px) {
  .mf-pw-tl-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }

  .mf-pw-tl-flip .mf-pw-tl__figure {
    order: 2;
    margin-inline: 16px 44px;
  }

  /* The halo leans away from the cards, so mirroring the layout has to
     mirror the offset too — otherwise it reaches back across the gap and
     the figure's reserved margin is on the wrong side. */
  .mf-pw-tl-flip .mf-pw-tl__halo { translate: 14px -12px; }

  .mf-pw-tl-flip .mf-pw-tl__steps > .mf-pw-tlcard:first-child,
  .mf-pw-tl-flip .mf-pw-tl__steps > .mf-pw-tlcard:last-child {
    --pw-tl-x: 28px;
  }

  .mf-pw-tl-flip .mf-pw-tlcard { padding: 24px 46px 24px 112px; }

  .mf-pw-tl-flip .mf-pw-tlcard .mf-chip-icon-round {
    inset-inline-start: auto;
    inset-inline-end: 0;
    translate: 50% -50%;
  }

  .mf-pw-tl-flip .mf-pw-tlcard__num {
    inset-inline-end: auto;
    inset-inline-start: 22px;
  }
}


/* ==========================================================================
   Live examples
   ========================================================================== */

.mf-pw-examples {
  position: relative;
  padding: 40px 40px 100px;
}

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

.mf-pw-practices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.mf-pw-practice {
  display: flex;
  align-items: center;
  gap: 12px;
  block-size: 100%;
  padding: 17px 20px;
  border-radius: var(--radius-tile);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.mf-pw-practice:hover {
  border-color: var(--flare-600);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-sm);
  text-decoration: none;
}

.mf-pw-practice__dot {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--grad-brand);
}

.mf-pw-practice__name {
  flex: 1;
  min-inline-size: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.mf-pw-practice svg { flex: none; }

.mf-pw-practices__more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px 20px;
  border-radius: var(--radius-tile);
  border: 1px dashed var(--flare-a30);
  background: var(--flare-a05);
}

.mf-pw-practices__more-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  margin: 0;
}

.mf-pw-practices__more-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 5px 0 0;
}


/* ==========================================================================
   Why us — dark split panel
   ========================================================================== */

.mf-pw-why {
  position: relative;
  padding: 90px 40px 100px;
  overflow: clip;
  background: var(--coal-900);
  margin-block-start: -2px;
}

.mf-pw-why__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 50% at 8% 20%, rgb(232 84 10 / 0.18), transparent 62%),
    radial-gradient(ellipse 50% 45% at 96% 88%, rgb(160 50 8 / 0.14), transparent 62%);
}

.mf-pw-why__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: start;
}

.mf-pw-why__lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
  margin: 20px 0 0;
  max-inline-size: 46ch;
}

.mf-pw-why__stats {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  gap: 48px;
}

.mf-pw-why__stat {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 46px;
  line-height: 1;
  margin: 0;
}

.mf-pw-why__stat-label {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-on-dark-dim);
  margin: 10px 0 0;
}

/* Points hang off one hairline instead of sitting in boxes — the dark panel
   already does the containing a card would otherwise do. */
.mf-pw-why__points {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  border-inline-start: 1px solid var(--flare-a20);
  display: grid;
  gap: 30px;
  counter-reset: pwpoint;
}

.mf-pw-why__points li {
  position: relative;
  counter-increment: pwpoint;
}

.mf-pw-why__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: -35px;
  inset-block-start: 9px;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--grad-brand);
}

.mf-pw-why__point-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  color: var(--ink-on-dark);
  margin: 0 0 8px;
}

.mf-pw-why__point-body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 0;
  max-inline-size: 52ch;
}


/* ==========================================================================
   Closing CTA
   ========================================================================== */

/* The horizon ramp above already supplies the run-in, so the top padding is
   small — the panel should sit just under where the sky finishes. */
.mf-pw-cta {
  position: relative;
  padding: 20px 40px 120px;
}

.mf-pw-cta__panel {
  position: relative;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 28px;
  padding: 80px 64px;
  text-align: center;
  background: linear-gradient(135deg, var(--coal-740) 0%, var(--coal-900) 55%, #231206 100%);
  box-shadow: var(--shadow-panel);
}

.mf-pw-cta__glow {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -40%;
  block-size: 120%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 40%,
    rgb(232 84 10 / 0.28),
    transparent 66%
  );
}

.mf-pw-cta__body { position: relative; z-index: 1; }
.mf-pw-cta__body .mf-eyebrow { margin-block-end: 22px; }

.mf-pw-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: 620px;
}

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


/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes pwSpin {
  from { rotate: 0deg; }
  to { rotate: -360deg; }
}

@keyframes pwDrift {
  0%, 100% { scale: 1; }
  50% { scale: 1.14; }
}

@keyframes pwNodePulse {
  0% { box-shadow: 0 0 0 0 var(--flare-a50); }
  70% { box-shadow: 0 0 0 16px rgb(232 84 10 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(232 84 10 / 0); }
}


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

/* Below this the ring's cards have nowhere left to go — the expression in
   .mf-pw-bcard would resolve under ~160px. Clearing --pw-pin is the signal
   practice-websites.js reads to leave the pin switched off, which leaves the
   section in its default card-grid state. */
@media (max-width: 1080px) {
  .mf-pw-benefits { --pw-pin: 0; }
  .mf-pw-hero { --pw-seam: var(--coal-900); }
}

/* The ring is a tall-viewport treatment: below this the derived size drops
   under ~340px, at which point the core heading no longer sits comfortably
   inside the circle and the cards start meeting the nav. The card grid is a
   better presentation there than a cramped ring. */
@media (max-height: 820px) {
  .mf-pw-benefits { --pw-pin: 0; }
  .mf-pw-hero { --pw-seam: var(--coal-900); }
}

@media (max-width: 1023px) {
  .mf-pw-hero { padding: 90px 32px 48px; }

  .mf-pw-hero__wrap {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .mf-pw-hero__lead { max-inline-size: none; }

  /* Single column now, so the art sits under the copy — cards that hang
     above the stage would land on the trust row instead of on the frame. */
  .mf-pw-fcard-update { inset-block-start: 14%; }
  .mf-pw-fcard-score { inset-block-start: 2%; }

  /* The bento's explicit placements assume six columns; below that it is
     simply an auto-fit grid and every cell sizes itself. Two class selectors
     so this outweighs both the .mf-pw-cell-* placements and the
     .mf-pw-bento > :nth-last-child() ones without reaching for !important. */
  .mf-pw-bento { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  .mf-pw-bento > .mf-pw-cell {
    grid-column: auto;
    grid-row: auto;
  }

  .mf-pw-inc,
  .mf-pw-why { padding-inline: 28px; }

  .mf-pw-plans { grid-template-columns: 1fr; }
  .mf-pw-trust { grid-template-columns: 1fr; gap: 32px; }
  .mf-pw-why__inner { grid-template-columns: 1fr; gap: 48px; }
  .mf-pw-cta__panel { padding: 60px 32px; }

  /* Two columns would squeeze the cards to a few words a line — the portrait
     moves above them instead, same as the hero art does at this width. */
  .mf-pw-tl {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-block-start: 48px;
  }

  .mf-pw-tl__figure {
    inline-size: min(100%, 380px);
    margin-inline: auto;
  }

  /* The disc is centred above the stack now, so there is no circle edge for
     the arc to follow — the cards go back to a flush column. Matches the
     arc selector's specificity and wins on order. */
  .mf-pw-tl__steps > .mf-pw-tlcard:first-child,
  .mf-pw-tl__steps > .mf-pw-tlcard:last-child {
    --pw-tl-x: 0px;
  }
}

@media (max-width: 780px) {
  .mf-pw-hero { padding: 72px 22px 40px; }

  /* Pull the cards back over the frame — there is no longer room beside it,
     and half a card hanging off the viewport edge reads as a layout bug. */
  .mf-pw-hero__stage { inline-size: min(100%, 400px); }

  /* Tucked in against the frame — the section clips its overflow, so the
     desktop offset would slice the phone in half at this width. */
  .mf-pw-phone {
    inset-inline-start: -18px;
    inset-block-end: -30px;
    inline-size: 92px;
  }

  .mf-pw-fcard-update { inset-inline-end: calc(100% - 76px); inset-block-start: 20%; }
  .mf-pw-fcard-score { inset-inline-end: -12px; }
  .mf-pw-fcard-uptime { inset-inline-end: 0; }

  .mf-pw-plans__cards { grid-template-columns: 1fr; }

  .mf-pw-pricing,
  .mf-pw-timeline,
  .mf-pw-examples { padding-inline: 22px; }

  .mf-pw-inc,
  .mf-pw-why { padding-inline: 22px; }

  .mf-pw-cta { padding: 40px 22px 90px; }

  .mf-pw-tl { gap: 44px; margin-block-start: 44px; }
  .mf-pw-tl__figure { inline-size: min(100%, 320px); }
  .mf-pw-tl__halo { inset: -22px; translate: -10px -9px; }

  .mf-pw-tlcard { padding: 22px 84px 22px 42px; }
  .mf-pw-tlcard__num { font-size: 48px; inset-inline-end: 18px; }

  .mf-pw-why__stats { gap: 32px; }
  .mf-pw-extras { padding: 26px 22px; }
}

@media (max-width: 560px) {
  /* At this width the frame, a phone and two cards is more than the column
     can hold without everything shrinking past legibility — the desktop
     mock alone still tells the story. */
  .mf-pw-phone { display: none; }

  .mf-pw-fcard__inner { inline-size: 150px; padding: 13px 15px; }
  .mf-pw-fcard-update { inset-inline-end: calc(100% - 56px); }
  .mf-pw-fcard-score { inset-inline-end: -6px; inset-block-start: -4%; }
  .mf-pw-fcard-uptime { inset-inline-end: 0; inset-block-end: -4%; }
  /* Under 560px the number would crowd the copy, so it steps back to a
     corner watermark and the card reclaims the full width for text. The
     stack also inches right to leave the breakout chip room off the edge. */
  .mf-pw-tl__steps { padding-inline-start: 12px; }

  .mf-pw-tlcard {
    padding: 20px 20px 20px 42px;
    border-radius: 22px;
  }

  .mf-pw-tlcard .mf-chip-icon-round {
    inline-size: 38px;
    block-size: 38px;
  }

  .mf-pw-tlcard__num {
    inset-block-start: 12px;
    inset-inline-end: 14px;
    translate: none;
    font-size: 34px;
    color: var(--flare-a12);
  }

  .mf-pw-plan { padding: 26px 22px; }
  .mf-pw-plan__figure { font-size: 40px; }
  .mf-pw-contrast { padding: 26px 22px; }
  .mf-pw-cta__panel { padding: 48px 22px; }
  .mf-pw-cta__actions .mf-btn { inline-size: 100%; }
}


/* ==========================================================================
   Reduced motion
   The pin, the spin and the drift all come off; the section falls back to
   the same card grid narrow viewports get.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mf-pw-benefits { --pw-pin: 0; }
  .mf-pw-hero { --pw-seam: var(--coal-900); }

  .mf-pw-ring__spin,
  .mf-pw-amb span,
  .mf-pw-monitor__pulse,
  .mf-pw-orbit__item.is-active .mf-pw-orbit__node { animation: none; }

  .mf-pw-fcard,
  .mf-pw-fcard.is-in .mf-bob { animation: none; transition: none; }

  .mf-pw-fcard { opacity: 1; transform: none; }

  .mf-pw-practice:hover { transform: none; }
  .mf-pw-tlcard { transition-delay: 0s; }
}