/* ============================================
   Bartlett Butter — Marketing Style
   Per-app rich sections layered on top of the shared subpage.css chrome.
   Loaded only on marketing pages (see _layouts/default.html). Anything here
   is additive: apps without showcase data never render these elements.
   ============================================ */

/* Marketing pages use a dedicated wrapper (`.app-page`) inside `.content-body`.
   Paint a full-bleed backdrop behind that wrapper so any spacing between rich
   sections stays in the app's palette instead of falling back to white. */
.app-page {
  position: relative;
  isolation: isolate;
}

.app-page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--app-page-bg, transparent);
  pointer-events: none;
  z-index: -1;
}

/* Match the usable content width of the rich middle sections (which are
   centered within a 1120px measure) for the opening hero cluster and the
   closing CTA panel, so the first and last blocks align with the rest. */
.marketing-hero-shell,
.marketing-cta-panel {
  width: min(calc(100vw - 2 * clamp(20px, 4vw, 40px)), 1120px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.marketing-hero-shell > p {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Shared marketing modules ─── */
.marketing-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 20px;
}

.marketing-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--app-accent-rgb), 0.14);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 28px rgba(3, 7, 18, 0.04);
  color: var(--app-accent-strong, var(--color-text-strong));
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.marketing-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}

.marketing-stat {
  padding: 24px 22px;
  border-radius: 24px;
  border: 1px solid rgba(var(--app-accent-rgb), 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 100%);
  box-shadow: var(--app-card-shadow);
  text-align: center;
}

.marketing-stat-value {
  display: block;
  font-family: var(--app-display-font, var(--font));
  font-size: clamp(26px, 3vw, 34px);
  font-weight: var(--app-display-weight, 700);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--app-accent-strong, var(--color-text-strong));
}

.marketing-stat-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.marketing-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 12px;
}

.marketing-cta-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}

/* subpage.js enhances the App Store link into a `.store-badges` flex row and
   appends a Google Play badge plus a hidden "in progress" note. That row has no
   justify-content (it is left-aligned on subpages by brand direction), and the
   trailing note still occupies layout space, which pushes the visible badges
   left of center inside the hero. In the centered hero, center the row's
   contents and let the note sit on its own line so the badges are truly
   centered on the page. */
.marketing-cta-badges .store-badges {
  justify-content: center;
  width: 100%;
  margin: 0;
}

.marketing-cta-badges .store-badges .store-badge-note {
  flex-basis: 100%;
  justify-content: center;
}

.marketing-cta-badges a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.marketing-cta-badges img {
  display: block;
  height: auto;
}

.marketing-meta-note {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.marketing-meta-note--center {
  text-align: center;
}

/* A meta-note placed directly after a module grid (e.g. the Apple Weather
   attribution under the JourneyFolio feature grid) would otherwise sit flush
   against the bottom row of cards. Give it clear breathing room from the grid. */
.marketing-card-grid + .marketing-meta-note,
.marketing-price-grid + .marketing-meta-note,
.marketing-step-grid + .marketing-meta-note,
.marketing-story-grid + .marketing-meta-note {
  margin-top: 40px;
}

.marketing-band {
  position: relative;
  overflow: hidden;
  /* Full-bleed: break out of the centered, max-width .content-body so the
     band's background reaches both viewport edges (matching the landing
     page's edge-to-edge sections) instead of stopping at the content box
     and leaving white gutters left and right. */
  margin-top: 72px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Center the band's content within the same max-width as the rest of the
     page (app-header-inner is 1120px), so full-bleeding the background does
     not stretch the content edge-to-edge. */
  padding-top: clamp(48px, 6vw, 64px);
  padding-bottom: clamp(48px, 6vw, 64px);
  padding-left: max(clamp(20px, 4vw, 40px), calc(50vw - 560px));
  padding-right: max(clamp(20px, 4vw, 40px), calc(50vw - 560px));
  border-top: 1px solid rgba(var(--app-accent-rgb), 0.14);
  background: var(--app-ambient, linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.96) 100%));
}

.marketing-band::before,
.marketing-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.marketing-band::before {
  inset: -110px auto auto -90px;
  width: 240px;
  height: 240px;
  background: rgba(var(--app-accent-rgb), 0.1);
  filter: blur(6px);
}

.marketing-band::after {
  inset: auto -80px -120px auto;
  width: 260px;
  height: 260px;
  background: rgba(var(--app-accent-strong-rgb), 0.08);
  filter: blur(8px);
}

.marketing-band--plain {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.93) 100%);
}

.marketing-band--plain::before {
  background: rgba(var(--app-accent-rgb), 0.06);
}

.marketing-band > * {
  position: relative;
  z-index: 1;
}

.marketing-section-head {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}

