/* ==========================================================================
   BodyPlan landing page
   --------------------------------------------------------------------------
   Builds on the tokens in bodyplan.css. Every colour here resolves to a
   token; the page has exactly one accent (--bp-accent) and one inverse
   surface (the closing conversion band).

   Section order and layout family, so the rhythm stays legible:
     1  hero              asymmetric split
     2  proof strip       inline horizontal strip
     3  catalogue         typographic figure row
     4  plan              image and text split
     5  workouts          image and text split (mirrored, second and last)
     6  features          bento grid
     7  how it works      connected timeline
     8  coaching styles   horizontal scroll rail
     9  control           two column statement grid
    10  conversion        full bleed inverse band
    11  faq               accordion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   A photographic cover, not a device floating on a gradient. The background is
   the branded gym shot, held monochrome and tinted to the brand navy so the
   blue CTA is the only saturated thing above the fold. The device overlaps the
   band below, which is what stops the composition reading as a stacked box.
   -------------------------------------------------------------------------- */

.lp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(90vh, 860px);
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: #070d1c;
  isolation: isolate;
}

.lp-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
  filter: grayscale(1) contrast(1.18) brightness(1.02);
}

/* Scrim: heaviest bottom-left under the headline, lightest across the wall so
   the painted mark stays legible. The last layer is the brand tint. */
.lp-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6, 12, 26, 0.92) 0%, rgba(6, 12, 26, 0.72) 30%, rgba(6, 12, 26, 0.24) 58%, rgba(6, 12, 26, 0.4) 100%),
    linear-gradient(180deg, rgba(6, 12, 26, 0.34) 0%, transparent 26%, rgba(6, 12, 26, 0.72) 100%),
    radial-gradient(ellipse 80% 70% at 68% 40%, rgba(77, 140, 255, 0.26) 0%, transparent 70%);
}

.lp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 17rem);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
  width: 100%;
}

.lp-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-bottom: clamp(0.5rem, 2vw, 2rem);
}

/* Editorial scale. The previous hero topped out at 3.85rem, which is why the
   page read as a template rather than a brand. */
.lp-hero-copy .bp-display {
  font-size: clamp(2.3rem, 0.95rem + 3.8vw, 4.05rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: #ffffff;
  max-width: 28ch;
  text-shadow: 0 2px 30px rgba(6, 12, 26, 0.5);
}

.lp-hero-emphasis { color: #8fb8ff; }

.lp-hero-copy .bp-lead {
  margin-top: 1.5rem;
  max-width: 44ch;
  color: rgba(226, 235, 250, 0.86);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* --- Hero device ---------------------------------------------------------
   Hangs past the bottom of the photo into the proof strip. */

.lp-hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(-7rem, -6vw, -3.5rem);
}

.lp-hero-device {
  position: relative;
  height: min(56vh, 520px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: var(--bp-r-xl);
  padding: 0.5rem;
  background: linear-gradient(160deg, #34486f 0%, #0d1730 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 50px 90px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
}

.lp-hero-device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--bp-r-xl) - 0.45rem);
  overflow: hidden;
  background: #0a1220;
}

.lp-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s var(--bp-ease);
  pointer-events: none;
}

.lp-screen.is-active { opacity: 1; pointer-events: auto; }

.lp-screen img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

.lp-hero-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1.1rem;
}

.lp-hero-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background-color 0.2s var(--bp-ease), transform 0.2s var(--bp-ease);
}

.lp-hero-dot.is-active { background: #8fb8ff; transform: scale(1.35); }

@media (max-width: 960px) {
  .lp-hero {
    align-items: center;
    min-height: 0;
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
  }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .lp-hero-copy { padding-bottom: 0; }
  .lp-hero-copy .bp-display { max-width: 100%; }
  .lp-hero-visual { margin-bottom: 0; align-items: flex-start; }
  .lp-hero-device { height: auto; width: 100%; max-width: 240px; }
  .lp-hero-dots { align-self: flex-start; margin-left: 0; }
}

@media (max-width: 560px) {
  .lp-hero-actions { width: 100%; }
  .lp-hero-actions .bp-btn { width: 100%; }
  .lp-hero-visual { align-items: center; }
  .lp-hero-dots { align-self: center; }
}

/* --------------------------------------------------------------------------
   2. Proof strip
   Holds the social proof and platform signals that used to crowd the hero.
   -------------------------------------------------------------------------- */

.lp-proof {
  border-top: 1px solid var(--bp-line);
  border-bottom: 1px solid var(--bp-line);
  background: var(--bp-bg-sunken);
}

.lp-proof-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem clamp(1.25rem, 3vw, 2.5rem);
  /* Extra top padding clears the device hanging out of the hero above. */
  padding-top: clamp(1.15rem, 5vw, 4.5rem);
  padding-bottom: 1.15rem;
}
@media (max-width: 960px) {
  .lp-proof-inner { padding-top: 1.15rem; }
}

