/* ==========================================================================
   Lit10 — Sections Layer
   One distinct composition per content unit. No structural pattern is reused
   between sections, per the layout-redundancy prohibition in the spec.
   Light mode; all grounds are flat solid colours (no gradient backgrounds).
   ========================================================================== */

/* --------------------------------------------------------------------------
   VIDEO — "Why Isn't My Body Responding Anymore?"
   Composition: centred narrow column on the blush ground, with the player
   framed by a solid offset card. The player is a poster-framed shell wired
   to a lightbox.
   -------------------------------------------------------------------------- */
.video-section {
  text-align: center;
}

.video-section .section-title {
  margin-inline: auto;
  text-align: center;
  color: var(--text);
}

.video-section__note {
  margin-block-start: var(--space-md);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--muted);
  max-inline-size: 54ch;
  margin-inline: auto;
  /* base.css sets text-align:start on p via :where(); name it explicitly. */
  text-align: center;
}

/* Player shell ---------------------------------------------------------- */
.player {
  position: relative;
  display: block;
  margin-block-start: var(--space-xl);
  margin-inline: auto;
  inline-size: min(100%, 940px);
  padding: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Reserves space before the poster decodes — prevents layout shift. */
  aspect-ratio: 16 / 9;
  background-color: var(--mauve);
  border: 1px solid var(--line);
  cursor: pointer;
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

.player:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-brand);
}

.player__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.player:hover .player__poster {
  transform: scale(1.035);
}

/*
  Legibility scrim. A flat, uniform tint rather than a gradient — it keeps the
  caption bar and play button above 4.5:1 over any frame of the poster.
*/
.player__scrim {
  position: absolute;
  inset: 0;
  background-color: rgb(31 22 38 / 0.42);
  pointer-events: none;
}

/* Play affordance */
.player__play {
  position: absolute;
  /*
    inset:0 + margin:auto, not a logical offset plus translate: translate is
    physical (always pulls left) while inset-inline-start resolves to the
    RIGHT edge under RTL, which threw this button 104px off centre on the
    Arabic page. This form carries no direction component.
    It also leaves `transform` free for the hover scale below.
  */
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  inline-size: clamp(72px, 9vw, 104px);
  block-size: clamp(72px, 9vw, 104px);
  border-radius: 50%;
  background-color: var(--white);
  color: var(--brand);
  box-shadow: var(--shadow-lg);
  transition:
    transform var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out);
  pointer-events: none;
}

.player:hover .player__play {
  transform: scale(1.07);
  background-color: var(--brand);
  color: #fff;
}

.player__play svg {
  inline-size: 38%;
  block-size: 38%;
  /* Optical centring: a triangle reads off-centre when placed geometrically. */
  margin-inline-start: 8%;
}

/*
  The play glyph is NOT mirrored in RTL. Media transport controls (play,
  pause, fast-forward) map to the physical direction of a timeline, not to
  text flow, so they point right in every locale - the convention on
  YouTube, Netflix, Spotify and both mobile platforms in Arabic. Only
  navigational arrows (back/next, carousel) mirror.

  The optical offset must still flip, because margin-inline-start resolves
  to the right edge in RTL and would push the triangle the wrong way.
*/
[dir="rtl"] .player__play svg {
  margin-inline-start: 0;
  margin-inline-end: 8%;
}

/* Pulsing halo — a single decorative ring, paused under reduced motion. */
.player__pulse {
  position: absolute;
  /* Direction-agnostic centring; see the note on .player__play above. */
  inset: 0;
  margin: auto;
  inline-size: clamp(72px, 9vw, 104px);
  block-size: clamp(72px, 9vw, 104px);
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.85);
  animation: player-pulse 2.8s var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes player-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.65);
    opacity: 0;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player__pulse {
    animation: none;
    opacity: 0.45;
  }
}

/* Caption bar pinned to the foot of the player */
.player__bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: clamp(0.9rem, 2vw, 1.4rem) clamp(1rem, 2.4vw, 1.75rem);
  pointer-events: none;
}

