/**
 * index.html only — v2 homepage redesign (Figma "Website V2").
 * Load after styles.css; everything here is scoped under .home-page.
 */

/* --card-stroke now lives in :root in styles.css so the About team cards can
   share the same value; the .home-page definition that used to sit here is
   gone. The tiles below still reference it unchanged. */

/* ─── Type — Figma V2 swaps the site's usual 900-weight headline system
   for a lighter Roboto Medium (500) treatment on this page only ─── */
.home-page .hero__headline {
  font-weight: 500;
  font-size: clamp(2.5rem, 8.42vw, 6rem); /* up to 96px */
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.home-page .hero__sub {
  font-size: clamp(1.15rem, 2.98vw, 2.125rem); /* up to 34px */
  letter-spacing: -0.01em;
}

.home-page .section-title {
  font-weight: 500;
  font-size: clamp(2rem, 5.09vw, 3.625rem); /* up to 58px */
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

/* ─── Gray triangle ───
   The fixed, viewport-pinned triangle is now the site-wide default in
   styles.css (.hero-block__bg), so the .home-page override that used to sit
   here is gone. On this page the element is still a top-level sibling of
   .hero-block rather than a child of it, so it sits at the bottom of the
   stacking order while .hero-block keeps its z-index:2 — which the sticky nav
   inside it relies on to stay above scrolled content. ─── */

/* .hero-block is transparent site-wide in styles.css now (an opaque background
   there would paint over the fixed triangle behind it), so the .home-page
   override that used to sit here is gone. The nav keeps its own explicit white
   background, so it stays fully opaque regardless. */

/* The announcement bar and the flat full-width nav bar now live in styles.css
   as the site-wide default, so the .home-page overrides that used to sit here
   are gone. Keeping them would have re-applied the old Semibold weight. */

/* ─── Hero — two overlapping circle photos ─── */
.home-page .hero-circles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 484px;
}

.home-page .hero-circles__main {
  /* 10% up from 380px. The ≤900px block keeps the smaller stacked sizes. */
  width: 418px;
  height: 418px;
  border-radius: 50%;
  object-fit: cover;
  /* No CSS ring: the orange ring is baked into the source image. */
}

.home-page .hero-circles__inset {
  position: absolute;
  left: 6%;
  bottom: 6%;
  /* 10% up from 176px, in step with .hero-circles__main. */
  width: 193.6px;
  height: 193.6px;
  border-radius: 50%;
  object-fit: cover;
  /* No CSS ring: the blue ring is baked into the source image. */
}

/* ─── Balance is a vital sign — 7-card grid ─── */
.balance-signs {
  /* Tightened top padding to close the gap under the hero circles. */
  padding: 40px 0 24px;
}

.balance-signs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Each tile sizes to its own copy rather than stretching to match the
     tallest in its row, so short-copy tiles do not carry blank space. The
     trade-off is that tiles in a row no longer share a bottom edge. */
  align-items: start;
  gap: 24px;
  margin-top: 28px;
}

.balance-signs__card {
  background: var(--white);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}

.balance-signs__card--chart {
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  /* Overrides the grid's align-items:start for this one card, so it fills the
     three rows it spans and its bottom edge lands level with the other two
     columns. Paired with the reduced .fall-chart padding below: if this card's
     content were taller than the other columns, it would push the row tracks
     out and the columns could never match. */
  align-self: stretch;
}

.balance-signs__title {
  font-family: var(--font-body);
  font-size: 1.875rem; /* 30px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--brand);
  margin: 0 0 10px;
}

.balance-signs__desc {
  font-family: var(--font-body);
  font-size: 1.25rem; /* 20px */
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Fall Risk chart image */
.fall-chart {
  margin-top: auto;
  /* Kept small so this card's natural height stays under the combined height
     of the other two columns; see .balance-signs__card--chart above. */
  padding-top: 14px;
}

.fall-chart__img {
  display: block;
  width: 100%;
  height: auto;
}

.fall-chart__source {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-light);
  text-align: center;
  margin: 8px 0 0;
  line-height: 1.35;
  letter-spacing: 0;
}

/* ─── How big a problem — stat cards ─── */
.fall-stats {
  padding: 56px 0 24px;
}

.fall-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  /* Matches .balance-signs__grid above, so both sections sit the same
     distance below their headline. */
  margin-top: 28px;
}

.fall-stats__card {
  /* Same token as the gray triangle background, so the two stay in sync. */
  background: var(--gray-bg);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius-md);
  /* Less headroom above the number than below it. Top padding is paired
     with .fall-stats__num's line-height: tightening that pulled the number
     up, so the padding absorbs the difference and the space above the
     number stays where it was. */
  padding: 19px 18px 22px;
  /* Four across filling the container, so the row lines up with the
     .balance-signs grid above (3 gaps x 20px subtracted). min-width keeps
     the old 245px wrapping behaviour on tablet, where a quarter-width
     tile would be too cramped for the copy. */
  flex: 0 1 calc((100% - 60px) / 4);
  min-width: 245px;
}