.marketing-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-accent-strong, var(--color-text-muted));
}

h2.marketing-section-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--app-display-font, var(--font));
  font-size: clamp(27px, 3.8vw, 38px);
  font-weight: var(--app-display-weight, 700);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--color-text-strong);
}

.marketing-section-intro {
  max-width: 60ch;
  margin: 16px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.marketing-card-grid,
.marketing-price-grid,
.marketing-step-grid,
.marketing-story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.marketing-card-grid > *,
.marketing-price-grid > *,
.marketing-step-grid > *,
.marketing-story-grid > * {
  grid-column: span 12;
}

.marketing-card-grid--two > * {
  grid-column: span 6;
}

.marketing-card-grid--three > * {
  grid-column: span 4;
}

.marketing-card-grid--four > * {
  grid-column: span 3;
}

.marketing-story-grid > * {
  grid-column: span 6;
}

.marketing-price-grid > * {
  grid-column: span 6;
}

.marketing-card,
.marketing-step,
.marketing-price-card,
.marketing-story-card {
  height: 100%;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(var(--app-accent-rgb), 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 100%);
  box-shadow: var(--app-card-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.marketing-card h3,
.marketing-step h3,
.marketing-price-card h3,
.marketing-story-card h3 {
  margin: 0 0 10px;
  font-family: var(--app-display-font, var(--font));
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--color-text-strong);
}

.marketing-card p,
.marketing-step p,
.marketing-price-card p,
.marketing-story-card p {
  margin: 0;
  color: var(--color-text);
}

.marketing-card--featured,
.marketing-price-card.is-featured {
  border-color: rgba(var(--app-accent-strong-rgb), 0.18);
  background: linear-gradient(160deg, rgba(var(--app-accent-rgb), 0.12) 0%, rgba(255, 255, 255, 0.96) 72%);
}

.marketing-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.marketing-list li {
  position: relative;
  padding-inline-start: 18px;
  margin-bottom: 10px;
  color: var(--color-text);
}

.marketing-list li:last-child {
  margin-bottom: 0;
}

.marketing-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-accent, var(--color-text-strong));
  transform: translateY(-50%);
}

.marketing-step-grid {
  counter-reset: marketing-step;
}

.marketing-step {
  position: relative;
  padding-inline-start: 82px;
  counter-increment: marketing-step;
}

.marketing-step::before {
  content: counter(marketing-step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 22px;
  top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--app-accent) 0%, var(--app-accent-strong) 100%);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.marketing-price-tier {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--app-accent-rgb), 0.1);
  color: var(--app-accent-strong, var(--color-text-strong));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h3.marketing-price-summary {
  margin-top: 18px;
  font-family: var(--app-display-font, var(--font));
  font-size: 29px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--color-text-strong);
}

.marketing-price-note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.marketing-cta-panel {
  margin-top: 72px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(var(--app-accent-strong-rgb), 0.98) 0%, rgba(var(--app-accent-rgb), 0.92) 100%);
  box-shadow: 0 32px 88px rgba(3, 7, 18, 0.18);
  color: #FFFFFF;
  text-align: center;
}

.marketing-cta-panel h2,
.marketing-cta-panel h3,
.marketing-cta-panel p {
  color: inherit;
}

.marketing-cta-panel h2,
.marketing-cta-panel h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--app-display-font, var(--font));
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.marketing-cta-panel p {
  max-width: 56ch;
  margin: 14px auto 0;
  opacity: 0.92;
}

.marketing-link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.marketing-inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.marketing-inline-link:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.36);
  transform: translateY(-1px);
}

/* Static variant: displays a value (e.g. an email address) inside the link row
   without being clickable. Keeps the pill look but drops the interactive cues. */
.marketing-inline-link--static {
  cursor: default;
}

.marketing-inline-link--static:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  transform: none;
}

.marketing-inline-link:focus-visible,
.app-cta:focus-visible {
  outline: 3px solid rgba(var(--app-accent-rgb), 0.28);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .marketing-card:hover,
  .marketing-step:hover,
  .marketing-price-card:hover,
  .marketing-story-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--app-accent-strong-rgb), 0.16);
    box-shadow: 0 30px 76px rgba(3, 7, 18, 0.1);
  }
}

/* ─── Screenshot showcase ─── */
/* Full-bleed: break out of the centered, max-width .content-body so the
   showcase background reaches both viewport edges, then center its content
   within the page's shared max-width (matches .marketing-band). */
.app-showcase {
  position: relative;
  overflow: hidden;
  margin-top: 72px;
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: clamp(56px, 7vw, 72px);
  padding-bottom: 16px;
  padding-left: max(clamp(20px, 4vw, 40px), calc(50vw - 560px));
  padding-right: max(clamp(20px, 4vw, 40px), calc(50vw - 560px));
  border-top: 1px solid var(--color-border);
  background:
    radial-gradient(circle at top left, var(--app-accent-soft, var(--color-bg-subtle)) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%);
}