.lp-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--bp-fs-sm);
  font-weight: 600;
  color: var(--bp-ink-2);
}

.lp-proof-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--bp-accent);
}

.lp-proof-stars svg {
  width: 0.95rem;
  height: 0.95rem;
}

.lp-proof-item svg:not(.lp-proof-stars svg) {
  width: 1rem;
  height: 1rem;
  color: var(--bp-ink-3);
}

.lp-proof-rule {
  width: 1px;
  height: 1.1rem;
  background: var(--bp-line-strong);
}

@media (max-width: 700px) {
  .lp-proof-rule {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. Catalogue figures
   Real counts from the database, set as type rather than boxed into cards.
   -------------------------------------------------------------------------- */

.lp-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Hairline columns rather than a boxed grid: at this size the numbers are the
   structure and a card border only competes with them. */
.lp-figure {
  padding-top: 1.5rem;
  border-top: 2px solid var(--bp-ink);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lp-figure-value {
  font-family: var(--bp-font-display);
  font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bp-ink);
  font-variant-numeric: tabular-nums;
}

.lp-figure-label {
  font-size: var(--bp-fs-body);
  font-weight: 700;
  color: var(--bp-ink);
}

.lp-figure-caption {
  font-size: var(--bp-fs-sm);
  color: var(--bp-ink-3);
}

.lp-figure-skeleton {
  height: clamp(2.75rem, 1.4rem + 4.6vw, 5rem);
  width: 60%;
  border-radius: var(--bp-r-xs);
  background: linear-gradient(90deg, var(--bp-bg-sunken) 25%, var(--bp-line) 50%, var(--bp-bg-sunken) 75%);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-figure-skeleton {
    animation: lp-shimmer 1.4s ease-in-out infinite;
  }
}

@keyframes lp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 760px) {
  .lp-figures { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* --------------------------------------------------------------------------
   4 and 5. Feature splits
   Used exactly twice, mirrored. Any further feature lives in the bento below
   so the page never falls into a zigzag rhythm.
   -------------------------------------------------------------------------- */

.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.lp-split--mirrored .lp-split-copy {
  order: 2;
}

.lp-split-copy > * + * {
  margin-top: 1.1rem;
}

.lp-split-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.lp-split-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--bp-fs-body);
  line-height: 1.55;
  color: var(--bp-ink-2);
}

.lp-split-list svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--bp-accent);
}

.lp-split-media {
  position: relative;
  display: flex;
  justify-content: center;
}

.lp-device {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19.5;
  border-radius: var(--bp-r-xl);
  padding: 0.45rem;
  background: linear-gradient(160deg, #2a3c60 0%, #131f3a 100%);
  box-shadow:
    0 0 0 1px rgba(10, 23, 51, 0.12),
    0 36px 70px -32px rgba(10, 23, 51, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lp-device img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--bp-r-xl) - 0.4rem);
  background: #0a1220;
}

/* Related-page links. Real internal links, kept from the previous build. */
.lp-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.lp-related a {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--bp-line-strong);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bp-ink-2);
  text-decoration: none;
  transition: border-color 0.2s var(--bp-ease), color 0.2s var(--bp-ease), background-color 0.2s var(--bp-ease);
}

.lp-related a:hover,
.lp-related a:focus-visible {
  border-color: var(--bp-accent);
  color: var(--bp-accent-strong);
  background: var(--bp-accent-soft);
}

@media (max-width: 860px) {
  .lp-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .lp-split--mirrored .lp-split-copy {
    order: 0;
  }
  .lp-device {
    max-width: 250px;
  }
}

/* --------------------------------------------------------------------------
   6. Feature bento
   Four items, four cells, alternating 7/5 and 5/7 spans so the grid has a
   rhythm rather than a repeat. Two cells carry photography, two carry a
   product screenshot on a tinted ground.
   -------------------------------------------------------------------------- */

