/* =====================================================================
   PRODUCTS PAGE (NoteBurner Music One 落地页) — Mobile-first (xs < 576px)
   Design references (.figma):
   - XS (<576):    1147_109459  (480px)
   - SM (>=576):   1147_107161  (576px)
   - MD (>=768):   1147_95995   (768px)
   - LG (>=992):   1147_94442   (992px)
   - XL (>=1200):  1134_92233   (1200px)
   - XXL (>=1400): 1134_89440   (1400px)
   - XXXL (>=1920):2536_129841  (1920px)
   ===================================================================== */

.products-page {
  background: #ffffff;
  font-family: var(--nb-font);
  color: var(--nb-t-1);
}

/* 元素级重置：用 :where() 把特异性降到元素级(0,0,1)，
   保证下面的单类规则(0,1,0)仍能覆盖它们（例如 .products-hero__badge-img--android 的 display） */
:where(.products-page) img {
  display: block;
  max-width: 100%;
}

:where(.products-page) p {
  margin: 0;
}

/* 页面标题使用 h1-h6 表达语义后，需要清掉 Bootstrap 标题默认外边距，
   保持与之前 <p>（上方 margin:0）一致的间距；
   字号/字重/行高/颜色仍由各自的 class 规则控制 */
:where(.products-page) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

/* shared text helpers */
.card-title {
  text-align: center;
  letter-spacing: 0;
  color: var(--nb-t-1);
  font-size: 20px;
  font-weight: 700;
}

.section-title {
  align-self: stretch;
  max-width: 100%;
  text-align: center;
  line-height: 67px;
  color: var(--nb-t-1);
  font-size: 48px;
  font-weight: 700;
}

.btn-label {
  line-height: 24px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
}

.p-icon {
  width: 24px;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.p-icon-circle {
  display: flex;
  align-items: center;
  padding: 3px;
  overflow: hidden;
}

.p-icon-circle__icon {
  width: 18px;
  height: 18px;
}

/* =====================================================================
   1. HERO SECTION  (.products-hero)
   ===================================================================== */
.products-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 0 var(--nb-gutter);
  overflow: hidden;
  row-gap: 10px;
}

.products-hero__inner {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  align-self: stretch;
  border-radius: 20px 20px 0 0;
  background-color: #ffffff;
  padding: 80px 0 40px;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(38, 167, 254, 0.06) 0%, rgba(38, 167, 254, 0) 50%),
    url(../images/products/icon-procuct-71.png),
    linear-gradient(180deg, rgba(226, 234, 243, 0.5) 0%, #ffffff 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* glow ellipses */
.products-hero__glow {
  position: absolute;
  top: -624px;
  left: -690px;
  width: 1373px;
  height: 2925px;
  pointer-events: none;
}

.products-hero__glow--green,
.products-hero__glow--blue,
.products-hero__glow--white {
  position: absolute;
  border-radius: 50%;
}

.products-hero__glow--green {
  top: 0;
  left: 463px;
  opacity: 0.3;
  background: var(--nb-green);
  width: 910px;
  height: 910px;
  filter: blur(250px);
}

.products-hero__glow--blue {
  top: 1927px;
  left: 283px;
  opacity: 0.2;
  background: var(--nb-blue);
  width: 998px;
  height: 998px;
  filter: blur(150px);
}

.products-hero__glow--white {
  top: 1714px;
  left: 0;
  opacity: 0.3;
  background: #ffffff;
  width: 748px;
  height: 748px;
  filter: blur(250px);
}

.products-hero__content {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  z-index: 1;
}

.products-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: center;
  margin: 0 var(--nb-gutter);
  row-gap: 40px;
}

.products-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 40px;
}

.products-hero__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 10px;
}

.products-hero__title {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  flex-direction: row;
  justify-content: flex-start;
  max-width: 100%;
  line-height: 78px;
  color: #000000;
  font-size: 60px;
  font-weight: 700;
}

.products-hero__title-accent {
  line-height: 78px;
  color: var(--nb-navy);
  font-size: 60px;
  font-weight: 700;
}

