/* ==========================================================================
   for-practices.css — the practice acquisition page

   Almost nothing here, deliberately. The page is built out of .section,
   .wrap, .panel, .card--float, .steps, .chip, .btn and .disclosure, which is
   the whole point: a campaign page that invents its own components stops
   looking like the product it is advertising, and the practice manager who
   clicks through arrives somewhere that feels like a different company.

   What is left is the two layouts the landing page does not already have - a
   reasons grid and a question list - plus the hero, which needs a text-only
   variant because the shared .hero is built around artwork bleeding off the
   bottom and there is none here.
   ========================================================================== */

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

   The shared .hero does the work now - the two-column grid, the bleeding
   artwork, the approach animation, the staggered entrance. What was here
   before was a bespoke flex column that had to be removed for any of that to
   apply; a hero built on align-items: flex-start cannot be the
   baseline-aligned grid the animation was written against.

   Only two things are left, and both are because this headline is longer
   than the landing page's.
   -------------------------------------------------------------------------- */

/* Eight words rather than six, and no word as tall as "Healthcare" to spend
   the width on. At the shared 7.5rem ceiling it ran to five lines and pushed
   the artwork off the first screen entirely, which is the one thing the hero
   cannot afford. Same clamp shape, lower ceiling. */
.fp-hero .hero__display { font-size: clamp(3rem, 7vw, 5.25rem); }

/* Bigger from 960px up, and ONLY from there.

   The base clamp above is left exactly as it was so the phone is untouched:
   below 686px the 3rem floor is what applies, since 7vw has not yet reached
   48px, so nothing on a handset can be moved by a change to the ceiling.
   Stating it as its own query rather than raising the ceiling in place makes
   that guarantee visible instead of something to re-derive.

   The headline can afford it now. It was six words longer when the ceiling
   was set, and at the old size a six-word line leaves the desktop hero
   looking like a page that could not fill its own column. Still under the
   landing page's 7.5rem: that headline is the first thing anybody sees on
   the site and this one is not. */
/* "New" reads on every screen.

   It was desktop-only for a while: at the mobile size the line already
   breaks after "to", so the word costs a third line. That trade was made on
   the assumption the word was decoration, and it is not - "new patients" is
   the thing a practice manager is actually looking for, and a headline that
   says it on a laptop and not on a phone is two different promises for the
   same page.

   The span stays rather than being folded back into the h1: nothing depends
   on it now, but it costs nothing and the next person to want a
   breakpoint-specific word has the hook already. */

@media (min-width: 960px) {
  /* 5.5rem, not 6.5. At the higher ceiling the headline ran to four lines
     against a three-line lede beside it, and the two columns stopped reading
     as a pair. Three lines is the rhythm the landing page keeps too. */
  .fp-hero .hero__display { font-size: clamp(4rem, 8vw, 5.5rem); }
}

/* The lede answers a shorter headline here, so it does not need the
   landing page's enlargement to fill a bottom-aligned column. */
@media (min-width: 960px) {
  .fp-hero .hero__sub { font-size: 1.375rem; }
}

/* The pivot of the page - "it's a match!" - takes weight and the heading
   color. Not crimson: the crimson budget for a screen is one mark, and on
   this screen it is spent on the Heart e in the artwork below, which is the
   thing that actually performs the match. */
.fp-hero .hero__sub strong {
  font-weight: 700;
  color: var(--hem-text-heading);
}

/* The artwork tucks under the next section the way it does on the landing
   page. Those rules name #how, the section that follows the hero THERE;
   here it is #problem. Same numbers, because it is the same tuck - without
   them the panel starts politely below the figures and the overlap that
   makes the scene cross the seam is lost. */
@media (max-width: 640px) {
  #problem .panel { margin-top: -60px; }
}


/* --------------------------------------------------------------------------
   The reasons, in the shared carousel

   They were a two-column grid: eight cards, four rows, a wall the reader
   scrolls past rather than a set they look through. A carousel makes them a
   row you move along, which is what eight peer arguments actually are.

   The component is the dashboards' one, unchanged - arrows, beads, snap
   points, keyboard, and the safe-center rule that start-aligns a row too long
   to fit. Four overrides, and each one is because these cards hold prose
   rather than a patient.
   -------------------------------------------------------------------------- */
.fp-cards {
  margin-top: clamp(calc(var(--hem-unit) * 2), 4.8vw, calc(var(--hem-unit) * 3));
}

