/* ============================================================================
   GlossOne — design system
   Apple-inspired: solid, grounded surfaces with defined borders and layered
   shadows, over a soft ambient aurora. Full light + dark mode. Flat accents,
   marketing-grade hierarchy.
   ========================================================================== */

:root {
  /* --- Surfaces & ink (light) --- */
  --bg: #eef0f5;
  --bg-tint: #e9ecf4;
  --ink: #1d1d1f;
  --ink-soft: #43454c;
  --ink-mute: #6e7079;

  /* --- Accent --- */
  --blue: #0a84ff;
  --blue-deep: #0060df;
  --green: #1faa54;

  /* Neutral icon chip + blue stroke icon — calm, restrained (Apple/Linear) */
  --accent-soft: rgba(20, 30, 60, 0.05);
  --accent-soft-line: rgba(20, 30, 60, 0.09);
  --accent-on-soft: #0a6ce0;

  --line: rgba(20, 30, 60, 0.12);
  --line-strong: rgba(20, 30, 60, 0.16);
  --radius: 22px;
  --radius-sm: 16px;

  /* Solid, grounded surface (cards, panels) — reads professional, not floaty */
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(16, 24, 48, 0.05), 0 14px 30px -16px rgba(16, 24, 48, 0.22);
  --card-shadow-hover: 0 1px 2px rgba(16, 24, 48, 0.06), 0 24px 46px -18px rgba(16, 24, 48, 0.3);

  --maxw: 1140px;

  --font-latin: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Helvetica Neue", system-ui;
  --font: var(--font-latin), "PingFang SC", "Hiragino Sans",
    "Apple SD Gothic Neo", sans-serif;
}

:lang(zh) {
  --font: var(--font-latin), "PingFang SC", "Microsoft YaHei", sans-serif;
}
:lang(ja) {
  --font: var(--font-latin), "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", sans-serif;
}
:lang(ko) {
  --font: var(--font-latin), "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0b10;
    --bg-tint: #101218;
    --ink: #f5f5f7;
    --ink-soft: #c2c4cc;
    --ink-mute: #8b8d97;

    --blue: #409cff;
    --blue-deep: #0a84ff;
    --green: #3ecf73;

    --accent-soft: rgba(255, 255, 255, 0.06);
    --accent-soft-line: rgba(255, 255, 255, 0.11);
    --accent-on-soft: #6cb0ff;

    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.18);

    --card-bg: #16181f;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 34px -16px rgba(0, 0, 0, 0.62);
    --card-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.5), 0 26px 50px -18px rgba(0, 0, 0, 0.72);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Aurora light field — fixed, sits behind everything, soft moving color */