.products-hero__title-rest {
  line-height: 78px;
  font-size: 60px;
  font-weight: 700;
  background: linear-gradient(25deg, #26A7FE 0%, #02CB64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.products-hero__subtitle {
  align-self: stretch;
  line-height: 32px;
  color: var(--nb-t-1);
  font-size: 20px;
  font-weight: 500;
}

/* check circle list */
.products-hero__points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 16px;
}

.products-hero__point {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  column-gap: 4px;
}

.products-hero__point-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  overflow: hidden;
}

.products-hero__point-text {
  flex-grow: 1;
  line-height: 22px;
  color: var(--nb-t-2);
  font-size: 16px;
}

/* hero buttons */
.products-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 20px;
}

.products-hero__btn-primary {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  column-gap: 18px;
  border-radius: 999px;
  padding: 10px 36px;
  height: 68px;
  min-width: max-content;
}

.products-hero__btn-primary-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 2px;
}

.products-hero__btn-primary .btn-label {
  line-height: 29px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
}

.products-hero__btn-os {
  line-height: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
}

.products-hero__btn-icon-wrap {
  display: flex;
  align-items: center;
  padding: 4px;
  overflow: hidden;
}

.products-hero__btn-icon {
  width: 21px;
  height: 21px;
}

.products-hero__btn-secondary {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  column-gap: 18px;
  border-radius: 34px;
  padding: 10px 36px;
  height: 68px;
  min-width: max-content;

}

/* 仅需把按钮内的文字（-label / -price 是独立渐变文字）在悬停/按下时变白；
   按钮底色与图标变白已由通用类 .nb-state-outline 的 :hover / :active 统一处理 */
.products-hero__btn-secondary:hover p,
.products-hero__btn-secondary:active p {
  color: #fff !important;
}

.products-download-cta__btn-secondary:hover .p-icon,
.products-download-cta__btn-secondary:active .p-icon {
  filter: brightness(0) invert(1);
}

.products-hero__btn-secondary-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 2px;
}

