/* About — "Faith365 In Your Pocket" + the reach stat.
   Modelled on flowty's "Flowty On Your Wrist" → "Up To 37%" pair, measured off
   the live site at 1440x900.

   The move: the headline has a HOLE punched in it — an empty inline-block that
   just reserves space in the text flow. A panel carrying the artwork sits
   exactly in that hole at rest, then grows, scrubbed to scroll, until it fills
   the viewport. The word becomes the picture.

   flowty's numbers, for reference when tuning:
     headline 187.5px / line-height 180 / centred
     hole     168 x 139  (0.90em x 0.74em against that type size)
     panel    grows to the viewport inset 50px a side, radius 45px, 3px outline
     stat     187.5px headline (flowty counts a number here; we do not — see
              CLAUDE.md §0s for why)
     lead     36px / lh 42.12 / centred / 2 lines
     note     16.5px / lh 21.78 / grey / 1 line */

.grow {
  position: relative;
  /* Scroll length for the growth. The stage inside is one viewport tall and
     sticks, so this figure minus 100vh is the actual scrub distance. */
  height: 260svh;
  background: var(--bg-2);
}

.grow__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.grow__title {
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text);
  max-width: 18ch;
}

/* The hole. Sized in `em` so it tracks the type at every breakpoint rather than
   drifting away from it — the panel is measured FROM this box, so if it stops
   matching the type, the growth starts from the wrong place. */
.grow__slot {
  display: inline-block;
  width: 0.9em;
  height: 0.74em;
  /* flowty spaces the hole off the words either side (ml-50 / mr-35 at their
     design width); without it the panel reads as a glyph jammed between two
     words rather than an object sitting in the line. */
  margin-inline: 0.2em 0.16em;
  vertical-align: -0.08em;
}

.grow__panel {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: var(--grow-r, 18px);
  background: var(--bg-3);
  will-change: top, left, width, height;
  /* Sits above the headline: at full size it covers the copy entirely, which is
     the point — the picture replaces the words. */
  z-index: 2;
}
.grow__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* No JS: show the panel at a sensible fixed size rather than 0x0. */
.no-motion .grow { height: auto; }
.no-motion .grow__stage { position: static; height: auto; }
.no-motion .grow__panel {
  position: relative;
  width: 100%;
  height: clamp(280px, 46vw, 620px);
  margin-top: var(--sp-16);
  border-radius: clamp(20px, 2.6vw, 40px);
}

/* ---- The stat ---------------------------------------------------------- */
.stat {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  padding: var(--sp-24) var(--gutter);
  background: var(--bg-2);
  text-align: center;
}

.stat__figure {
  max-width: 16ch;
  text-wrap: balance;
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--text);
}

.stat__lead {
  /* Two lines, as flowty's is — and balanced. At 56ch the break fell after
     "and", leaving "begin." alone as a widow; this splits it near the middle. */
  max-width: 46ch;
  text-wrap: balance;
  font-size: var(--fs-stat-lead);
  line-height: 1.17;
  color: var(--text);
}
/* The note and the buttons are one block, so the section's big gap separates
   the lead from the CTA rather than splitting the CTA in half. */
.stat__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.stat__note {
  max-width: 46ch;
  text-wrap: balance;
  font-size: var(--fs-lead);
  line-height: 1.32;
  color: var(--text-muted);
}

/* Portrait counts as stacked here too — see the note in css/hero.css. A 1024px
   wide iPad in portrait is past the width line but is shaped like a tall phone,
   and was taking the desktop layout. */
@media (max-width: 1023px), (orientation: portrait) {
  .grow { height: 220svh; }
  .stat { gap: var(--sp-10); padding: var(--sp-20) var(--gutter); }
}
@media (max-width: 767px) {
  .grow { height: 190svh; }
  .stat__lead { max-width: 24ch; }
}

/* ---- Store buttons ----------------------------------------------------- */
/* The hero button's exact hover, reused from the design system: the fill is a
   CHILD (`.btn__bg`) so it can grow past the button's own box, and the label
   rolls character by character. `.store` is not given the `.btn` class itself
   because the roll rebuilds an element's textContent per character, which would
   delete the icon — the roll is applied to the two label spans instead, so the
   glyph survives.
   NOTE: Apple and Google both require their OFFICIAL badge artwork for store
   links. These are stand-ins — swap in the real badges before launch
   (§13 lists them as outstanding). */
.stat__stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

.store {
  position: relative;
  isolation: isolate;          /* keeps the fill's z-index:-1 inside the button */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border-radius: 999px;
  color: var(--text);
}
/* White pill. The hairline lives on the FILL, not on `.store`, so it grows with
   the fill on hover instead of staying behind at the old size. */
/* No shadow — buttons on this site are flat; the hairline is what seats them.
   --bg-3 rather than white: the section behind them is white now. */
.store .btn__bg {
  background: var(--bg-3);
  border: 1px solid var(--hair-soft);
}
.store:hover .btn__bg { inset: -4px; }

/* Dark glyphs on a white pill — the SVGs already ship as solid black paths, so
   unlike the ink version they need no inversion. */
.store__icon {
  width: var(--sp-6);
  height: var(--sp-6);
  flex-shrink: 0;
}

.store__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
/* 1.15 matches the `.roll` wrapper the hover-roll puts inside these, so the
   line box is exactly the roll's height with no leading around it. Inheriting
   the body's 1.5 was adding ~9px of dead space to the pair. */
.store__pre {
  font-size: var(--fs-xs);
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.store__name {
  font-size: var(--fs-base);
  line-height: 1.15;
  font-weight: 500;
}

@media (max-width: 767px) {
  .stat__stores { width: 100%; flex-direction: column; align-items: stretch; }
  .store { justify-content: center; }
}