/* ==========================================================================
   Patient Health Hub
   Loaded only by src/pages/patient-hub.njk (front matter: pageCss: patient-hub).

   Shared furniture (.mf-h2, .mf-lead, .mf-btn*, .mf-eyebrow*, .mf-reveal,
   .mf-horizon, .mf-wave, .mf-chip-icon, .mf-bob) 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 and glow ramps, where the stops are the design.

   The page runs paper → coal → paper: hero and what-it-is in the light, the
   clickable hub and the eleven working calculators on coal, then back out
   for the reasons and the closing CTA. The
   two .mf-horizon bands in the template do the ramps; the .mf-wave arch does
   the hero's close.
   ========================================================================== */


/* ==========================================================================
   Section furniture shared across this page
   ========================================================================== */

.mf-ph-sechead {
  text-align: center;
  max-inline-size: 780px;
  margin: 0 auto 54px;
}

.mf-ph-sechead .mf-eyebrow { margin-block-end: 20px; }
.mf-ph-sechead .mf-lead { margin-inline: auto; }


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

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

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

.mf-ph-hero__wrap {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

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

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

.mf-ph-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: 500px;
  margin: 24px 0 0;
}

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

.mf-ph-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-ph-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* --- The browser frame -------------------------------------------------- */

/* Sized to the frame, not to the column, so the calculator's offsets are
   measured off the browser window rather than off whatever space is left. */
/* The panels hang off the frame, so the art column keeps room for them on
   every side: the frame is inset by the padding, and the panels reach into
   it rather than out to the edge of the screen. */
.mf-ph-hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  max-inline-size: 800px;
  margin-inline: auto;
  padding: 56px 52px 72px;
}

/* A chrome bar and a screenshot. The frame exists so the shot reads as a
   browser window rather than a floating rectangle — everything inside it is
   the real hub, so there is nothing else here to draw. */
.mf-ph-browser {
  position: relative;
  margin: 0;
  inline-size: 100%;
  max-inline-size: 680px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-demo);
}

.mf-ph-browser__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--paper-300);
  border-block-end: 1px solid var(--border-light);
}

.mf-ph-browser__dots { display: inline-flex; gap: 6px; flex: none; }

.mf-ph-browser__dots i {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--border-light-strong);
}

.mf-ph-browser__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* Square-edged inside the frame's radius: the bar above it is what gets
   rounded, and a rounded shot inside a rounded frame reads as two boxes. */
.mf-ph-browser__shot {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* --- Floating panels, in the dark ----------------------------------------

   Anchored to the frame's edges and only ever hanging a little past them —
   the hero clips its overflow. Clear of the frame's top (the practice's own
   header is the point of the shot) and of the credit strip. */
.mf-ph-fpanel {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Over the right end of the hub's tab row and search field, clear of the
   practice's header above and the practice card below. */
.mf-ph-fpanel-search {
  inset-block-start: 22px;
  inset-inline-end: 4px;
  transition-delay: 0.15s;
}

.mf-ph-fpanel-article {
  inset-block-end: 20px;
  inset-inline-end: 0;
  transition-delay: 0.3s;
}

.mf-ph-fpanel-tools {
  inset-block-end: 118px;
  inset-inline-start: 0;
  transition-delay: 0.45s;
}

.mf-ph-fpanel-article .mf-bob { animation-delay: 0.9s; }
.mf-ph-fpanel-tools .mf-bob { animation-delay: 1.8s; }

.mf-ph-fpanel__inner {
  padding: 14px 16px 16px;
  border-radius: var(--radius-tile);
  background: var(--coal-720);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-card-dark);
  font-family: var(--font-ui);
  color: var(--ink-on-dark);
}

/* A light panel among the dark ones — an article card as it sits on the
   practice's page, white on white, lifted by its shadow. */
.mf-ph-fpanel__inner-light {
  background: var(--paper-100);
  border-color: var(--border-light);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

.mf-ph-fpanel-article .mf-ph-fpanel__inner { inline-size: 212px; padding: 12px 12px 14px; }
.mf-ph-fpanel-tools .mf-ph-fpanel__inner { inline-size: 224px; }

/* The live dot is the hub's own status mark — "this is a running tab". */
.mf-ph-fpanel__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-on-dark-dim);
}

.mf-ph-fpanel__inner-light .mf-ph-fpanel__label { color: var(--ink-soft); }

.mf-ph-fpanel__label::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--flare-500);
  box-shadow: 0 0 0 3px var(--flare-a20);
}

/* Article card */
.mf-ph-fpanel__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-md);
}

.mf-ph-fpanel__title {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--ink);
}

.mf-ph-fpanel__meta {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--ink-soft);
}

.mf-ph-fpanel__meta b { font-weight: var(--weight-semibold); color: var(--flare-700); }

/* Search — a dark bar on its own, the search field lifted out of the hub. */
.mf-ph-fpanel__search {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 250px;
  margin: 0;
  padding: 13px 18px;
  border-radius: var(--radius-pill);
  background: var(--coal-720);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-card-dark), 0 0 0 5px var(--flare-a10);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-on-dark-faint);
}

.mf-ph-fpanel__search svg { flex: none; color: var(--flare-500); }

.mf-ph-fpanel__typed.is-typing { color: var(--ink-on-dark); }

.mf-ph-fpanel__typed.is-typing::after {
  content: "";
  display: inline-block;
  inline-size: 1.5px;
  block-size: 1em;
  margin-inline-start: 2px;
  vertical-align: -2px;
  background: var(--flare-500);
  animation: mfPhCaret 1s steps(1) infinite;
}

/* Health Tools */
.mf-ph-fpanel__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.mf-ph-fpanel__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.mf-ph-fpanel__value small {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-dim);
}

.mf-ph-fpanel__value span {
  margin-inline-start: auto;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  color: var(--status-live-on-dark);
  background: var(--status-live-on-dark-soft);
  border: 1px solid var(--status-live-on-dark-line);
}

/* The hub's four bands, 15–40, with the marker on the reading. */
.mf-ph-fpanel__scale {
  position: relative;
  display: grid;
  grid-template-columns: 14fr 26fr 20fr 40fr;
  gap: 2px;
  margin: 14px 0 0;
}

