/**
 * for-everyone.html only — "For the Rest of Us" redesign (Figma "For-Everyone Page").
 * Load after styles.css; everything here is scoped under .fe-v2-page.
 *
 * The previous version of this page lives on at /for-everyone-og and still uses
 * the .download-page rules in styles.css — nothing here may leak into those.
 */

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

.fe-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. */
.fe-v2-page main.page-end-gray-host::after {
  content: none;
}

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

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

/* The screens row is the one section that must clip: swiper slides deliberately
   peek outside the viewport in carousel mode. */
.fe-v2-page main.page-end-gray-host .fe-anytime {
  overflow-x: hidden;
  overflow-y: visible;
}

/* ─── Type ───
   The Figma sets every headline on this page in Roboto Medium rather than the
   site's usual 900. */
.fe-v2-page .hero__headline,
.fe-v2-page .section-title,
.fe-v2-page .hiw-step__title {
  font-weight: 500;
}

/* Must hold exactly two lines at every width, so the size is banded rather than
   one clamp across the whole range. Between 901px and 1180px the copy column
   shrinks faster than a single fluid size does, and one slope steep enough to
   look big on a desktop wraps "Check Your Balance" to a third line on a tablet.
   The 2.25rem floor is what keeps it at two lines on a 390px phone — raising it
   wraps to three there. */
.fe-v2-page .hero__headline {
  font-family: var(--font-body);
  font-size: clamp(2.25rem, 5.26vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

/* At 1140px the container is capped, so the copy column stops moving and the
   and the headline can grow on its own. "Check Your Balance" measures ~600px at
   the 70px ceiling — room to spare, but nowhere near enough to pull
   "& Stay Upright" up beside it. */
@media (min-width: 1140px) {
  .fe-v2-page .hero__headline {
    font-size: clamp(3.6rem, 6.14vw, 4.375rem);
  }
}

/* Below ~380px the 2.25rem floor is wider than the column and the headline
   breaks to three lines (it did before this page was rebuilt, too). Scaling
   with the viewport here holds it at two lines down to a 320px screen. */
/* Matches the homepage section headings ("Balance is a vital sign…"), which use
   their own scale rather than the site-wide .section-title one. */
.fe-v2-page .section-title {
  font-size: clamp(2rem, 5.09vw, 3.625rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

/* The homepage hero paragraph's fluid scale, matched exactly — see
   .home-page .hero__sub in home-v2.css. */
.fe-v2-page .hero__sub {
  font-size: clamp(1.15rem, 2.98vw, 2.125rem);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

/* ─── Lead paragraphs ───
   The paragraph directly under a section headline, run out to the page margins
   and set at the homepage hero paragraph's fluid scale, the same as this page's
   own hero. The follow-on body copy in those sections stays smaller and
   narrower, so each section keeps a headline → lead → body hierarchy. */
.fe-v2-page .fe-story .section-sub,
.fe-v2-page .fe-anytime__lede,
.fe-v2-page .fe-mission .section-sub:not(.section-sub--mt) {
  font-size: clamp(1.15rem, 2.98vw, 2.125rem);
  letter-spacing: -0.01em;
  max-width: none;
}

/* Nothing in the main content is width-capped: every headline and paragraph runs
   the full container, margin to margin. The shared .section-header /
   .section-title / .section-sub rules in styles.css all carry their own caps,
   so each one is cleared explicitly in its section below. */

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

/* ─── Hero — two overlapping circle photos (same build as the homepage) ─── */
/* Bottom padding zeroed, not left at the shared .hero's 22px: that 22px sat
   between the circles and the section below and made this page's gap read 22px
   looser than /for-medical-professionals, which zeroes it. The next section
   owns the space. */
.fe-v2-page .hero {
  padding: 26px 0 0;
}

.fe-v2-page .hero-circles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

.fe-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. */
}

.fe-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) {
  .fe-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;
  }

  .fe-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. */
  .fe-v2-page .hero__visual {
    transform: none;
  }
}

/* ─── Section rhythm ─── */
/* Tighter than the other sections: this one follows the hero, whose circles
   already hang well below the copy beside them, so the full section gap read as
   a hole between the two blocks. */
.fe-v2-page .fe-story {
  padding: 24px 0 0;
}

.fe-v2-page .fe-anytime {
  padding: 64px 0 0;
}

.fe-v2-page .fe-mission {
  padding: 56px 0 0;
}

.fe-v2-page .fe-start {
  padding: 64px 0 0;
}

.fe-v2-page .fe-footnote {
  padding: 56px 0 48px;
}

/* ─── One fall can change your whole life ─── */
/* Uncapped (the shared .section-header caps at 840px) so the lead paragraph runs
   to the page margins; the headline inside keeps its own 900px measure. */
.fe-v2-page .fe-story .section-header {
  max-width: none;
  margin-bottom: 36px;
}

.fe-v2-page .fe-story .section-sub {
  text-align: center;
}

/* Both columns are sized to their content and the pair is centred on the page as
   one group, rather than the photo being pinned to the left margin. */
.fe-v2-page .fe-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 370px) minmax(0, 620px);
  gap: 56px;
  align-items: center;
  justify-content: center;
}