.player__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: #fff;
  text-align: start;
}

.player__label svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.player__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.35rem;
  padding-inline: 0.85rem;
  border-radius: var(--radius-pill);
  background-color: var(--white);
  font-size: var(--step--1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.player__meta svg {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  color: var(--brand);
}

/* Demo ribbon — removed with the data-video-src swap when the real cut lands. */
.player__demo {
  position: absolute;
  inset-block-start: clamp(0.9rem, 2vw, 1.4rem);
  inset-inline-start: clamp(1rem, 2.4vw, 1.75rem);
  padding-block: 0.35rem;
  padding-inline: 0.8rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  pointer-events: none;
}

/*
  Closing statement under the player.
  This line is the payoff of the section, so it is lifted out of muted body
  copy: full-strength text, one step up in size, and a solid brand rule to
  mark it. Kept as an open block rather than a boxed card - the emphasis
  comes from weight and the rule, not from heavy framing.
*/
.video-statement {
  position: relative;
  margin-block-start: var(--space-xl);
  margin-inline: auto;
  /* Comfortable reading measure, matching the section lede above it. */
  max-inline-size: 60ch;
  padding-block-start: var(--space-md);
  text-align: center;
}

/* Short brand rule centred above the text. */
.video-statement::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 56px;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--brand);
}

.video-statement p {
  /* One step above body copy: reads as a statement without shouting. */
  font-size: var(--step-2);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--text);
  text-align: center;
  text-wrap: pretty;
}

@media (max-width: 47.99em) {
  .video-statement {
    margin-block-start: var(--space-lg);
  }

  .video-statement p {
    font-size: var(--step-1);
  }
}

/* --------------------------------------------------------------------------
   LIGHTBOX — shared modal for the video player
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  /* Flat scrim, strong enough to isolate the foreground (spec: 40-60%). */
  background-color: rgb(31 22 38 / 0.72);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    visibility var(--dur-slow) var(--ease-out);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__panel {
  position: relative;
  inline-size: min(100%, 1000px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #000;
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform var(--dur-slow) var(--ease-out);
}

.lightbox.is-open .lightbox__panel {
  transform: scale(1);
}

.lightbox__panel iframe,
.lightbox__panel video {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.lightbox__close {
  position: absolute;
  inset-block-start: calc(var(--gutter) * -0.2);
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--text);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out);
}

.lightbox__close:hover {
  transform: scale(1.08);
  background-color: var(--brand);
  color: #fff;
}

.lightbox__close svg {
  inline-size: 22px;
  block-size: 22px;
}

/* Give the close button breathing room above the panel on wider screens. */
@media (min-width: 48em) {
  .lightbox__close {
    inset-block-start: -60px;
  }
}

/* Mobile: the player fills more of the frame, controls stack comfortably. */
@media (max-width: 47.99em) {
  .player {
    margin-block-start: var(--space-lg);
    aspect-ratio: 4 / 3;
  }

  .player__label {
    font-size: 0.8125rem;
  }

  .player__meta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   STORY — "My Story With Lit10"
   Composition: two-column split on the cream ground. The media column stacks
   an offset image PAIR at different block offsets (per the reference craft),
   with a solid mauve block anchoring the lower photo. The copy column ends
   with a pull-quote marked by an oversized quote glyph.
   -------------------------------------------------------------------------- */
.story__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.story__title {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  color: var(--text);
  /* 20ch squeezed this 68-character title onto four lines. */
  max-inline-size: 26ch;
}

/* Opening line, set larger than body to bridge the heading and the prose. */
.story__hook {
  margin-block-start: var(--space-md);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--accent-text);
  max-inline-size: 46ch;
}

.story__body {
  margin-block-start: var(--space-md);
  color: var(--muted);
  max-inline-size: 60ch;
}

/* The single most important line of the section gets a solid marker rule. */
.story__message {
  margin-block-start: var(--space-md);
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--brand);
  color: var(--text);
  font-weight: 500;
  max-inline-size: 58ch;
}