.mf-ph-fpanel__scale i { block-size: 5px; background: var(--flare-400); }
.mf-ph-fpanel__scale i:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.mf-ph-fpanel__scale i:nth-child(2) { background: var(--status-live-on-dark); }
.mf-ph-fpanel__scale i:nth-child(4) { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--flare-warm); }

.mf-ph-fpanel__scale b {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: var(--at);
  inline-size: 3px;
  block-size: 15px;
  translate: -50% 0;
  border-radius: var(--radius-pill);
  background: var(--paper-100);
  box-shadow: 0 0 0 2px var(--coal-720);
}

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


/* Names the practice whose site the shot was taken on, so a real screenshot
   is never mistaken for a staged one. */
.mf-ph-browser__credit {
  padding: 11px 16px;
  border-block-start: 1px solid var(--border-light);
  background: var(--paper-200);
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-soft);
  text-align: start;
}


/* ==========================================================================
   The arch that closes the hero, and What It Is

   The hero paints no background of its own, so the glow's base stays
   transparent and the page wash reads straight through it. The dome below the
   curve is flat, though, so What It Is has to open on exactly that colour or
   the fixed wash steps against it — and because the wash is fixed, that step
   would slide as the page scrolled.
   ========================================================================== */

.mf-ph-what {
  background: var(--paper-500);
  padding: 40px 40px 96px;
}

.mf-ph-what__inner {
  max-inline-size: 1180px;
  margin-inline: auto;
}

/* Three statements, not three cards. Each is one ruled row: the claim at
   display size on the left, what it means on the right. */
.mf-ph-nots {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--border-light);
}

.mf-ph-not {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 16px 64px;
  align-items: center;
  padding-block: 34px;
  border-block-start: 1px solid var(--border-light);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.mf-ph-not__claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.mf-ph-not__not { color: var(--ink-faint); }

.mf-ph-not__noun {
  position: relative;
  white-space: nowrap;
  color: var(--ink);
}

/* The strike draws across the noun once the row has arrived. */
.mf-ph-not__noun::after {
  content: "";
  position: absolute;
  inset-inline: -4px;
  inset-block-start: 54%;
  block-size: 0.08em;
  border-radius: var(--radius-pill);
  background: var(--grad-brand-flat);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-in-out);
  transition-delay: calc(0.45s + var(--i, 0) * 90ms);
}

.mf-ph-not.is-in .mf-ph-not__noun::after { transform: scaleX(1); }

.mf-ph-not__body {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.mf-ph-not__icon { display: inline-flex; padding-block-start: 4px; }

.mf-ph-what__close {
  margin: 40px auto 0;
  max-inline-size: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}


/* ==========================================================================
   What's included — the hub itself, clickable, on coal
   ========================================================================== */

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

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

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

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

.mf-ph-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--flare-a40);
  background: var(--flare-a10);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--flare-500);
}

.mf-ph-demo {
  display: grid;
  /* Split so heading + list + window fit under the nav on a 900px-tall
     screen while pinned. Taller screens give the window more of the row
     (below), since it is the window's height that sets the limit. */
  grid-template-columns: minmax(0, 5.25fr) minmax(0, 6.75fr);
  gap: 28px 48px;
  align-items: start;
}

@media (min-height: 1000px) {
  .mf-ph-demo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* The heading is the block's first row, centred over both columns. Held to
   one line and a little under the section size so the pinned block fits. */
.mf-ph-demo > .mf-ph-sechead {
  grid-column: 1 / -1;
  max-inline-size: 1000px;
  margin: 0 auto;
}

.mf-ph-demo > .mf-ph-sechead .mf-eyebrow { margin-block-end: 16px; }
.mf-ph-demo > .mf-ph-sechead .mf-h2 { font-size: clamp(28px, 1.5rem + 1.1vw, 40px); }

/* The lead sits under the list rather than in the heading row, which
   keeps the heading to two lines and the pinned block on screen. */
.mf-ph-demo__note {
  margin: 12px 0 0;
  padding-inline-start: 18px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-on-dark-body);
  max-inline-size: 52ch;
}

/* --- The pin ---------------------------------------------------------------
   The block sticks under the nav (--ph-inc-top, from the script) for as long
   as the track lasts: one step of scroll per area. */
.mf-ph-inc__track { position: relative; }
.mf-ph-inc__travel { display: none; }

.mf-ph-inc.is-pinned .mf-ph-demo {
  position: sticky;
  inset-block-start: var(--ph-inc-top, 100px);
}

.mf-ph-inc.is-pinned .mf-ph-inc__travel {
  display: block;
  block-size: calc((var(--ph-inc-steps, 6) - 1) * var(--ph-inc-step, 42svh));
}

/* --- The six areas, as a list that drives the tabs ----------------------- */

.mf-ph-demo__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--coal-400);
}

.mf-ph-demo__areas li { border-block-start: 1px solid var(--coal-400); }

.mf-ph-demo__area {
  position: relative;
  display: grid;
  gap: 6px;
  inline-size: 100%;
  padding: 11px 0 11px 18px;
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
  color: var(--ink-on-dark-dim);
}

/* The chosen area carries a flare edge. */
.mf-ph-demo__area::before {
  content: "";
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--grad-brand-v);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mf-ph-demo__area.is-active::before { opacity: 1; }
.mf-ph-demo__area:focus-visible { outline: 2px solid var(--flare-500); outline-offset: 2px; border-radius: var(--radius-sm); }

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

.mf-ph-demo__icon { display: inline-flex; opacity: 0.55; transition: opacity 0.2s ease; }

.mf-ph-demo__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
  transition: color 0.2s ease;
}

.mf-ph-demo__area:hover .mf-ph-demo__name,
.mf-ph-demo__area.is-active .mf-ph-demo__name { color: var(--ink-on-dark); }
.mf-ph-demo__area.is-active .mf-ph-demo__icon { opacity: 1; }

/* Every description stays readable; the chosen one is simply brighter. */
.mf-ph-demo__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-on-dark-faint);
  transition: color 0.2s ease;
}

.mf-ph-demo__area.is-active .mf-ph-demo__body { color: var(--ink-on-dark-body); }

/* --- The window ------------------------------------------------------------ */

.mf-ph-window {
  margin: 0;
  min-inline-size: 0;
}