/* Consecutive full-bleed marketing sections should read as a continuous stack.
   Remove the white seam created by standalone top margins when these modules
   appear back-to-back. */
.app-showcase + .marketing-band,
.marketing-band + .marketing-band,
.marketing-band + .app-showcase {
  margin-top: 0;
}

.app-showcase::before {
  content: "";
  position: absolute;
  inset: auto -120px -120px auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--app-accent-soft, var(--color-bg-subtle));
  filter: blur(8px);
  opacity: 0.8;
}

.app-showcase > * {
  position: relative;
  z-index: 1;
}

.app-showcase-head {
  max-width: 640px;
  margin: 0 auto 8px;
  text-align: center;
}

.app-showcase-label {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-accent-strong, var(--color-text-muted));
}

.app-showcase-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}

.app-showcase-intro {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.app-showcase-list {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 32px);
  margin-top: clamp(40px, 6vw, 56px);
}

.showcase-item {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.86) 100%);
  box-shadow: 0 24px 60px rgba(3, 7, 18, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* Alternate which side the mockup sits on down the page. */
.showcase-item:nth-child(even) {
  flex-direction: row-reverse;
}

.showcase-media {
  flex: none;
  width: clamp(248px, 27vw, 296px);
  padding: 10px;
  border-radius: 30px;
  border: 1px solid var(--app-accent-soft, var(--color-border));
  background: linear-gradient(180deg, #FFFFFF 0%, var(--app-accent-soft, var(--color-bg-subtle)) 100%);
}

.showcase-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(3, 7, 18, 0.12);
}

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

.showcase-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--app-accent-soft, var(--color-border));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--app-accent-strong, var(--color-text-muted));
}

.showcase-item-title {
  font-size: 24px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
  margin-bottom: 12px;
}

.showcase-item-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 42ch;
}

@media (hover: hover) and (pointer: fine) {
  .showcase-item:hover,
  .showcase-item:focus-within {
    transform: translateY(-2px);
    border-color: var(--app-accent-soft, var(--color-border));
    box-shadow: 0 28px 64px rgba(3, 7, 18, 0.08);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .app-showcase {
    margin-top: 64px;
    padding-top: 60px;
  }

  .showcase-item {
    gap: 32px;
    padding: 28px;
  }

  .showcase-media {
    width: 252px;
  }
}

/* ─── Scroll reveal ─── */
/* Reveal targets are only hidden once marketing.js has confirmed it can animate
   them (it adds .js-reveal to <html>). Without JS — or under reduced motion,
   where the script deliberately skips adding the class — .reveal stays fully
   visible, so content is never trapped behind an animation that won't run. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Gallery frames live in a horizontal scroller, so frames off-screen to the
   right never intersect the viewport and would stay stuck hidden. Keep them
   always visible (the gallery heading still fades in) so every mockup is
   rendered and reachable by scrolling the strip. */
.js-reveal .hero-gallery-frame.reveal {
  opacity: 1;
  transform: none;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .marketing-chip-row {
    margin-top: 24px;
  }

  .marketing-stat-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .marketing-band {
    /* Keep the full-bleed left/right margins from the base rule; only tighten
       vertical rhythm on phones. */
    margin-top: 56px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .marketing-section-head {
    margin-bottom: 24px;
  }

  h2.marketing-section-title {
    font-size: 26px;
  }

  .marketing-card-grid--two > *,
  .marketing-card-grid--three > *,
  .marketing-card-grid--four > *,
  .marketing-story-grid > *,
  .marketing-price-grid > * {
    grid-column: span 12;
  }

  .marketing-card,
  .marketing-step,
  .marketing-price-card,
  .marketing-story-card {
    padding: 22px 20px;
  }

  .marketing-step {
    padding-inline-start: 20px;
    padding-top: 72px;
  }

  .marketing-step::before {
    inset-inline-start: 20px;
    top: 18px;
  }

  .marketing-cta-panel {
    margin-top: 56px;
    padding: 28px 20px;
  }

  /* Keep the full-bleed left/right margins from the base rule; only tighten
     vertical rhythm on phones. */
  .app-showcase {
    margin-top: 56px;
    margin-bottom: 0;
    padding-top: 48px;
    padding-bottom: 12px;
  }

  .app-showcase-title {
    font-size: 22px;
  }

  .app-showcase-list {
    gap: 20px;
    margin-top: 44px;
  }

  .showcase-item,
  .showcase-item:nth-child(even) {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    padding: 24px 20px;
  }

  .showcase-media {
    width: 232px;
    padding: 8px;
  }

  .showcase-step {
    margin-inline: auto;
  }

  .showcase-item-title {
    font-size: 20px;
  }

  .showcase-item-body {
    max-width: none;
  }
}

/* Respect reduced-motion: even if .js-reveal is present, show targets
   immediately with no transition. (marketing.js also skips adding .js-reveal
   under reduced motion, so this is a belt-and-suspenders safeguard.) */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Hero mockup gallery ─── */
/* The marketing hero needs two behaviors:
   1. A safe fallback strip that always exposes every screenshot.
   2. A desktop enhancement that turns the same row into a slow marquee that
      glides left-to-right, similar to a polished product showcase. */
.hero-gallery {
  position: relative;
  margin: clamp(32px, 5vw, 48px) 0 8px;
  padding-inline: clamp(4px, 1vw, 12px);
}

.hero-gallery-head {
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: center;
}

.hero-gallery-label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-accent-strong, var(--color-text-muted));
}