/* Exactly the viewport, with overflow clipped. The drifting gradient lives on
   the ::before so its blur/scale bleed can spill past the edges without making
   the page pannable — a fixed element wider than the viewport escapes html/body
   overflow clipping, so the bleed has to be contained here instead. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: clip;
}
.aurora::before {
  content: "";
  position: absolute;
  inset: -20vh -10vw;
  background:
    radial-gradient(42% 48% at 15% 6%, rgba(10, 132, 255, 0.18), transparent 60%),
    radial-gradient(38% 44% at 88% 4%, rgba(106, 92, 255, 0.14), transparent 60%),
    radial-gradient(44% 50% at 86% 80%, rgba(25, 195, 201, 0.1), transparent 62%);
  filter: blur(40px) saturate(115%);
  opacity: 0.55;
  animation: auroraDrift 32s ease-in-out infinite alternate;
}
@media (prefers-color-scheme: dark) {
  .aurora::before { opacity: 0.5; }
}
@keyframes auroraDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.12); }
}

a { color: inherit; text-decoration: none; }

/* ================================ Nav ================================== */
.nav {
  position: sticky;
  top: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(calc(100% - 28px), var(--maxw));
  margin: 14px auto 0;
  padding: 11px 14px 11px 22px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
}
.nav__brand img {
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(24, 39, 75, 0.18);
}
.nav__links {
  display: flex;
  gap: 6px;
  margin-left: auto;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.nav__links a {
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.nav__links a:hover { color: var(--ink); background: rgba(127, 140, 170, 0.14); }
.nav__right { display: flex; align-items: center; gap: 12px; margin-left: 6px; }

/* Hamburger — hidden on desktop, revealed when the inline links collapse */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink-soft);
  background: rgba(127, 140, 170, 0.14);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav__toggle:hover { color: var(--ink); background: rgba(127, 140, 170, 0.22); }
.nav__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle-close { display: none; }
.nav.is-menu-open .nav__toggle-open { display: none; }
.nav.is-menu-open .nav__toggle-close { display: block; }

/* Language menu */
.lang-menu { position: relative; }
.lang-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(127, 140, 170, 0.14);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lang-menu__btn:hover { color: var(--ink); background: rgba(127, 140, 170, 0.22); }
.lang-menu__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lang-menu__globe { width: 16px; height: 16px; flex: none; }
.lang-menu__current { white-space: nowrap; }
.lang-menu__chev {
  width: 11px; height: 11px; flex: none; opacity: 0.55;
  transition: transform 0.2s ease;
}
.lang-menu.is-open .lang-menu__chev { transform: rotate(180deg); }
.lang-menu__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 184px;
  margin: 0;
  padding: 7px;
  list-style: none;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--card-shadow-hover);
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.lang-menu.is-open .lang-menu__list {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.lang-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.lang-menu__item:hover,
.lang-menu__item:focus-visible { background: rgba(127, 140, 170, 0.16); outline: none; }
.lang-menu__item.is-active { font-weight: 600; }
.lang-menu__check { width: 15px; height: 15px; flex: none; color: var(--blue); opacity: 0; }
.lang-menu__item.is-active .lang-menu__check { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lang-menu__chev, .lang-menu__list, .aurora::before { transition: none; animation: none; }
}

@media (max-width: 1080px) {
  .nav__toggle { display: inline-flex; }
  .nav__right { margin-left: auto; }

  /* Inline links become a dropdown panel anchored under the nav pill */
  .nav__links {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    margin-left: 0;
    padding: 8px;
    font-size: 15px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--card-shadow-hover);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 60;
  }
  .nav__links a { padding: 10px 14px; }
  .nav.is-menu-open .nav__links {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .nav__links { transition: none; }
}

@media (max-width: 820px) {
  .lang-menu__current { display: none; }
}

/* Phones — tighten the nav pill so it never overflows its rounded edge */
@media (max-width: 480px) {
  .nav {
    gap: 8px;
    width: min(calc(100% - 16px), var(--maxw));
    padding: 8px 10px 8px 14px;
  }
  .nav__brand { font-size: 16px; gap: 8px; }
  .nav__brand img { width: 28px; height: 28px; }
  .nav__right { gap: 7px; }
  .lang-menu__btn { padding: 0 10px; gap: 5px; }
  .btn--small { min-width: 0; padding: 0 15px; font-size: 13.5px; }
}

/* ============================== Buttons ================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 550;
  font-size: 15px;
  border-radius: 999px;
  padding: 10px 22px;
  transition: transform 0.14s ease, box-shadow 0.22s ease, background 0.22s ease;
  white-space: nowrap;
}
.btn--small {
  height: 36px;
  padding: 0 20px;
  font-size: 14px;
  min-width: 108px;
  color: #fff;
  background: var(--blue);
}
.btn--small:hover { background: var(--blue-deep); transform: translateY(-1px); }

/* Mac App Store official badge */
.mas-badge {
  display: inline-flex;
  padding: 10px;
  border-radius: 14px;
  transition: transform 0.14s ease, opacity 0.2s ease;
}
.mas-badge img { display: block; height: 52px; width: auto; }
.mas-badge:hover { transform: translateY(-2px); opacity: 0.9; }
.mas-badge:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ================================ Hero ================================= */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(56px, 9vw, 104px) 20px clamp(36px, 5vw, 60px);
}
.hero > * { max-width: 100%; }

.hero__icon {
  width: 132px; height: 132px;
  border-radius: 30px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 30px 60px -20px rgba(24, 39, 75, 0.4);
  margin-bottom: 30px;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero__title {
  font-size: clamp(52px, 9vw, 92px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--ink);
}
.hero__tagline {
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 600;
  color: var(--ink);
  max-width: 720px;
  margin: 20px auto 0;
  letter-spacing: -0.015em;
  line-height: 1.22;
}
.hero__sub {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--ink-soft);
  max-width: 600px;
  margin: 18px auto 0;
}
.hero__cta { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 6px;
}
.hero__check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.hero__check svg { color: var(--green); flex: none; }