.mf-ph-window__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-start-start-radius: var(--radius-panel);
  border-start-end-radius: var(--radius-panel);
  background: var(--coal-600);
  border: 1px solid var(--border-on-dark);
  border-block-end: 0;
}

.mf-ph-window__dots { display: inline-flex; gap: 6px; }

.mf-ph-window__dots i {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--coal-300);
}

.mf-ph-window__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--coal-800);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-on-dark-dim);
}

/* The hub, white as it is on the practice's site. */
.mf-ph-hub {
  overflow: hidden;
  border-end-start-radius: var(--radius-panel);
  border-end-end-radius: var(--radius-panel);
  background: var(--paper-100);
  border: 1px solid var(--border-on-dark);
  box-shadow: var(--shadow-panel);
}

/* The hub's tab rail, rebuilt so it can be clicked. Its colours are the
   hub's own on this practice's site (burgundy active tab on a blush pill),
   taken from the capture, so the rail and the view below it read as one. */
.mf-ph-hub__rail {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--paper-100);
  border-block-end: 1px solid var(--border-light);
}

.mf-ph-hub__rail::-webkit-scrollbar { display: none; }

/* Beside the list the window is narrow; the tabs keep their names and drop
   their icons so all six fit the rail without scrolling. Below 1100px the
   window has the full width and the icons come back. */
@media (min-width: 1100px) {
  .mf-ph-hub__tab svg { display: none; }
}

.mf-ph-hub__tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Sized so all six tabs fit the rail at the window's pinned width. */
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--ink-body);
  transition: background 0.2s ease, color 0.2s ease;
}

.mf-ph-hub__tab:hover { background: var(--paper-400); }

.mf-ph-hub__tab[aria-selected="true"] {
  background: var(--flare-a12);
  color: var(--flare-700);
}

.mf-ph-hub__tab:focus-visible { outline: 2px solid var(--flare-600); outline-offset: -2px; }

.mf-ph-hub__views { position: relative; }

.mf-ph-hub__view { position: relative; }

.mf-ph-hub__view img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.mf-ph-hub__view:not([hidden]) { animation: mfPhViewIn 0.45s var(--ease-out); }

/* A link inside the capture. Invisible until pointed at or focused, then a
   flare ring over the thing in the picture it stands for. */
.mf-ph-hub__spot {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  inline-size: var(--w);
  block-size: var(--h);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.mf-ph-hub__spot:hover,
.mf-ph-hub__spot:focus-visible {
  outline: none;
  background: var(--flare-a06);
  box-shadow: 0 0 0 2px var(--flare-600), 0 0 0 7px var(--flare-a15);
}

/* The example list over Resources' empty state. Sits where "No resources
   available yet." is in the capture, in the hub's own type. */
.mf-ph-hub__example {
  position: absolute;
  inset-inline-start: 1.5%;
  inset-block-start: 25%;
  inline-size: 67%;
  padding: 2% 2.5%;
  background: var(--paper-100);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.mf-ph-hub__extag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--border-light-strong);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mf-ph-hub__example ul { list-style: none; margin: 0; padding: 0; }

.mf-ph-hub__example li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  border-block-end: 1px solid var(--border-light);
  font-size: clamp(11px, 1.1vw, 14px);
  color: var(--ink);
}

.mf-ph-hub__example li svg { flex: none; color: var(--flare-700); }
.mf-ph-hub__example li span { flex: 1; }

.mf-ph-hub__example li em {
  font-size: 11px;
  font-style: normal;
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
}

.mf-ph-hub__exnote {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--ink-soft);
}

.mf-ph-window__about {
  display: none;
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-on-dark-body);
}

.mf-ph-window__about b {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
  margin-inline-end: 6px;
}

.mf-ph-window__credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-block-start: 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-on-dark-faint);
}

.mf-ph-window__hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
}

@keyframes mfPhViewIn { from { opacity: 0; } }


/* ==========================================================================
   The eleven tools — every one working, on coal
   ========================================================================== */

/* Continues the coal of What's Included; the rule is the only join. */
.mf-ph-tools {
  position: relative;
  padding: 0 40px 110px;
  overflow: clip;
  background: var(--coal-900);
}

.mf-ph-tools__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  padding-block-start: 80px;
  border-block-start: 1px solid var(--coal-400);
}

/* The heading is its own row above the stage, centred, and pins with it.
   Held to one line and a little under the section size, and the calculators
   set tight (see the fields below), so the pair fits under the nav. */
.mf-ph-tools__head {
  max-inline-size: 1000px;
  margin: 0 auto 28px;
  text-align: center;
}

.mf-ph-tools__head .mf-eyebrow { margin-block-end: 16px; }

.mf-ph-tools__head .mf-h2 {
  font-size: clamp(28px, 1.5rem + 1.1vw, 40px);
  line-height: 1.15;
}

/* The invitation to try one sits under the dial's controls. */
.mf-ph-tools__lead {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-on-dark-body);
  margin: 0;
  max-inline-size: 30ch;
  text-align: center;
}

.mf-ph-tools__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px 72px;
  /* The dial lines up with the top of the calculator rather than floating in
     the middle of a tall one. */
  align-items: start;
}

/* --- The dial -------------------------------------------------------------- */

.mf-ph-dial {
  display: grid;
  justify-items: center;
  gap: 22px;
}

.mf-ph-dial__ring {
  --r: 150px;
  position: relative;
  inline-size: calc(var(--r) * 2 + 40px);
  aspect-ratio: 1;
}

/* Each tick is a button, turned to its place on the ring. */
.mf-ph-dial__tick {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 28px;
  block-size: 40px;
  margin: -20px 0 0 -14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1));
}

.mf-ph-dial__tick::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block: 6px;
  inline-size: 6px;
  margin-inline-start: -3px;
  border-radius: var(--radius-pill);
  background: var(--coal-300);
  transition: background 0.25s ease, scale 0.25s ease;
}

.mf-ph-dial__tick:hover::before { background: var(--flare-a60); }
.mf-ph-dial__tick.is-done::before { background: var(--flare-a50); }
.mf-ph-dial__tick.is-on::before { background: var(--grad-brand-v); scale: 1.25; }
.mf-ph-dial__tick:focus-visible { outline: 2px solid var(--flare-500); outline-offset: 2px; border-radius: var(--radius-sm); }