.products-hero__btn-secondary-label {
  background: linear-gradient(90deg, var(--nb-blue) 0%, var(--nb-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 29px;
  color: transparent;
  font-size: 24px;
  font-weight: 600;
}

.products-hero__btn-price {
  background: linear-gradient(90deg, var(--nb-blue) 0%, var(--nb-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 14px;
  color: transparent;
  font-size: 12px;
  font-weight: 600;
}

.products-hero__btn-cart-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

/* available for row */
.products-hero__platforms {
  display: flex;
  align-items: center;
  align-self: stretch;
  column-gap: 8px;
}

.products-hero__platforms-label {
  line-height: 22px;
  color: var(--nb-t-3);
  font-size: 16px;
}

/* Available-for OS switch icons — same effect as home .hero-available:
   selected platform keeps its color, the others are dimmed. */
.products-hero__os-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.products-hero__os-btn .p-icon {
  transition: filter 0.2s ease;
}

.products-hero__os-btn:not(.is-active) .p-icon {
  filter: grayscale(1) opacity(0.45);
}

/* Show only the active platform's hero action buttons (default = Windows).
   products.js toggles .is-os-mac / .is-os-android on .products-page. */
.products-hero__actions--mac,
.products-hero__actions--android {
  display: none;
}

.products-page.is-os-mac .products-hero__actions--win,
.products-page.is-os-mac .products-hero__actions--android {
  display: none;
}

.products-page.is-os-mac .products-hero__actions--mac {
  display: flex;
}

.products-page.is-os-android .products-hero__actions--win,
.products-page.is-os-android .products-hero__actions--mac {
  display: none;
}

.products-page.is-os-android .products-hero__actions--android {
  display: flex;
}

.products-hero__note {
  align-self: stretch;
  line-height: 26px;
  color: #d54941;
  font-size: 16px;
}

/* hero product image */
.products-hero__image {
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}

/* PRODUCT GROUP：品牌 logo 条的无缝滚动
   .products-hero__badge 只作为裁剪窗口（高度 64px），
   内部 track 放 3 份完全相同的 logo 条首尾相接，
   整体匀速左移一个 logo 条宽度（-33.3333%）后与起点完全重合，循环即无缝。
   （放 3 份是为了 ≥1200 窗口铺满内容区时，窗口宽度仍不超过剩余两份的宽度，
   否则循环末段会露出空白。） */
.products-hero__badge {
  margin-top: 22px;
  width: 440px;
  max-width: 100%;
  height: 64px;
  overflow: hidden;
}

.products-hero__badge-track {
  display: flex;
  width: max-content;
  animation: productsBadgeScroll 24s linear infinite;
}

.products-hero__badge-img {
  flex: 0 0 auto;
  height: 64px;
  width: auto;
  /* 覆盖元素级重置的 max-width:100%，否则整条会被压缩进窗口 */
  max-width: none;
}

@keyframes productsBadgeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.3333%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .products-hero__badge-track {
    animation: none;
  }
}

/* Android platform swaps the badge to the Spotify + Line logo.
   products.js already toggles .is-os-android on .products-page. */
.products-hero__badge-img--android {
  display: none;
}

.products-page.is-os-android .products-hero__badge-img--default {
  display: none;
}

.products-page.is-os-android .products-hero__badge-img--android {
  display: block;
}

/* =====================================================================
   2. NAV TAB  (.products-page-nav)
   ===================================================================== */
.products-page-nav__tab-btn {
  display: none;
  gap: 20px;
}

/* 导航 CTA 组与 hero actions 一样按系统切换：
   默认只显示 Windows 组，选中 Mac / Android 时显示对应组（products.js 切换 .is-os-*） */
@media (min-width: 768px) {
  .products-page-nav__tab-btn--win {
    display: flex;
  }

  .products-page.is-os-mac .products-page-nav__tab-btn--win,
  .products-page.is-os-android .products-page-nav__tab-btn--win,
  .products-page.is-os-mac .products-page-nav__tab-btn--android,
  .products-page.is-os-android .products-page-nav__tab-btn--mac {
    display: none;
  }

  .products-page.is-os-mac .products-page-nav__tab-btn--mac,
  .products-page.is-os-android .products-page-nav__tab-btn--android {
    display: flex;
  }
}

.products-page-nav__container {
  padding: 0;
  width: 100%;
  background: var(--nb-footer);
  border-radius: 0 0 20px 20px;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  border-radius: 999px;
  height: 52px;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
}

.btn-pill img {
  width: 18px;
  height: 18px;
}

.products-page-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 0 var(--nb-gutter);
  row-gap: 10px;
}

.products-page-nav__bar {
  display: flex;
  align-items: center;
  align-self: stretch;
  background: var(--nb-footer);
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

.products-page-nav__tab--active {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  padding: 0 10px;
  row-gap: 10px;
  background-image: linear-gradient(132.27deg, rgba(38, 167, 254, 0.5) 0%, rgba(2, 203, 100, 0.5) 100%);
}

.products-page-nav__label--active {
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
}

.products-page-nav__tab {
  display: flex;
  flex-grow: 1;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  column-gap: 10px;
  padding: 0 10px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.products-page-nav__label {
  flex-grow: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
}

.products-page-nav__tab:hover .products-page-nav__label {
  color: #ffffff;
}

/* NAV TABS 吸附：bar 的 sticky 顶值恒为 0。当 bar 的自然位置抵达视口顶部
   （scrollTop >= navTop，由 products.js 判定）时它就钉在顶部，同一帧里共享
   header 向上滑出，bar 正好接管顶部条。吸附前 bar 是从 header 下方滑入的，
   所以不会出现「header 已隐藏、bar 还没到顶」的空档。 */
.products-page-nav {
  position: sticky;
  top: 0;
  z-index: 40;
}

.products-page-nav.is-stuck .products-page-nav__container {
  box-shadow: 0 8px 24px rgba(16, 35, 55, 0.18);
}

/* products 页专用：header 需随 bar 吸附滑出/滑回，两个方向都要有过渡动画，
   而 style.css 里只过渡了 box-shadow，这里把 transform 一并写入基础过渡。 */
.site-header {
  transition: box-shadow .3s ease, transform .3s ease;
}

.site-header.is-hidden-by-nav {
  transform: translateY(-100%);
}

/* =====================================================================
   3. 6 FEATURES SECTIONS  (.products-features)
   ===================================================================== */
.products-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: center;
  padding: 100px var(--nb-gutter);
  row-gap: 100px;
}

.products-feature__image {
  align-self: stretch;
  width: 80%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  object-fit: contain;
}

.products-feature__text {
  align-self: stretch;
  max-width: 100%;
  line-height: 29px;
  color: var(--nb-t-2);
  font-size: 18px;
}

.products-feature__title {
  align-self: stretch;
  letter-spacing: 0;
  color: var(--nb-t-1);
  font-size: 36px;
  font-weight: 600;
}

.products-feature__text-rich {
  align-self: stretch;
  max-width: 100%;
  line-height: 29px;
  color: var(--nb-t-2);
  font-size: 18px;
}

.products-feature__text-rich-part {
  line-height: 29px;
  color: var(--nb-t-2);
  font-size: 18px;
}

.products-feature__text-rich-link {
  line-height: 29px;
  color: var(--nb-t-2);
  font-size: 18px;
  text-decoration: underline;
}

/* 固定宽度 240px，不再随断点拉伸平铺；min-width: max-content 防止文案被压缩换行 */
.products-feature__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  border-radius: 999px;
  width: 240px;
  min-width: max-content;
  padding: 10px 36px;
  height: 58px;
  text-decoration: none;
}

/* Show only the active platform's feature CTA button (default = Windows).
   Synced with the "Available for:" switch: products.js toggles
   .is-os-mac / .is-os-android on .products-page (same as hero actions). */
.products-feature__btn--mac,
.products-feature__btn--android {
  display: none;
}

.products-page.is-os-mac .products-feature__btn--win,
.products-page.is-os-mac .products-feature__btn--android {
  display: none;
}

.products-page.is-os-mac .products-feature__btn--mac {
  display: inline-flex;
}

.products-page.is-os-android .products-feature__btn--win,
.products-page.is-os-android .products-feature__btn--mac {
  display: none;
}

.products-page.is-os-android .products-feature__btn--android {
  display: inline-flex;
}

.products-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: center;
  row-gap: 40px;
}

.products-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-width: 0;
  row-gap: 40px;
}

