/* AUTO-GENERATED  do not edit by hand.
 * Source: colocated marketing CSS modules (Expo Metro web CSS).
 * Regenerate from client/src/features/landing/marketing/marketingStyles.ts.
 * Modules (8):
 *   - styles/marketingShared.css
 *   - parts/InfiniteCarousel.web.css
 *   - sections/HeroSection.web.css
 *   - sections/SiteNav.web.css
 *   - MarketingPage.css
 *   - sections/AudienceSection.web.css
 *   - sections/TrustSection.web.css
 *   - parts/TrustMarquee.web.css
 */
:root {
  /* Values set at runtime from marketingTheme.cssVars (APP_THEME). Fallbacks keep SSR/first paint. */
  --mk-azure: #0b7cf0;
  --mk-azure-ink: #0a5bbe;
  --mk-cyan: #1bc4fe;
  --mk-blue: #0873ee;
  --mk-ink: #0b1020;
  --mk-ink-2: #10162a;
  --mk-navy-line: rgba(255, 255, 255, 0.09);
  --mk-ground: #f7f9fd;
  --mk-card: #ffffff;
  --mk-line: #e6ecf5;
  --mk-muted: #59647b;
  --mk-muted-2: #8a94a9;
  --mk-breaking: #ff4d2e;
  --mk-grad: linear-gradient(135deg, var(--mk-cyan), var(--mk-blue));
  --mk-space-sm: 8px;
  --mk-space-md: 12px;
  --mk-space-lg: 16px;
  --mk-space-xl: 20px;
  --mk-space-2xl: 28px;
  --mk-radius-md: 12px;
  --mk-radius-lg: 16px;
  --mk-radius-xl: 20px;
  --mk-max: 1140px;
  /* Legacy aliases — keep every existing rule working during migration */
  --azure: var(--mk-azure);
  --azure-ink: var(--mk-azure-ink);
  --cyan: var(--mk-cyan);
  --blue: var(--mk-blue);
  --ink: var(--mk-ink);
  --ink-2: var(--mk-ink-2);
  --navy-line: var(--mk-navy-line);
  --ground: var(--mk-ground);
  --card: var(--mk-card);
  --line: var(--mk-line);
  --muted: var(--mk-muted);
  --muted-2: var(--mk-muted-2);
  --breaking: var(--mk-breaking);
  --grad: var(--mk-grad);
}
* {
  box-sizing: border-box;
}
.page {
  font-family:
    "SF Hebrew", "Heebo", "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  color: var(--ink);
  background: var(--ground);
  line-height: 1.5;
  /* Content-sized only — never stretch past the last section (kills white tail). */
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
}
h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.015em;
}
p {
  margin: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: var(--mk-space-sm);
  inset-inline-start: var(--mk-space-sm);
  padding: var(--mk-space-md) var(--mk-space-lg);
  border-radius: var(--mk-radius-md);
  background: var(--mk-card);
  color: var(--mk-ink);
  font-size: var(--mypr-font-body);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform 0.16s ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  font-size: var(--mypr-font-body);
  padding: 12px 22px;
  border-radius: 13px;
  text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(8, 115, 238, 0.6);
  transition:
    transform 0.16s,
    box-shadow 0.16s;
}
.btn svg {
  width: 17px;
  height: 17px;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(8, 115, 238, 0.7);
}
.btn:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}
.btn-lg {
  padding: 15px 28px;
  font-size: var(--mypr-font-body);
  border-radius: 15px;
}
/* XL aligns with design-system Button size="xl" (~64px control height). */
.btn-xl {
  padding: 18px 32px;
  font-size: var(--mypr-font-body-lg);
  border-radius: 17px;
  gap: 11px;
}
.btn-xl svg {
  width: 20px;
  height: 20px;
}
.btn-sm {
  padding: 9px 17px;
  font-size: var(--mypr-font-body-sm);
  border-radius: 11px;
}
.nav-login-cta,
.nav-drawer-cta {
  font-weight: 900;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 10px rgba(3, 32, 83, 0.4);
  box-shadow:
    0 14px 30px -10px rgba(8, 115, 238, 0.88),
    0 0 0 3px rgba(27, 196, 254, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.nav-login-cta {
  min-width: 120px;
  flex: none;
}
.btn-glass {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: none;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.15);
}
.btn-invert {
  background: #fff;
  color: var(--azure-ink);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.45);
}