.mf-ph-dial__n {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  margin: 0;
  pointer-events: none;
}

.mf-ph-dial__n span {
  font-family: var(--font-display);
  font-size: 108px;
  font-weight: var(--weight-bold);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  background: var(--grad-brand-flat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mf-ph-dial__n small {
  margin-block-start: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-dark-dim);
}

.mf-ph-dial__controls { display: flex; gap: 10px; }

.mf-ph-dial__btn {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--coal-300);
  background: var(--coal-800);
  color: var(--ink-on-dark);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mf-ph-dial__btn:hover { border-color: var(--flare-500); background: var(--flare-a10); }
.mf-ph-dial__btn:focus-visible { outline: 2px solid var(--flare-500); outline-offset: 2px; }
.mf-ph-dial__btn[data-ph-prev] span { display: inline-flex; rotate: 180deg; }



/* --- The calculators ------------------------------------------------------- */

.mf-ph-tooldeck { display: grid; min-inline-size: 0; }

/* Stacked: every tool in one cell, the stage as tall as the tallest, so it
   never changes size as tools swap. The script sets .is-stacked whenever
   the stage is pinned (and on wide screens regardless), and keeps `hidden`
   off the tools while it is. */
.mf-ph-tools.is-stacked .mf-ph-tool {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  /* One calculator fades into the next in place; eased and unhurried, so a
     step of scroll reads as a soft change rather than a cut. */
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}

.mf-ph-tools.is-stacked .mf-ph-tool.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, translate 0.3s var(--ease-out), visibility 0s;
}

/* --- The pin -----------------------------------------------------------------
   The stage sticks centred under the nav (--ph-pin-top, from the script) for
   as long as the track lasts; the travel is one step of scroll per tool. */
.mf-ph-tools__track { position: relative; }

.mf-ph-tools.is-pinned .mf-ph-tools__pin {
  position: sticky;
  inset-block-start: var(--ph-pin-top, 100px);
}


.mf-ph-tools__travel { display: none; }

.mf-ph-tools.is-pinned .mf-ph-tools__travel {
  display: block;
  block-size: calc((var(--ph-steps, 11) - 1) * var(--ph-step, 45svh));
}

.mf-ph-tool__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-ph-tool__name {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.6vw, 36px);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  color: var(--ink-on-dark);
}

.mf-ph-tool__desc {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-on-dark-body);
}

/* One field per row: its label on the left, the control right-aligned, a
   rule under each — read down like a form, not scanned across a wrap. */
.mf-ph-tool__form {
  display: grid;
  /* Rows keep their own height; beside a taller result they would
     otherwise stretch apart. */
  align-content: start;
  margin-block-start: 16px;
  border-block-start: 1px solid var(--coal-400);
}

.mf-ph-tool__checks { display: contents; }

.mf-ph-field,
.mf-ph-step,
.mf-ph-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Rows set tight: the tallest form (AUSDRISK, ten rows) is what decides
     whether heading and stage fit the screen together. */
  min-block-size: 42px;
  padding-block: 3px;
  border-block-end: 1px solid var(--coal-400);
}

.mf-ph-field__label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
}

/* From tablet up: the form and its result side by side, so a long form
   (AUSDRISK) does not push the answer below the fold of the pinned stage. */
@media (min-width: 700px) {
  .mf-ph-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-content: start;
  }

  .mf-ph-tool__kicker,
  .mf-ph-tool__name,
  .mf-ph-tool__desc { grid-column: 1 / -1; }

  .mf-ph-tool .mf-ph-result {
    align-self: start;
    margin-block-start: 16px;
    padding-block-start: 12px;
  }
}

.mf-ph-field__box {
  flex: none;
  max-inline-size: 62%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-block-size: 34px;
  padding-inline: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--coal-300);
  background: var(--coal-800);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mf-ph-field__box:focus-within {
  border-color: var(--flare-500);
  box-shadow: 0 0 0 3px var(--flare-a20);
}

.mf-ph-field__box input,
.mf-ph-field__box select {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
  color-scheme: dark;
}

.mf-ph-field__box input[type="number"] { inline-size: 5ch; -moz-appearance: textfield; }
.mf-ph-field__box input[type="date"] { inline-size: 14ch; font-size: 16px; }
.mf-ph-field__box select { font-family: var(--font-ui); font-size: 15px; cursor: pointer; }
.mf-ph-field__box select option { color: var(--ink); background: var(--paper-100); }

.mf-ph-field__box input::-webkit-outer-spin-button,
.mf-ph-field__box input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.mf-ph-field__box em {
  font-family: var(--font-ui);
  font-size: 13px;
  font-style: normal;
  color: var(--ink-on-dark-faint);
}

/* The tick box sits on the right like every other control; the question
   reads on the left. */
.mf-ph-check {
  flex-direction: row-reverse;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
}

.mf-ph-check > span:last-child { margin-inline-end: auto; }

.mf-ph-check input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }

.mf-ph-check__box {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--coal-300);
  background: var(--coal-800);
}

.mf-ph-check input:checked + .mf-ph-check__box {
  border-color: transparent;
  background: var(--grad-cta);
}

.mf-ph-check input:checked + .mf-ph-check__box::after {
  content: "";
  inline-size: 5px;
  block-size: 9px;
  margin-block-start: -2px;
  border: solid var(--paper-100);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

.mf-ph-check input:focus-visible + .mf-ph-check__box { box-shadow: 0 0 0 3px var(--flare-a30); }

/* A drink with − and + either side of how many. */

.mf-ph-step__label {
  display: grid;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
}

.mf-ph-step__label small { font-size: 11px; font-weight: var(--weight-normal); color: var(--ink-on-dark-faint); }

.mf-ph-step__ctl {
  flex: none;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--coal-300);
  background: var(--coal-800);
}

.mf-ph-step__ctl button {
  inline-size: 36px;
  block-size: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--flare-500);
}

.mf-ph-step__ctl button:focus-visible { outline: 2px solid var(--flare-500); outline-offset: -2px; border-radius: var(--radius-sm); }

/* padding: 0 — the base form styles pad every input, which inside a 3ch box
   left no room for the number at all. */
