/**
 * for-medical-professionals.html only — "For Medical Professionals" redesign
 * (Figma "For-Medical-Professionals").
 * Load after styles.css; everything here is scoped under .fmp-v2-page.
 *
 * The previous version of this page lives on at /for-medical-professionals-og
 * and still uses the .technology-page / .tech-growth-page rules in styles.css —
 * nothing here may leak into those.
 */

/* ─── Page shell ───
   Same Pattern C plumbing the homepage and /for-everyone use: the fixed gray
   triangle is a top-level sibling, so <main> must stay transparent and unclipped
   or it paints over it. */
.fmp-v2-page .hero-block {
  position: relative;
  z-index: 2;
}

.fmp-v2-page main.page-end-gray-host {
  position: relative;
  z-index: 0;
  padding-bottom: 0;
  overflow: visible;
  background: transparent;
}

/* No decorative gray wedge at the foot of the page — the fixed triangle at the
   top is a separate element (.hero-block__bg) and stays. */
.fmp-v2-page main.page-end-gray-host::after {
  content: none;
}

.fmp-v2-page main.page-end-gray-host > * {
  position: relative;
  z-index: 1;
  background: transparent;
}

.fmp-v2-page main.page-end-gray-host + .site-footer {
  margin-top: 0;
}

/* ─── Type ───
   As on /for-everyone, the Figma sets every headline on this page in Roboto
   Medium rather than the site's usual 900. */
.fmp-v2-page .hero__headline,
.fmp-v2-page .section-title,
.fmp-v2-page .fmp-audience__title {
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--brand);
  letter-spacing: -0.02em;
}

/* ─── Type scale ───
   Every size on this page is the one /for-everyone uses for the same role, so
   the two redesigned pages read as one system: hero headline, section headline,
   row headline, hero paragraph, lead paragraph, body copy. The rules below are
   deliberately copies of the .fe-v2-page ones rather than a shared block — the
   two pages are scoped separately so either can move without disturbing the
   other. */

/* Hero headline — /for-everyone's banded scale. It is banded rather than one
   clamp because between 901px and 1180px the copy column shrinks faster than a
   single fluid size does. */
.fmp-v2-page .hero__headline {
  font-size: clamp(2.25rem, 5.26vw, 3.75rem);
  line-height: 1;
  margin-bottom: 24px;
}

/* At 1140px the container is capped, so the copy column stops moving and the
   headline can grow on its own. */
@media (min-width: 1140px) {
  .fmp-v2-page .hero__headline {
    font-size: clamp(3.6rem, 6.14vw, 4.375rem);
  }
}

/* Centred section heading — /for-everyone's .section-title scale. */
.fmp-v2-page .section-title {
  font-size: clamp(2rem, 5.09vw, 3.625rem);
  line-height: 1;
  text-align: center;
  margin-top: 0;
}

/* ─── Hero paragraph ───
   /for-everyone's .hero__sub: the same fluid scale, and the site-wide 1.35 line
   height rather than the looser spacing the Figma draws. Matched exactly to the
   homepage hero paragraph's scale, as .fmp-intro__body — Dr. Sharma's
   introduction in the section below — is, so the opening copy and the lead
   paragraph read at one size. */
.fmp-v2-page .hero__sub {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.98vw, 2.125rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  max-width: none;
}

/* ─── Lead paragraph ───
   Dr. Sharma's introduction, under the "You already know…" headline.
   /for-everyone sets its lead paragraphs at the homepage hero paragraph's fluid
   scale; this reads at that size, as it does in the Figma. */
.fmp-v2-page .fmp-intro__body {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.98vw, 2.125rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  max-width: none;
}

/* ─── Hero — two overlapping circle photos (same build as the homepage) ─── */
.fmp-v2-page .hero {
  padding: 26px 0 0;
}

.fmp-v2-page .hero__sub {
  margin-bottom: 0;
}

/* Circle sizes, the gap and the overhang all match /for-everyone's hero. */
.fmp-v2-page .hero-circles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