.brand {
  font-weight: 900;
  font-size: var(--mypr-font-title);
  letter-spacing: 0.3px;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Latin wordmark stays LTR (MY then PR); mark/word order flips in RTL below. */
  direction: ltr;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: block;
  color: var(--cyan);
  flex: none;
  position: relative;
  isolation: isolate;
}
.brand-mark-cut {
  fill: #fff;
}
.brand-word {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.brand .my {
  color: #fff;
}
.brand .pr {
  color: var(--cyan);
}
/* Hebrew RTL: wordmark first, live mark after (outer edge keeps the logo). */
.page[dir="rtl"] .brand {
  flex-direction: row-reverse;
}

/* One measured horizontal loop for headlines, outlet trust, and testimonials. */
.infinite-carousel {
  overflow: hidden;
  width: 100%;
  direction: ltr;
}
.infinite-carousel__track {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: max-content;
  opacity: 0;
  transform: translate3d(var(--infinite-carousel-start), 0, 0);
}
.infinite-carousel__half,
.infinite-carousel__unit {
  display: flex;
  align-items: stretch;
  flex: none;
  flex-wrap: nowrap;
}
.infinite-carousel__unit {
  gap: var(--infinite-carousel-gap);
  padding-inline-end: var(--infinite-carousel-gap);
}
.infinite-carousel__item {
  display: flex;
  align-items: stretch;
  flex: none;
  min-width: 0;
}
.infinite-carousel[data-ready="1"] .infinite-carousel__track {
  opacity: 1;
  will-change: transform;
  animation: infinite-carousel-loop var(--infinite-carousel-duration) linear infinite;
}
.infinite-carousel[data-defer-until-armed="1"]:not([data-armed="1"]) .infinite-carousel__track,
.infinite-carousel[data-pause-on-hover="1"]:hover .infinite-carousel__track,
.infinite-carousel[data-pause-on-hover="1"]:focus-within .infinite-carousel__track,
.infinite-carousel[data-pause-on-hover="1"]:active .infinite-carousel__track,
.infinite-carousel[data-paused="1"] .infinite-carousel__track {
  animation-play-state: paused;
}

/*
 * Customer-controlled pause: hover on pointer devices, hold on touch, or focus within.
 * One-shot confetti bursts must keep running — freezing them leaves pieces at opacity 0
 * for the whole time the pointer is over the section (hero / how / reach).
 */
.motion-pausable:hover
  *:not(.confetti):not(.confetti-once):not(.how-confetti):not(.rp-confetti),
.motion-pausable:focus-within
  *:not(.confetti):not(.confetti-once):not(.how-confetti):not(.rp-confetti),
.motion-pausable:active
  *:not(.confetti):not(.confetti-once):not(.how-confetti):not(.rp-confetti) {
  animation-play-state: paused !important;
}
/* Belt-and-suspenders: confetti always runs even if a parent rule pauses descendants. */
.motion-pausable .confetti,
.motion-pausable .confetti-once,
.motion-pausable .how-confetti,
.motion-pausable .rp-confetti {
  animation-play-state: running !important;
}
@keyframes infinite-carousel-loop {
  from {
    transform: translate3d(var(--infinite-carousel-start), 0, 0);
  }
  to {
    transform: translate3d(var(--infinite-carousel-end), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .infinite-carousel__track,
  .infinite-carousel[data-ready="1"] .infinite-carousel__track {
    opacity: 1;
    animation: none;
    transform: none;
    will-change: auto;
  }
}


/* HERO WRAP (dark) */
/* Shared PressWire band (SSOT) — edge-to-edge, no side inset (endless marquee). */
.hero-press-wire {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hero-press-wire > * {
  width: 100%;
  max-width: none;
}

.hero-wrap {
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(11, 124, 240, 0.28), transparent 60%),
    radial-gradient(70% 60% at 90% 20%, rgba(27, 196, 254, 0.22), transparent 55%),
    linear-gradient(180deg, #0b1020, #0e1530);
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(40px, 6vw, 80px);
}
.hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 119px,
    var(--navy-line) 119px 120px
  );
  opacity: 0.5;
  pointer-events: none;
}
.ticker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--navy-line);
  padding-block: 10px;
  padding-inline: 0;
}
.ticker-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 0 clamp(18px, 4vw, 32px);
  font-size: var(--mypr-font-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--breaking);
}
.ticker-tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--breaking);
  box-shadow: 0 0 0 4px rgba(255, 77, 46, 0.22);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    box-shadow: 0 0 0 7px rgba(255, 77, 46, 0);
  }
}
.ticker .infinite-carousel__track,
.ticker .infinite-carousel__half,
.ticker .infinite-carousel__unit,
.ticker .infinite-carousel__item,
.ticker-stream .infinite-carousel__track,
.ticker-stream .infinite-carousel__half,
.ticker-stream .infinite-carousel__unit,
.ticker-stream .infinite-carousel__item {
  align-items: center;
}
.ticker-stream {
  width: 100%;
  min-height: 34px;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: var(--mypr-font-caption);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 9px;
  padding: 5px 8px;
  max-width: min(360px, 72vw);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.ticker-link {
  color: inherit;
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.ticker-link:hover .ticker-item,
.ticker-link:focus-visible .ticker-item,
.ticker-item--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.ticker-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 9px;
}
/*
 * Floating hover card (tooltip) for a press chip — fixed to the viewport so the
 * ticker's overflow:hidden does not clip it. Portaled to document.body, so it
 * MUST restate the marketing type stack (it does not inherit `.page`).
 */
.ticker-hover-card {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(165deg, #152038 0%, #0b1224 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 22px 48px -16px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(11, 124, 240, 0.12);
  color: #fff;
  pointer-events: auto;
  /* Soft rise + unblur — longer than a snap, still snappy on leave. */
  animation: ticker-hover-card-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform, filter, left, top;
  /* Match `.page` / APP_WEB_FONT_FAMILY — portal to body loses inherited fonts. */
  font-family:
    "SF Hebrew", "Heebo", "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  font-size: var(--mypr-font-body-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-align: start;
  min-width: min(300px, calc(100vw - 24px));
}
/* After enter settles, chip-to-chip handoffs glide the shell instead of snapping. */
.ticker-hover-card.is-settled {
  transition:
    left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.ticker-hover-card.is-swapping {
  border-color: rgba(11, 124, 240, 0.35);
  box-shadow:
    0 22px 48px -16px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(11, 124, 240, 0.28),
    0 0 28px -4px rgba(11, 124, 240, 0.22);
}
.ticker-hover-card.is-leaving {
  animation: ticker-hover-card-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
  transition: none;
}
.ticker-hover-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ticker-hover-card-body.is-swapping {
  animation: ticker-hover-card-swap 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ticker-hover-card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes ticker-hover-card-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    filter: blur(4px);
  }
}
/* Directional content morph — --ticker-swap-x set from chip delta. */
@keyframes ticker-hover-card-swap {
  from {
    opacity: 0;
    transform: translateX(var(--ticker-swap-x, 0px)) translateY(5px) scale(0.985);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
}
.ticker-hover-card-media {
  margin: -2px -2px 2px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 16 / 9;
  max-height: 148px;
}
.ticker-hover-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ticker-hover-card-title {
  font-family: inherit;
  font-size: var(--mypr-font-body, 1rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #fff;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
}
.ticker-hover-card-summary {
  margin: 0;
  font-family: inherit;
  font-size: var(--mypr-font-caption, 0.75rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
}
.ticker-hover-card-date {
  font-family: inherit;
  font-size: var(--mypr-font-micro, 0.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
}
.ticker-hover-card-open {
  align-self: flex-start;
  margin-block-start: 2px;
  font-family: inherit;
  font-size: var(--mypr-font-caption, 0.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--cyan);
  text-decoration: none;
}
.ticker-hover-card-open:hover,
.ticker-hover-card-open:focus-visible {
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-hover-card,
  .ticker-hover-card.is-leaving,
  .ticker-hover-card-body.is-swapping {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
  }
  .ticker-hover-card.is-settled,
  .ticker-hover-card.is-swapping {
    transition: none;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
      0 22px 48px -16px rgba(0, 0, 0, 0.65),
      0 0 0 1px rgba(11, 124, 240, 0.12);
  }
}
/* Small white chip so full-color outlet marks read on the dark band */
.ticker-logo {
  display: block;
  height: 14px;
  width: auto;
  max-width: 64px;
  object-fit: contain;
  object-position: center;
  flex: none;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Mako's mark uses a white wordmark, so the shared white chip hides it. */
.ticker-logo[data-outlet="mako"] {
  height: 18px;
  max-width: 72px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ticker-src {
  font-size: var(--mypr-font-micro);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--breaking);
  flex: none;
}
.ticker-hl {
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: normal;
  line-height: 1.3;
  transition: color 0.18s ease;
}
.ticker-link:hover .ticker-hl,
.ticker-link:focus-visible .ticker-hl,
.ticker-item--active .ticker-hl {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-tag .dot {
    animation: none;
  }
  .ticker-item {
    transition: none;
  }
}
/* Press rail loading — holds the one-line band while headlines load */
.ticker-skeleton-stream {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
  overflow: hidden;
  padding-inline: clamp(18px, 4vw, 32px);
  width: 100%;
  pointer-events: none;
  opacity: 0.72;
}
.ticker--skeleton .ticker-item {
  gap: 8px;
}
.blog-card--skeleton {
  pointer-events: none;
  cursor: default;
}
.blog-card--skeleton:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
.blog-skeleton-excerpt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

/* Yellow draft mark on the "draft in ~10s" proof line */
.p-ic.p-ic-draft {
  background: rgba(253, 176, 34, 0.18);
  color: #fdb022;
  box-shadow: 0 0 0 1px rgba(253, 176, 34, 0.22);
}
.p-ic.p-ic-draft svg {
  width: 12px;
  height: 12px;
}

/* Hero grid + copy — must live in this module (not SiteNav) so the mobile
 * single-column rule below wins the cascade in /marketing.css composition. */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(18px, 4vw, 32px);
  box-sizing: border-box;
  width: 100%;
}
.hero-copy {
  min-width: 0;
}
.hero h1 {
  font-size: var(--mypr-font-fluid-hero);
  line-height: 1.06;
  font-weight: 900;
  color: #fff;
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero h1 .hl {
  background: linear-gradient(120deg, var(--cyan), #8fd4ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lede {
  font-size: var(--mypr-font-fluid-lead);
  line-height: 1.65;
  color: #fff;
  max-width: 50ch;
  margin-bottom: 28px;
}
.lede strong {
  color: #fff;
  font-weight: 800;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.hero-proof {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--mypr-font-body-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.p-ic {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(27, 196, 254, 0.16);
  color: var(--cyan);
}
.p-ic svg {
  width: 11px;
  height: 11px;
}
/* Base art shell — refined again in the hero.css block below (padding/glow). */
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
}
@media (max-width: 880px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .hero-copy {
    width: 100%;
  }
  .hero-proof {
    justify-content: center;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  /* Art sizing overrides live after the base .hero-illus block below so they
   * win the cascade; only layout stacking rules stay here. */
  .hero-art {
    margin-top: 6px;
    width: 100%;
    max-width: 100%;
    justify-self: center;
  }
  .hero-wrap::before {
    opacity: 0.28;
  }
  .page[dir="rtl"] .hero {
    text-align: right;
  }
  .page[dir="rtl"] .hero-cta {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
  .page[dir="rtl"] .hero-proof {
    justify-content: flex-start;
  }
}

/* === hero.css === */
/* Hero art: ceiling spotlight, soft beam, unified MYPR sparkles.
   Merged by parent into styles.css — class names must stay:
   .hero-art, .glow, .hero-illus, .mypr-sparkle */

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  /* give ceiling room so the wash can sit above the paper */
  padding-top: 8px;
  overflow: visible;
}

/* Html wraps the SVG. Filling the art column lets the illustration use the
   responsive width below instead of shrinking to its intrinsic desktop size. */
.hero-art-frame {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Ambient ceiling haze only — fixture disc lives in the SVG (one light, not doubled).
   Intensity gated with YOU phase so stock-photo frames don't get a free spotlight wash. */
.glow {
  position: absolute;
  left: 18%;
  right: 18%;
  top: -4%;
  height: 28%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 50% at 50% 0%,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(180, 230, 255, 0.1) 30%,
    rgba(27, 196, 254, 0.05) 55%,
    transparent 78%
  );
  filter: blur(28px);
  opacity: 0;
  /* pan = transform only; person-fx owns opacity (no two anims fighting opacity) */
  animation:
    glow-pan 7s ease-in-out infinite,
    glow-person-fx 6s ease-in-out infinite;
  will-change: opacity, transform;
  transform-origin: 50% 0%;
}

.hero-illus {
  position: relative;
  z-index: 1;
  width: min(460px, 92vw);
  max-width: 100%;
  height: auto;
  /* Keep the detailed paper on the vector paint path. Its shadow is an
     isolated SVG sibling so the paper and press figures are never sampled as
     one continuously moving filtered bitmap. */
  overflow: visible;
}

/* The paper remains compact on phones; tablets and desktops give the hero its
   intended visual weight while the available grid column remains the hard cap. */
@media (min-width: 481px) {
  .hero-illus {
    width: min(100%, clamp(520px, 66vw, 680px));
  }
}

/* Phone: stack already forced above; keep the newspaper inside the column so
 * hero-wrap overflow:hidden cannot slice the rotated sheet on the side. */
@media (max-width: 880px) {
  .hero-illus {
    width: min(100%, 92vw);
    max-width: 100%;
  }
}

/*
 * Spotlight = same system as reach.css:
 * curved outer/mid/core cones + soft pool. Gated to YOU portrait only.
 * Fixture stays on; SMIL pans lamp + morphs cone bottom-locked on person.
 */
.hero-illus .spot-key,
.hero-illus .person-glow {
  opacity: 0;
  animation: wu-person-fx 6s ease-in-out infinite;
  pointer-events: none;
}

.hero-illus .h-beam-outer {
  animation: h-beam-outer 4.5s ease-in-out infinite;
}

.hero-illus .h-beam-mid {
  animation: h-beam-mid 3.6s ease-in-out infinite;
}

.hero-illus .h-beam-core {
  animation: h-beam-core 3.2s ease-in-out infinite;
}

.hero-illus .h-pool {
  transform-box: fill-box;
  transform-origin: center;
  animation: h-pool-pulse 2.8s ease-in-out infinite;
}

.hero-illus .h-lamp,
.hero-illus .h-lamp-core {
  animation: h-lamp-soft 3.6s ease-in-out infinite;
}

.hero-illus .h-ceil-wash {
  animation: h-ceil-pulse 5.5s ease-in-out infinite;
}

/* Dust motes — tiny soft dots drifting in the beam */
.hero-illus .mote {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mote-drift 5.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* Unified MYPR soft four-point flashes (logo + press + newspaper): SMIL drives
   pop; CSS only handles reduced-motion freeze. Same star as BrowserScene. */
.hero-illus .mypr-sparkle {
  transform-box: fill-box;
  transform-origin: center;
}

.hero-illus .mypr-sparkle-core {
  opacity: 0.95;
}

.hero-illus .mypr-sparkle-star {
  opacity: 0.95;
}

.hero-illus .mypr-sparkle-glow {
  opacity: 0.35;
}

.hero-illus .mypr-sparkle-halo {
  opacity: 0.4;
}

/* MYPR TIMES sits above the dim (.masthead-layer) — foil shimmer only, no oval plate */
.hero-illus .masthead-title {
  paint-order: stroke fill;
}

@media (prefers-reduced-motion: reduce) {
  .hero-illus .masthead-title {
    fill: #0b1020;
  }
}

/*
 * Browser chrome OS variants — default Mac traffic lights.
 * LandingScreen sets data-os="mac"|"win"|"linux" on the outer root (and .page)
 * from the user agent so the correct chrome paints on first frame.
 */
.hero-illus .wu-chrome-win,
.hero-illus .wu-chrome-linux {
  display: none;
}

[data-os="win"] .hero-illus .wu-chrome-mac,
[data-os="linux"] .hero-illus .wu-chrome-mac {
  display: none;
}

[data-os="win"] .hero-illus .wu-chrome-win {
  display: inline;
}

[data-os="linux"] .hero-illus .wu-chrome-linux {
  display: inline;
}

/*
 * Welcome BrowserScene cycle (matches apps/mypr welcome step 1 timing):
 * 0–16%  before holds · 22–38% portrait crossfade · 38–58% paparazzi
 * 42–64% headline types · 64–74% underline · 80–100% hold + soft reset
 * Total loop ~6s. Confetti is one-shot on first YOU reveal only.
 */
.hero-illus .wu-before {
  animation: wu-before 6s ease-in-out infinite;
}

.hero-illus .wu-after {
  opacity: 0;
  animation: wu-after 6s ease-in-out infinite;
}

.hero-illus .wu-breaking {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: wu-breaking 6s ease-in-out infinite;
}

.hero-illus .wu-word {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
}

.hero-illus .wu-w1 {
  animation: wu-word 6s ease-in-out infinite;
  animation-delay: 0s;
}

.hero-illus .wu-w2 {
  animation: wu-word 6s ease-in-out infinite;
  animation-delay: 0.18s;
}

.hero-illus .wu-w3 {
  animation: wu-word 6s ease-in-out infinite;
  animation-delay: 0.36s;
}

.hero-illus .wu-underline {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  animation: wu-underline 6s ease-in-out infinite;
}

/* The surrounding press cameras fire staggered double flashes. */
.hero-illus .press-camera-flash {
  transform-box: fill-box;
  transform-origin: center;
}

/* Dense paparazzi wall: subtle staggered bob (lean lives on the inner SVG g). */
.hero-illus .press-figure {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: press-sway 2.9s ease-in-out infinite;
  animation-delay: var(--press-sway-delay, 0s);
}
@keyframes press-sway {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -1.6px, 0);
  }
}

/* Part idle on construction-sheet layers (badge / pen / pad / cam / mic). */
.hero-illus .press-part-badge {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: press-badge-sway 3.8s ease-in-out infinite;
  animation-delay: var(--press-sway-delay, 0s);
}
.hero-illus .press-part-pen {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: press-pen-write 4.6s ease-in-out infinite;
  animation-delay: var(--press-sway-delay, 0s);
}
.hero-illus .press-part-notepad {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: press-pad-breathe 5.2s ease-in-out infinite;
  animation-delay: var(--press-sway-delay, 0s);
}
.hero-illus .press-part-camera,
.hero-illus .press-part-video-cam {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: press-cam-bob 3.4s ease-in-out infinite;
  animation-delay: var(--press-sway-delay, 0s);
}
.hero-illus .press-part-mic {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: press-mic-bob 3.6s ease-in-out infinite;
  animation-delay: var(--press-sway-delay, 0s);
}
.hero-illus .press-part-headphones {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: press-phones-bob 4.2s ease-in-out infinite;
  animation-delay: var(--press-sway-delay, 0s);
}
@keyframes press-badge-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-1.4deg);
  }
}
@keyframes press-pen-write {
  0%,
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
  30% {
    transform: rotate(-3deg) translate(0.4px, 0.6px);
  }
  60% {
    transform: rotate(2deg) translate(-0.3px, 0.3px);
  }
}
@keyframes press-pad-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.7px);
  }
}
@keyframes press-cam-bob {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(-0.8deg) translateY(0.4px);
  }
}
@keyframes press-mic-bob {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(2deg);
  }
}
@keyframes press-phones-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.35px);
  }
}