/* Pull-quote ------------------------------------------------------------ */
.story__quote {
  position: relative;
  margin-block-start: var(--space-lg);
  padding: var(--space-lg);
  padding-inline-start: calc(var(--space-lg) + 2.25rem);
  border-radius: var(--radius-lg);
  background-color: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.story__quote-mark {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1.15rem;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--brand-200);
}

.story__quote p {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text);
  font-weight: 500;
}

/* Media column — offset pair ------------------------------------------- */
.story__media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  align-items: start;
}

.story__shot {
  position: relative;
  z-index: var(--z-raised);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin: 0;
}

.story__shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The two photos sit at different block offsets to create the asymmetry. */
/*
  Both story photographs are landscape group shots (1.webp 16:9, 2.webp 4:3).
  These slots were 3/4 portrait for the previous stock imagery, which cropped
  more than half the width away and cut people off at both ends. The ratios
  now follow the actual content; the offset between the two is what keeps the
  pair reading as a composition rather than a row.
*/
.story__shot--tall {
  aspect-ratio: 16 / 10;
}

.story__shot--wide {
  aspect-ratio: 4 / 3;
  margin-block-start: var(--space-xl);
}

/* Solid colour block anchoring the pair — flat, never a gradient. */
.story__block {
  position: absolute;
  inset-block-end: -1.5rem;
  inset-inline-start: 0;
  inline-size: 58%;
  block-size: 55%;
  border-radius: var(--radius-xl);
  background-color: var(--mauve);
  z-index: var(--z-base);
  pointer-events: none;
}

/* Floating stat card overlapping the image pair. */
.story__stat {
  position: absolute;
  z-index: var(--z-sticky);
  /*
    Anchored to the FOOT of the media column, not the top: at the top it
    landed across the subject's face in the first photo. Sitting low it reads
    as a caption for the pair and overlaps only the neutral lower edge.
  */
  inset-block-start: auto;
  inset-block-end: 6%;
  inset-inline-start: 50%;
  /*
    translate is PHYSICAL - it has no logical form and always shifts left.
    Paired with inset-inline-start (which resolves to the RIGHT edge in RTL)
    it dragged this max-content chip clear off the inline-start edge of the
    viewport, causing horizontal scroll on the Arabic build at 1024-1200px.
    The direction-correct value is +50% in RTL; see the override below.
  */
  translate: -50% 0;
  inline-size: max-content;
  max-inline-size: calc(100% - 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.7rem;
  padding-inline: 1rem;
  border-radius: var(--radius-pill);
  background-color: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text);
}
/* Mirror the physical centring shift; see the note in .story__stat above. */
[dir="rtl"] .story__stat {
  translate: 50% 0;
}


.story__stat svg {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  color: var(--brand);
}

@media (min-width: 64em) {
  .story__grid {
    grid-template-columns: 1fr 0.95fr;
    gap: clamp(3rem, 5vw, 5.5rem);
  }
}

@media (max-width: 63.99em) {
  .story__media {
    max-inline-size: 520px;
    margin-inline: auto;
    inline-size: 100%;
  }
}