/* Hero product shot — clean, grounded frame */
.hero__showcase {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: clamp(48px, 6vw, 80px) auto 0;
}
.hero__showcase img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line);
  box-shadow:
    0 2px 6px rgba(16, 24, 48, 0.06),
    0 40px 80px -32px rgba(16, 24, 48, 0.4);
  aspect-ratio: 2560 / 1600;
  object-fit: cover;
}

/* =========================== How it works ============================= */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 34px 32px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16, 24, 48, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.step:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(16, 24, 48, 0.22);
  border-color: var(--line-strong);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* No chip — a large accent numeral marks the step (editorial/Apple) */
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue);
  margin-bottom: 14px;
}
.step h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.step p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }

/* ============================== Sections ============================== */
.section {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  /* Vertical rhythm: each section pads top+bottom, so adjacent sections stack
     two of these. Kept tight and responsive — ~88px gap on phones up to
     ~160px on wide desktops. */
  padding: clamp(44px, 6.5vw, 80px) clamp(20px, 5vw, 48px);
}
.section--tint {
  max-width: none;
  background: linear-gradient(180deg, transparent, var(--bg-tint) 14%, var(--bg-tint) 86%, transparent);
}
.section--tint > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section__eyebrow {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.section__title {
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-align: center;
}
.section__lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-soft);
  text-align: center;
  max-width: 660px;
  margin: 18px auto 0;
}

/* ============================ Feature grid ============================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 56px;
}
.card {
  position: relative;
  padding: 34px 32px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--line);
  /* Hairline border carries separation; near-flat resting shadow avoids the heavy double-up */
  box-shadow: 0 1px 2px rgba(16, 24, 48, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(16, 24, 48, 0.22);
  border-color: var(--line-strong);
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* No chip — a larger bare accent icon sits directly above the title (editorial/Apple) */
  color: var(--blue);
  margin-bottom: 14px;
  transition: color 0.22s ease, transform 0.22s ease;
}
.card__icon svg { width: 30px; height: 30px; }
.card:hover .card__icon { transform: translateY(-1px); }
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.card p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }

/* =============================== Hosts =============================== */
.hosts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 52px;
}
.hosts li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 11px 19px;
  font-size: 15px;
  font-weight: 550;
  color: var(--ink-soft);
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.hosts li:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--line-strong);
  color: var(--ink);
}
.host__logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.host__sep { color: var(--line); font-weight: 400; margin: 0 -2px; }

/* ============================ Privacy pillars ======================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.pillar {
  position: relative;
  padding: 34px 32px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16, 24, 48, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.pillar:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(16, 24, 48, 0.22);
  border-color: var(--line-strong);
}
/* Icon-on-top, title below — consistent with steps & feature cards */
.pillar__head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px; }
.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--blue);
  margin-bottom: 14px;
}
.pillar__icon svg { width: 30px; height: 30px; }
.pillar h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.pillar p { font-size: 15px; color: var(--ink-soft); }
.pillar code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: rgba(127, 140, 170, 0.16);
  padding: 1px 6px;
  border-radius: 6px;
}

/* Phones — swipeable carousel instead of a tall stack of full-width cards.
   The peeking next card plus the edge mask-fade signal that it scrolls
   (matches the screenshots gallery), so no JS or arrows are needed.
   Applied to the feature, step and privacy-pillar rows alike.
   Placed after all three base definitions so it wins the cascade. */
@media (max-width: 600px) {
  .grid, .steps, .pillars {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    margin-top: 36px;
    /* Break out of the section's 20px side padding so cards reach the edges */
    margin-left: -20px;
    margin-right: -20px;
    padding: 6px 20px 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .grid::-webkit-scrollbar,
  .steps::-webkit-scrollbar,
  .pillars::-webkit-scrollbar { display: none; }
  .card, .step, .pillar {
    flex: 0 0 80%;
    scroll-snap-align: start;
    padding: 28px 26px;
  }
}

/* Carousel pagination dots (built by carousel-dots.js).
   Hidden by default; shown on phones for the card carousels, and at every
   width for the screenshots gallery (which is a carousel on desktop too). */
.carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}
.carousel-dots__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carousel-dots__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ink-mute);
  opacity: 0.45;
  transition: width 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}