.lp-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.lp-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--bp-r-lg);
  border: 1px solid var(--bp-line);
  overflow: hidden;
  isolation: isolate;
  background: var(--bp-bg-raised);
  text-decoration: none;
  transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease);
}

.lp-cell:hover,
.lp-cell:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--bp-shadow-lg);
}

.lp-cell--wide { grid-column: span 7; }
.lp-cell--narrow { grid-column: span 5; }

/* Photographic cells. The scrim is what guarantees label contrast. */
.lp-cell-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-cell--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    170deg,
    rgba(10, 23, 51, 0.35) 0%,
    rgba(10, 23, 51, 0.78) 58%,
    rgba(10, 23, 51, 0.94) 100%
  );
}

.lp-cell--photo .lp-cell-title { color: #ffffff; }
.lp-cell--photo .lp-cell-body { color: #cfdcf3; }
.lp-cell--photo .lp-cell-more { color: #a8c6ff; }
.lp-cell--photo .lp-related a {
  border-color: rgba(255, 255, 255, 0.32);
  color: #dce7fa;
}
.lp-cell--photo .lp-related a:hover,
.lp-cell--photo .lp-related a:focus-visible {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

/* Screenshot cells. Tinted ground, product shot bleeding off the top edge. */
.lp-cell--shot {
  justify-content: flex-start;
  background: linear-gradient(168deg, var(--bp-accent-soft) 0%, var(--bp-bg-sunken) 100%);
  padding-bottom: 0;
}

.lp-cell-shot-frame {
  position: relative;
  width: 100%;
  max-width: 210px;
  margin: 1.5rem auto -2.5rem;
  border-radius: var(--bp-r-lg) var(--bp-r-lg) 0 0;
  padding: 0.35rem 0.35rem 0;
  background: linear-gradient(160deg, #2a3c60 0%, #131f3a 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.14) inset, 0 22px 44px -24px rgba(10, 23, 51, 0.55);
}

.lp-cell-shot-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 12;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--bp-r-lg) - 0.3rem) calc(var(--bp-r-lg) - 0.3rem) 0 0;
  background: #0a1220;
}

.lp-cell-title {
  font-family: var(--bp-font-display);
  font-size: var(--bp-fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bp-ink);
}

.lp-cell-body {
  margin-top: 0.55rem;
  font-size: var(--bp-fs-sm);
  line-height: 1.6;
  color: var(--bp-ink-2);
  max-width: 42ch;
}

.lp-cell-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bp-accent-strong);
}

.lp-cell-more svg {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform 0.2s var(--bp-ease);
}

.lp-cell:hover .lp-cell-more svg {
  transform: translateX(3px);
}

.lp-cell .lp-related {
  margin-top: 1.1rem;
}

@media (max-width: 900px) {
  .lp-cell--wide,
  .lp-cell--narrow {
    grid-column: span 12;
  }
  .lp-cell {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   7. How it works
   Connected timeline. The step titles carry the sequence, so there are no
   number chips to read past.
   -------------------------------------------------------------------------- */

.lp-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

/* The connector sits behind the markers and stops short of both ends. */
.lp-steps::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 12.5%;   /* four steps, so the first and last centres sit at 12.5% */
  right: 12.5%;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--bp-accent-line) 0%,
    var(--bp-accent-line) 100%
  );
  z-index: 0;
}

.lp-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lp-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 9999px;
  background: var(--bp-bg);
  border: 2px solid var(--bp-accent-line);
  color: var(--bp-accent-strong);
  margin-bottom: 0.4rem;
}

.lp-step-marker svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lp-step-title {
  font-family: var(--bp-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bp-ink);
}

.lp-step-body {
  font-size: var(--bp-fs-sm);
  line-height: 1.6;
  color: var(--bp-ink-2);
}

@media (max-width: 880px) {
  .lp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-steps::before {
    display: none;
  }
}

@media (max-width: 520px) {
  .lp-steps {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   8. Coaching styles rail
   -------------------------------------------------------------------------- */

.lp-rail-wrap {
  position: relative;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.lp-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.lp-rail-card {
  flex: 0 0 15rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--bp-r-lg);
  border: 1px solid var(--bp-line);
  background: var(--bp-bg-raised);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--bp-shadow-sm);
  transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease);
}

.lp-rail-card:hover,
.lp-rail-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bp-accent-line);
  box-shadow: var(--bp-shadow-md);
}

.lp-rail-media {
  position: relative;
  height: 12rem;
  background: var(--bp-bg-sunken);
  overflow: hidden;
}