@media (max-width: 47.99em) {
  .story__title,
  .story__hook {
    text-align: center;
    margin-inline: auto;
  }

  .story__message {
    padding-inline: var(--space-sm);
    border-inline-start: 0;
    border-block-start: 3px solid var(--brand);
    padding-block-start: var(--space-xs);
  }

  /*
    Single column on mobile. The two-up grid squeezed both photos into narrow
    slivers, and the offset on the second one pushed the pair out of the
    container. Stacked, each photo gets the full measure.
  */
  .story__media {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    max-inline-size: 100%;
  }

  /* Both shots share one ratio so the stack reads as a deliberate pair. */
  .story__shot--tall,
  .story__shot--wide {
    margin-block-start: 0;
  }

  /*
    Chip returns to normal flow. It was absolutely positioned with a
    translate, which hung it off the inline-start edge of the viewport.
  */
  /*
    Chip returns to normal flow here. The [dir="rtl"] centring override is
    declared later in this file and would otherwise still apply, dragging a
    static element sideways - so it is cancelled explicitly for both
    directions rather than relying on source order.
  */
  .story__stat,
  [dir="rtl"] .story__stat {
    position: static;
    translate: none;
    inline-size: fit-content;
    /* Wrap rather than overhang: the Arabic label is longer than the
       English one and pushed past the column edge at 360px. */
    max-inline-size: 100%;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: auto;
    margin-block-end: var(--space-2xs);
  }

  .story__block {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   PERSONAS — "Is This Consultation for You?"
   Composition: a horizontal rail of three tall cards on the white ground.
   Each card leads with a large outlined icon seated on a tinted rounded tile
   (the reference's icon craft) above a numbered heading. On mobile the rail
   becomes a touch-draggable, snapping carousel with pagination dots.
   -------------------------------------------------------------------------- */
.personas__head {
  max-inline-size: 44ch;
}

.personas__title {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  color: var(--text);
}

.personas__lede {
  margin-block-start: var(--space-sm);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--muted);
}

.personas__rail {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

.persona {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background-color: var(--cream);
  border: 1px solid var(--line);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out);
}

.persona:hover {
  transform: translateY(-4px);
  background-color: var(--white);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-lg);
}

/* Icon tile — large outlined glyph on its own tinted rounded square. */
.persona__tile {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: var(--radius-lg);
  background-color: var(--blush);
  color: var(--brand);
  transition:
    background-color var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out);
}

.persona:hover .persona__tile {
  background-color: var(--brand);
  color: #fff;
}

.persona__tile svg {
  inline-size: 40px;
  block-size: 40px;
}

.persona__index {
  margin-block-start: var(--space-md);
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

.persona__title {
  margin-block-start: 0.35rem;
  font-size: var(--step-2);
  color: var(--text);
}

.persona__body {
  margin-block-start: var(--space-xs);
  color: var(--muted);
}

/* Desktop: three abreast. */
@media (min-width: 64em) {
  .personas__rail {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

/* Tablet: keep a multi-column structure per spec (no premature stacking). */
@media (min-width: 48em) and (max-width: 63.99em) {
  .personas__rail {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }

  .persona {
    padding: var(--space-md);
  }

  .persona__tile {
    inline-size: 60px;
    block-size: 60px;
  }

  .persona__tile svg {
    inline-size: 32px;
    block-size: 32px;
  }
}

/*
  Mobile: a real touch carousel. Scroll-snap gives native momentum and
  drag-to-scroll without a slider library, and the dots below report position.
*/
@media (max-width: 47.99em) {
  .personas__head {
    text-align: center;
    margin-inline: auto;
  }

  .personas__rail {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Bleed to the viewport edges so cards peek in from the sides. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block-end: var(--space-xs);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .personas__rail::-webkit-scrollbar {
    display: none;
  }

  .persona {
    scroll-snap-align: center;
  }
}

/* Pagination dots — only meaningful while the rail is a carousel. */
.rail-dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: var(--space-md);
}

.rail-dots__dot {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  touch-action: manipulation;
}

/* The visible dot is smaller than its 40px tap target. */
.rail-dots__dot::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--line-strong);
  transition:
    inline-size var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out);
}

.rail-dots__dot[aria-selected="true"]::before {
  inline-size: 22px;
  background-color: var(--brand);
}