/* Confetti: one shot on mount when YOU first appears */
.hero-illus .confetti-once {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: confetti-once 1.55s cubic-bezier(0.18, 0.72, 0.22, 1) 1 forwards;
  animation-delay: calc(1.5s + var(--d, 0s));
}

@keyframes float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}

/* Transform only — opacity gated by glow-person-fx with the YOU window */
@keyframes glow-pan {
  0%,
  100% {
    transform: translate3d(-5%, 0, 0);
  }
  50% {
    transform: translate3d(5%, 0, 0);
  }
}

@keyframes glow-person-fx {
  0%,
  20% {
    opacity: 0;
  }
  36%,
  82% {
    opacity: 0.72;
  }
  92%,
  100% {
    opacity: 0;
  }
}

/* Reach-style beam layer breathe */
@keyframes h-beam-outer {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}

@keyframes h-beam-mid {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes h-beam-core {
  0%,
  100% {
    opacity: 0.75;
  }
  45% {
    opacity: 1;
  }
  70% {
    opacity: 0.85;
  }
}

@keyframes h-pool-pulse {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes h-lamp-soft {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@keyframes h-ceil-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Soft sparkle: ease in → hold → ease out, tiny rise + spin */
@keyframes sparkle-soft {
  0% {
    opacity: 0;
    transform: translate(0, 2px) scale(0.4) rotate(0deg);
  }
  14% {
    opacity: 0.95;
    transform: translate(0, 0) scale(1) rotate(12deg);
  }
  32% {
    opacity: 1;
    transform: translate(calc(var(--dx, 0px) * 0.4), calc(var(--dy, -3px) * 0.4)) scale(1.05)
      rotate(22deg);
  }
  52% {
    opacity: 0.55;
    transform: translate(calc(var(--dx, 0px) * 0.85), calc(var(--dy, -3px) * 0.85)) scale(0.92)
      rotate(38deg);
  }
  68%,
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0px), var(--dy, -3px)) scale(0.35) rotate(50deg);
  }
}