.fe-v2-page .fe-story__image {
  /* 370px: 5% under the 390px the previous asset was displayed at. The current
     asset is 779px wide, so this is a downscale and stays sharp on retina. */
  width: 100%;
  max-width: 370px;
  height: auto;
}

/* A headshot in this slot runs at half the width the slot was built for. Rather
   than centre the narrower pair as a group — which left it visibly indented
   under a headline that runs the full measure — the copy takes the remaining
   track, so photo and text together span the same 1096px the headline does. */
.fe-v2-page .fe-story__grid--headshot {
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 40px;
  justify-content: stretch;
}

.fe-v2-page .fe-story__image--headshot {
  max-width: 185px;
}

/* The body tier, at the homepage card copy's 1.25rem — see .balance-signs__desc
   in home-v2.css. The body copy across this page reads at one size. */
.fe-v2-page .fe-story__copy p {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.fe-v2-page .fe-story__copy p:last-child {
  margin-bottom: 0;
}

/* ─── What if there were a way … ─── */
/* Uncapped (the shared .section-header caps at 840px) so the lede runs to the
   page margins; the headline (880px) and the body paragraph (800px) keep their
   own measures. */
.fe-v2-page .fe-anytime__header {
  max-width: none;
  margin-bottom: 0;
}

/* Size comes from the shared lead-paragraph rule above. */
.fe-v2-page .fe-anytime__lede {
  text-align: center;
  margin-top: 14px;
}

.fe-v2-page .fe-anytime__lede em {
  font-style: italic;
}

/* Apple / Android links inside the lede. Brand blue, no underline at rest;
   the underline is the whole hover signal, so the colour deliberately does
   not shift with it. */
.fe-v2-page .fe-anytime__lede a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: 3px;
}

.fe-v2-page .fe-anytime__lede a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* Same metrics as .section-sub — see .fe-story__copy p.

   939px is the rendered width of the "What if there were…" headline above, so
   the two blocks line up: this paragraph runs 249-1187 against the headline's
   248-1188.

   Deliberately no text-wrap: balance. Balance pulls all four lines in to their
   ~815px average, which held the paragraph visibly narrower than the headline
   no matter what measure it was given. Letting it wrap normally puts three
   lines on the headline's edge and leaves the fourth a little over half — a
   normal rag, and nothing like the stranded "professional." this started as at
   the full container width. */
.fe-v2-page .fe-anytime__body {
  font-family: var(--font-body);
  font-size: 1.44rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-secondary);
  text-align: center;
  max-width: 939px;
  margin: 18px auto 0;
}

/* ─── App screens row ───
   These screenshots carry their own iPhone body, so a slide's whole content is
   the image — there is no .phone-frame wrapper to size, the way the archived
   page's assets still need. */