.fall-stats__num {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 5.61vw, 4rem); /* up to 64px */
  font-weight: 500;
  color: var(--ink-light);
  /* Tight leading — the loose 1.5 was padding the gap down to the caption.
     See .fall-stats__card padding-top, which compensates above. */
  line-height: 1.15;
  margin-bottom: 8px;
}

.fall-stats__desc {
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  font-weight: 300; /* Roboto Light */
  color: var(--ink-light);
  line-height: 1.35;
  margin: 0;
}

/* Percent sign set at 75% of the number it follows (em-relative, so it
   tracks the number's responsive clamp at every breakpoint). */
.fall-stats__pct {
  font-size: 0.75em;
}

/* ─── Finally, something can be done — dual CTA ─── */
.balance-cta {
  padding: 64px 0 88px;
}

.balance-cta__lede {
  /* The .text-center class in the markup is inert here: it is defined in
     custom.css, which index.html does not load. Centre it explicitly. */
  text-align: center;
  /* Up from the flat 1.44rem .section-sub default. Clamped rather than fixed
     to match the rest of this page's type: 28px on desktop, easing to 24px on
     a phone so it stays larger than before at every width without ballooning
     the line count on small screens. */
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  /* Wide enough for the hard break after "anywhere." to be the thing that
     splits the two lines, rather than the max-width wrapping it early.
     The first sentence measures 907px at 28px, so this leaves headroom. */
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.balance-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: center;
  gap: 0;
  margin-top: 44px;
}

.balance-cta__card {
  background: var(--gradient-shared-v);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  text-align: center;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.balance-cta__label {
  /* Was align-self:flex-start, which pinned this left while the rest of the
     card was centred. Inherits the card's centring now. */
  /* Roboto Medium 20px — was Roboto Condensed 700 at 16px. */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  line-height: 1.2;
  margin: 0 0 6px;
}

.balance-cta__logo {
  height: 75px;
  width: auto;
  margin: 6px 0;
}

.balance-cta__logo--stayupright {
  /* Kept proportionally smaller than the UpRight mark, as before: both scaled
     by the same factor so their relative sizes are unchanged. */
  height: 67.5px;
}

.balance-cta__version {
  /* Roboto Medium 20px — was Roboto Light at 16px. */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  line-height: 1.2;
  margin: 6px 0 18px;
}

.balance-cta__btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 10px;
  background: var(--cta-sun);
  color: var(--white);
  /* Roboto 800, set as written ("Learn More") rather than forced to caps —
     was Big Shoulders Display, uppercased. */
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.balance-cta__btn:hover {
  background: var(--white);
  color: var(--cta-sun);
  box-shadow: none;
}

.balance-cta__phone {
  display: flex;
  justify-content: center;
}

.balance-cta__phone img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--radius-md);
}

/* Remove legacy decorative gray wedge (v1 homepage only) — v2 goes straight to footer */
.home-page main.page-end-gray-host::after {
  content: none;
}

/* ─── Responsive ─── */

/* Two-column hero only. Below 901px the hero collapses to a single centred
   column, where right-aligning the circles would be wrong — so this is scoped
   to the wide layout and the stacked layout is left untouched. */
@media (min-width: 901px) {
  .home-page .hero__inner {
    /* Size the circle column to the image instead of an even 1fr 1fr split, so
       its right edge lands on the container edge — the same line the tile
       grids below align to. The copy column absorbs the freed space. */
    grid-template-columns: 1fr 418px;
    /* Wider than the default 48px: the inset circle hangs 41px back into this
       gap, so the copy column would otherwise run underneath it. This keeps
       roughly 40px of clear space between the text and the circle. */
    gap: 80px;
  }

  .home-page .hero-circles__inset {
    /* The inset is positioned against .hero-circles, which is now exactly the
       width of the main circle. 6% of the old half-width column happened to
       put it 41px past the main circle's left edge; anchor that overhang
       explicitly so the pairing survives the column resize. Scaled with the
       circles: 41px x 1.1. */
    left: -45px;
  }

  .home-page .hero__copy {
    /* The grid already centres the copy's *box* on the circles, but the visible
       text sits ~15px high inside it: the headline's 0.93 line-height overhangs
       upward while the paragraph leaves trailing line-space below. Nudge the
       block so the text itself reads as centred on the cluster. Uses the
       existing position:relative offset rather than a transform, because AOS
       ("fade-right" on this element) writes its own inline transform and
       would overwrite it. */
    top: 15px;
  }
}