@media (max-width: 47.99em) {
  .rail-dots {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   FIT — "I Can Help You If" / "Not for You If"
   Composition: two opposed panels on the blush ground. The affirmative panel
   is a raised white card with check marks; the exclusion panel is a flat
   recessed panel with cross marks, deliberately quieter so the positive path
   dominates. Each row leads with its own outlined icon — never colour alone.
   -------------------------------------------------------------------------- */
.fit__grid {
  display: grid;
  gap: var(--space-md);
  /* stretch (not start) so both panels share the tallest one's height. */
  align-items: stretch;
}

/* Panels are flex columns so their content can distribute over equal height. */
.fit__panel {
  display: flex;
  flex-direction: column;
}

.fit__panel {
  border-radius: var(--radius-xl);
  padding: clamp(1.4rem, 3vw, 2.25rem);
}

/* Affirmative — raised, white, brand-edged. */
.fit__panel--yes {
  background-color: var(--white);
  border: 1px solid var(--brand-200);
  box-shadow: var(--shadow-lg);
}

/* Exclusion — recessed, flat mauve, no elevation. */
.fit__panel--no {
  background-color: var(--mauve);
  border: 1px solid var(--line-strong);
}

.fit__heading {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--step-2);
  color: var(--text);
}

.fit__badge {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  margin-block-start: 0.1rem;
}

.fit__panel--yes .fit__badge {
  background-color: var(--success);
  color: #fff;
}

.fit__panel--no .fit__badge {
  background-color: var(--danger);
  color: #fff;
}

.fit__badge svg {
  inline-size: 20px;
  block-size: 20px;
}

.fit__list {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  /* Distributes the shorter list over the shared height instead of leaving
     a dead gap under the last row. */
  align-content: space-evenly;
  flex: 1;
}

.fit__item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--muted);
}

/* Row marker: an icon, so meaning never rests on colour alone. */
.fit__mark {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 0.2rem;
}

.fit__panel--yes .fit__mark {
  color: var(--success);
}

.fit__panel--no .fit__mark {
  color: var(--danger);
}

.fit__panel--yes .fit__item {
  color: var(--text);
}

@media (min-width: 64em) {
  .fit__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 47.99em) {
  .fit__heading {
    font-size: var(--step-1);
  }
}

/* --------------------------------------------------------------------------
   VALUE — "Why Could These 45 Minutes Be One of the Best Investments"
   Composition: a sticky media stage on the inline-start paired with a stepped
   list on the inline-end. The stage pins with native CSS position: sticky, so
   it self-corrects against any reflow in the content above it (the FAQ and
   accordion content later on the page) with zero cached scroll positions.
   -------------------------------------------------------------------------- */
.value {
  /* Must stay visible: any other overflow silently disables the sticky stage. */
  overflow: visible;
}

.value__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.value__title {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  color: var(--text);
  max-inline-size: 28ch;
}

.value__lede {
  margin-block-start: var(--space-md);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--accent-text);
  max-inline-size: 54ch;
}

/* Sticky media stage --------------------------------------------------- */
.value__stage {
  position: relative;
}

.value__sticky {
  position: sticky;
  /* Clears the fixed header. */
  inset-block-start: clamp(5.5rem, 4rem + 5vw, 7.5rem);
}

.value__figure {
  position: relative;
  z-index: var(--z-raised);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin: 0;
}

.value__figure img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Flat colour block offset behind the stage figure. */
.value__block {
  position: absolute;
  inset-block: 6% -5%;
  /* Kept inside the column bounds; a negative inline offset here would widen
     the page on narrow viewports. */
  inset-inline-end: 0;
  inline-size: 60%;
  border-radius: var(--radius-xl);
  background-color: var(--blush);
  z-index: var(--z-base);
  pointer-events: none;
}

/* Gift callout pinned under the sticky figure. */
.value__gift {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.value__gift-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-md);
  background-color: var(--blush);
  color: var(--brand);
}

.value__gift-icon svg {
  inline-size: 26px;
  block-size: 26px;
}

.value__gift p {
  font-size: var(--step--1);
  color: var(--muted);
}

.value__gift strong {
  display: block;
  margin-block-end: 0.2rem;
  color: var(--text);
  font-size: var(--step-0);
}

/* Stepped list --------------------------------------------------------- */
.value__steps {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.value__step {
  position: relative;
  display: flex;
  gap: var(--space-sm);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--line);
}

.value__step:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.value__step-num {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-200);
  background-color: var(--white);
  color: var(--accent-text);
  font-weight: 700;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out);
}