/* Wider than a dashboard card. The shared track is sized for a name, a line of
   specialty and a distance, at min(16rem, 76vw); a three-line argument at
   256px ran to eight lines and read as a column of text rather than a card. */
.fp-cards .carousel__track {
  /* Wide enough for a title to fit beside its disc in two lines.

     This was 18rem, chosen so the next card is clearly cut off rather than a
     sliver - a carousel whose second card is a slice reads as "there is more
     this way", which is the hint's only job. Raising the card padding to 38px
     took 28px out of the text column and pushed the longest reason title to a
     third line, which is the thing the smaller discs were for.

     20rem gives that back. The hint is narrower for it, and still a confident
     slice rather than an edge. */
  grid-auto-columns: min(20rem, 78vw);

  /* The track is a <ul> now. Without this the marker sits in the gap between
     cards, and the list padding pushes the first card off its snap point. */
  list-style: none;
  padding-left: 0;
  margin: 0;

  /* Room for the shadow. The track is an overflow container, so a card's glow
     is clipped at the top and bottom edges unless the box is taller than the
     cards - which reads as a hairline cut across every card in the row. */
  padding-block: var(--hem-space-3);
}

/* One height for the row. Eight cards of eight different heights scrolling
   past each other reads as broken rather than as varied, and the grid will
   stretch them if the card does not fix its own height. */
.fp-cards .fp-card { height: 100%; }

/* The card itself.

   Same surface as every other white plate in the system - paper, the large
   radius, the card shadow, the shared padding token - rather than a set of
   numbers invented for this page. It went missing for one deploy when the
   grid it used to live beside was replaced by the carousel above; a card
   with no ground is just text sitting on the canvas, and eight of them
   scrolling sideways with nothing to hold them read as a layout fault. */
.fp-card {
  background: var(--hem-paper);
  border-radius: var(--hem-radius-lg);
  box-shadow: var(--hem-shadow-card);

  /* --hem-card-pad is 34px, and it is the SECTION-scale plate padding - what
     .panel and the audience cards use, where the card is most of the screen.
     On a 293px carousel card it spent a quarter of the width on air and left
     225px for a three-line argument, so every card ran to 383px tall.

     .pcard is the precedent, and it pads to var(--form-gap) 14px - but that
     card holds a name and two short lines, where these hold a title and a
     paragraph. Prose needs more room off the edge than a label does, so this
     sits well above the dashboard card. It is also past the 34px section-scale
     plate padding, which is a deliberate departure rather than an oversight:
     that number is sized for a plate holding several blocks, and this card
     holds one title and one paragraph, so the air reads as room rather than
     as a wide margin around a small thing.

     38px, not a token. The scale runs 32 then 51 and neither is this; a value
     chosen by eye is honest about being chosen by eye. */
  padding: 38px;
}

/* The rhythm inside the card is margins, not padding or a grid gap: a heading
   and its paragraph are two blocks in flow, and the space between them belongs
   to the heading. One token, the same 16px step the rest of the page sets
   between a heading and the text under it. */
/* Number beside the title, not above it.

   Stacked, the disc cost a full 44px band plus its margin before the card
   said anything, and the cards ran to 423px. Beside the title it costs
   nothing vertical at all - it sits in the space the first line of the title
   already occupies.

   The card is the grid rather than a wrapper being added around the pair:
   the paragraph then spans both columns and returns to the card's full
   width, so the body copy is not indented under the title. */
.fp-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--hem-space-3);
  align-content: start;
}

/* The dark teal disc.

   Shape, fill and type were in a rule shared with the ladder's bigger disc,
   and that rule sat inside the ladder block - so when the ladder became a
   carousel and the block went, the fill went with it and the numbers showed
   for one deploy as bare gray digits. There is only one disc on the page
   now, so it is all stated here, in one place, with nothing to share it
   with. */
.fp-card__num {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--hem-radius-pill);
  background: var(--hem-teal);
  color: var(--hem-on-teal);
  font-family: var(--hem-font-display);
  font-weight: 700;
  /* A step up from caption. At 14px the numeral sat small inside a 30px disc
     with a ring of teal around it, reading as a bullet that happened to have a
     number in it rather than as a number. The disc itself is unchanged - it is
     sized to let a two-line title sit beside it. */
  font-size: var(--hem-size-body);
  /* Optically centered on the FIRST line of the title rather than on the
     whole title box - a two-line title would otherwise float the disc into
     the middle of the pair and leave it pointing at nothing. */
  align-self: start;
  margin-top: 3px;
}