.lp-rail-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.lp-rail-tag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: var(--bp-accent-strong);
  color: var(--bp-on-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lp-rail-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.lp-rail-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--bp-ink);
  letter-spacing: -0.01em;
}

.lp-rail-meta {
  font-size: 0.85rem;
  color: var(--bp-ink-3);
}

.lp-rail-intro {
  align-self: flex-start;
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem 0.2rem 0.25rem;
  border-radius: 9999px;
  border: 1px solid var(--bp-line-strong);
  background: var(--bp-bg);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bp-ink-2);
  cursor: pointer;
  transition: border-color 0.2s var(--bp-ease), color 0.2s var(--bp-ease);
}

.lp-rail-intro:hover,
.lp-rail-intro:focus-visible {
  border-color: var(--bp-accent);
  color: var(--bp-accent-strong);
}

.lp-rail-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 9999px;
  background: var(--bp-accent-soft);
  color: var(--bp-accent-strong);
}

.lp-rail-intro-icon svg {
  width: 0.5rem;
  height: 0.5rem;
}

.lp-rail-nav {
  position: absolute;
  top: 6rem;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--bp-line);
  background: var(--bp-bg-raised);
  color: var(--bp-ink);
  box-shadow: var(--bp-shadow-md);
  cursor: pointer;
  transition: border-color 0.2s var(--bp-ease), transform 0.2s var(--bp-ease);
}

.lp-rail-nav:hover,
.lp-rail-nav:focus-visible {
  border-color: var(--bp-accent);
  transform: scale(1.05);
}

.lp-rail-nav svg {
  width: 1.1rem;
  height: 1.1rem;
}

.lp-rail-nav--prev { left: -0.75rem; }
.lp-rail-nav--next { right: -0.75rem; }

.lp-rail.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* --------------------------------------------------------------------------
   9. Control statements
   -------------------------------------------------------------------------- */

.lp-control {
  background: var(--bp-bg-sunken);
  border-top: 1px solid var(--bp-line);
  border-bottom: 1px solid var(--bp-line);
}

.lp-statements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.lp-statement {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.lp-statement svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--bp-accent);
}

.lp-statement span {
  font-size: var(--bp-fs-body);
  line-height: 1.6;
  color: var(--bp-ink-2);
}

@media (max-width: 760px) {
  .lp-statements {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   10. Conversion band
   The page's single inverse surface. Every download route on the page ends
   here, so there is one store moment instead of three.
   -------------------------------------------------------------------------- */

.lp-convert {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.lp-convert-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.lp-convert-copy .bp-h2 {
  margin-top: 0.9rem;
  max-width: 18ch;
}

.lp-convert-copy .bp-lead {
  margin-top: 1rem;
  max-width: 44ch;
}

.lp-convert-points {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}

.lp-convert-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #dce7fa;
}

.lp-convert-points svg {
  width: 0.95rem;
  height: 0.95rem;
  color: #7fe3b0;
  flex-shrink: 0;
}

.lp-convert-actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
}

.lp-store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lp-store-badge {
  display: inline-flex;
  border-radius: var(--bp-r-sm);
  overflow: hidden;
  transition: transform 0.18s var(--bp-ease), opacity 0.18s var(--bp-ease);
}

.lp-store-badge:hover,
.lp-store-badge:focus-visible {
  transform: translateY(-2px);
}

.lp-store-badge img {
  display: block;
  height: 44px;
  width: auto;
}

.lp-convert-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8ba3c9;
}

.lp-convert-divider::before,
.lp-convert-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* Real release status, linked to the release notes page. */
.lp-release {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  padding: 0.4rem 0.85rem 0.4rem 0.4rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: #dce7fa;
  text-decoration: none;
  transition: border-color 0.2s var(--bp-ease), background-color 0.2s var(--bp-ease);
}

.lp-release:hover,
.lp-release:focus-visible {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
}

.lp-release-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  background: rgba(127, 227, 176, 0.18);
  color: #7fe3b0;
  font-size: 0.7rem;
  font-weight: 700;
}

.lp-release-badge--pending {
  background: rgba(255, 205, 120, 0.18);
  color: #ffcd78;
}

.lp-release-label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}