.fe-v2-page .fe-screen {
  display: block;
  width: 100%;
  height: auto;
  /* Matches the assets' 886x1780, so the row holds its height before they
     decode — see the width/height attributes in js/fe-screens.js. */
  aspect-ratio: 886 / 1780;
}

@media (min-width: 961px) {
  /* Breathing room between the copy and the screens. Only in the static state:
     the carousel already carries 36px of its own top padding. */
  .fe-v2-page .fe-anytime .carousel-swiper.is-static {
    margin-top: 30px;
  }

  /* Line the static row up with the copy above it. The swiper sits outside
     .container because carousel mode needs the full-bleed width to let slides
     peek past the viewport, so the container's measure is reapplied here — and
     only in the static state. */
  .fe-v2-page .fe-anytime .carousel-swiper.is-static .swiper-wrapper {
    /* Swiper's own CSS sets content-box on .swiper-wrapper, which would add the
       gutters on top of the 1140px measure instead of inside it. */
    box-sizing: border-box;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter) 0 20px;
  }

  /* Uncapped so the five screens divide the full measure instead of stopping at
     the shared 200px and leaving a gap at each margin. */
  .fe-v2-page .fe-anytime .carousel-swiper.is-static .swiper-slide {
    max-width: none;
  }
}

/* ─── Before the first fall ─── */
/* Uncapped (the shared .section-header caps at 840px) so the lead paragraph runs
   to the page margins; the headline and the "In short…" paragraph inside keep
   their own 900px measure. */
.fe-v2-page .fe-mission .section-header {
  max-width: none;
}

.fe-v2-page .fe-mission .section-sub {
  text-align: center;
}

/* Photo left, copy right — the same two-column construction the story section
   used before this image moved down here. */
.fe-v2-page .fe-mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 370px) minmax(0, 620px);
  gap: 56px;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
}

.fe-v2-page .fe-mission__image {
  width: 100%;
  max-width: 370px;
  height: auto;
}

/* The body tier of this section — the lead lives under the headline above. Same
   metrics as .fe-story__copy p, and ranged left against the photo rather than
   centred the way this copy read when it sat under the headline. */
.fe-v2-page .fe-mission__copy p {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  text-align: left;
  margin-bottom: 18px;
}

.fe-v2-page .fe-mission__copy p:last-child {
  margin-bottom: 0;
}

/* ─── It's easy to do — three numbered tiles ─── */
.fe-v2-page .fe-start__header {
  max-width: none;
  margin-bottom: 0;
}

.fe-v2-page .fe-start__logo {
  width: min(100%, 300px);
  height: auto;
  margin: 0 auto 8px;
}

/* Full container width, margin to margin, like the copy above. The extra top
   padding is clearance for the numbered circles, which hang 42.5px above the
   tiles and would otherwise crowd the headline. */
.fe-v2-page .fe-start__steps {
  max-width: none;
  gap: 40px;
  padding-top: 76px;
}

/* A step below the site-wide tile title, so "Check your balance" holds one line
   inside the narrower tiles this page uses. */
.fe-v2-page .fe-start .hiw-step__title {
  font-size: clamp(1.35rem, 2.7vw, 1.75rem);
  /* -1%, looser than the site-wide -3% on tile titles. */
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

/* Medium rather than the site-wide 900, matching the lighter treatment the rest
   of this page's headings use. */
.fe-v2-page .fe-start .hiw-step__number {
  font-weight: 500;
}

/* The three tiles are squares, so the row reads as one even set regardless of
   how much copy or art each one carries. Everything inside is flexible and may
   shrink (see the art rules below) so nothing spills past the square. */
.fe-v2-page .fe-start__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1 / 1;
  min-height: 0;
  /* Tighter than the site-wide 65/28/32. The square caps the height, so every
     pixel of padding comes straight out of the art. The 50px top is the floor:
     the numbered badge hangs 42.5px into the tile and the title has to clear
     it. */
  padding: 50px 20px 24px;
}

/* Where a tile carries a description, it reads as one continuation of the
   title, so the gap between them closes. Only "Register to track" has one. */