.products-feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-width: 0;
  row-gap: 16px;
}

/* =====================================================================
   4. MUSIC SOURCES TABLE  (.products-sources)
   ===================================================================== */
.products-sources {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: center;
  padding: 0 var(--nb-gutter);
  row-gap: 40px;
  overflow: hidden;
}

.products-sources__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.products-sources__subtitle {
  align-self: stretch;
  max-width: 100%;
  text-align: center;
  line-height: 36px;
  color: var(--nb-t-2);
  font-size: 26px;
}

.products-sources__table {
  display: block;
  align-self: stretch;
  width: 100%;
  border: 1px solid var(--nb-card-border);
  border-radius: 40px;
  padding: 23px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Firefox: thin always-visible scrollbar once content overflows */
  scrollbar-width: thin;
  scrollbar-color: rgba(38, 167, 254, 0.45) rgba(38, 167, 254, 0.08);
}

/* Chromium/Safari: styling ::-webkit-scrollbar switches the overlay
   scrollbar back to a persistent one, so narrow screens show that the
   wide table can be scrolled horizontally. */
.products-sources__table::-webkit-scrollbar {
  height: 8px;
}

.products-sources__table::-webkit-scrollbar-track {
  background: rgba(38, 167, 254, 0.08);
  border-radius: 999px;
}

.products-sources__table::-webkit-scrollbar-thumb {
  background: rgba(38, 167, 254, 0.45);
  border-radius: 999px;
}

.products-sources__table::-webkit-scrollbar-thumb:hover {
  background: rgba(38, 167, 254, 0.7);
}