.hero-gallery-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}

.hero-gallery-track--fallback,
.hero-gallery-marquee {
  --hero-gallery-gap: clamp(14px, 2vw, 24px);
  --hero-gallery-gutter: clamp(18px, 3vw, 34px);
}

/* Fallback: keep every screenshot reachable in one horizontal strip. */
.hero-gallery-track--fallback {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--hero-gallery-gap);
  width: 100%;
  max-width: calc(5 * 200px + 4 * 24px + 2 * var(--hero-gallery-gutter));
  margin: 0 auto;
  padding: 12px var(--hero-gallery-gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Enhanced desktop marquee: hidden until marketing.js confirms that hover and
   motion are appropriate. */
.hero-gallery-marquee {
  display: none;
  width: min(100%, calc(5 * 200px + 4 * 24px + 2 * var(--hero-gallery-gutter)));
  margin: 0 auto;
  padding: 12px var(--hero-gallery-gutter) 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.hero-gallery-marquee-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--hero-gallery-gap);
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation: hero-gallery-marquee 42s linear infinite;
  will-change: transform;
}

.hero-gallery-marquee-group {
  display: flex;
  align-items: flex-start;
  gap: var(--hero-gallery-gap);
}

.js-gallery-marquee .hero-gallery-marquee {
  display: block;
}

/* Keep the authored strip available to assistive tech even when the visual
   desktop enhancement is active. */
.js-gallery-marquee .hero-gallery-track--fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes hero-gallery-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--hero-gallery-loop-width, 0px)), 0, 0);
  }
}

@media (min-width: 769px) {
  .hero-gallery-track--fallback {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-30) transparent;
  }

  .hero-gallery-track--fallback::-webkit-scrollbar {
    height: 6px;
  }

  .hero-gallery-track--fallback::-webkit-scrollbar-track {
    background: transparent;
  }

  .hero-gallery-track--fallback::-webkit-scrollbar-thumb {
    background: var(--neutral-30);
    border-radius: 999px;
  }
}

.hero-gallery-frame {
  flex: 0 0 auto;
  width: 200px;
  margin: 0;
  padding: 8px;
  border-radius: 26px;
  border: 1px solid var(--app-accent-soft, var(--color-border));
  background: linear-gradient(180deg, #FFFFFF 0%, var(--app-accent-soft, var(--color-bg-subtle)) 100%);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero-gallery-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(3, 7, 18, 0.14);
}

@media (hover: hover) and (pointer: fine) {
  .hero-gallery-frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(3, 7, 18, 0.12);
  }

  .js-gallery-marquee .hero-gallery-marquee:hover .hero-gallery-marquee-inner,
  .js-gallery-marquee .hero-gallery-marquee:focus-within .hero-gallery-marquee-inner {
    animation-play-state: paused;
  }
}

@media (max-width: 768px) {
  .hero-gallery {
    margin: 32px -20px 4px;
    padding: 0 20px;
  }

  .hero-gallery-title {
    font-size: 22px;
  }

  .hero-gallery-track--fallback {
    gap: 16px;
    max-width: none;
    margin: 0 -20px;
    padding: 4px 20px 12px;
    scroll-snap-type: x mandatory;
  }

  .hero-gallery-marquee {
    display: none !important;
  }

  .hero-gallery-frame {
    width: 60vw;
    max-width: 240px;
    scroll-snap-align: center;
  }
}

@media (max-width: 1100px) {
  .js-gallery-marquee .hero-gallery-track--fallback {
    position: static;
    width: 100%;
    height: auto;
    padding: 12px var(--hero-gallery-gutter) 16px;
    margin: 0 auto;
    overflow-x: auto;
    clip: auto;
    clip-path: none;
    white-space: normal;
    border: 0;
  }

  .js-gallery-marquee .hero-gallery-marquee {
    display: none !important;
  }
}