.fmp-v2-page .hero-circles__main {
  width: 380px;
  height: 380px;
  border-radius: 50%;
  object-fit: cover;
  /* No CSS ring: the orange ring is baked into the source image. */
}

.fmp-v2-page .hero-circles__inset {
  position: absolute;
  left: 6%;
  bottom: 6%;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 901px) {
  .fmp-v2-page .hero__inner {
    /* Size the circle column to the image rather than an even split, so its
       right edge lands on the container edge. */
    grid-template-columns: 1fr 380px;
    /* Wider than the default 48px: the inset circle hangs back into this gap,
       so the copy column would otherwise run underneath it. */
    gap: 80px;
    align-items: center;
  }

  /* Space above the headline, matched to /for-everyone.
     Both pages put the copy and a 420px circle column in one centred grid row, so
     the headline's start depends on how tall the copy is: /for-everyone's copy is
     342px and lands 39px below the row, this page's paragraph runs a line longer
     and centred it higher. Starting the column and setting that 39px explicitly
     reproduces /for-everyone's gap and, unlike centring, holds it whatever the
     paragraph does. The circle column is untouched — it keeps its own centring and
     does not move.

     (39px, up from 31px, because both hero paragraphs dropped 3px in size to match
     the lead paragraphs; that shortened /for-everyone's centred copy and moved its
     headline down.) */
  .fmp-v2-page .hero__copy {
    align-self: start;
    padding-top: 39px;
  }

  .fmp-v2-page .hero-circles__inset {
    /* .hero-circles is now exactly the width of the main circle, so anchor the
       overhang past its left edge explicitly. */
    left: -41px;
  }

  /* Cancel the site-wide 24px nudge — the circles are already optically centred
     against the copy here. */
  .fmp-v2-page .hero__visual {
    transform: none;
  }
}

/* ─── "A critically important…" — centred heading over Dr. Sharma's intro ─── */
/* /for-everyone's .fe-story rhythm, above and below the headline: tighter than
   the other sections because this one follows the hero, whose circles already
   hang well below the copy beside them — the full section gap read as a hole
   between the two blocks.

   42px, not the 24px .fe-story sets, because that page's headline keeps the
   shared .section-title's 18px top margin and this page zeroes it. The rendered
   gap above the headline is the same 42px on both. */
.fmp-v2-page .fmp-intro {
  padding: 42px 0 0;
}

/* Uncapped (the shared .section-header caps at 840px) so the headline runs to
   the page margins, as the Figma has it. The 36px below it is /for-everyone's
   .fe-story .section-header gap. */
.fmp-v2-page .fmp-intro .section-header {
  max-width: none;
  margin-bottom: 36px;
}

/* Headshot left, copy right — /for-everyone's .fe-story__grid--headshot: the
   same 185px photo, and the copy takes the remaining track so the pair spans the
   full measure the headline above it does rather than sitting indented. */