/* Smaller than the shared .t-h3, and this is the change that makes two lines
   possible at all. At 28px in the ~180px left after the disc, half of these
   titles ran to three lines and one to four. */
.fp-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--hem-size-body-lg);
  line-height: var(--hem-lh-h3);
  text-wrap: balance;
}

.fp-card p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--hem-space-4);
}


/* The card sets the measure, so the paragraph must not also cap itself at
   the shared 60ch or it stops filling the card it is sitting in. */
.fp-card .t-body { max-width: none; }

/* --------------------------------------------------------------------------
   Steps

   Four rather than the landing page's three. .steps is 1fr and gets its
   columns from a breakpoint written for three, so the fourth is given a home
   here: two-by-two on a tablet, four across on a wide screen.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .fp-steps { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
  .fp-steps { grid-template-columns: repeat(4, 1fr); }
}

/* The landing page staggers three; the fourth needs its own delay or it
   arrives with the third. */
.steps.fp-steps .step.reveal.is-in:nth-child(4) { transition-delay: 270ms; }


/* --------------------------------------------------------------------------
   Early, and the close
   -------------------------------------------------------------------------- */
.fp-early .fp-prose { margin-inline: auto; }


/* The opening line is a subhead rather than the first paragraph of the prose.
   It answers the heading directly - "We’re Early" / here is what early means
   - so it takes the lede size and sits on its own, and the argument that
   follows starts clean underneath it.

   46ch is narrower than the prose below on purpose: a subhead that runs the
   full measure reads as body copy set large. --hem-lede is the same gap every
   other lede on this page takes from its heading. */
.fp-early__sub {
  /* NOT margin-inline: auto. The heading and the paragraph below both start
     at the panel’s left edge, and centering a 46ch box inside a wider panel
     pushed this line about 36px inboard of both - it read as an indented
     pull-quote rather than a subhead. */
  margin: var(--hem-lede) 0 0;
  max-width: 46ch;
  color: var(--hem-text-heading);
}


/* --------------------------------------------------------------------------
   The clinician crosses THIS card less far than it crosses index’s

   The shared .practice-scene rules give both sections the same numbers, and
   on a phone they measure identically: a -77.5px climb, 44px of overlap, 13%
   of the image. It does not READ identically. #practices opens with a "For
   Practices" eyebrow above its heading, so the 44px is spent covering a small
   label; this card starts on the heading itself, and the same overlap eats
   into "Start Matching Today".

   -50px leaves about 17px - close to the 19px the patient scene takes on the
   same page, so the two illustrations cross their cards by a similar amount
   rather than one of them reading as a collision.

   Scoped to #join, not to .practice-scene: this is a fact about what sits at
   the top of this particular card. A second section adopting the class should
   get the shared value and make its own call. Index is untouched either way. */
@media (max-width: 899px) {
  #join.practice-scene .card { margin-top: -50px; }

  /* 15px more air above the clinician. The shared rule pulls this slot up by
     60px; -45px gives back exactly that 15.

     Taken on the ART, not on the section padding: the card follows the art in
     flow, so lowering the art carries the card with it and the 16px overlap
     set above is untouched. Adding the space to the section instead would
     have moved the pair as a block and left the seam above looking wider
     without the image itself gaining anything. */
  #join.practice-scene [data-art] { margin-top: -45px; }
}

/* More air above the close, on desktop only.

   styles.css cuts #join’s top padding to 3u at 960px and up. That is a SEAM
   rule written for the landing page, where #join follows #match and the two
   sections were paying 170px between them; this page inherits it purely
   because the section shares the id, and here it lands the close hard against
   the FAQ above it.

   6u restores the separation the close needs as the last argument on the
   page. Scoped with the class so index keeps its 3u, and held to desktop
   because the phone layout already separates the two - the illustration
   leads the section there and supplies the gap itself. */
@media (min-width: 900px) {
  #join.practice-scene { padding-top: calc(var(--hem-unit) * 6); }
}


/* --------------------------------------------------------------------------
   Section headings

   .t-h1 reaches 79px on a wide screen, which is right for the landing page,
   where every h1-scale heading is two or three words - "How It Works", "It’s
   a Match!". The headings on this page are arguments rather than labels, and
   at that size an argument runs the full width of the viewport and stops
   being readable as a sentence. A measure, and balanced wrapping, so a long
   one breaks into even lines instead of leaving one orphan word.
   -------------------------------------------------------------------------- */