/* Dust motes float up through the beam */
@keyframes mote-drift {
  0% {
    opacity: 0;
    transform: translate(0, 8px) scale(0.6);
  }
  18% {
    opacity: 0.55;
    transform: translate(calc(var(--dx, 0px) * 0.3), 0) scale(1);
  }
  55% {
    opacity: 0.35;
    transform: translate(var(--dx, 0px), calc(var(--dy, -18px) * 0.7)) scale(0.9);
  }
  85%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx, 0px) * 1.1), var(--dy, -18px)) scale(0.4);
  }
}

/* One-shot confetti burst when YOU first lands */
@keyframes confetti-once {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.35);
  }
  12% {
    opacity: 1;
    transform: translate(calc(var(--dx, 0px) * 0.2), calc(var(--dy, -40px) * 0.25))
      rotate(calc(var(--rot, 30deg) * 0.25)) scale(1);
  }
  55% {
    opacity: 1;
    transform: translate(calc(var(--dx, 0px) * 0.85), calc(var(--dy, -40px) * 0.9))
      rotate(var(--rot, 30deg)) scale(1);
  }
  85% {
    opacity: 0.35;
    transform: translate(var(--dx, 0px), calc(var(--dy, -40px) * 1.05 + 10px))
      rotate(calc(var(--rot, 30deg) * 1.35)) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx, 0px) * 1.05), calc(var(--dy, -40px) * 1.15 + 22px))
      rotate(calc(var(--rot, 30deg) * 1.6)) scale(0.55);
  }
}