.fe-v2-page .fe-start .hiw-step__title:has(+ .hiw-step__desc) {
  margin-bottom: 0;
}

/* The chart reads as the illustration of the sentence directly above it, so it
   sits tight against the copy rather than floating at the tile's bottom. */
.fe-v2-page .fe-start .hiw-step__desc {
  margin-bottom: 0;
}

.fe-v2-page .fe-start__stores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  margin-bottom: auto;
}

.fe-v2-page .fe-start__store-img {
  width: 245px;
  height: auto;
}

/* The chart is sized off the tile as the Figma has it, about 82% of the tile's
   outer width. The pose is deliberately larger than the Figma's 48%.

   Both are flex items in a square tile, so they get min-height: 0 and
   object-fit: contain — that lets them scale down to whatever height is left
   over after the copy, without distorting or overflowing the square. */
.fe-v2-page .fe-start__pose,
.fe-v2-page .fe-start__chart {
  flex: 0 1 auto;
  min-height: 0;
  object-fit: contain;
}

/* The cap is deliberately above what the square can show: the pose is limited
   by the height left under the title, not by this width, so raising it lets the
   art take every pixel the tile frees up. */
.fe-v2-page .fe-start__pose {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: auto auto 0;
}

.fe-v2-page .fe-start__chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
}