@media (max-width: 1024px) {
  .balance-signs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .balance-signs__card--chart {
    grid-row: span 1;
  }
  .balance-cta__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .balance-cta__phone {
    order: 1;
  }
}

@media (max-width: 900px) {
  .home-page .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .home-page .hero-circles {
    min-height: 340px;
    margin-top: 24px;
  }
  .home-page .hero-circles__main {
    width: 280px;
    height: 280px;
  }
  .home-page .hero-circles__inset {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 600px) {
  .balance-signs {
    padding-top: 32px;
  }

  /* One rhythm for all three section headings on a phone: ~52px of air above
     each, ~16px between the heading and the content it introduces. The three
     sections start from different padding values, so each is set to land on
     the same measured gap rather than sharing one number. */
  .fall-stats {
    padding-top: 34px;
  }

  .balance-cta {
    padding-top: 34px;
  }

  .balance-signs__grid,
  .fall-stats__grid {
    margin-top: 16px;
  }

  .balance-cta__grid {
    /* Pulls the blue tiles up under the lede. */
    margin-top: 24px;
  }

  /* Stat tiles: bigger number, and a caption sized to the tile's inner width
     (the viewport less 70px of container padding and 36px of card padding).
     The longest captions — "of seniors hospitalized for hip fractures died
     within 6 mo." and "of ED and hospital visits for hip fractures caused by
     falls" — stay on two lines at every phone width, which is what sets the
     0.077 factor and the 21px ceiling. */
  .fall-stats__num {
    font-size: 2.5rem;
  }

  .fall-stats__desc {
    /* This caption used to run at width 90 on desktop and revert to full-width
       here; as of 2026-08-21 the whole site is width 100, so the override is
       gone and only the sizing below is left. The factor and ceiling were set
       against full-width glyphs and so still hold. */
    /* Ceiling is the desktop size, so the caption can still shrink on the
       narrowest phones but never grows past 17px. */
    font-size: min(calc((100vw - 106px) * 0.073), 1.0625rem);
  }
  .balance-signs__grid {
    grid-template-columns: 1fr;
  }
  .fall-stats__card {
    flex-basis: 100%;
  }
  .section-title.text-center {
    font-size: clamp(2rem, 7vw, 2.6rem);
  }
}

/* ─── Phones only — tighten the hero and size the copy up ───
   On a phone the hero stacks (circles first, copy under), and the desktop
   metrics left a lot of dead space: .hero-circles reserved 340px of height for
   a 280px circle, which centred the image with 30px of slack above AND below,
   on top of its own 24px margin and the 40px stack gap. Drop the reserved
   height so the container is exactly the circle, and pull the surrounding
   spacing in. The headline and intro paragraph both bottom out at their clamp
   minimums at this width, so they are re-clamped larger here rather than
   changed globally. */
@media (max-width: 600px) {
  .home-page .hero {
    padding-top: 16px;
  }

  .home-page .hero__inner {
    gap: 24px;
  }

  .home-page .hero-circles {
    /* Exactly the circle — no centring slack above or below it. */
    min-height: 0;
    margin-top: 8px;
  }

  .home-page .hero-circles__inset {
    /* The inset was anchored 6% up from the container's bottom, which — with
       the old 340px reserved height — landed it ~10px BELOW the main circle,
       hanging off it the way the desktop composition does. With the container
       now the exact height of the circle, that same 6% would tuck it up inside
       the image, so the overhang is anchored in pixels instead. */
    bottom: -10px;
  }

  .home-page .hero__headline {
    font-size: clamp(2.75rem, 13.5vw, 3.5rem); /* was bottoming out at 40px */
  }

  .balance-signs__title {
    /* Sized so the longest titles — "Cardiovascular Health" and "Muscle &
       Bone Health" — clear the card's inner width on one line. That width is
       the viewport less 70px of container padding and 48px of card padding,
       and the longest title needs about a tenth of it per point of type, so
       the size tracks the viewport down to the narrowest phones. */
    font-size: min(calc((100vw - 118px) * 0.1), 1.625rem);
  }

  .home-page .hero__sub {
    /* Matches the .balance-cta__lede ("Now there are two ways to measure
       balance…"), which bottoms out at 1.5rem/24px on a phone. */
    font-size: 1.5rem;
  }

  /* Flush left on phones — centred type reads poorly at this measure, where
     most lines wrap. The two blue CTA tiles are the deliberate exception and
     keep their centred layout. */
  .home-page .section-title,
  .balance-signs__card,
  .fall-chart__source {
    text-align: left;
  }

  .balance-cta__lede {
    text-align: left;
    margin-left: 0;
  }

  .home-page .hero {
    /* Closes the gap down to the "Balance is a vital sign" title, together with
       the reduced .balance-signs padding and the zeroed title margin below. */
    padding-bottom: 20px;
  }

  .balance-signs .section-title {
    margin-top: 0;
  }
}