/* Highlighted as the reader scrolls each step into view. */
.value__step.is-active .value__step-num {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.value__step p {
  color: var(--muted);
}

.value__cta {
  margin-block-start: var(--space-lg);
}

@media (min-width: 64em) {
  .value__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

@media (max-width: 63.99em) {
  /* Sticky pinning is disabled below the two-column breakpoint. */
  .value__sticky {
    position: static;
  }

  .value__stage {
    max-inline-size: 520px;
    margin-inline: auto;
    inline-size: 100%;
  }

  .value__block {
    display: none;
  }
}

@media (max-width: 47.99em) {
  .value__title,
  .value__lede {
    text-align: center;
    margin-inline: auto;
  }

  .value__cta {
    display: flex;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   TESTIMONIALS — "Real Words.. From Women Just Like You"
   Composition: an offset stagger on the cream ground. The three cards sit at
   different block offsets so the group reads as a composition rather than a
   row of equals. Each card carries a monogram avatar.
   -------------------------------------------------------------------------- */
.words__head {
  text-align: center;
  /*
    Was 40ch, which squeezed the heading into a narrow column and broke it
    over three lines. The title is ~34 characters, so allowing the full
    measure lets it settle on two lines at desktop width.
  */
  max-inline-size: 52ch;
  margin-inline: auto;
}

.words__title {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  color: var(--text);
  text-align: center;
  /*
    balance distributes words evenly across lines; combined with the wider
    measure above this yields "Real Words.. From Women" / "Just Like You".
  */
  text-wrap: balance;
  max-inline-size: 22ch;
  margin-inline: auto;
}

.words__grid {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

.word-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background-color: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out);
}

.word-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-lg);
}

.word-card__quote {
  color: var(--text);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

.word-card__stars {
  display: flex;
  gap: 0.2rem;
  color: var(--brand);
}

.word-card__stars svg {
  inline-size: 18px;
  block-size: 18px;
}

.word-card__by {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--line);
}

/* Monogram avatar — no stock headshots, so initials carry the identity. */
.word-card__avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background-color: var(--blush);
  color: var(--accent-text);
  font-weight: 700;
  font-size: var(--step--1);
}

.word-card__name {
  font-weight: 700;
  color: var(--text);
  font-size: var(--step--1);
}

@media (min-width: 64em) {
  .words__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  /* Staggered block offsets create the composition. */
  .words__grid > :nth-child(2) {
    margin-block-start: var(--space-xl);
  }

  .words__grid > :nth-child(3) {
    margin-block-start: calc(var(--space-xl) * 2);
  }
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .words__grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  .words__grid > :nth-child(2) {
    margin-block-start: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   FAQ — "You May Be Asking"
   Composition: an accordion paired with a supporting figure on the mauve
   ground. Native <details> elements, so it works with zero JavaScript.
   -------------------------------------------------------------------------- */
.faq__grid {
  display: grid;
  gap: var(--space-xl);
  /* The answer column is much shorter than the media column; centre it so it
     sits opposite the middle of the figure instead of hanging off the top. */
  align-items: center;
}

.faq__title {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  color: var(--text);
}

.faq__lede {
  margin-block-start: var(--space-sm);
  color: var(--muted);
  max-inline-size: 44ch;
}

.faq__figure {
  position: relative;
  margin: var(--space-lg) 0 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.faq__figure img {
  inline-size: 100%;
  /* 3.webp is portrait (3:4); a landscape slot cropped the class in half. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center center;
}

.faq__list {
  display: grid;
  gap: var(--space-xs);
}

.faq__item {
  border-radius: var(--radius-lg);
  background-color: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}

.faq__item[open] {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  /* Comfortably above the 44px touch-target minimum. */
  min-block-size: 60px;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--text);
  list-style: none;
  transition: color var(--dur-mid) var(--ease-out);
}

/* Suppress the native disclosure triangle in every engine. */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::marker {
  content: "";
}

.faq__q:hover {
  color: var(--accent-text);
}

/* Toggle sign built from two rules so it animates plus to minus cleanly. */
.faq__sign {
  position: relative;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background-color: var(--blush);
  transition: background-color var(--dur-mid) var(--ease-out);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  /*
    Centred with inset:0 + margin:auto rather than inset-inline-start:50%
    plus a translate. translate is PHYSICAL - it has no logical form and
    always pulls left - so paired with a logical offset that resolves to the
    RIGHT edge under RTL it pushed these bars off the chip entirely. This
    form has no direction component at all, so it centres in both.
  */
  inset: 0;
  margin: auto;
  inline-size: 13px;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--brand);
  transition:
    transform var(--dur-mid) var(--ease-out),
    opacity var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out);
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__sign {
  background-color: var(--brand);
}

.faq__item[open] .faq__sign::before,
.faq__item[open] .faq__sign::after {
  background-color: #fff;
}

.faq__item[open] .faq__sign::after {
  transform: rotate(0deg);
  opacity: 0;
}

.faq__a {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--muted);
}