/* ─── Wellness footnote ─── */
.fe-v2-page .fe-footnote__text {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-secondary);
  /* Across the full container width the sentence broke 1085px / 83px, leaving
     one word alone on the second line. The measure below gives the browser a
     reason to break near the middle, and text-wrap: balance evens the lines
     out where it is supported. */
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}

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

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

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

  .fe-v2-page .hero-circles {
    min-height: 320px;
    margin-bottom: 28px;
  }

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

  .fe-v2-page .hero-circles__inset {
    width: 126px;
    height: 126px;
  }

  .fe-v2-page .fe-story__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fe-v2-page .fe-story__image {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Stacked, the headshot keeps its own size rather than taking the 320px the
     full-width photo in this slot gets. */
  .fe-v2-page .fe-story__image--headshot {
    max-width: 185px;
    margin: 0 auto;
  }

  .fe-v2-page .fe-story__copy {
    text-align: center;
  }

  .fe-v2-page .fe-mission__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fe-v2-page .fe-mission__image {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Stacked, there is no photo to range against, so the copy re-centres with the
     rest of the page. */
  .fe-v2-page .fe-mission__copy p {
    text-align: center;
  }
}

@media (max-width: 700px) {
  .fe-v2-page .fe-start__steps {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 32px;
  }

  /* Stacked, the absolutely-positioned badge would bleed into the tile above,
     so it becomes a normal in-flow element. */
  /* Stacked, a square would be a full-width block of mostly empty space, so the
     tiles go back to sizing off their content. */
  .fe-v2-page .fe-start__step {
    aspect-ratio: auto;
    min-height: 0;
    padding: 24px 22px 26px;
  }

  .fe-v2-page .fe-start .hiw-step__number {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    font-size: 2.15rem;
  }

  .fe-v2-page .fe-start__pose {
    max-width: 150px;
  }

  .fe-v2-page .fe-story,
  .fe-v2-page .fe-mission {
    padding-top: 40px;
  }

  .fe-v2-page .fe-anytime,
  .fe-v2-page .fe-start {
    padding-top: 44px;
  }
}

@media (max-width: 600px) {
  /* Phones match /for-medical-professionals' hero, which in turn took the
     homepage's circle sizes: 280px circle, 130px inset, the inset hung off the
     circle's left edge, 26px above the pair and 24px below it, and the
     paragraph at 24px rather than the 18.4px floor. */
  .fe-v2-page .hero-circles__main {
    width: 280px;
    height: 280px;
  }

  .fe-v2-page .hero-circles {
    /* Sized to the circle so there is no centring slack above or below it, then
       nudged right by half the inset's overhang so the pair — not the big
       circle alone — reads as centred. `left` rather than a transform: AOS
       ("fade-left" here) writes its own inline transform. */
    width: 280px;
    min-height: 280px;
    margin: 0 auto;
    left: 15px;
  }

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

  .fe-v2-page .hero__inner {
    gap: 24px;
  }

  /* The same fluid headline as /for-medical-professionals: sized to the copy
     column, which is the viewport less 70px of container padding. */
  .fe-v2-page .hero__headline {
    font-size: min(calc((100vw - 70px) * 0.142), 3rem);
  }

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

  /* 42px between the hero paragraph and the first section headline, the gap
     /for-medical-professionals leaves above "Balance is a critical health
     biomarker." The headline carries 18px of its own top margin, so the
     section pads 24px. */
  .fe-v2-page .fe-story {
    padding-top: 24px;
  }

  /* Lead paragraphs read at 20px — /for-medical-professionals' body size —
     rather than dropping to the 18.4px floor of their fluid scale. The section
     body copy below them is already 20px. */
  .fe-v2-page .section-sub,
  .fe-v2-page .fe-story .section-sub,
  .fe-v2-page .fe-anytime__lede,
  .fe-v2-page .fe-mission .section-sub:not(.section-sub--mt) {
    font-size: 1.25rem;
  }

  /* Terry's and Janice's photos sit in the same air as Dr. Sharma's on
     /for-medical-professionals: 20px under the headline block, 16px between the
     photo and the copy that follows it. */
  .fe-v2-page .fe-story .section-header,
  .fe-v2-page .fe-mission .section-header {
    margin-bottom: 20px;
  }

  .fe-v2-page .fe-story__grid,
  .fe-v2-page .fe-mission__grid {
    gap: 16px;
  }

  /* The mission grid also carries a 36px top margin, which collapses with the
     header's margin-bottom above and would otherwise win. */
  .fe-v2-page .fe-mission__grid {
    margin-top: 20px;
  }

  /* The StayUpRight! logo is a block with auto side margins, which centred it
     in the header even after the text went flush left. */
  .fe-v2-page .fe-start__logo {
    margin-left: 0;
    margin-right: auto;
  }

  /* More air between the lede and the phone carousel. The carousel's own top
     padding is set with !important in styles.css, so the space is added as a
     margin rather than fought over. */
  .fe-v2-page .fe-anytime .carousel-swiper {
    margin-top: 32px;
  }

  /* Tile titles up from 21.6px, held to one line: the tile's inner width is the
     viewport less 70px of container padding and 44px of tile padding, and the
     longest title ("Check your balance") needs about a tenth of that per point
     of type. The cap keeps it at 26px from a 375px phone up. */
  .fe-v2-page .fe-start .hiw-step__title {
    font-size: min(calc((100vw - 114px) * 0.105), 1.625rem);
  }

  /* The wellness footnote at 12.8px/1.35 holds four lines on a phone; at its
     16.32px/1.5 it ran to five. The wording is unchanged and the size stays in
     legible range — 13px is where the fifth line comes back. */
  .fe-v2-page .fe-footnote__text {
    font-size: 14px;
    line-height: 1.35;
  }

  /* Smaller store badges — at 245px they dominated the tile. */
  .fe-v2-page .fe-start__store-img {
    width: 200px;
  }

  /* The pose illustration is the point of its tile, so it runs larger than the
     150px the stacked layout gave it. */
  .fe-v2-page .fe-start__pose {
    max-width: 210px;
  }

  /* Flush left, as on the other redesigned pages. The white "how it works"
     tiles at the foot of the page keep their centred layout — they are not
     listed here, and their own .hiw-step rule still centres them. */
  .fe-v2-page .section-header,
  .fe-v2-page .section-title,
  .fe-v2-page .section-sub,
  .fe-v2-page .fe-story .section-sub,
  .fe-v2-page .fe-mission .section-sub,
  .fe-v2-page .fe-mission__copy p,
  .fe-v2-page .fe-story__copy,
  .fe-v2-page .fe-footnote__text {
    text-align: left;
  }
}