/* ============================================================================
   Shared chrome for the redesigned pages (the landing and /readers): the nav's
   CTA pill and the footer.

   Extracted from css/landing-v2.css when /readers was rebuilt: both pages carry
   these, and one component styled in two files is one component that eventually
   stops matching. styles.css keeps its own .footer and the rest of .nav for
   every other page, untouched.
   ========================================================================= */

/* ---- nav: the one addition to the shared bar --------------------------- */
/* The design puts a solid pill at the far end of the nav. It is only on this
   page, so it is defined here; the rest of .nav still comes from styles.css. */
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 38px;
  padding-inline: 22px;
  border-radius: 8px;
  background: var(--lx-cream);
  color: #000;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 200ms ease, transform 200ms ease;
}
.nav__cta:hover { background: #fff; }
/* Below the inline-links breakpoint the hamburger already carries every
   destination, and the pill would crowd it. */
@media (max-width: 767px) { .nav__cta { display: none; } }

/* New markup rather than the shared .footer, which stays as it is for the
   other pages. */
.lx-foot { background: var(--lx-black); color: #fff; padding-block: 64px 0; padding-inline: var(--lx-x); }
.lx-foot__in { inline-size: 100%; max-inline-size: var(--lx-w); margin-inline: auto; }
.lx-foot__top { display: grid; gap: 40px; }
@media (min-width: 860px) { .lx-foot__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.lx-foot__brand { display: flex; align-items: center; gap: 12px; }
.lx-foot__brand img { block-size: 92px; inline-size: auto; }
.lx-foot__blurb { margin: 16px 0 0; font-size: 13.5px; line-height: 1.9; color: rgba(255,255,255,.5); max-inline-size: 46ch; }
.lx-foot__col { display: flex; flex-direction: column; gap: 12px; }
.lx-foot__col a, .lx-foot__col p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.62); }
.lx-foot__col a:hover { color: #fff; }
.lx-foot__lbl { color: rgba(255,255,255,.38) !important; font-size: 12px !important; }
/* The address carries dir="ltr" so the string is never reordered, which also
   makes its text align left inside a box the flex column stretches to full
   width — leaving it 37px adrift of the label above it in Arabic. Shrinking
   the box to its text puts the two on the same edge, and mirrors on its own. */
.lx-foot__mail {
  color: #fff !important;
  align-self: flex-start;
  max-inline-size: 100%;
  word-break: break-all;
}
.lx-foot__mail:hover { color: var(--lx-red) !important; }
.lx-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-block-start: 52px;
  padding-block: 22px;
  border-block-start: 1px solid rgba(255,255,255,.1);
}
.lx-foot__cr { margin: 0; font-size: 12px; color: rgba(255,255,255,.38); font-variant-numeric: tabular-nums; }
.lx-foot__soc { display: flex; gap: 20px; }
.lx-foot__soc a { font-size: 12.5px; color: rgba(255,255,255,.5); }
.lx-foot__soc a:hover { color: #fff; }


/* ============================================================================
   THE LIGHT BAR — shared by the pages whose hero is light.

   css/styles.css dresses the nav for a dark page, because /about-coverage
   still opens on black. So none of it is edited there. This block opts in by page wrapper instead, and
   it loads after styles.css, so equal specificity is enough to win.

   The logo itself is not inverted here: invert(1) would flip its accent dot
   from #CD2E07 to cyan along with everything else. The light pages point at
   assets/scene-one-mark-v5-ink.svg, a dark-ink cut of the same drawing.
   ========================================================================= */

/* styles.css starts the landing's bar as a dark gradient and turns it solid on
   scroll. On a light hero the gradient reads as a smudge, so the bar is white
   from the first paint, with a hairline instead of the dark page's drop shadow.
   .scrolled is kept in step so the scroll handler in js/main.js has nothing to
   undo. */
.landing .nav, .landing .nav.scrolled,
.rd2 .nav,     .rd2 .nav.scrolled,
.tm2 .nav,     .tm2 .nav.scrolled,
.sb2 .nav,     .sb2 .nav.scrolled {
  background: var(--lx-white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
@media (min-width: 1000px) {
  .landing .nav__links a,
  .rd2 .nav__links a,
  .tm2 .nav__links a,
  .sb2 .nav__links a { color: var(--lx-ink); }
  .landing .nav__links a:hover,
  .rd2 .nav__links a:hover,
  .tm2 .nav__links a:hover,
  .sb2 .nav__links a:hover { color: var(--lx-black); }
}
.landing .menu-btn span,
.rd2 .menu-btn span,
.tm2 .menu-btn span,
.sb2 .menu-btn span { background: var(--lx-black); }
.landing .lang-toggle-group,
.rd2 .lang-toggle-group,
.tm2 .lang-toggle-group,
.sb2 .lang-toggle-group { border-color: rgba(0, 0, 0, .22); }
.landing .lang-btn,
.rd2 .lang-btn,
.tm2 .lang-btn,
.sb2 .lang-btn { color: var(--lx-ink); }
.landing .lang-btn:hover,
.rd2 .lang-btn:hover,
.tm2 .lang-btn:hover,
.sb2 .lang-btn:hover { color: var(--lx-black); }

/* The pill inverts with everything else: cream on black becomes black on cream. */
.landing .nav__cta,
.rd2 .nav__cta,
.tm2 .nav__cta,
.sb2 .nav__cta { background: var(--lx-black); color: var(--lx-cream); }
.landing .nav__cta:hover,
.rd2 .nav__cta:hover,
.tm2 .nav__cta:hover,
.sb2 .nav__cta:hover { background: #241f1b; }

/* ---- reveal on scroll ---------------------------------------------------
   Cards rise and fade as their group enters the viewport, staggered in reading
   order. The whole thing hangs off .js-reveal, which index.html sets on <html>
   before the first paint — see the comment there. Without that class none of
   this applies and every card is visible, which is the point: a blocked script
   or a browser without IntersectionObserver must not be able to blank a
   section.

   Only opacity and transform are animated. Both are composited, so a six-card
   row coming in does not relayout the page behind it; animating height or
   margin here would.

   --rv is the card's index within its group, set by js/main.js, and is what
   turns a simultaneous fade into one-by-one. */
.js-reveal [data-reveal] > * {
  opacity: 0;
  /* A longer travel reads as slower than the same duration over a shorter one,
     so the rise goes up with the timing rather than being left at 18px. */
  transform: translateY(26px);
  /* 450ms with a 70ms step put a six-card row away in well under a second —
     over before it registered. The curve is a long-tailed ease-out: most of
     the distance is covered early and the last few pixels drift in, which is
     what makes it read as settling rather than stopping. */
  transition: opacity 760ms cubic-bezier(.22, .61, .36, 1),
              transform 760ms cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--rv, 0) * 115ms);
}
/* Fade with no rise, for a block whose child is a position:absolute inset:0
   image filling it. Moving one of those does not move the panel behind it, so
   the travel only opens a band of backing colour above the photo. */
.js-reveal [data-reveal="fade"] > * { transform: none; }

/* Holds a closing CTA's backdrop photograph so the reveal engine has a group
   containing only the photo — the shade over it and the copy above it stay
   out of the stagger. It takes the box the photo had, and the photo's own
   inset:0 then resolves against this instead of the section. */
.cta-bgwrap { position: absolute; inset: 0; z-index: 0; }

.js-reveal [data-reveal].is-in > * {
  opacity: 1;
  transform: translateY(0);
}
/* The gate above already withholds .js-reveal when reduced motion is set, so
   this is a second line of defence rather than the mechanism — it also covers
   a reader who turns the setting on after the page has loaded. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] > *,
  .js-reveal [data-reveal].is-in > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}