.carousel-dots__dot.is-active::before {
  width: 20px;
  opacity: 1;
  background: var(--blue);
}
.carousel-dots__dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 999px; }

/* Gallery dots show on desktop too (adjacent-sibling targets the gallery row) */
.shots__track + .carousel-dots { display: flex; }

@media (max-width: 600px) {
  .carousel-dots { display: flex; }
}

/* ====================== Legal / privacy page ======================== */
.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 40px) 80px;
}
.legal__title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.legal__updated { margin-top: 10px; color: var(--ink-mute); font-size: 14px; }
.legal__intro { margin-top: 24px; font-size: 18px; color: var(--ink-soft); }
.legal h2 { margin-top: 46px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.legal p { margin-top: 12px; color: var(--ink-soft); }
.legal ul { margin: 12px 0 0 20px; color: var(--ink-soft); }
.legal li { margin-top: 8px; }
.legal a { color: var(--blue); }
.legal a:hover { text-decoration: underline; }
.legal code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: rgba(127, 140, 170, 0.16);
  padding: 1px 6px;
  border-radius: 6px;
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 15px;
  color: var(--ink-soft);
}
.legal__back:hover { color: var(--ink); }

/* ============================= Support page ========================== */
.contact-card {
  position: relative;
  margin-top: 28px;
  padding: 36px 34px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
.contact-card h2 { margin-top: 0; font-size: 20px; font-weight: 600; }
.contact-card p { margin-top: 8px; color: var(--ink-soft); }
.contact-card__email { color: var(--blue); font-weight: 550; }
.contact-card__email:hover { text-decoration: underline; }
.contact-card__hint { margin-top: 14px; font-size: 14px; color: var(--ink-mute); }
.support-q { font-size: 18px; }

/* =============================== Footer ============================== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
  padding: 60px 20px 68px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 17px;
}
.footer__brand img { border-radius: 7px; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; font-size: 14px; color: var(--ink-soft); }
.footer__links a:hover { color: var(--ink); }
.footer__copy { font-size: 13px; color: var(--ink-mute); }
.footer__legal {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 560px;
  opacity: 0.8;
  text-wrap: balance;
}

/* ========================= Screenshot gallery ======================= */
.section--gallery {
  max-width: none;
  overflow: hidden;
}
.section--gallery > .section__title,
.section--gallery > .section__lead,
.section--gallery > .section__eyebrow {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.shots { position: relative; margin-top: 52px; }

.shots__track {
  list-style: none;
  display: flex;
  gap: clamp(18px, 2.5vw, 30px);
  /* overflow-x:auto forces overflow-y to clip, so leave generous vertical room
     (especially below) for the resting + hover drop shadow not to be cut off. */
  padding: 30px clamp(20px, calc((100vw - var(--maxw)) / 2 + 20px), 50vw) 56px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  /* True alpha fade at the edges — clean on any background, unlike a color
     gradient that has to match the backdrop. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.shots__track::-webkit-scrollbar { display: none; }
.shots__track.is-dragging { cursor: grabbing; }
.shots__track.is-dragging .shot__btn { cursor: grabbing; }
.shots__track.is-dragging img { pointer-events: none; user-select: none; }

.shot { flex: 0 0 auto; width: clamp(260px, 76vw, 760px); }
.shot__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  cursor: zoom-in;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.shot__btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--line-strong);
}
.shot__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.shot__btn img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 1px);
  aspect-ratio: 2560 / 1600;
}

.shots__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
}
.shots__nav:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--line-strong);
}
.shots__nav:active { transform: translateY(-50%) scale(0.94); }
.shots__nav:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.shots__nav svg { width: 20px; height: 20px; }
.shots__nav--prev { left: clamp(8px, 2vw, 28px); }
.shots__nav--next { right: clamp(8px, 2vw, 28px); }
.shots__nav[disabled] { opacity: 0; pointer-events: none; }

@media (hover: none) { .shots__nav { display: none; } }

/* ======================= Lightbox (screenshot zoom) ================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  /* No opacity animation on the container: animating an ancestor's opacity
     while a child uses backdrop-filter makes the blur "snap" in at the end
     (the flash). We fade the backdrop's own blur + color instead. */
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 20, 0);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  transition: background-color 0.24s ease,
    -webkit-backdrop-filter 0.24s ease, backdrop-filter 0.24s ease;
}
.lightbox.is-open .lightbox__backdrop {
  background: rgba(12, 14, 20, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
.lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__img {
  display: block;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  width: auto; height: auto;
  border-radius: clamp(12px, 1.4vw, 18px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.lightbox.is-open .lightbox__img { opacity: 1; transform: scale(1); }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.24s ease;
}
.lightbox.is-open .lightbox__close,
.lightbox.is-open .lightbox__nav { opacity: 1; }
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__close:active,
.lightbox__nav:active { transform: scale(0.92); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__close {
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 44px; height: 44px;
}
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.lightbox__nav:active { transform: translateY(-50%) scale(0.92); }
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav--prev { left: clamp(10px, 3vw, 28px); }
.lightbox__nav--next { right: clamp(10px, 3vw, 28px); }

@media (max-width: 560px) {
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__img { max-width: 96vw; }
}

/* ===================== Interactive menu-bar demo =====================
   A live, clickable recreation of the GlossOne menu-bar popover, sitting on
   a small macOS desktop stage. The popover keeps its authentic light-macOS
   appearance in both site themes (it represents the real app surface); only
   the stage backdrop and chrome adapt. All popover metrics mirror the
   handoff design 1:1. */
.section--demo { padding-top: clamp(36px, 5vw, 64px); }

/* ---- two-column showcase: copy on the left, live popover on the right ---- */
.mb-demo {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 408px);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  max-width: 980px;
  margin: clamp(40px, 6vw, 64px) auto 0;
}

.mb-demo__copy { max-width: 440px; }
.mb-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-on-soft);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-line);
  padding: 5px 12px;
  border-radius: 999px;
}
.mb-points { list-style: none; margin: 24px 0 0; display: flex; flex-direction: column; gap: 22px; }
.mb-point { display: flex; align-items: flex-start; gap: 14px; }
.mb-point__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--blue);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-line);
}
.mb-point__ico svg { width: 21px; height: 21px; }
.mb-point__text h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.mb-point__text p { margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.mb-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}
.mb-cta svg { transition: transform 0.18s ease; }
.mb-cta:hover { color: var(--blue-deep); }
.mb-cta:hover svg { transform: translateX(3px); }