.mf-ph-step__ctl input {
  inline-size: 3ch;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
  -moz-appearance: textfield;
}

.mf-ph-step__ctl input::-webkit-outer-spin-button,
.mf-ph-step__ctl input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* --- The result ------------------------------------------------------------- */

/* The value and its band share a row and wrap as a pair: when the band
   does not fit beside the value it drops flush under it, never indented.
   The scale and note always take the full width below. */
.mf-ph-result {
  margin-block-start: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.mf-ph-result__viz,
.mf-ph-result__note { flex-basis: 100%; }

.mf-ph-result__value {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-on-dark);
}

.mf-ph-result.is-long .mf-ph-result__value { font-size: 34px; }

.mf-ph-result__value small {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-dim);
}

.mf-ph-result__band {
  display: inline-flex;
  margin: 0;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--status-live-on-dark);
  background: var(--status-live-on-dark-soft);
  border: 1px solid var(--status-live-on-dark-line);
}

.mf-ph-result__band:empty { display: none; }

.mf-ph-result.tone-mid .mf-ph-result__band { color: var(--flare-400); background: var(--flare-a10); border-color: var(--flare-a30); }
.mf-ph-result.tone-high .mf-ph-result__band { color: var(--flare-warm); background: var(--flare-a15); border-color: var(--flare-a40); }
.mf-ph-result.tone-none .mf-ph-result__band { color: var(--ink-on-dark-body); background: transparent; border-color: var(--coal-300); }

/* Invalid input: the value steps back and the note says why. */
.mf-ph-result.is-empty .mf-ph-result__value,
.mf-ph-result.is-empty .mf-ph-result__band,
.mf-ph-result.is-empty .mf-ph-result__viz { opacity: 0.25; }

.mf-ph-result__note {
  margin: 12px 0 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-on-dark-body);
}

.mf-ph-result__note:empty { display: none; }
.mf-ph-result.is-empty .mf-ph-result__note { color: var(--flare-400); }

.mf-ph-result__viz:empty { display: none; }
.mf-ph-result__viz { margin-block-start: 6px; }

/* Segmented scale with a marker. Segments come from the script as
   inline-size + tone; the marker as --at. */
.mf-ph-scale { position: relative; }

.mf-ph-scale ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}

/* Labels may run past a narrow segment rather than be cut off by it — the
   rounded end of the first segment would clip its first letter. */
.mf-ph-scale li {
  min-inline-size: 0;
  padding-block-start: 11px;
  border-block-start: 6px solid var(--coal-300);
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
}

.mf-ph-scale li.is-good { border-color: var(--status-live-on-dark); }
.mf-ph-scale li.is-mid { border-color: var(--flare-400); }
.mf-ph-scale li.is-high { border-color: var(--flare-warm); }
/* A border-image would square off the rounded ends, so the gradient is a
   background laid over a transparent border instead. */
.mf-ph-scale li.is-plain {
  border-color: transparent;
  background: var(--grad-brand-flat) 0 0 / 100% 6px no-repeat;
}
.mf-ph-scale li:first-child { border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); }
.mf-ph-scale li:last-child { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); }

.mf-ph-scale__marker {
  position: absolute;
  z-index: 1;
  inset-block-start: -6px;
  inset-inline-start: var(--at);
  inline-size: 4px;
  block-size: 18px;
  translate: -50% 0;
  border-radius: var(--radius-pill);
  background: var(--paper-100);
  box-shadow: 0 0 0 3px var(--coal-900);
  transition: inset-inline-start 0.3s var(--ease-out);
}

/* Heart rate zones: five bars rising. */
.mf-ph-zones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.mf-ph-zones li { display: grid; gap: 4px; font-family: var(--font-ui); color: var(--ink-on-dark-body); }

.mf-ph-zones i {
  display: block;
  block-size: calc(46px * var(--h));
  border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
  background: linear-gradient(180deg, var(--flare-400), var(--flare-warm));
  opacity: calc(0.35 + var(--h) * 0.55);
}

.mf-ph-zones b { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-on-dark-dim); }
.mf-ph-zones em { font-size: 14px; font-style: normal; font-weight: var(--weight-bold); color: var(--ink-on-dark); }

/* A range on a line. */
.mf-ph-range__bar {
  position: relative;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--coal-300);
}

.mf-ph-range__bar i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--lo);
  inline-size: calc(var(--hi) - var(--lo));
  border-radius: inherit;
  background: var(--status-live-on-dark);
  box-shadow: 0 0 0 3px var(--status-live-on-dark-soft);
  transition: inset-inline-start 0.3s var(--ease-out), inline-size 0.3s var(--ease-out);
}

.mf-ph-range p {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark-faint);
}

/* A cycle, a cell a day. */
.mf-ph-cycle ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
  gap: 3px;
}

.mf-ph-cycle li { block-size: 20px; border-radius: 3px; background: var(--coal-400); }
.mf-ph-cycle li.is-period { background: var(--flare-a40); }
.mf-ph-cycle li.is-fertile { background: var(--status-live-on-dark-line); }
.mf-ph-cycle li.is-ovulation { background: var(--status-live-on-dark); }
.mf-ph-cycle li.is-today { box-shadow: 0 0 0 2px var(--coal-900), 0 0 0 4px var(--paper-100); }

.mf-ph-cycle p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-dim);
}

.mf-ph-cycle p span::before {
  content: "";
  display: inline-block;
  inline-size: 9px;
  block-size: 9px;
  margin-inline-end: 6px;
  border-radius: 2px;
  background: var(--c);
}

/* Child growth: two percentiles side by side. */
.mf-ph-pcts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.mf-ph-pcts h4 { margin: 0 0 12px; font-family: var(--font-ui); font-size: 12px; font-weight: var(--weight-semibold); color: var(--ink-on-dark-dim); }
.mf-ph-pcts h4 b { margin-inline-start: 6px; font-family: var(--font-display); font-size: 20px; color: var(--ink-on-dark); }

/* --- Every tool by name -------------------------------------------------- */

/* Inside the pinned block, under the deck, and on screen with it for the
   whole run: the script steps the block down until all three fit (see
   "Fitting the list" below). Only where no step fits — a phone, where the
   list is a single long column — does it sit under the fold while pinned and
   arrive as the block lets go. */