@media (min-width: 64em) {
  .faq__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(3rem, 5vw, 4.5rem);
  }
}

@media (max-width: 63.99em) {
  .faq__head {
    text-align: center;
  }

  .faq__lede {
    margin-inline: auto;
  }

  .faq__figure {
    max-inline-size: 520px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   BOOK — closing CTA, "Where do we start? With you."
   Composition: a single full-width brand-filled panel on the white ground.
   The only solid-purple block on the page, so it terminates the scroll with
   maximum emphasis. Flat colour, no gradient.
   -------------------------------------------------------------------------- */
/*
  The emblem deliberately breaks outside the panel's rounded corner, so the
  panel itself must NOT clip. A dedicated inner layer clips the dashed rings
  instead, keeping them inside the purple field.
*/
.book__panel {
  position: relative;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.4rem, 4vw, 4rem);
  border-radius: var(--radius-xl);
  background-color: var(--brand);
  color: #fff;
  text-align: center;
}

/* Clip layer for the decorative rings only. */
.book__clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-base);
}

/*
  Dashed outlined rings echoing the circular logo mark. Dashed rather than
  solid so they read as a light decorative trace, not a hard border.
*/
.book__ring {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -8%;
  inline-size: min(46%, 320px);
  aspect-ratio: 1;
  border: 1.5px dashed rgb(255 255 255 / 0.38);
  border-radius: 50%;
  pointer-events: none;
}

.book__ring--alt {
  inset-block-start: auto;
  inset-block-end: -34%;
  inset-inline-end: auto;
  inset-inline-start: -6%;
  inline-size: min(38%, 260px);
  border-style: dashed;
  border-color: rgb(255 255 255 / 0.26);
}

.book__inner {
  position: relative;
  z-index: var(--z-raised);
}

.book__title {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  color: #fff;
  max-inline-size: 20ch;
  margin-inline: auto;
  text-align: center;
}

.book__body {
  margin-block-start: var(--space-md);
  margin-inline: auto;
  max-inline-size: 60ch;
  color: rgb(255 255 255 / 0.92);
  text-align: center;
}

.book__body + .book__body {
  margin-block-start: var(--space-sm);
}

/* On the purple panel the CTA inverts to a white fill. */
.book__cta {
  margin-block-start: var(--space-lg);
  background-color: #fff;
  color: var(--brand-deep);
  box-shadow: var(--shadow-lg);
}

.book__cta:hover {
  background-color: var(--brand-050);
  color: var(--brand-deep);
  transform: translateY(-2px);
}

.book__cta .btn__price {
  background-color: rgb(139 77 145 / 0.14);
}

/* Reassurance row under the CTA */
.book__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid rgb(255 255 255 / 0.24);
}

.book__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.92);
}

.book__meta-item svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.book__sign {
  margin-block-start: var(--space-lg);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  text-align: center;
}