/* Stock hero holds, then fades out as YOU takes over */
@keyframes wu-before {
  0%,
  20% {
    opacity: 1;
  }
  36%,
  82% {
    opacity: 0;
  }
  92%,
  100% {
    opacity: 1;
  }
}

/* YOU portrait dissolves in */
@keyframes wu-after {
  0%,
  20% {
    opacity: 0;
  }
  36%,
  82% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
  }
}

/*
 * Dim overlay + white person-glow: locked to the brand portrait window.
 * Mirrors wu-after so FX never sit on the stock photo or the loop reset.
 */
@keyframes wu-person-fx {
  0%,
  20% {
    opacity: 0;
  }
  36%,
  82% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
  }
}

@keyframes wu-breaking {
  0%,
  34% {
    opacity: 0;
    transform: scale(0.7);
  }
  40% {
    opacity: 1;
    transform: scale(1.08);
  }
  46%,
  80% {
    opacity: 1;
    transform: scale(1);
  }
  88%,
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* Headline words pop in like typeset (staggered via animation-delay) */
@keyframes wu-word {
  0%,
  38% {
    opacity: 0;
    transform: translateY(4px) scaleX(0.85);
  }
  46% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
  80% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes wu-underline {
  0%,
  58% {
    transform: scaleX(0);
    opacity: 0;
  }
  68%,
  80% {
    transform: scaleX(1);
    opacity: 1;
  }
  90%,
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-illus,
  .glow,
  .hero-illus .spot-key,
  .hero-illus .person-glow,
  .hero-illus .h-beam-outer,
  .hero-illus .h-beam-mid,
  .hero-illus .h-beam-core,
  .hero-illus .h-pool,
  .hero-illus .h-lamp,
  .hero-illus .h-lamp-core,
  .hero-illus .h-ceil-wash,
  .hero-illus .mypr-sparkle,
  .hero-illus .mote,
  .hero-illus .confetti-once,
  .hero-illus .wu-before,
  .hero-illus .wu-after,
  .hero-illus .wu-breaking,
  .hero-illus .wu-word,
  .hero-illus .wu-underline,
  .hero-illus .press-figure {
    animation: none !important;
  }

  .hero-illus .press-part-badge,
  .hero-illus .press-part-pen,
  .hero-illus .press-part-notepad,
  .hero-illus .press-part-camera,
  .hero-illus .press-part-video-cam,
  .hero-illus .press-part-mic,
  .hero-illus .press-part-headphones {
    animation: none !important;
  }

  .hero-illus .spot-key animate,
  .hero-illus .spot-fixture animateTransform,
  .hero-illus .mypr-sparkle animate,
  .hero-illus .mypr-sparkle animateTransform {
    display: none;
  }

  .hero-illus .press-figure {
    transform: none;
  }

  .hero-illus .wu-after,
  .hero-illus .wu-breaking,
  .hero-illus .wu-word,
  .hero-illus .wu-underline,
  .hero-illus .spot-key,
  .hero-illus .person-glow {
    opacity: 1;
  }

  .hero-illus .h-pool {
    opacity: 0.9;
  }

  .hero-illus .mypr-sparkle {
    opacity: 0.35;
  }

  .hero-illus .mote {
    opacity: 0.25;
  }

  .hero-illus .confetti-once {
    opacity: 0;
  }

  .hero-illus .wu-before {
    opacity: 0;
  }

  .hero-illus .wu-underline {
    transform: scaleX(1);
  }

  .glow {
    opacity: 0.9;
  }
}

@media (max-width: 880px) {
  .glow {
    height: 36%;
    filter: blur(22px);
  }
}


/* Sticky bar. Drawer/scrim are siblings outside this node so they never clip. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 16, 32, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
  padding: 13px clamp(18px, 5vw, 96px);
  position: relative;
  z-index: 2;
}
.nav-links {
  display: flex;
  gap: 26px;
  margin-inline-start: auto;
  margin-inline-end: 8px;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: var(--mypr-font-body);
  font-weight: 600;
  transition:
    color 0.18s ease,
    opacity 0.18s ease;
}
.nav-links a:hover {
  color: #fff;
}
.nav-links a:active {
  opacity: 0.72;
}
.nav-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-inline-start: 0;
}
.lang-tog {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 3px;
}
.lang-tog a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--mypr-control-min-size);
  min-height: var(--mypr-control-min-size);
  font-size: var(--mypr-font-caption);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 7px;
  line-height: 1;
  transition:
    color 0.15s,
    background 0.15s;
}
.lang-tog a.on {
  background: var(--grad);
  color: #fff;
}
.lang-tog a:not(.on):hover {
  color: #fff;
}

/* Burger — mobile only; keep the 44px touch target, but let the glyph sit inline. */
.nav-burger {
  display: none;
  position: relative;
  z-index: 3;
  flex: none;
  width: var(--mypr-control-min-size);
  height: var(--mypr-control-min-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}
.nav-burger:hover {
  background: transparent;
  opacity: 0.82;
}
.nav-burger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.nav-burger-box {
  position: relative;
  width: 16px;
  height: 12px;
  display: block;
  pointer-events: none;
}
.nav-burger-line {
  position: absolute;
  inset-inline-start: 0;
  width: 16px;
  height: 1.75px;
  border-radius: 2px;
  background: #fff;
  transform-origin: center;
  transition:
    transform 0.34s cubic-bezier(0.68, -0.4, 0.32, 1.4),
    opacity 0.22s ease,
    width 0.28s ease,
    inset-inline-start 0.28s ease,
    background 0.2s ease;
  box-shadow: 0 0 0 0 transparent;
}
.nav-burger-line:nth-child(1) {
  top: 0;
}
.nav-burger-line:nth-child(2) {
  top: 5px;
}
.nav-burger-line:nth-child(3) {
  top: 10px;
}
.nav.is-open .nav-burger {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.nav.is-open .nav-burger-line {
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(27, 196, 254, 0.45);
}
.nav.is-open .nav-burger-line:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.nav.is-open .nav-burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
  width: 6px;
  inset-inline-start: 5px;
}
.nav.is-open .nav-burger-line:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}

/* Mobile drawer lives outside sticky .nav (sibling) so fixed isn't clipped */
.nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 48;
  padding-top: 64px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 16, 32, 0.99), rgba(14, 21, 48, 0.98));
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 28px 48px -20px rgba(0, 0, 0, 0.55);
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    visibility 0s linear 0.42s;
}
.nav-drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px clamp(18px, 4vw, 32px) 22px;
}
.nav-drawer a.nav-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: var(--mypr-font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transform: translateY(8px);
  opacity: 0;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
.nav-drawer a.nav-drawer-link:hover,
.nav-drawer a.nav-drawer-link:focus-visible {
  background: rgba(27, 196, 254, 0.1);
  border-color: rgba(27, 196, 254, 0.28);
  color: #fff;
  outline: none;
}
.nav-drawer a.nav-drawer-link .chev {
  width: 18px;
  height: 18px;
  opacity: 0.45;
  color: var(--cyan);
  flex: none;
}
.nav-drawer a.nav-drawer-link .chev svg {
  width: 100%;
  height: 100%;
  display: block;
}
.nav-drawer .nav-drawer-cta {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
/* Open state driven by .page.nav-open (and legacy .nav.is-open sibling) */
.page.nav-open .nav-drawer,
.nav.is-open ~ .nav-drawer {
  max-height: min(80vh, 480px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    visibility 0s linear 0s;
}
.page.nav-open .nav-drawer a.nav-drawer-link,
.page.nav-open .nav-drawer .nav-drawer-cta,
.nav.is-open ~ .nav-drawer a.nav-drawer-link,
.nav.is-open ~ .nav-drawer .nav-drawer-cta {
  transform: translateY(0);
  opacity: 1;
}
.page.nav-open .nav-drawer a.nav-drawer-link:nth-child(1),
.nav.is-open ~ .nav-drawer a.nav-drawer-link:nth-child(1) {
  transition-delay: 0.04s;
}
.page.nav-open .nav-drawer a.nav-drawer-link:nth-child(2),
.nav.is-open ~ .nav-drawer a.nav-drawer-link:nth-child(2) {
  transition-delay: 0.08s;
}
.page.nav-open .nav-drawer a.nav-drawer-link:nth-child(3),
.nav.is-open ~ .nav-drawer a.nav-drawer-link:nth-child(3) {
  transition-delay: 0.12s;
}
.page.nav-open .nav-drawer a.nav-drawer-link:nth-child(4),
.nav.is-open ~ .nav-drawer a.nav-drawer-link:nth-child(4) {
  transition-delay: 0.16s;
}
.page.nav-open .nav-drawer .nav-drawer-cta,
.nav.is-open ~ .nav-drawer .nav-drawer-cta {
  transition-delay: 0.22s;
}
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 47;
  background: rgba(5, 8, 18, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.page.nav-open .nav-scrim,
.nav.is-open ~ .nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* Language toggle host — scales on narrow viewports without fighting RN layout. */
.nav-lang {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 100%;
  transform-origin: center;
}

/* Switch to the drawer before the desktop controls can overflow or be clipped.
   Login lives in the burger drawer on mobile so brand + lang + menu fit. */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .nav-inner {
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(10px, 3.5vw, 24px);
    min-width: 0;
  }
  /* Brand on one side, lang + hamburger on the other — content-sized so
   * nav-inner space-between owns the gap (no empty flex growth inside .brand). */
  .nav-inner > .brand {
    margin-inline-end: 0;
    flex: 0 1 auto;
    min-width: 0;
    gap: 8px;
  }
  .nav-tools {
    gap: 4px;
    margin-inline-start: 0;
    flex: 0 0 auto;
    min-width: 0;
  }
  .lang-tog {
    margin-inline-start: 0;
    justify-content: flex-start;
    height: 34px;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 10px;
    align-self: center;
  }
  .lang-tog a {
    padding: 5px 8px;
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-burger {
    display: inline-flex;
    align-self: center;
    flex: none;
  }
  .nav-drawer {
    display: block;
  }
  .nav-scrim {
    display: block;
  }
  /* Header login CTA → drawer only (saves ~90px on phone). */
  .nav-tools > .nav-login-cta {
    display: none;
  }
}

/* Phones / narrow emulator panes — keep brand + lang + burger on one row. */
@media (max-width: 400px) {
  .nav-inner {
    gap: 6px;
    padding-block: 10px;
    padding-inline: 8px;
  }
  .nav-inner > .brand {
    gap: 6px;
    font-size: calc(var(--mypr-font-title) * 0.9);
  }
  .brand-mark {
    width: 30px;
    height: 30px;
  }
  .brand-mark svg {
    width: 30px !important;
    height: 30px !important;
  }
  .nav-tools {
    gap: 2px;
  }
  .nav-burger {
    width: 40px;
    height: 40px;
  }
}

/* Ultra-narrow (≤300 / 256px emulators) — mark-only brand, tighter chrome. */
@media (max-width: 300px) {
  .nav-inner {
    gap: 4px;
    padding-block: 8px;
    padding-inline: 6px;
  }
  .nav-inner > .brand {
    gap: 0;
    position: relative;
    flex: 0 0 auto;
  }
  .brand-word {
    /* Keep a11y name on the brand link; hide visual wordmark to free ~50px. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .brand-mark {
    width: 28px;
    height: 28px;
  }
  .brand-mark svg {
    width: 28px !important;
    height: 28px !important;
  }
  .nav-burger {
    width: 36px;
    height: 36px;
  }
  .nav-burger-box {
    width: 14px;
    height: 11px;
  }
  .nav-burger-line {
    width: 14px;
  }
  .nav-burger-line:nth-child(2) {
    top: 4.5px;
  }
  .nav-burger-line:nth-child(3) {
    top: 9px;
  }
  .nav.is-open .nav-burger-line:nth-child(1),
  .nav.is-open .nav-burger-line:nth-child(3) {
    top: 4.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-burger-line,
  .nav-drawer,
  .nav-drawer a.nav-drawer-link,
  .nav-drawer .nav-drawer-cta,
  .nav-scrim {
    transition: none;
  }
  .nav.is-open .nav-drawer a.nav-drawer-link,
  .nav.is-open .nav-drawer .nav-drawer-cta {
    transition-delay: 0s;
  }
}

/* Hero layout (`.hero`, lede, CTAs, proof) lives in HeroSection.web.css so the
 * mobile single-column media query can win over the desktop grid cascade. */

/* SECTIONS */
.section {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(18px, 4vw, 32px);
}
.sec-head {
  text-align: center;
  margin-bottom: clamp(34px, 4vw, 54px);
}
.sec-head.start {
  text-align: start;
}
.kick {
  display: block;
  font-size: var(--mypr-font-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--azure);
  margin-bottom: 11px;
}
.kick.light {
  color: var(--cyan);
}
/* Pill label — dark navy sections (proof) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mypr-font-label);
  font-weight: 700;
  color: #bfe0ff;
  background: rgba(27, 196, 254, 0.1);
  border: 1px solid rgba(27, 196, 254, 0.28);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.e-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  flex: none;
}
.sec-head h2 {
  font-size: var(--mypr-font-fluid-page-title);
  font-weight: 900;
  text-wrap: balance;
}


/* Decorative frames retain their normal geometry; only visible sections animate. */
.page main > section:not([data-motion-active="true"]) *,
.page main > section:not([data-motion-active="true"])::before,
.page main > section:not([data-motion-active="true"])::after,
.page .hero-wrap:not([data-motion-active="true"]) *,
.page main > section:not([data-motion-active="true"]) *::before,
.page main > section:not([data-motion-active="true"]) *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

.audience-lede {
  max-width: 760px;
  margin: 0 auto clamp(22px, 3vw, 36px);
  color: var(--muted);
  font-size: var(--mypr-font-body-lg);
  line-height: 1.75;
  text-align: center;
}

.audience-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 20px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: min(1120px, 100%);
}

.audience-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 18px);
  padding: clamp(14px, 1.7vw, 18px) clamp(18px, 2.2vw, 26px) clamp(14px, 1.7vw, 18px)
    clamp(12px, 1.5vw, 16px);
  border-radius: 999px;
  border: 1px solid var(--line, #e6e9ef);
  background: var(--paper, #ffffff);
  color: var(--ink, #111827);
  font-size: clamp(1rem, 0.95rem + 0.45vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(11, 16, 32, 0.07);
  max-width: 100%;
}

.audience-item-icon {
  width: clamp(72px, 7.5vw, 96px);
  height: clamp(72px, 7.5vw, 96px);
  flex: 0 0 clamp(72px, 7.5vw, 96px);
  border-radius: 999px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  padding: clamp(6px, 0.6vw, 10px);
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .audience-list {
    max-width: 720px;
  }

  .audience-item-icon {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
    padding: 6px;
  }
}

@media (max-width: 720px) {
  .audience-list {
    flex-direction: column;
    align-items: stretch;
    max-width: 460px;
    gap: 14px;
  }

  .audience-item {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 20px 14px 12px;
    font-size: 1.08rem;
    gap: 16px;
  }

  .audience-item-icon {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
    padding: 6px;
  }
}

/* TRUST STRIP */
.trust {
  max-width: 1140px;
  margin: 0 auto;
  /* Extra top room so the Israel map tip can sit above the caption without clipping */
  padding: clamp(48px, 6vw, 80px) clamp(18px, 4vw, 32px) clamp(8px, 2vw, 18px);
  text-align: center;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.trust-cap {
  display: block;
  font-size: var(--mypr-font-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  margin-bottom: 22px;
  overflow: visible;
  position: relative;
}
.trust-heading {
  max-width: 760px;
  margin: 0 auto 28px;
}
.trust-heading-copy {
  max-width: 760px;
}
.trust-heading h2 {
  font-size: var(--mypr-font-fluid-section-title);
  font-weight: 900;
  text-wrap: balance;
}
.trust-country-lock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.trust-heading p {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--mypr-font-body);
  line-height: 1.65;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3.4vw, 42px);
}
.outlet {
  font-size: var(--mypr-font-fluid-lead);
  font-weight: 900;
  color: #9aa5ba;
  letter-spacing: -0.01em;
  opacity: 0.9;
  transition:
    color 0.2s,
    opacity 0.2s;
}
.outlet:hover {
  color: var(--azure);
  opacity: 1;
}

/* === trust.css === */
/* Trust strip — official full-color outlet logos, infinite marquee */

.trust {
  max-width: none;
  margin: 0;
  /* top padding leaves room for the map tip above the caption */
  padding: clamp(48px, 6vw, 80px) 0 clamp(8px, 2vw, 18px);
  text-align: center;
  /* allow Israel tooltip to paint above section bounds / hero seam */
  overflow: visible;
  position: relative;
  z-index: 2;
}

.trust-cap {
  position: relative;
  display: block;
  font-size: var(--mypr-font-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  margin-bottom: 26px;
  padding-inline: clamp(18px, 4vw, 32px);
  overflow: visible;
}

/* —— Israel tip: dual soft brushes + map-draw ——
   Open via .is-open (trust section inview, once) or hover / focus. */
.il-hot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  cursor: pointer;
  color: var(--azure, #0b7cf0);
  font-weight: 900;
  letter-spacing: 0.04em;
  outline: none;
  white-space: nowrap;
  padding-bottom: 0.12em;
  margin-inline-start: 0.28em;
}

.il-hot:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(11, 124, 240, 0.35);
}

.il-word {
  position: relative;
  z-index: 1;
}

/* Two soft brush strokes under the word (white + blue) */
.il-brushes {
  position: absolute;
  inset-inline: -6%;
  bottom: 0.02em;
  height: 0.42em;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.il-brush {
  position: absolute;
  inset-inline: 0;
  border-radius: 999px;
  transform: scaleX(0);
  will-change: transform;
}

/* Soft white brush — draws first */
.il-brush-w {
  bottom: 0.08em;
  height: 72%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.2)
  );
  filter: blur(0.6px);
  opacity: 0.9;
  transform-origin: var(--il-brush-from, left center);
  transition: transform 0.48s cubic-bezier(0.22, 0.9, 0.28, 1);
}

/* Soft blue brush — slightly offset, follows */
.il-brush-b {
  bottom: -0.06em;
  height: 78%;
  background: linear-gradient(
    90deg,
    rgba(11, 124, 240, 0.08),
    rgba(27, 196, 254, 0.42),
    rgba(11, 124, 240, 0.12)
  );
  filter: blur(1.1px);
  opacity: 0.95;
  transform-origin: var(--il-brush-from, left center);
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.28, 1) 0.07s;
}

/* LTR default: brush grows from left. RTL: grow from right (reading start). */
.page[dir="rtl"] .il-brush-w,
.page[dir="rtl"] .il-brush-b {
  --il-brush-from: right center;
}

.page[dir="ltr"] .il-brush-w,
.page[dir="ltr"] .il-brush-b {
  --il-brush-from: left center;
}

.il-hot.is-open .il-brush,
.il-hot:hover .il-brush,
.il-hot:focus-visible .il-brush {
  transform: scaleX(1);
}

/* Tooltip card with map — above the caption; z-index above hero seam */
.il-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate3d(-50%, 10px, 0) scale(0.94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  min-width: 108px;
  background: #fff;
  border: 1px solid var(--line, #e6ecf5);
  border-radius: 16px;
  box-shadow:
    0 18px 40px -16px rgba(11, 16, 32, 0.35),
    0 0 0 1px rgba(11, 124, 240, 0.06);
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 0.9, 0.28, 1),
    visibility 0s linear 0.34s;
}

.il-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 1px 0 var(--line, #e6ecf5));
}

.il-hot.is-open .il-tip,
.il-hot:hover .il-tip,
.il-hot:focus-visible .il-tip {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 0.9, 0.28, 1),
    visibility 0s linear 0s;
}

.il-tip-label {
  font-size: var(--mypr-font-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--azure, #0b7cf0);
  text-transform: uppercase;
}

/* Map draw — stroke first, then soft fill + city dot */
.il-map {
  display: block;
  overflow: visible;
  /* keep the tall Israel silhouette readable in the tip */
  flex: none;
}

.il-map-outline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke: #0b7cf0;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* avoid non-scaling-stroke — it broke dash length on some engines */
}

.il-map-fill {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.97);
}

.il-map-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
}

.trust-map-accent {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  margin: 0;
  padding: 0;
  cursor: default;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.trust-map-accent .il-map {
  width: 34px;
  height: auto;
}


/* Open state: play draw once (inview class or hover/focus) */
.il-hot.is-open .il-map-outline,
.trust-map-accent.is-open .il-map-outline,
.il-hot:hover .il-map-outline,
.il-hot:focus-visible .il-map-outline {
  animation: il-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.il-hot.is-open .il-map-fill,
.trust-map-accent.is-open .il-map-fill,
.il-hot:hover .il-map-fill,
.il-hot:focus-visible .il-map-fill {
  animation: il-fill 0.55s ease-out 0.78s forwards;
}

.il-hot.is-open .il-map-dot,
.trust-map-accent.is-open .il-map-dot,
.il-hot:hover .il-map-dot,
.il-hot:focus-visible .il-map-dot {
  animation: il-dot 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) 1.05s forwards;
}

@keyframes il-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes il-fill {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes il-dot {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Reset only when fully closed — keeps inview animation intact without hover */
.il-hot:not(.is-open):not(:hover):not(:focus-visible) .il-map-outline {
  animation: none;
  stroke-dashoffset: 1;
}

.trust-map-accent:not(.is-open) .il-map-outline {
  animation: none;
  stroke-dashoffset: 1;
}

.il-hot:not(.is-open):not(:hover):not(:focus-visible) .il-map-fill,
.il-hot:not(.is-open):not(:hover):not(:focus-visible) .il-map-dot {
  animation: none;
  opacity: 0;
  transform: scale(0.4);
}

.trust-map-accent:not(.is-open) .il-map-fill,
.trust-map-accent:not(.is-open) .il-map-dot {
  animation: none;
  opacity: 0;
  transform: scale(0.4);
}

.il-hot:not(.is-open):not(:hover):not(:focus-visible) .il-map-fill {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .il-brush-w,
  .il-brush-b {
    transition: none;
  }

  .il-hot.is-open .il-brush,
  .il-hot:hover .il-brush,
  .il-hot:focus-visible .il-brush {
    transform: scaleX(1);
  }

  .il-hot.is-open .il-map-outline,
  .trust-map-accent.is-open .il-map-outline,
  .il-hot:hover .il-map-outline,
  .il-hot:focus-visible .il-map-outline {
    animation: none;
    stroke-dashoffset: 0;
  }

  .il-hot.is-open .il-map-fill,
  .trust-map-accent.is-open .il-map-fill,
  .il-hot:hover .il-map-fill,
  .il-hot:focus-visible .il-map-fill,
  .il-hot.is-open .il-map-dot,
  .trust-map-accent.is-open .il-map-dot,
  .il-hot:hover .il-map-dot,
  .il-hot:focus-visible .il-map-dot {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .il-tip {
    transition: opacity 0.15s ease;
  }
}

.trust-marquee {
  --trust-gap: clamp(28px, 4vw, 48px);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.trust-marquee .infinite-carousel__track,
.trust-marquee .infinite-carousel__half,
.trust-marquee .infinite-carousel__unit,
.trust-marquee .infinite-carousel__item {
  align-items: center;
}

.trust-item {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line, #e6ecf5);
  box-shadow: 0 4px 14px -8px rgba(11, 16, 32, 0.12);
  cursor: default;
  /* no hover lift/pause — strip stays flat so chips read as one continuous row */
}

/*
 * Light/white outlet marks (kan, reshet13, mako, …) — ink plate matches
 * OUTLET_LOGO_ON_DARK_PLATE so wordmarks stay legible on the paper strip.
 */
.trust-item--on-dark {
  background: var(--ink, #0b1020);
  border-color: rgba(11, 16, 32, 0.92);
  box-shadow:
    0 6px 18px -10px rgba(11, 16, 32, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.trust-item--on-dark .outlet-word {
  color: #fff;
}

.trust-item--wordmark .outlet-word {
  color: var(--ink, #0b1020);
  font-size: var(--mypr-font-body-sm);
  font-weight: 850;
  white-space: nowrap;
}

/* Official full-color webp marks — never stretch, never gray wash.
   Wide max-width so full Hebrew wordmarks (ישראל היום, וואלה…) stay readable. */
.outlet-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Icon-only marks (mako, globes) sit next to a brand word so they match wordmark chips */
.outlet-logo--icon {
  height: 26px;
  width: 26px;
  max-width: 26px;
  flex: none;
}

.outlet-word {
  font-size: var(--mypr-font-body-sm);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink, #0b1020);
  white-space: nowrap;
  line-height: 1;
}

.trust-item[data-outlet="mako"] .outlet-word {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.trust-item[data-outlet="globes"] .outlet-word {
  color: #7a1530;
  font-weight: 800;
}

/* Mako on ink plate — keep the word white for contrast */
.trust-item--on-dark[data-outlet="mako"] .outlet-word {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .trust-marquee .infinite-carousel__track,
  .trust-marquee .infinite-carousel__half:first-child,
  .trust-marquee .infinite-carousel__unit:first-child {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
  }

  .trust-marquee .infinite-carousel__unit:first-child {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: clamp(18px, 4vw, 32px);
    gap: clamp(14px, 2.5vw, 28px);
  }

  .trust-marquee .infinite-carousel__half:last-child,
  .trust-marquee .infinite-carousel__unit:not(:first-child) {
    display: none;
  }

  .trust-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
}