.mf-ph-tools__foot {
  position: relative;
  margin-block-start: 40px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--coal-400);
}

.mf-ph-tools__groups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 40px;
}

.mf-ph-tools__groups li { transition-delay: calc(var(--i, 0) * 80ms); }

.mf-ph-tools__gname {
  display: flex;
  align-items: center;
  gap: 9px;
  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);
}

/* One tool per line in every group, so a short group and a long one read
   the same way down the column. */
.mf-ph-tools__gtools {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin: 10px 0 0;
}

.mf-ph-tools__name {
  padding: 3px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: start;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink-on-dark-body);
  text-decoration: underline;
  text-decoration-color: var(--coal-300);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.mf-ph-tools__name:hover,
.mf-ph-tools__name.is-on { color: var(--ink-on-dark); text-decoration-color: var(--flare-500); }
.mf-ph-tools__name:focus-visible { outline: 2px solid var(--flare-500); outline-offset: 2px; border-radius: var(--radius-xs); }

.mf-ph-tools__note {
  margin: 32px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-on-dark-faint);
}

/* --- Fitting the list under the deck while pinned ---------------------------
   Heading, deck and the list of every calculator are held together, so the
   list is there for the whole run rather than arriving after the last tool.
   Full size, the three need about 1130px of viewport height, so when the
   block pins the script steps it down until they fit (data-ph-fit — absent
   means full size, which is also what an unpinned section gets).

   Snug takes spacing, a little off the dial and the rows, and the
   calculator's "n of 11" kicker, which the dial already says. Tight also
   drops the eyebrow, the one-line descriptions, the dial's hint and the note
   under the list. */
.mf-ph-tools[data-ph-fit] .mf-ph-tools__head { margin-block-end: 16px; }

.mf-ph-tools[data-ph-fit] .mf-ph-tool__kicker { display: none; }
.mf-ph-tools[data-ph-fit] .mf-ph-tool__name { margin-block-start: 0; font-size: 32px; }
.mf-ph-tools[data-ph-fit] .mf-ph-tool__desc { margin-block-start: 6px; font-size: 16px; }
.mf-ph-tools[data-ph-fit] .mf-ph-tool__form { margin-block-start: 12px; }

/* base.css puts a margin under every <label>, which at full size is part of
   the rows' rhythm. Here it is ten rows' worth of height the list needs. */
.mf-ph-tools[data-ph-fit] .mf-ph-field,
.mf-ph-tools[data-ph-fit] .mf-ph-step,
.mf-ph-tools[data-ph-fit] .mf-ph-check { min-block-size: 36px; margin-block-end: 0; padding-block: 2px; }
.mf-ph-tools[data-ph-fit] .mf-ph-field__box { min-block-size: 30px; }

.mf-ph-tools[data-ph-fit] .mf-ph-tools__foot { margin-block-start: 20px; padding-block-start: 18px; }
.mf-ph-tools[data-ph-fit] .mf-ph-tools__gtools { gap: 0; margin-block-start: 6px; }
.mf-ph-tools[data-ph-fit] .mf-ph-tools__name { padding-block: 2px; font-size: 14.5px; }
/* On one line: base.css caps a <p> at 65ch, which wraps this onto a second. */
.mf-ph-tools[data-ph-fit] .mf-ph-tools__note { margin-block-start: 12px; max-inline-size: none; }

.mf-ph-tools[data-ph-fit="tight"] .mf-ph-tools__head .mf-eyebrow,
.mf-ph-tools[data-ph-fit="tight"] .mf-ph-tool__desc,
.mf-ph-tools[data-ph-fit="tight"] .mf-ph-tools__lead,
.mf-ph-tools[data-ph-fit="tight"] .mf-ph-tools__note { display: none; }

.mf-ph-tools[data-ph-fit="tight"] .mf-ph-field,
.mf-ph-tools[data-ph-fit="tight"] .mf-ph-step,
.mf-ph-tools[data-ph-fit="tight"] .mf-ph-check { min-block-size: 32px; padding-block: 1px; }
.mf-ph-tools[data-ph-fit="tight"] .mf-ph-field__box { min-block-size: 28px; }

/* The ring only while it is a ring: under this the dial sits above the
   calculator and has its own, smaller shape (see the responsive rules). */
@media (min-width: 1101px) {
  .mf-ph-tools[data-ph-fit] .mf-ph-dial { gap: 16px; }
  .mf-ph-tools[data-ph-fit] .mf-ph-dial__ring { --r: 118px; }
  .mf-ph-tools[data-ph-fit] .mf-ph-dial__n span { font-size: 88px; }

  .mf-ph-tools[data-ph-fit="tight"] .mf-ph-dial__ring { --r: 92px; }
  .mf-ph-tools[data-ph-fit="tight"] .mf-ph-dial__tick { block-size: 32px; margin-block-start: -16px; }
  .mf-ph-tools[data-ph-fit="tight"] .mf-ph-dial__n span { font-size: 68px; }
}


/* ==========================================================================
   Why practices add it
   ========================================================================== */

.mf-ph-why { padding: 24px 40px 96px; }

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

.mf-ph-why__icon { display: inline-flex; flex: none; color: var(--flare-600); }

/* The reason the others follow from: a statement beside its picture. */
.mf-ph-why__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: center;
  padding-block: 44px 48px;
}

/* The rules on this section are drawn in the brand gradient: one under the
   lead, one between each row of reasons. No rule above the lead and none
   between the columns — the gutters do that. */
.mf-ph-why__lead,
.mf-ph-reason { position: relative; }

.mf-ph-why__lead::after,
.mf-ph-reason::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1.5px;
  /* Fixed to the viewport, so the three cells' rules in a row read as one
     continuous sweep rather than the gradient restarting in every column. */
  background: linear-gradient(90deg, var(--flare-400), var(--flare-warm) 55%, var(--flare-400)) fixed;
}

/* The icon sits above the statement, at its top left, rather than beside a
   two-line title where it floats in the middle of the block. */
/* The icon on a line of its own above the title — the statement gets a
   mark, the way a chapter does; the smaller reasons below keep theirs
   inline. Narrow, it goes back beside the title (see the stacked rules). */