.products-sources__grid {
  display: table;
  width: 100%;
  min-width: 1392px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.products-sources__col-service {
  width: 360px;
}

.products-sources__col-feature {
  width: 116px;
}

.products-sources__col-speed {
  width: 220px;
}

.products-sources__grid th,
.products-sources__grid td {
  height: 84px;
  text-align: center;
  vertical-align: middle;
}

.products-sources__service-name {
  line-height: 32px;
  color: var(--nb-blue);
  font-size: 20px;
  font-weight: 700;
}

.products-sources__service-type {
  line-height: 32px;
  color: var(--nb-t-1);
  font-size: 20px;
}

.products-sources__service {
  padding: 26px 24px;
  text-align: center;
  line-height: 32px;
  color: #000000;
  font-size: 20px;
  font-weight: 400;
}

.products-sources__head th {
  padding: 26px 10px;
  text-align: center;
  line-height: 32px;
  color: var(--nb-t-1);
  font-size: 20px;
  font-weight: 600;
  background-image: linear-gradient(90deg, rgba(38, 167, 254, 0.3) 0%, rgba(38, 167, 254, 0.3) 100%);
}

.products-sources__head th:first-child {
  border-radius: 20px 0 0 20px;
}

.products-sources__head th:last-child {
  border-radius: 0 20px 20px 0;
}

.products-sources__cell {
  padding: 10px;
}

.products-sources__cell .p-icon {
  display: block;
  margin: 0 auto;
}

.products-sources__speed {
  padding: 26px 10px;
  text-align: center;
  line-height: 32px;
  color: var(--nb-t-1);
  font-size: 20px;
}

.products-sources__row--tinted th,
.products-sources__row--tinted td {
  background: rgba(38, 167, 254, 0.04);
}

.products-sources__row--tinted th:first-child {
  border-radius: 20px 0 0 20px;
}

.products-sources__row--tinted td:last-child {
  border-radius: 0 20px 20px 0;
}

.products-sources__footnote {
  align-self: stretch;
  width: 440px;
  max-width: 100%;
  line-height: 22px;
  color: var(--nb-t-2);
  font-size: 14px;
}

/* =====================================================================
   5. EXTRA FEATURES  (.products-extra-features)
   ===================================================================== */
.products-extra-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 100px var(--nb-gutter);
  row-gap: 40px;
}

.products-extra-features__title {
  align-self: stretch;
  text-align: center;
  line-height: 67px;
  color: var(--nb-t-1);
  font-size: 48px;
  font-weight: 600;
}

.products-extra-features__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 20px;
}

.products-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  border: 1px solid var(--nb-card-border);
  border-radius: 20px;
  background: var(--nb-card-bg);
  padding: 23px;
  height: 303px;
  row-gap: 24px;
}

.products-feature-card__icon {
  flex-shrink: 0;
  border-radius: 999px;
  width: 100px;
  height: 100px;
  max-width: 100%;
}

.products-feature-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  row-gap: 20px;
}

.products-feature-card__desc {
  display: -webkit-box;
  align-self: stretch;
  max-width: 100%;
  height: 58px;
  overflow: hidden;
  text-align: center;
  line-height: 29px;
  color: var(--nb-t-2);
  font-size: 18px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* =====================================================================
   6. SCREENSHOTS  (.products-screenshots)
   ===================================================================== */
.products-screenshots {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 0 var(--nb-gutter);
  row-gap: 40px;
}

.products-screenshots__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 20px;
}

.products-screenshots__caption {
  max-width: 100%;
  text-align: center;
  line-height: 36px;
  color: var(--nb-t-2);
  font-size: 26px;
  font-weight: 500;
}

.products-screenshots__slider {
  display: flex;
  align-items: center;
  align-self: stretch;
  column-gap: 20px;
}

.products-screenshots__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nb-t-3);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.products-screenshots__arrow:hover {
  border-color: var(--nb-blue);
}

.products-screenshots__arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Swiper custom element host: fills the space between the two arrows */
.products-screenshots__swiper {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.products-screenshots__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 20px;
}

.products-screenshots__image {
  border-radius: 20px;
  width: 100%;
  max-width: 320px;
  height: 206px;
  margin: 0 auto;
  object-fit: cover;
}

/* =====================================================================
   7. USERS' WORDS  (.products-testimonials)
   ===================================================================== */
.products-testimonials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 100px var(--nb-gutter);
  height: auto;
  row-gap: 40px;
}