.fmp-v2-page .fmp-intro__grid {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.fmp-v2-page .fmp-intro__headshot {
  width: 100%;
  max-width: 185px;
  height: auto;
}

/* Ranged left against the photo, rather than the centring this paragraph read
   with when it sat on its own under the headline. */
.fmp-v2-page .fmp-intro__body {
  text-align: left;
  margin: 0;
}

/* ─── "If you're a…" — three alternating copy / image rows ─── */
.fmp-v2-page .fmp-audiences {
  padding: 76px 0 0;
}

.fmp-v2-page .fmp-audience + .fmp-audience {
  margin-top: 56px;
}

/* Row headline — the one size on this page that is deliberately not
   /for-everyone's. It keeps that page's -1% tracking and 1.1 line height, and the
   shape of its .hiw-step__title scale, but every value is 30% larger: the 2.7vw
   slope, the 1.75rem ceiling and the raised 1.6rem floor all scale together, so
   the responsive behaviour is unchanged and only the size moves. 36.4px at a
   desktop width, against the 28px /for-everyone draws.

   (The floor sits above 1.35rem × 1.3 because the body copy under these headlines
   is 1.25rem — /for-everyone's tile copy is 1.2rem — and its own floor left the
   headline smaller than its paragraph on a phone.) */
.fmp-v2-page .fmp-audience__title {
  font-size: clamp(2.08rem, 3.51vw, 2.275rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

/* Body copy — /for-everyone's 1.25rem / 1.36, the size its story and mission
   paragraphs use. */
.fmp-v2-page .fmp-audience__copy p {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.fmp-v2-page .fmp-audience__copy p:last-child {
  margin-bottom: 0;
}

.fmp-v2-page .fmp-audience__media {
  margin: 0;
}

/* Rounded corners come from CSS rather than the assets, so the same photo can be
   reused elsewhere at a different radius. */
.fmp-v2-page .fmp-audience__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (min-width: 901px) {
  .fmp-v2-page .fmp-audience {
    display: grid;
    align-items: center;
  }

  /* Copy left, image right. The image here is close to square, so its column is
     narrower than the landscape rows below. The gutter is the same 56px as those
     rows rather than absorbing the difference, so the copy runs closer to the art
     and all three rows share one gutter.

     484px is the original 440px enlarged by 10%. The photo is now the taller of
     the two items, so the row's align-items: center is what holds the copy
     vertically centred against it. */
  .fmp-v2-page .fmp-audience--physician {
    grid-template-columns: minmax(0, 1fr) 484px;
    gap: 56px;
  }

  /* Image left, copy right — the one reversed row. */
  .fmp-v2-page .fmp-audience--therapist {
    grid-template-columns: 470px minmax(0, 1fr);
    gap: 56px;
  }

  .fmp-v2-page .fmp-audience--software {
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 56px;
  }
}

/* ─── Platform screens ─── */
.fmp-v2-page .fmp-platform {
  padding: 64px 0 0;
}

.fmp-v2-page .fmp-platform__figure {
  margin: 0;
}

.fmp-v2-page .fmp-platform__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Book a demo banner ───
   The shared .cta-banner component; only the rhythm above it is set here. */
.fmp-v2-page .cta-banner {
  padding: 48px 0 64px;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .fmp-v2-page .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .fmp-v2-page .hero__copy {
    order: 2;
  }

  .fmp-v2-page .hero__visual {
    order: 1;
  }

  /* Sized to the main circle and centred as a block, so the inset's left/bottom
     offsets stay relative to the circle rather than to the full-width column —
     otherwise the headshot strands itself at the page margin. */
  .fmp-v2-page .hero-circles {
    width: 270px;
    min-height: 270px;
    margin: 0 auto 28px;
  }

  .fmp-v2-page .hero-circles__main {
    width: 270px;
    height: 270px;
  }

  .fmp-v2-page .hero-circles__inset {
    /* Same proportional overhang as the desktop -41px against a 380px circle. */
    left: -29px;
    width: 126px;
    height: 126px;
  }

  /* Stacked, the headshot keeps its 185px and centres, and the copy re-centres
     with the rest of the page — there is no photo left of it to range against. */
  .fmp-v2-page .fmp-intro__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fmp-v2-page .fmp-intro__headshot {
    margin: 0 auto;
  }

  .fmp-v2-page .fmp-intro__body {
    text-align: center;
  }

  .fmp-v2-page .fmp-audiences {
    padding-top: 48px;
  }

  /* Stacked: heading and copy first, then the art beneath it, in every row —
     including the therapist row, which runs image-first in the source so it can
     lead with the photo on desktop. Without the reorder its photo would arrive
     before the heading that explains it. */
  .fmp-v2-page .fmp-audience {
    display: flex;
    flex-direction: column;
  }

  .fmp-v2-page .fmp-audience__copy {
    order: 1;
  }

  .fmp-v2-page .fmp-audience__media {
    order: 2;
    margin-top: 24px;
  }

  .fmp-v2-page .fmp-audience + .fmp-audience {
    margin-top: 44px;
  }

  .fmp-v2-page .fmp-audience__image {
    /* The physician art is nearly square and the two landscape images are wide,
       so an unconstrained width leaves the square one towering over the copy. */
    max-width: 480px;
    margin: 0 auto;
  }

  .fmp-v2-page .fmp-platform {
    padding-top: 48px;
  }

  .fmp-v2-page .cta-banner {
    padding: 40px 0 48px;
  }
}

/* The screens row is a wide 2.5:1 composition, so at a phone's width it renders
   about 130px tall and none of the dashboard or app copy inside it is readable.
   Hidden rather than shown illegibly; the CTA banner follows the last "If you're
   a…" row directly. 600px is the width the page already treated as the boundary
   for this image. */
@media (max-width: 600px) {
  .fmp-v2-page .fmp-platform {
    display: none;
  }

  /* Phones match the homepage hero: 280px circle, 130px inset, and the
     paragraph at the homepage's 24px rather than its 18.4px floor. */
  .fmp-v2-page .hero-circles {
    width: 280px;
    min-height: 280px;
  }

  .fmp-v2-page .hero-circles__main {
    width: 280px;
    height: 280px;
  }

  .fmp-v2-page .hero-circles__inset {
    width: 130px;
    height: 130px;
    /* The desktop -41px overhang against a 380px circle, scaled to 280px. */
    left: -30px;
  }

  .fmp-v2-page .hero__sub {
    font-size: 1.5rem;
  }

  /* The inset hangs 30px past the main circle's left edge, so a block that is
     centred on the circle leaves the pair sitting left of centre. Nudge the
     whole unit right by half the overhang. Uses `left` rather than a transform
     because AOS ("fade-left" on this element) writes its own inline transform
     and would overwrite it. */
  .fmp-v2-page .hero-circles {
    left: 15px;
    /* The stack gap below owns the space under the images now. */
    margin-bottom: 0;
  }

  .fmp-v2-page .hero__inner {
    /* 24px under the circles, the same as the homepage hero. */
    gap: 24px;
  }

  /* Flush left, as on the homepage — centred type reads poorly at this measure,
     where most lines wrap. */
  .fmp-v2-page .section-header,
  .fmp-v2-page .section-title,
  .fmp-v2-page .fmp-intro__body {
    text-align: left;
  }

  /* Tighten the air around the headshot: the 36px under the headline and the
     28px stack gap below the photo both read loose at this width. */
  .fmp-v2-page .fmp-intro .section-header {
    margin-bottom: 20px;
  }

  .fmp-v2-page .fmp-intro__grid {
    gap: 16px;
  }

  /* Dr. Sharma's introduction reads at the same size as the section copy below
     it, rather than dropping to the hero paragraph's 18.4px floor. */
  .fmp-v2-page .fmp-intro__body {
    font-size: 1.25rem;
  }

  /* Hero headline, sized to the copy column (the viewport less 70px of
     container padding) so "Balance: The Sixth Vital Sign™" holds two lines at
     every phone width — 45px is the two-line ceiling at 375px, 41px at 320px.
     This supersedes the old ≤380px 8.6vw rule, which is why that block is
     gone. */
  .fmp-v2-page .hero__headline {
    font-size: min(calc((100vw - 70px) * 0.142), 3rem);
  }

  /* The audience headings read at the section headline's spec on a phone —
     .fmp-v2-page .section-title's 2rem floor, its 1.1 leading and the -0.02em
     tracking the rest of this page's headlines use — rather than the slightly
     larger, more loosely tracked row-headline scale. */
  .fmp-v2-page .fmp-audience__title {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  /* The banner's phone treatment — shortened line, centred with its button —
     now lives on the shared .cta-banner component in styles.css, so /about and
     /the-science carry it too. Only the space above it is this page's.
     The selector carries the two IDs of the shared "#hero + main #book-demo"
     rule in styles.css, which sets the 25px this replaces; a plain class
     selector loses to it. */
  .fmp-v2-page #hero + main #book-demo {
    padding-top: 48px;
  }
}