.mf-ph-why__leadtitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  color: var(--ink);
}

.mf-ph-why__leadbody {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-muted);
  max-inline-size: 48ch;
}

/* --- Image slots --------------------------------------------------------------- */

/* A picture still to come: a warm frame with a hatch, an image mark and the
   brief for the photo. One shape for the grid so six slots line up. */
.mf-ph-slot {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  margin: 0;
  aspect-ratio: 16 / 10;
  max-inline-size: 100%;
  padding: 20px 24px;
  border-radius: var(--radius-panel);
  border: 1px dashed var(--border-light-strong);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--flare-a05) 14px 15px),
    var(--paper-300);
  text-align: center;
  color: var(--ink-soft);
}

.mf-ph-slot__icon {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  background: var(--paper-100);
  color: var(--flare-600);
  box-shadow: var(--shadow-tile);
}

.mf-ph-slot figcaption { display: grid; gap: 4px; }

.mf-ph-slot__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-body);
}

.mf-ph-slot__brief {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  max-inline-size: 34ch;
}

/* Half the width, so a little wider than the grid's slots to keep its height
   in step with the statement beside it. */
.mf-ph-slot-lead { aspect-ratio: 16 / 9; }

/* With a capture in it: the frame is the capture, cropped from its top so
   the part that says what it is (a heading, a card's title) is what shows. */
.mf-ph-slot-img {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--paper-100);
  box-shadow: var(--shadow-tile);
}

.mf-ph-slot-img img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top;
}

/* --- The six ----------------------------------------------------------------- */

/* Every cell has the same inline padding and the grid pulls out by it, so the
   three columns — and their slots — are the same width and titles line up.
   The row rule is drawn so it can stop at the content edge. */
.mf-ph-reasons {
  --gutter: 32px;
  list-style: none;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mf-ph-reason {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 44px var(--gutter);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.mf-ph-reason .mf-ph-slot { margin-block-end: 24px; }

.mf-ph-reason__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.mf-ph-reason__body {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-muted);
}

@media (min-width: 1024px) {
  .mf-ph-reason:nth-child(3n + 1)::after { inset-inline-start: var(--gutter); }
  .mf-ph-reason:nth-child(3n)::after { inset-inline-end: var(--gutter); }
  .mf-ph-reason:nth-last-child(-n + 3)::after { display: none; }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .mf-ph-reasons { --gutter: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-ph-reason:nth-child(odd)::after { inset-inline-start: var(--gutter); }
  .mf-ph-reason:nth-child(even)::after { inset-inline-end: var(--gutter); }
  .mf-ph-reason:nth-last-child(-n + 2)::after { display: none; }
  .mf-ph-reason .mf-ph-slot { order: 1; margin-block: 20px 0; }
}

@media (max-width: 760px) {
  .mf-ph-reasons { --gutter: 0px; grid-template-columns: minmax(0, 1fr); }
  .mf-ph-reason { padding-block: 32px; }
  .mf-ph-reason:last-child::after { display: none; }
  /* One column: the reason first, its picture under it. Stacked, a picture
     that leads has no heading to say what it is a picture of. */
  .mf-ph-reason .mf-ph-slot { order: 1; margin-block: 20px 0; }
}


/* ==========================================================================
   Closing CTA — a dark panel floating on the page wash
   ========================================================================== */

.mf-ph-cta { padding: 0 40px 96px; }

.mf-ph-cta__panel {
  position: relative;
  overflow: clip;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  padding: 76px 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-ph-cta__glow {
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 760px;
  block-size: 760px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(232 84 10 / 0.22), transparent 62%);
}

.mf-ph-cta__body {
  position: relative;
  z-index: 1;
  max-inline-size: 720px;
  margin-inline: auto;
}

.mf-ph-cta__body .mf-eyebrow { margin-block-end: 20px; }

.mf-ph-cta__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 20px 0 0;
}

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

.mf-ph-cta__note {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-on-dark-dim);
  margin: 26px 0 0;
}

.mf-ph-cta__note a { color: var(--flare-500); }

.mf-ph-cta__trust {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}

.mf-ph-cta__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition-delay: calc(var(--i, 0) * 80ms);
}


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