.products-testimonials__panel {
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: center;
  border-radius: 40px;
  width: 100%;
  /* 背景 SVG 是固定比例(1440x610)的深色卡片。小屏时若按 100% auto 缩放，
     背景高度会远小于内容高度，白色文字落到卡片外的白底上像被“截断”。
     cover + 同色底色可保证任意屏宽/内容高度下深色底都铺满面板 */
  background-color: #10324f;
  background-image: url(../images/home/home-slider-bg.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px;
  overflow: hidden;
}

/* 轮播容器（Swiper 自定义元素）。箭头是 Swiper 在 shadow DOM 里自动生成的，
   只能用继承下去的自定义属性 / ::part() 改样式 */
.products-testimonials__swiper {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  --swiper-navigation-color: #fff;
  --swiper-navigation-size: 32px;
  --swiper-navigation-sides-offset: 16px;
}

/* 引号装饰图：左上 / 右下角各一张，与卡片圆角对位 18px，各断点都显示 */
.products-testimonials__quote-mark {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 130px;
  height: 120px;
  object-fit: contain;
}

/* 右下角这张是同一张图 rotate(-180deg) 后使用 */
.products-testimonials__quote-mark--right {
  top: auto;
  left: auto;
  right: 18px;
  bottom: 18px;
  transform: rotate(-180deg);
}

.products-testimonials__title {
  align-self: stretch;
  text-align: center;
  line-height: 67px;
  color: #ffffff;
  font-size: 48px;
  font-weight: 700;
}

.products-testimonials__quote {
  row-gap: 20px;
}

.products-testimonials__avatars {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.products-testimonials__avatar {
  flex-shrink: 0;
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

.products-testimonials__avatar--center {
  flex-shrink: 0;
  border-radius: 50%;
  width: 88px;
  height: 88px;
  background-image: url(../images/home/home-users-avatar-center.png);
  background-position: 0 -10px;
  background-size: 100% 149.95%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 20px rgba(38, 167, 254, 0.3));
}

.products-testimonials__author {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  margin: 0 78px;
  row-gap: 10px;
}

.products-testimonials__author-name {
  line-height: 28px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
}

.products-testimonials__stars {
  flex-shrink: 0;
  width: 152px;
  height: 24px;
}

.products-testimonials__text {
  max-width: 100%;
  text-align: center;
  line-height: 28px;
  color: #ffffff;
  font-size: 20px;
  margin-top: 40px;
}

/* =====================================================================
   8. DOWNLOAD CTA  (.products-download-cta)
   ===================================================================== */
.products-download-cta {
  display: flex;
  align-items: center;
  align-self: stretch;
  column-gap: 10px;
  padding: 0 var(--nb-gutter);
}

.products-download-cta__panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nb-card-border);
  border-radius: 40px;
  padding: 99px 39px;
  row-gap: 40px;
  background: var(--nb-card-bg);
}

.products-download-cta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.products-download-cta__title {
  align-self: stretch;
  max-width: 100%;
  text-align: center;
  line-height: 67px;
  color: var(--nb-t-1);
  font-size: 48px;
  font-weight: 700;
  /* 长单词（如 NoteBurner）在窄屏下允许断行，避免撑破面板产生横向滚动条 */
  overflow-wrap: break-word;
}

.products-download-cta__subtitle {
  align-self: stretch;
  max-width: 100%;
  text-align: center;
  line-height: 36px;
  color: var(--nb-t-2);
  font-size: 26px;
}

.products-download-cta__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Show only the active platform's CTA group (default = Windows).
   Synced with the "Available for:" switch: products.js toggles
   .is-os-mac / .is-os-android on .products-page (same as hero actions). */
.products-download-cta__actions--mac,
.products-download-cta__actions--android {
  display: none;
}

.products-page.is-os-mac .products-download-cta__actions--win,
.products-page.is-os-mac .products-download-cta__actions--android {
  display: none;
}

.products-page.is-os-mac .products-download-cta__actions--mac {
  display: flex;
}

.products-page.is-os-android .products-download-cta__actions--win,
.products-page.is-os-android .products-download-cta__actions--mac {
  display: none;
}

.products-page.is-os-android .products-download-cta__actions--android {
  display: flex;
}

.products-download-cta__btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  border-radius: 999px;
  width: 240px;
  min-width: max-content;
  padding: 10px 36px;
  height: 58px;
  text-decoration: none;
}