@media (max-width: 900px) {
  .lp-convert-inner {
    grid-template-columns: 1fr;
  }
  .lp-convert-copy .bp-h2 {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .lp-convert-actions .bp-btn {
    width: 100%;
  }
  .lp-store-badge img {
    height: 40px;
  }
}

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */

.lp-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.lp-faq-item {
  border-radius: var(--bp-r-md);
  border: 1px solid var(--bp-line);
  background: var(--bp-bg-raised);
  padding: 1.1rem 1.25rem;
  align-self: start;
  transition: border-color 0.2s var(--bp-ease);
}

.lp-faq-item[open] {
  border-color: var(--bp-accent-line);
}

.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--bp-ink);
}

.lp-faq-item summary::-webkit-details-marker {
  display: none;
}

.lp-faq-icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--bp-ink-3);
  transition: transform 0.25s var(--bp-ease), color 0.2s var(--bp-ease);
}

.lp-faq-item[open] .lp-faq-icon {
  transform: rotate(45deg);
  color: var(--bp-accent-strong);
}

.lp-faq-item p {
  margin-top: 0.85rem;
  font-size: var(--bp-fs-sm);
  line-height: 1.65;
  color: var(--bp-ink-2);
}

@media (max-width: 760px) {
  .lp-faq {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Mobile store banner and sticky bar
   Both are mobile-only download affordances and never appear together.
   -------------------------------------------------------------------------- */

.lp-store-banner {
  display: none;
  background: var(--bp-bg-inverse);
  color: var(--bp-ink-inverse);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-store-banner.is-visible {
  display: block;
}

.lp-store-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem var(--bp-gutter);
}

.lp-store-banner-copy {
  flex: 1;
  min-width: 0;
}

.lp-store-banner-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
}

.lp-store-banner-subtitle {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--bp-ink-inverse-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-store-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.lp-store-banner-actions .lp-store-badge img {
  height: 36px;
}

.lp-store-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
}

.lp-store-banner-close svg {
  width: 0.85rem;
  height: 0.85rem;
}

.lp-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  transform: translateY(110%);
  transition: transform 0.4s var(--bp-ease);
  background: var(--bp-bg-inverse);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.lp-sticky-bar.is-visible {
  transform: translateY(0);
}

.lp-sticky-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem var(--bp-gutter);
}

.lp-sticky-copy {
  flex: 1;
  min-width: 0;
}

.lp-sticky-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
}

.lp-sticky-sub {
  font-size: 0.72rem;
  color: var(--bp-ink-inverse-2);
}

.lp-sticky-bar .lp-store-badge img {
  height: 36px;
}

.lp-sticky-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 9999px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
}

.lp-sticky-close svg {
  width: 0.75rem;
  height: 0.75rem;
}

@media (min-width: 769px) {
  .lp-sticky-bar,
  .lp-store-banner {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Demo modal
   -------------------------------------------------------------------------- */

.lp-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lp-demo-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(6, 12, 26, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.lp-demo-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: var(--bp-r-lg);
  background: var(--bp-bg-raised);
  border: 1px solid var(--bp-line);
  box-shadow: var(--bp-shadow-lg);
  overflow: hidden;
}

.lp-demo-header {
  padding: 1.15rem 1.35rem 0.9rem;
}

.lp-demo-title {
  font-family: var(--bp-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bp-ink);
}

.lp-demo-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #0a1220;
}

.lp-demo-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid var(--bp-line);
  background: var(--bp-bg-raised);
  color: var(--bp-ink-2);
  cursor: pointer;
}

.lp-demo-close svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* --- Composed media block -------------------------------------------------
   A photograph with the device set into its lower corner. Used once, on the
   guided-workout split, so the two splits do not repeat the same shape. */

/* Overflow stays visible so the device can hang past the photograph; the
   photo carries its own rounding instead. */
.lp-split-media--composed {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.1;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.lp-media-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% center;
  border-radius: var(--bp-r-lg);
  filter: grayscale(0.25) contrast(1.06);
}

.lp-split-media--composed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--bp-r-lg);
  background: linear-gradient(215deg, transparent 42%, rgba(6, 12, 26, 0.5) 100%);
}

.lp-device--inset {
  position: absolute;
  right: -4%;
  bottom: -18%;
  z-index: 1;
  width: 37%;
  max-width: none;
  aspect-ratio: 9 / 19.5;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 40px 70px -26px rgba(0, 0, 0, 0.65);
}

@media (max-width: 860px) {
  .lp-split-media--composed { aspect-ratio: 16 / 11; margin-bottom: 3rem; }
  .lp-device--inset { width: 34%; bottom: -14%; right: 3%; }
}