/* ---- product stage: deep, calm brand panel (no fake desktop) ---- */
.mb-stage {
  --mb-accent: #007AFF;
  position: relative;
  width: 100%;
  padding: 0 0 clamp(26px, 4vw, 40px);
  border-radius: clamp(18px, 2vw, 24px);
  background:
    radial-gradient(58% 42% at 80% 20%, rgba(86, 124, 255, 0.26), transparent 62%),
    radial-gradient(46% 40% at 22% 96%, rgba(34, 196, 178, 0.12), transparent 64%),
    linear-gradient(165deg, #232a3d 0%, #1b2030 56%, #181d2b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 2px rgba(16, 24, 48, 0.1),
    0 44px 80px -38px rgba(16, 24, 48, 0.62);
  overflow: hidden;
  isolation: isolate;
}
/* soft halo so the light popover reads as if it is glowing off the panel */
.mb-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 4%;
  right: -6%;
  width: 78%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 180, 255, 0.22), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}

/* ---- macOS menu bar ---- */
.mb-menubar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 14px;
  font-family: var(--font-latin);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(30, 30, 40, 0.26);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.12);
  text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.22);
  user-select: none;
}
.mb-menubar__left { display: flex; align-items: center; gap: 13px; }
.mb-menubar__apple { width: 10px; height: 13px; flex: none; }
.mb-menubar__app { font-weight: 600; }
.mb-menubar__menu { font-weight: 400; opacity: 0.92; }
.mb-menubar__right { display: flex; align-items: center; gap: 11px; }
.mb-menubar__sys { opacity: 0.92; flex: none; }
.mb-menubar__wifi { width: 18px; height: 13px; }
.mb-menubar__battery { width: 26px; height: 13px; }
.mb-clock { font-variant-numeric: tabular-nums; font-weight: 500; }