#problem h2,
#why h2,
#early h2,
#faq h2,
#join h2 {
  max-width: 20ch;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The nurture ladder

   The same carousel and the same card as the eight reasons - see below.
   What used to be here was its own thing: a two-column row per step, a
   wrapper div to hold the second column, a 44px disc, and a five-step
   reveal stagger. None of it survives, and none of it should - two sections
   on one page presenting the same kind of thing in two different shapes is
   exactly the drift this file keeps warning about.

   The track is an <ol> here and a <ul> there, which is the one real
   difference between them. These five are a sequence and their numbers say
   so; the eight reasons are peers that happen to be counted.
   -------------------------------------------------------------------------- */
.fp-lede { margin-top: var(--hem-lede); }

.fp-lede strong {
  font-weight: 700;
  color: var(--hem-text-heading);
}

/* --------------------------------------------------------------------------
   Buttons, full width on a phone

   styles.css already does this for every .btn-row at 560px and below, and the
   landing page goes further: .hero__lede .btn-row is a full-width grid at
   EVERY width, because the hero there is a two-column layout and the lede
   column caps it on its own.

   This page's hero is a single column across the full .wrap, so borrowing that
   unconditional rule would produce a 1100px pill on a laptop. The phone range
   is what needs to match, and it needs to reach 640px rather than 560: that is
   the breakpoint the rest of the site treats as "phone" (the masthead override
   in styles.css uses it), and between the two numbers this page was left with
   a 342px button beside a 186px one while the landing page showed two equal
   full-width pills at the same width.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  main .btn-row {
    display: grid;
    /* The hero wrap is a flex column with align-items: flex-start, which
       shrink-wraps its children - so the row came out 342px inside a 552px
       wrap and the two full-width buttons were full width of nothing much.
       Stated here rather than by loosening the hero alignment, which is what
       keeps the headline and the lede from stretching. */
    width: 100%;
    /* minmax(0, 1fr) rather than 1fr, for the reason styles.css gives: a bare
       1fr takes its minimum from the item's min-content, so a long label plus
       its padding pushes the track wider than the row it sits in. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hem-space-3);
  }

  /* .btn is inline-flex and shrink-wraps, so stretching the track is not
     enough - the width has to be set on the button itself. */
  main .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   #how is an ordinary section here

   styles.css gives #how a tighter top than every other section - 2 units of
   padding instead of --section-gap, and a negative margin on its panel - and
   it is right to. On the landing page #how is the section directly under the
   hero, and the illustration is supposed to tuck into the top of its panel.

   On this page the section under the hero is #problem, which is why that one
   carries the pull instead. #how here is "Only Minutes to Set Up", sitting
   in the middle of the page with a carousel above it and nothing overlapping
   anything - so it was 62px tighter than its neighbors for no reason a reader
   could see, which is exactly how it looked.

   An id selector matching an id selector, in a stylesheet that loads after
   styles.css: same specificity, later source, so these win. The media query on
   the second one is not needed for the cascade - a plain rule here already
   beats one inside their query - but it is written to mirror the rule it is
   answering, so the pair can be read against each other.
   -------------------------------------------------------------------------- */
#how { padding-top: var(--section-gap); }
#how .panel { margin-top: 0; }

@media (max-width: 640px) {
  #how .panel { margin-top: 0; }
}


/* --------------------------------------------------------------------------
   Tighter under a card title, on a phone

   The gap was --hem-space-4, the same 16px the 28px FAQ headings take. On a
   20px card title that is the same air under half the type, which reads as too
   much - the title stops looking like the head of its paragraph and starts
   looking like a label sitting above one.

   Phone only, as asked. A card on a wide screen sits in a row of others with
   space around it and carries the larger gap comfortably; on a phone it is
   nearly the whole width of the screen and every pixel inside it is being
   read at arm's length.

   Left alone: the FAQ headings and the section headings. Those are 28px and
   34px against 16px and 34px of space, which is the proportion the rest of the
   site keeps - the landing page's steps run 28px over 17px. It was only the
   card that was out of step.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .fp-card p { margin-top: var(--hem-space-3); }
}

/* --------------------------------------------------------------------------
   Section rhythm, 25% tighter

   Sections do not sit apart from each other - they butt together, and the
   space between any two is each one's own padding-block. So the whole rhythm
   is one number, and reducing that number is the whole change: 102px between
   sections on a phone becomes about 76px.

   Every term of the clamp is scaled, not just the ceiling, so the reduction
   holds at every width rather than only where the page happens to be widest:

       3u  ->  2.25u     the floor, on a narrow phone
       6vw ->  4.5vw     the fluid middle
       5u  ->  3.75u     the ceiling, on a wide screen

   Set on main rather than :root, so it is this page and not the site. It is
   also inherited, which is what makes it consistent: .section reads
   --section-gap, and so do #how's top padding and the hero's bottom padding
   further up this file. All three move together and none of them had to be
   found and edited.

   The footer is outside main and keeps the site's spacing, which is correct -
   it is the same footer as every other page.
   -------------------------------------------------------------------------- */