/* --------------------------------------------------------------------------
   TESTIMONIALS SLIDER (Slick, mobile only)
   Restyles Slick's defaults to match the design system: brand dots, no arrows,
   and equal-height cards. Above 48em Slick is torn down by JS and the static
   staggered grid returns, so these rules are scoped to the mobile range.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /*
    Slick wraps each child in its own div. Cards stretch to the tallest slide,
    which combined with the card's `margin-block-start: auto` footer pushed
    the quote to the bottom and left a large empty band under the stars.
    Aligning the track to flex-start lets each card size to its own content.
  */
  .words__grid .slick-track {
    display: flex;
    /* Fixed-height track (adaptiveHeight:false), so cards stretch to match. */
    align-items: stretch;
  }

  /* Content flows top-down; the footer no longer gets pushed to the bottom. */
  .words__grid .word-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    block-size: 100%;
  }

  /*
    The quote takes the slack instead of the footer being pushed down by
    `margin-block-start: auto`, which is what left the large empty band
    between the stars and the text.
  */
  .words__grid .word-card__quote {
    flex: 1;
    overflow: visible;
    white-space: normal;
  }

  .words__grid .word-card__by {
    margin-block-start: 0;
  }

  .words__grid .slick-slide {
    block-size: auto;
    /* Breathing room between adjacent slides. */
    padding-inline: 0.4rem;
  }

  .words__grid .slick-slide > div {
    block-size: 100%;
  }

  /* The track must not clip the card shadow. */
  .words__grid .slick-list {
    padding-block: 0.5rem;
    margin-inline: -0.4rem;
  }

  /* Pagination dots ---------------------------------------------------- */
  .words__grid .slick-dots {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-block-start: var(--space-md);
    padding: 0;
    list-style: none;
  }

  .words__grid .slick-dots li {
    margin: 0;
  }

  /* 40px tap target around an 8px visual dot. */
  .words__grid .slick-dots button {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: none;
    touch-action: manipulation;
  }

  .words__grid .slick-dots button::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--line-strong);
    opacity: 1;
    transition:
      inline-size var(--dur-mid) var(--ease-out),
      background-color var(--dur-mid) var(--ease-out);
  }

  .words__grid .slick-dots .slick-active button::before {
    inline-size: 22px;
    background-color: var(--brand);
  }

  /* Keyboard focus must stay visible on the dots. */
  .words__grid .slick-dots button:focus-visible {
    outline: 3px solid var(--accent-text);
    outline-offset: -4px;
  }
}

/* --------------------------------------------------------------------------
   BOOK CTA — mobile refinement
   This is the final call to action on the page, so on small screens it is
   rebuilt for clarity: the button becomes a full-width block with its label
   on one line, the price sits under it rather than mid-sentence, and the
   reassurance rows become a left-aligned stack that is easy to scan.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .book__panel {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .book__title {
    font-size: var(--step-3);
    max-inline-size: 16ch;
  }

  .book__body {
    font-size: var(--step-0);
    max-inline-size: 42ch;
  }

  /*
    Full-width pill. The label is kept on a single line and the price moves
    to its own row beneath, so the button never breaks into the three-line
    jumble the inline chip caused.
  */
  .book__cta {
    inline-size: 100%;
    flex-direction: column;
    gap: 0.35rem;
    min-block-size: 64px;
    padding-block: 0.9rem;
    padding-inline: 1.25rem;
    border-radius: var(--radius-lg);
    line-height: 1.25;
  }

  .book__cta .btn__price {
    font-size: var(--step--1);
  }

  /* The arrow adds nothing on a stacked, full-width button. */
  .book__cta .btn__icon {
    display: none;
  }

  /*
    Reassurance list: a left-aligned stack reads far faster than centred
    rows of differing length, and the icons form a scannable column.
  */
  .book__meta {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-sm);
    text-align: start;
  }

  .book__meta-item {
    justify-content: flex-start;
    gap: 0.65rem;
    padding-block: 0.7rem;
    font-size: var(--step--1);
  }

  /* Hairline between rows, but not above the first one. */
  .book__meta-item + .book__meta-item {
    border-block-start: 1px solid rgb(255 255 255 / 0.18);
  }

  .book__sign {
    margin-block-start: var(--space-md);
    font-size: var(--step-1);
  }
}
[dir="rtl"] .video-statement::before {
  translate: 50% 0;
}