.products-download-cta__btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  border-radius: 29px;
  width: 240px;
  min-width: max-content;
  padding: 10px 36px;
  height: 58px;
  text-decoration: none;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff) padding-box,
    linear-gradient(90deg, #26A7FE 0%, #02CB64 100%) border-box;
  background-clip: padding-box, border-box;
}

.products-download-cta__btn-label {
  background: linear-gradient(106.13deg, var(--nb-blue) 0%, var(--nb-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 24px;
  color: transparent;
  font-size: 20px;
  font-weight: 600;
}

/* =====================================================================
   9. GUIDE & TIPS  (.products-guide)
   ===================================================================== */
.products-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding: 100px var(--nb-gutter);
  row-gap: 40px;
}

.products-guide__title {
  align-self: stretch;
  text-align: center;
  line-height: 67px;
  color: var(--nb-t-1);
  font-size: 48px;
  font-weight: 700;
}

.products-guide__cards {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 20px;
}

.products-guide__item {
  align-self: stretch;
  line-height: 32px;
  color: var(--nb-t-4);
  font-size: 18px;
}

.products-guide__item:hover {
  color: var(--nb-blue);
}

.products-guide__card-title {
  line-height: 29px;
  color: var(--nb-t-1);
  font-size: 24px;
  font-weight: 600;
}

.products-guide__more-link {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  column-gap: 8px;
  margin-right: 237px;
  text-decoration: none;
}

.products-guide__more-label {
  background: linear-gradient(180deg, var(--nb-blue) 0%, var(--nb-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 25px;
  color: transparent;
  font-size: 18px;
}

.products-guide__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: center;
  border: 1px solid var(--nb-card-border);
  border-radius: 40px;
  background: var(--nb-card-bg);
  padding: 39px;
  row-gap: 24px;
}

.products-guide__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 12px;
}

.products-guide__list:hover {
  color: var(--nb-blue);
}

/* =====================================================================
   MEDIA QUERIES (Mobile-first overlays)
   ===================================================================== */

/* ---------- sm: >= 576px ---------- */
@media (min-width: 576px) {
  .products-page-nav__container {
    padding: 0;
  }

  .products-page-nav__tab-btn span {
    display: none;
  }

  .products-feature__title {
    align-self: stretch;
  }

  .products-screenshots__image {
    max-width: 416px;
    height: 268px;
  }

}

/* ---------- md: >= 768px ---------- */
@media (min-width: 768px) {
  .products-page-nav__container {
    padding: 0 20px;
  }

  .products-page-nav__bar {
    border-radius: 0;
  }

  .products-page-nav__tab-btn span {
    display: none;
  }

  .products-page-nav__tab-btn .btn-pill {
    padding: 0;
    width: 48px;
    height: 48px;
  }

  /* Extra Features: 2 列 × 3 行，列间距 24 / 行间距 20（设计稿 768） */
  .products-extra-features__grid {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 20px;
  }

  .products-feature-card {
    flex: 0 0 calc(50% - 12px);
  }

  .products-hero__image {
    width: 648px;
    height: 515px;
  }

  .products-hero__title {
    width: auto;
  }

  /* Hero buttons go inline */
  .products-hero__actions {
    flex-direction: row;
    column-gap: 20px;
  }
  
  /* 6 features sections switch to row — 图片与文案各占一半，随容器自适应 */
  .products-feature {
    flex-direction: row;
    column-gap: 40px;
    align-items: center;
  }
  .products-feature__body {
      flex: 1;
  }
  .products-feature__image{
    flex: 1;
  }
}

/* ---------- lg: >= 992px ---------- */
@media (min-width: 992px) {

  /* section paddings double horizontally */
  .products-hero,
  .products-page-nav,
  .products-sources,
  .products-screenshots,
  .products-download-cta {
    padding-left: 40px;
    padding-right: 40px;
  }

  .products-features,
  .products-extra-features,
  .products-testimonials,
  .products-guide {
    padding: 100px 40px;
  }

  /* 桌面端：轮播内容左右各让出 100px，避开角上的引号装饰图 */
  .products-testimonials__slide {
    padding: 0 100px;
  }


  .products-feature.products-feature-reverse {
    flex-direction: row-reverse;
  }

  /* 图片按设计稿 436px（992）；文案占剩余宽度 */
  .products-feature__image {
    flex: 0 1 436px;
    align-self: center;
    width: 436px;
    max-width: 100%;
  }

  .products-feature__body {
    flex: 1 1 0;
  }

  /* Extra Features: 3 列 × 2 行，间距 40，卡片高度自适应（设计稿 992+） */
  .products-extra-features__grid {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 40px;
  }

  .products-feature-card {
    flex: 0 0 calc((100% - 80px) / 3);
    height: auto;
    min-height: 303px;
  }

  /* Screenshots bigger */
  .products-screenshots__image {
    max-width: 839px;
    height: 540px;
  }

  .products-screenshots__slider {
    justify-content: space-between;
  }

  /* Guide & Tips: 2 cards inline */
  .products-guide__cards {
    flex-direction: row;
    column-gap: 40px;
  }

  .products-guide__card {
    flex: 1 1 0;
  }

  /* Guide & Tips Learn More position adjust */
  .products-guide__more-link {
    margin-right: 0;
  }
}

/* ---------- xl: >= 1200px ---------- (container gutters wider) ---------- */
@media (min-width: 1200px) {
  .products-hero__body {
    flex-direction: row;
  }

  .products-page-nav__container {
    padding: 0 40px;
  }

  .products-page-nav__tab-btn span {
    display: block;
  }

  .products-page-nav__tab-btn .btn-pill {
    height: 52px;
    padding: 14px 24px;
    width: auto;
  }

  /* 图片按设计稿 540px（1200） */
  .products-feature__image {
    flex: 0 1 540px;
    width: 540px;
  }

  .products-hero__badge {
    width: auto;
  }

  /* style.css already bumps --nb-gutter to 40px; our lg rules already align */
  .products-hero,
  .products-page-nav,
  .products-sources,
  .products-screenshots,
  .products-download-cta {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1400px) {

  /* 图片按设计稿 680px（1400 / 1920） */
  .products-feature__image {
    flex: 0 1 680px;
    width: 680px;
  }
}

/* ---------- 1600 / 1920：内容区左右留白放大（HERO / NAV TABS 除外，保持通栏） ----------
   设计参考：1400 → 40px 左右；1920 → 240px 左右（内容正好 1440px）。
   1600 取 80px，使内容同样为 1440px，与 1920 视觉保持一致。 */
@media (min-width: 1600px) {

  .products-sources,
  .products-screenshots,
  .products-download-cta {
    padding-left: 160px;
    padding-right: 160px;
  }

  .products-features,
  .products-extra-features,
  .products-testimonials,
  .products-guide {
    padding-left: 160px;
    padding-right: 160px;
  }
}

@media (min-width: 1920px) {

  .products-sources,
  .products-screenshots,
  .products-download-cta {
    padding-left: 240px;
    padding-right: 240px;
  }

  .products-features,
  .products-extra-features,
  .products-testimonials,
  .products-guide {
    padding-left: 240px;
    padding-right: 240px;
  }

  /* 1920：图文间距 80（设计稿），主图 680 */
  .products-feature {
    column-gap: 80px;
  }

  .products-feature__image {
    flex: 0 1 680px;
    width: 680px;
  }
}

/* Mobile (<420px): hero title font-size 48px */
@media (max-width: 420px) {
  .products-hero__title-rest {
    font-size: 48px;
  }

  /* download CTA 面板内边距/标题字号是桌面色值，窄屏（如 360）下会让
     面板的最小内容宽度超过视口，从而出现横向滚动条，这里按比例收小。 */
  .products-download-cta__panel {
    padding: 60px 24px;
  }

  .products-download-cta__title {
    font-size: 36px;
    line-height: 50px;
  }
}

/* Mobile (<1000px): NAV TABS 条取消顶部吸附，随页面正常滚动 */
@media (max-width: 999px) {
  .products-page-nav {
    position: static;
  }
}

/* < 992px — 小屏隐藏轮播箭头，只保留左右滑动 */
@media (max-width: 991.98px) {
  .products-testimonials__swiper::part(button-prev),
  .products-testimonials__swiper::part(button-next) {
    display: none;
  }
}