main {
  --section-gap: clamp(
    calc(var(--hem-unit) * 2.25),
    4.5vw,
    calc(var(--hem-unit) * 3.75)
  );
}

/* --------------------------------------------------------------------------
   The lede column hangs at the bottom

   styles.css bottom-aligns the two hero columns, and this page went back to
   that once the sub lost its opening clause. The lede ran seven lines when it
   was top-aligned here; it is shorter now - short enough to hang level with
   the last line of the headline rather than overhanging it at the top.

   The transform does NOT come back with the alignment. On the landing page it
   lifts the lede by 9% of the display size because "Healthcare" has no
   descenders - its ink bottom IS the baseline, so the box runs a descender's
   depth too low. "With You" ends in a y, so that depth is already spoken for
   and the same lift would raise the lede clear of the line it should sit on.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
  .fp-hero .hero__lede { transform: none; }
}

/* --------------------------------------------------------------------------
   The artwork tucks deeper on a wide screen

   styles.css pulls the hero art up into the section below it with
   margin-bottom: clamp(-300px, -20vw, -150px) - at 1280px that is -256px, and
   it lands the next panel at y=918 with 199px of artwork behind it. The landing
   page measures 914 and 222px, so the two were composed the same.

   Both put the panel a few pixels BELOW the fold on a 900px-tall window, which
   is the wrong side of it for this page: the landing page opens on a promise
   and can afford a full screen of hero, while this one is an argument and the
   reader should see it starting.

   Desktop only. The phone rules in styles.css and the -60px pull further up
   this file are untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .fp-hero .hero__art { margin-bottom: clamp(-380px, -27vw, -220px); }
}

/* --------------------------------------------------------------------------
   Everything Happens Here — copy left, the match moment right

   No white plate behind this one. Every other section on the page is a panel,
   and this section is the product rather than an argument about it, so it sits
   on the canvas the way the landing page's own artwork does.
   -------------------------------------------------------------------------- */
.fp-split__copy .t-body { margin-top: var(--hem-lede); }

/* The stage, at column width rather than page width.

   .match__stage scales its cards to --match-scale: 1.22 on the landing page,
   where it sits in a full-width panel beside an 80px heading and a card name at
   17.6px would read as fine print. Here the track is roughly half that, and two
   cards plus the heart at 1.22 do not fit it.

   Back to 1. That also zeroes the padding-block, which exists only to give back
   the space the scale takes from the grid row - a transform does not change the
   space reserved, so the two numbers have to move together. */
.fp-stage {
  --match-scale: 1;
}

.fp-stage .match__stage {
  max-width: none;
  margin-top: 0;
}

/* The section heading centers everything under .match, which is right for the
   fiction note and wrong for nothing else here - the copy lives in its own
   column and never inherits it. */
.fp-stage .fiction-note { margin-top: var(--hem-space-4); }

/* The two columns keep their ratio.

   .split is 1.05fr 0.95fr, but the tracks came out 387px and 686px: an fr
   track will not shrink below its content's min-content width, and the stage's
   min-content is two cards plus a heart. It took the space it wanted and the
   copy got what was left, which put "Everything Happens Here" on three lines
   beside artwork with room to spare.

   min-width: 0 is what lets a grid item be narrower than its contents, so the
   ratio decides the split and the cards size themselves to the track they are
   given rather than the other way round. */
@media (min-width: 900px) {
  .fp-split { grid-template-columns: 0.95fr 1.05fr; }
  .fp-split > * { min-width: 0; }
}