@media (max-width: 1100px) {
  /* The frame needs its full width before the copy does — under two columns
     the nav row inside it starts dropping links. */
  .mf-ph-hero__wrap {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .mf-ph-hero { padding: 104px 32px 56px; }
  .mf-ph-hero__lead { max-inline-size: 620px; }
  .mf-ph-hero__art,
  .mf-ph-browser { max-inline-size: 760px; }

  /* One column: the frame is centred in the page rather than tucked into a
     column, so a panel hanging off its edge would hang off the page. */
  .mf-ph-hero__art { max-inline-size: 760px; }
  .mf-ph-browser { max-inline-size: 660px; }

  /* The window needs the width more than the list does. The hub's own rail
     already names the six areas, so the list goes and the chosen area's
     description sits under the window. */
  .mf-ph-demo { grid-template-columns: minmax(0, 1fr); }
  .mf-ph-demo__areas { display: none; }
  .mf-ph-window__about { display: block; }

  .mf-ph-tools__stage { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mf-ph-dial { grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 24px; }
  .mf-ph-dial__ring { --r: 78px; }
  .mf-ph-dial__tick { inline-size: 18px; block-size: 26px; margin: -13px 0 0 -9px; }
  .mf-ph-dial__tick::before { inset-block: 4px; inline-size: 4px; margin-inline-start: -2px; }
  .mf-ph-dial__n span { font-size: 54px; }
  .mf-ph-dial__n small { font-size: 9px; margin-block-start: 4px; }
  .mf-ph-tools__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mf-ph-why__lead { grid-template-columns: minmax(0, 1fr); }

  .mf-ph-what,
  .mf-ph-inc,
  .mf-ph-tools,
  .mf-ph-why { padding-inline: 28px; }

  .mf-ph-cta { padding-inline: 28px; }
  .mf-ph-cta__panel { padding: 60px 32px; }
}

@media (max-width: 1023px) {
  /* Once the dial stacks above the calculator, it has to be short for the
     stage to fit under the nav and pin: the ring unrolls into a row of
     eleven ticks with the count and arrows beside it. */
  .mf-ph-tools__stage { gap: 14px; }
  .mf-ph-dial { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; inline-size: 100%; }
  .mf-ph-dial__ring {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-self: stretch;
    inline-size: auto;
    aspect-ratio: auto;
  }
  .mf-ph-dial__tick {
    position: relative;
    inset: auto;
    flex: 1 1 0;
    inline-size: auto;
    min-inline-size: 0;
    block-size: 34px;
    margin: 0;
    transform: none;
  }
  .mf-ph-dial__tick::before { inset-block: 10px; inset-inline: 1px; inline-size: auto; margin: 0; }
  .mf-ph-dial__n {
    position: static;
    order: -1;
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-inline-end: 8px;
  }
  .mf-ph-dial__n span { font-size: 30px; }
  .mf-ph-dial__n small { font-size: 10px; margin: 0; }
  .mf-ph-dial__controls { gap: 6px; }
  .mf-ph-dial__btn { inline-size: 38px; block-size: 38px; }

}

@media (max-width: 780px) {
  .mf-ph-hero { padding: 92px 22px 48px; }

  .mf-ph-what,
  .mf-ph-inc,
  .mf-ph-tools,
  .mf-ph-why { padding-inline: 22px; }

  .mf-ph-cta { padding-inline: 22px; }

  .mf-ph-not { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 26px; }
  .mf-ph-not__noun { white-space: normal; }
  .mf-ph-not__body { font-size: 16px; }
  .mf-ph-what__close { font-size: 20px; }

  .mf-ph-window__url { font-size: 10px; padding: 4px 10px; }
  .mf-ph-window__dots { display: none; }
  .mf-ph-hub__rail { padding: 8px; }
  .mf-ph-hub__tab { padding: 6px 10px; font-size: 12px; }
  .mf-ph-hub__spot:hover { box-shadow: none; }

  .mf-ph-tools__inner { padding-block-start: 56px; }

  .mf-ph-tool__name { font-size: 25px; margin-block-start: 0; }
  .mf-ph-tool__kicker,
  .mf-ph-tool__desc { display: none; }
  .mf-ph-tool__form { margin-block-start: 12px; }
  .mf-ph-field,
  .mf-ph-step,
  .mf-ph-check { min-block-size: 38px; padding-block: 2px; gap: 10px; }
  .mf-ph-field__label,
  .mf-ph-step__label { font-size: 13px; }
  .mf-ph-field__box { min-block-size: 32px; padding-inline: 10px; }
  .mf-ph-field__box select { font-size: 14px; }
  .mf-ph-step__label small { display: none; }
  .mf-ph-field__box input,
  .mf-ph-field__box select { font-size: 16px; }
  .mf-ph-check { font-size: 13px; min-block-size: 32px; }
  .mf-ph-result { margin-block-start: 14px; }
  .mf-ph-result__viz { margin-block-start: 12px; }
  .mf-ph-result__note { margin-block-start: 8px; font-size: 12.5px; }
  /* Every row counts on a phone; the guidance under a result is the part
     the pinned stage can spare. */
  .mf-ph-tools.is-pinned .mf-ph-result__note { display: none; }
  .mf-ph-step__ctl button { inline-size: 32px; block-size: 32px; }

  .mf-ph-tool__name { font-size: 30px; }
  .mf-ph-tool__desc { font-size: 15.5px; }
  .mf-ph-result__value { font-size: 34px; }
  .mf-ph-result__value { display: inline-block; margin-inline-end: 10px; }
  .mf-ph-result__band { margin: 6px 0 0; padding: 4px 10px; font-size: 12px; vertical-align: 6px; }
  .mf-ph-zones em { font-size: 11px; }
  .mf-ph-zones b { font-size: 9px; }
  .mf-ph-scale li { font-size: 9px; letter-spacing: 0.02em; }
  .mf-ph-pcts { grid-template-columns: minmax(0, 1fr); }
  /* Two columns: eleven names in one column ran to a screen and a half.
     The longest, "AUSDRISK (Type 2 diabetes risk)", wraps rather than
     widening its column. */
  .mf-ph-tools__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .mf-ph-tools__name { font-size: 14px; }
  .mf-ph-why__lead { padding-block: 36px; }
  /* Beside the title again, on its first line. */
  .mf-ph-why__leadtitle { flex-direction: row; align-items: start; }
  .mf-ph-why__leadtitle .mf-ph-why__icon { margin-block-start: 0.18em; }
}

/* Under this the frame is too narrow to carry three panels without hiding
   the practice's site under them. The calculator stays, smaller and tucked
   under the frame's corner; the tools get their own section further down. */
/* Under this the frame is the whole of the art: the three floating panels
   either covered the practice's site or hung off the page, and the frame on
   its own is the claim. The calculators and the search get their own
   sections further down. */
@media (max-width: 700px) {
  .mf-ph-hero__art { padding: 0 0 24px; }
  .mf-ph-hero__wrap { gap: 36px; }
  .mf-ph-fpanel { display: none; }
  .mf-ph-browser__url { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; }
  .mf-ph-browser__dots { display: none; }
}

@media (max-width: 560px) {
  .mf-ph-hero__title { font-size: clamp(28px, 8vw, 38px); }
  .mf-ph-hero__ctas .mf-btn { inline-size: 100%; justify-content: center; }

  .mf-ph-cta__panel { padding: 48px 22px; }
  .mf-ph-cta__actions .mf-btn { inline-size: 100%; justify-content: center; }
}


/* ==========================================================================
   Reduced motion — reveals land without a stagger
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mf-ph-fpanel { opacity: 1; transform: none; transition: none; }
  .mf-ph-fpanel .mf-bob { animation: none; }
  .mf-ph-fpanel__typed.is-typing::after { animation: none; }

  .mf-ph-not,
  .mf-ph-reason,
  .mf-ph-tools__groups li,
  .mf-ph-cta__trust li { transition-delay: 0s; }

  .mf-ph-not__noun::after { transform: scaleX(1); transition: none; }
  .mf-ph-hub__view:not([hidden]) { animation: none; }
  .mf-ph-tools.is-stacked .mf-ph-tool,
  .mf-ph-scale__marker,
  .mf-ph-range__bar i { transition: none; }
}