/* GlossOne status-bar icon — the app's real waveform glyph. Shows the
   popover-open highlight constantly (the popover is always open here) and a
   red recording-dot badge while transcribing, mirroring the macOS status item. */
.mb-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 21px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
}
.mb-status__wave { width: 13px; height: 13px; }
.mb-status__dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3b30;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mb-stage.is-rec .mb-status__dot {
  opacity: 1;
  transform: none;
}

/* ---- popover ---- */
.mb-pop {
  position: relative;
  z-index: 3;
  width: 312px;
  margin: 12px 22px 0 auto;
  box-sizing: border-box;
  font-family: var(--font-latin);
  background: rgba(252, 252, 253, 0.86);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  backdrop-filter: blur(50px) saturate(180%);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  padding: 8px;
  color: #1d1d1f;
  text-align: left;
  animation: mbPop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mbPop {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* status card region */
.mb-region { height: 159px; margin: 1px 1px 7px; }
.mb-card {
  height: 100%;
  box-sizing: border-box;
  padding: 13px 14px 15px;
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.mb-card[hidden] { display: none; }
.mb-card--idle {
  background: linear-gradient(150deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.015));
  border: 0.5px solid rgba(0, 0, 0, 0.05);
}
.mb-card--rec {
  background: linear-gradient(150deg, rgba(255, 59, 48, 0.085), rgba(255, 59, 48, 0.025));
  border: 0.5px solid rgba(255, 59, 48, 0.18);
}
.mb-card__head { display: flex; align-items: center; gap: 11px; }
.mb-card__icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  flex: none; display: block;
}
.mb-card__meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mb-card__titlerow { display: flex; align-items: center; gap: 7px; }
.mb-card__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.mb-card__sub { font-size: 12.5px; color: rgba(60, 60, 67, 0.62); }
.mb-card__state { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mb-card__state--idle { background: rgba(120, 120, 128, 0.45); }
.mb-card__state--rec { width: 8px; height: 8px; background: #ff3b30; animation: mbRecPulse 1.4s ease-in-out infinite; }
.mb-card__timer { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1d1d1f; }
@keyframes mbRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* idle bars */
.mb-bars { display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 1px; }
.mb-bars--idle span { flex: 1; height: 4px; border-radius: 2px; background: rgba(60, 90, 150, 0.26); }

/* recording wave */
.mb-wave {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2px; height: 26px; padding: 0 1px;
}
.mb-wave span {
  flex: 1; border-radius: 3px; background: var(--mb-accent);
  transform-origin: center center;
  animation: mbWave 0.9s ease-in-out infinite both;
}
.mb-wave.is-paused span { animation-play-state: paused; }
@keyframes mbWave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }

/* buttons */
.mb-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600;
  border-radius: 9px; cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.mb-btn__ico { display: inline-flex; }
.mb-btn--primary {
  width: 100%;
  background: var(--mb-accent); color: #fff; border: none;
  padding: 12px; font-size: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
}
.mb-btn--primary:hover { filter: brightness(1.07); }
.mb-recbtns { display: flex; gap: 8px; }
.mb-recbtns .mb-btn--primary { flex: 1; padding: 12px; font-size: 14.5px; gap: 7px; }
.mb-btn--stop {
  flex: none; gap: 7px;
  padding: 12px 22px; font-size: 14.5px;
  background: rgba(255, 59, 48, 0.12); color: #ff3b30;
  border: 0.5px solid rgba(255, 59, 48, 0.28);
}
.mb-btn--stop:hover { background: rgba(255, 59, 48, 0.2); }

/* caption preview */
.mb-caption {
  margin: 0 1px 7px; padding: 10px 14px; min-height: 30px;
  background: rgba(0, 0, 0, 0.04); border-radius: 10px;
  display: flex; align-items: flex-start;
}
.mb-caption span { font-size: 13px; line-height: 1.45; color: rgba(60, 60, 67, 0.5); }
.mb-caption.is-live span { color: rgba(60, 60, 67, 0.55); }

/* rows */
.mb-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 10px;
}
.mb-row--toggle { padding: 7px 10px; }
.mb-row__label { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.mb-ico { width: 18px; height: 18px; flex: none; }
.mb-row[data-mb-engrow].is-disabled .mb-row__label { opacity: 0.42; }

/* dropdown picker */
.mb-dd { position: relative; }
.mb-pick {
  display: flex; align-items: center; gap: 5px;
  background: #fff; border: 0.5px solid rgba(0, 0, 0, 0.13);
  border-radius: 6px; padding: 4px 7px 4px 10px;
  font-size: 13px; font-family: inherit; color: #1d1d1f;
  cursor: pointer; box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.1);
  transition: background 0.14s ease;
}
.mb-pick:hover { background: #fafafa; }
.mb-pick svg { stroke: var(--mb-accent); }
.mb-dd.is-disabled .mb-pick { opacity: 0.42; cursor: default; pointer-events: none; }
.mb-menu {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 30;
  background: rgba(250, 250, 252, 0.97);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid rgba(0, 0, 0, 0.1); border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  padding: 4px;
}
.mb-dd[data-mb-dd="src"] .mb-menu { width: 166px; }
.mb-dd[data-mb-dd="eng"] .mb-menu { width: 176px; }
.mb-menu[hidden] { display: none; }
.mb-menu__item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 7px 9px; border: 0; background: transparent;
  border-radius: 6px; font-size: 13px; font-family: inherit;
  color: #1d1d1f; cursor: pointer; text-align: left;
}
.mb-menu__item:hover { background: var(--mb-accent); color: #fff; }
.mb-check { flex: none; opacity: 0; }
.mb-menu__item.is-sel .mb-check { opacity: 1; }

/* switches */
.mb-switch {
  width: 36px; height: 22px; border-radius: 999px;
  position: relative; flex: none; border: 0; padding: 0; cursor: pointer;
  background: rgba(120, 120, 128, 0.24); transition: background 0.2s ease;
}
.mb-switch.is-on { background: var(--mb-accent, #007AFF); }
.mb-switch[data-mb-toggle="local"].is-on { background: #34c759; }
.mb-switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.28); transition: left 0.18s ease;
}
.mb-switch.is-on .mb-switch__knob { left: 16px; }

/* separators + menu items */
.mb-sep { height: 1px; background: rgba(0, 0, 0, 0.08); margin: 6px 10px; }
.mb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.mb-item .mb-ico { width: 18px; height: 18px; }
.mb-item:hover { background: var(--mb-accent); color: #fff; }
.mb-kbd { margin-left: auto; font-size: 13px; color: inherit; opacity: 0.4; }

.mb-hint {
  text-align: center;
  margin: 22px auto 0;
  font-size: 14px;
  color: var(--ink-mute);
}

/* Stack the columns; lead with the interactive popover, copy beneath it. */
@media (max-width: 860px) {
  .mb-demo { grid-template-columns: 1fr; gap: 34px; max-width: 440px; }
  .mb-stage { order: 1; }
  .mb-demo__copy { order: 2; max-width: none; }
  .mb-points { align-items: stretch; }
}

@media (max-width: 600px) {
  .mb-stage { border-radius: 16px; }
  .mb-menubar { gap: 8px; padding: 0 11px; }
  .mb-menubar__menu { display: none; }
  .mb-menubar__left { gap: 12px; }
  /* center the popover on phones, where there's no room to anchor it right */
  .mb-pop { margin: 14px auto 0; max-width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .mb-pop, .mb-wave span, .mb-card__state--rec, .mb-status__dot { animation: none; }
}

/* ========================= Scroll reveal ============================
   Hidden state only applies when JS is active (html.js), so the page is
   fully visible if scripting is disabled. The structural selectors below
   are matched at parse time, so they hide before first paint (no flash)
   and the observer just adds .is-in. */
.js .reveal,
.js .section__title,
.js .section__lead,
.js .section__eyebrow,
.js .steps,
.js .grid,
.js .hosts,
.js .pillars,
.js .shots {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js .is-in { opacity: 1 !important; transform: none !important; }
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
/* lead trails its title slightly */
.js .section__lead { transition-delay: 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .shot__btn, .shots__nav, .lightbox, .lightbox__img,
  .card, .pillar, .step, .hosts li, .hero__icon { transition: none; animation: none; }
  .shots__track { scroll-behavior: auto; }
}