/* --------------------------------------------------------------------------
   The heading runs across both columns

   It is the section's title, not the left column's - confined to one track it
   read as a label on the copy rather than as the thing the artwork beside it
   is also illustrating. Spanning it also gives the copy back the width the
   heading was taking.

   align-items: start rather than .split's center: with the heading lifted out,
   the copy is much shorter than the stage, and centering floated a short
   paragraph in the middle of a tall column with air above and below it.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* Three tracks: the copy takes one, the match takes the other two.

     The stage is itself card / heart / card, so across the row the reader
     gets copy, patient, practice - three columns of content with the Heart e
     resolving between the last two. Giving the pair two thirds is what lets
     the cards stay side by side at a readable size; at half the row they had
     to shrink until the pair read as small rather than as a meeting. */
  .fp-split {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    /* Tighter than the section gap: the heading belongs to what follows it. */
    row-gap: var(--hem-lede);
  }

  /* An fr track will not shrink below its content, and the stage's
     min-content is two cards plus a heart - without this it takes what it
     wants and the copy gets the remainder. */
  .fp-split > * { min-width: 0; }

  /* Full width, centered, on one line.

     .t-h1 carries max-width: 15ch, which is right for a heading that opens a
     column and wrong for one that spans a row - at this size 15ch is 643px,
     so "Everything Happens Here" broke across two lines with 400px of empty
     track beside it. Lifting the cap lets it sit on one line; text-wrap:
     balance then has nothing to balance and leaves it alone.

     Left-aligned, like every other section heading on the page. It spans the
     row so that the artwork is under it too, not so that it becomes a
     centered banner - the page reads down a left edge and this is the one
     heading that would have stepped out of that line. */
  .fp-split__head {
    grid-column: 1 / -1;
    max-width: none;
  }
  .fp-split__copy  { grid-column: 1; }
  .fp-stage        { grid-column: 2 / -1; }
}

/* --------------------------------------------------------------------------
   No Cold Calls — heading left, standfirst right

   The paragraph answers the heading rather than introducing the cards, so on
   a wide screen it belongs beside it instead of stacked under it, where it
   pushed the carousel most of a screen further down.

   The row aligns to the bottom, so a short heading sits on the baseline of
   the row rather than floating with a gap beneath it. The paragraph opts out
   and centers itself against the heading - only that one item changes, so
   the heading keeps the baseline the bottom alignment was there to give it.

   The carousel spans, because it is the section rather than a third column.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .fp-headrow {
    display: grid;
    /* Seven to five. The heading takes the larger share because a
       display-sized heading and a 17px paragraph are not the same job: the
       heading needs width to break well at that size, and the paragraph reads
       better on a shorter measure than half a wide screen anyway.

       Written as 7fr 5fr rather than reduced - the ratio was
       chosen in columns and should still say so. */
    grid-template-columns: 7fr 5fr;
    column-gap: calc(var(--hem-unit) * 3);
    align-items: end;
  }

  .fp-headrow > * { min-width: 0; }

  .fp-headrow .fp-lede {
    /* Already spaced by the row; the stacked margin would double it. */
    margin-top: 0;
    /* Centered in the row, against the row's bottom alignment. The heading is
       the taller of the two, so this sits the paragraph against its middle
       rather than its head or its foot. */
    align-self: center;
  }

  .fp-headrow .carousel { grid-column: 1 / -1; }
}

/* Stacked, the gap under "Everything Happens Here" was being paid twice.

   .split contributes a 34px row-gap between the heading and the copy, and the
   paragraph inside the copy carries its own 34px top margin - so on a phone the
   text started 68px below the heading. On a wide screen the two never meet: the
   copy is in its own column, where that margin spaces it against the top of the
   match stage rather than against the heading, which is why desktop reads
   correctly and only the phone was wrong.

   So the margin goes below the breakpoint and stays above it. */
@media (max-width: 899px) {
  .fp-split__copy .t-body { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   One gap under a section heading, on a phone

   Measured across the page at 375px, the space after an h2 came out in two
   clusters: 34px under #problem, #warm, #early and #join, and 17-18px under
   #oneplace, #why, #how and #faq. A two-to-one difference between
   sections of the same page, and the wider one is the minority.

   The narrow value is also the one the shared components produce - .steps, the
   carousel and the card all open at roughly a unit - so matching it is matching
   the rest of the site rather than inventing a third number.

   Phone only. On a wide screen a heading has a display size and the larger gap
   is holding two big things apart; stacked on a phone it reads as a hole.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .fp-prose,
  .fp-lede,
  .fp-close__lede { margin-top: var(--hem-lede-sm); }
}