/* Pickr 官网 · Apple 原生产品页设计语言 (v3 · 1.1.0 文案与多样化构图版)
   - 前后双色对比标题（主色 #1d1d1f + 强调蓝 #0066cc / 柔和次色 #6e6e73）
   - 无句尾标点大标题 + 等宽双按钮，确保首屏严格沿垂直中轴线对称
   - 4 种差异化设备构图：全景双端、Bento 底部破框半身 iPhone、单台完整竖屏 iPhone、镜像双端画册 */

:root {
  --bg: #04060a;
  --bg-tinted: rgba(255, 255, 255, 0.046);
  --card: rgba(255, 255, 255, 0.068);
  --glass-surface: linear-gradient(138deg, rgba(255, 255, 255, 0.078) 0%, rgba(255, 255, 255, 0.024) 52%, rgba(255, 255, 255, 0.048) 100%);
  --glass-surface-elevated: linear-gradient(138deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.032) 52%, rgba(255, 255, 255, 0.06) 100%);
  --glass-border: rgba(255, 255, 255, 0.105);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 26px 64px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 1px 0 0 rgba(255, 255, 255, 0.055);
  --ink: #f5f5f7;
  --muted: #b0b0b8;
  --accent: #5eb0ff;
  --accent-bright: #0a84ff;
  --accent-hover: #409cff;
  --nav-cta-ink: #ffffff;
  --green: #30d158;
  --border: rgba(255, 255, 255, 0.08);
  --pill-bg: rgba(255, 255, 255, 0.08);
  --pill-hover: rgba(255, 255, 255, 0.14);
  --nav-bg: rgba(4, 6, 10, 0.68);
  --store-btn-bg: #f5f5f7;
  --store-btn-ink: #090b10;
  --store-btn-hover: #ffffff;
  --saving-bg: rgba(48, 209, 88, 0.18);
  --saving-ink: #63e683;
  --format-heic-bg: rgba(10, 132, 255, 0.2);

  --margin: clamp(20px, 4.5vw, 64px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo",
          "Helvetica Neue", sans-serif;

  --radius-pill: 980px;
  --radius-card: 28px;
  --radius-sub: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.58;
  background-color: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- 第一层：全局深色光学底韵（保留冷暖峰谷起伏，将高光淡色区压暗一档） ---------- */
body::before {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 460px at 18% 14%, rgba(28, 96, 218, 0.34) 0%, rgba(16, 52, 132, 0.16) 46%, transparent 72%),
    radial-gradient(circle 420px at 84% 22%, rgba(182, 94, 32, 0.28) 0%, rgba(108, 46, 16, 0.13) 46%, transparent 72%),
    radial-gradient(circle 520px at 52% 48%, rgba(18, 124, 142, 0.22) 0%, rgba(10, 62, 82, 0.1) 48%, transparent 74%),
    radial-gradient(circle 440px at 14% 78%, rgba(168, 84, 30, 0.25) 0%, rgba(96, 40, 14, 0.11) 46%, transparent 72%),
    radial-gradient(circle 480px at 82% 84%, rgba(40, 82, 198, 0.32) 0%, rgba(20, 42, 118, 0.15) 48%, transparent 74%);
  filter: blur(30px);
  -webkit-filter: blur(30px);
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; width: 100%; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 4px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--margin);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- 前后双色文字层次（参照 App Store 截图双色规范） ---------- */
.tone-first {
  color: var(--ink);
}

.tone-accent {
  color: var(--accent);
}

.tone-muted {
  color: var(--muted);
}

.title-line {
  display: block;
}

/* ---------- 顶部 Apple 风格毛玻璃吸顶导航 ---------- */
.global-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 54px;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--border);
}

.nav-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
}

.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 6.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.brand-name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.nav-item {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.82;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.18s ease, color 0.18s ease;
}

.nav-item:hover {
  opacity: 1;
  color: var(--accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
}

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0 28px 0 14px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

/* Paint only 34px; the native select and link retain their full 44px hit area. */
.lang-pill::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 5px 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-pill);
  transition: background-color 0.18s ease;
}
.lang-pill::before {
  background: var(--pill-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.lang-pill:hover::before { background: var(--pill-hover); }


.lang-pill::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.nav-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--nav-cta-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

.nav-cta::before { background: var(--accent-bright); }
.nav-cta:hover::before { background: var(--accent-hover); }
.nav-cta:active { transform: scale(0.96); }

/* ---------- Apple 风格胶囊形按钮（等宽设计确保双按钮中缝严格对齐中轴线） ---------- */
.btn-store,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  min-width: 212px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.btn-store {
  background: var(--store-btn-bg);
  color: var(--store-btn-ink);
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.btn-store:hover {
  background: var(--store-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.btn-store:active {
  transform: scale(0.97);
}

.btn-secondary {
  background: var(--pill-bg);
  color: var(--ink);
  border: 1px solid var(--glass-border);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background-color 0.18s ease, transform 0.12s ease;
}

.btn-secondary:hover {
  background: var(--pill-hover);
}

.btn-secondary:active {
  transform: scale(0.97);
}

/* ---------- 首屏 Hero（严格中轴线对称 + 前后双色无标点标题） ---------- */
.hero {
  position: relative;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 6vw, 84px);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -4% -6% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 380px at 50% 18%, rgba(36, 104, 218, 0.36) 0%, rgba(18, 56, 142, 0.15) 50%, transparent 75%),
    radial-gradient(circle 420px at 26% 70%, rgba(188, 98, 34, 0.33) 0%, rgba(116, 50, 16, 0.15) 48%, transparent 74%),
    radial-gradient(circle 440px at 74% 66%, rgba(26, 118, 188, 0.35) 0%, rgba(14, 60, 116, 0.16) 48%, transparent 74%);
  filter: blur(28px);
  -webkit-filter: blur(28px);
}

.hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
}

.hero-app-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.hero-title {
  font-size: clamp(2.25rem, 4.6vw, 3.85rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  text-align: center;
}

.hero-line {
  display: block;
}

.hero-lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.21875rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 54ch;
  margin-bottom: 28px;
  text-wrap: balance;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}

.hero-meta {
  font-size: 0.875rem;
  color: var(--muted);
}

.hero-showcase {
  margin-top: clamp(24px, 3.5vw, 40px);
  display: flex;
  justify-content: center;
}

.hero-device-figure {
  width: 100%;
  max-width: 960px;
}

.device-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin-inline: auto;
}

/* ---------- 章节通用结构与随页面起伏的深色高斯光晕 ---------- */
.sec {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px);
}

.sec-tinted {
  background: transparent;
}

.sec::before {
  content: "";
  position: absolute;
  inset: -4% -6%;
  z-index: -1;
  pointer-events: none;
  filter: blur(28px);
  -webkit-filter: blur(28px);
}

/* 章节一（按月整理 Bento）：左深海电光蓝、右暗房琥珀暖金、底部群青紫，保持冷暖起伏同时将亮部压沉一档 */
#how::before {
  background:
    radial-gradient(circle 420px at 22% 44%, rgba(28, 108, 196, 0.37) 0%, rgba(14, 54, 122, 0.16) 48%, transparent 74%),
    radial-gradient(circle 420px at 78% 48%, rgba(188, 96, 34, 0.34) 0%, rgba(114, 48, 16, 0.15) 48%, transparent 74%),
    radial-gradient(circle 380px at 50% 88%, rgba(56, 78, 192, 0.3) 0%, transparent 72%);
}

/* 章节二（照片视频压缩）：左深松石翠绿、右上暖琥珀、右下深海蓝 */
#compression::before {
  background:
    radial-gradient(circle 420px at 24% 52%, rgba(22, 134, 118, 0.34) 0%, rgba(12, 68, 62, 0.15) 48%, transparent 74%),
    radial-gradient(circle 380px at 76% 32%, rgba(182, 94, 34, 0.31) 0%, transparent 72%),
    radial-gradient(circle 420px at 74% 78%, rgba(34, 92, 196, 0.35) 0%, transparent 74%);
}

/* 章节三（地点精选：巴黎/佛罗伦萨/罗马）：浓郁深邃的暗房琥珀金与暮色群青交错 */
#albums::before {
  background:
    radial-gradient(circle 460px at 28% 36%, rgba(190, 98, 36, 0.36) 0%, rgba(118, 52, 18, 0.16) 48%, transparent 74%),
    radial-gradient(circle 460px at 74% 42%, rgba(34, 98, 202, 0.38) 0%, rgba(16, 50, 124, 0.18) 48%, transparent 74%),
    radial-gradient(circle 420px at 64% 84%, rgba(178, 90, 32, 0.31) 0%, transparent 72%);
}

/* 章节四（免费与会员）：左深海蓝、右耀金与皇家蓝交汇 */
#pricing::before {
  background:
    radial-gradient(circle 420px at 24% 50%, rgba(28, 94, 186, 0.33) 0%, transparent 72%),
    radial-gradient(circle 440px at 76% 48%, rgba(62, 92, 206, 0.36) 0%, transparent 72%),
    radial-gradient(circle 360px at 52% 84%, rgba(180, 94, 34, 0.27) 0%, transparent 70%);
}

/* 章节五 & 六 & 七：柔和交替的深蓝与暖珀呼吸感 */
#faq::before {
  background:
    radial-gradient(circle 400px at 24% 42%, rgba(178, 92, 34, 0.28) 0%, transparent 72%),
    radial-gradient(circle 420px at 76% 62%, rgba(30, 98, 190, 0.33) 0%, transparent 72%);
}

#more-apps::before {
  background:
    radial-gradient(circle 420px at 26% 52%, rgba(32, 96, 192, 0.33) 0%, transparent 72%),
    radial-gradient(circle 400px at 74% 48%, rgba(182, 94, 34, 0.28) 0%, transparent 72%);
}

#download::before {
  background:
    radial-gradient(circle 460px at 54% 50%, rgba(36, 102, 206, 0.36) 0%, transparent 72%),
    radial-gradient(circle 380px at 34% 56%, rgba(186, 98, 36, 0.3) 0%, transparent 70%);
}

/* 高斯毛玻璃卡片共用基底（对应 App 内 PickrStyle.surface + 细微边缘折射与冷暖透光） */
.bento-crop-card,
.step-card,
.sample-card,
.albums-copy-bar,
.offline-bento-banner,
.tier-card,
.privacy-pill-banner,
.faq-card,
.app-link-card,
.cta-banner {
  background: rgba(18, 22, 30, 0.88);
  /* Content stays quiet; translucent material belongs to navigation. */
  border: 1px solid var(--glass-border);
  box-shadow: none;
}

.sample-card,
.tier-card,
.app-link-card {
  background: rgba(22, 27, 36, 0.92);
}

.sec-head-wrap {
  max-width: 780px;
  margin-bottom: clamp(40px, 5vw, 56px);
}

.sec-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.sec-title {
  font-size: clamp(1.8rem, 3.1vw, 2.65rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin-bottom: 14px;
  text-wrap: balance;
  word-break: keep-all;
}

.sec-lead {
  font-size: clamp(1.03125rem, 1.25vw, 1.15625rem);
  color: var(--muted);
  line-height: 1.58;
  text-wrap: pretty;
}

/* ---------- 章节一：Apple Bento 破框半身 iPhone 特写双卡（无 iPad） ---------- */
.bento-crop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.bento-crop-card {
  background: var(--bg-tinted);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3vw, 36px) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
}

.bento-crop-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bento-crop-copy h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.018em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bento-crop-copy p {
  font-size: 0.96875rem;
  color: var(--muted);
  line-height: 1.58;
}

.bento-crop-bleed {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: auto;
}

.bento-crop-bleed img {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

.steps-pills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.step-card {
  background: var(--bg-tinted);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}

.step-card h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step-card p {
  font-size: 0.96875rem;
  color: var(--muted);
}

/* ---------- 章节二：左单台 iPhone 竖屏 + 右原图/HEIC 交互开关对比卡 ---------- */
.compression-split-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 28px;
  align-items: stretch;
}

.single-phone-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-phone-showcase img {
  width: 100%;
  max-width: 390px;
  height: auto;
}

.compression-right-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
}

.sample-card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The demo label stays constant so toggling cannot reflow this toolbar. */
.compare-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.compare-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.compare-format-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--bg-tinted);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.compare-card.is-heic .compare-format-tag {
  background: var(--format-heic-bg);
  color: var(--accent);
}

.compare-status { min-width: 0; }

.heic-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-tinted);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.switch-mode-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease;
}

.switch-mode-label.active {
  color: var(--ink);
}

.ios-switch {
  position: relative;
  width: 48px;
  flex-shrink: 0;
  height: 44px;
  border-radius: var(--radius-pill);
  background: transparent;
  padding: 10px 2px;
  transition: background-color 0.22s ease;
}

.ios-switch::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  border-radius: var(--radius-pill);
  background: #d1d1d6;
}
.ios-switch[aria-checked="true"]::before { background: var(--green); }

.ios-switch-thumb {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.ios-switch[aria-checked="true"] .ios-switch-thumb {
  position: relative;
  transform: translateX(20px);
}

.compare-stage {
  position: relative;
  border-radius: var(--radius-sub);
  overflow: hidden;
  cursor: pointer;
}

.compare-main-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sub);
}

.compare-loupe {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  background: #000;
  pointer-events: none;
}

.compare-loupe img {
  width: 260%;
  height: 260%;
  max-width: none;
  object-fit: cover;
  transform: translate(-30%, -28%);
}

.loupe-tag {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
}

.sample-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.28;
  margin-bottom: 6px;
}

.sample-card p {
  font-size: 0.96875rem;
  color: var(--muted);
}

.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.metric-pill {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-tinted);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* ---------- 章节三：镜像双端画册 + 底部破框半身 iPhone 离线特写卡 ---------- */
.albums-diverse-stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.albums-hero-block {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.albums-visual-wrap {
  max-width: 980px;
  margin-inline: auto;
  width: 100%;
}

.albums-copy-bar {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
  background: var(--bg-tinted);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3.2vw, 36px);
}

.albums-copy-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.albums-copy-text h3 {
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.24;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.albums-copy-text p {
  font-size: 0.96875rem;
  color: var(--muted);
}

.tag-pill {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.mini-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.mini-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

/* 离线与同步：左文 + 右侧底部探出上半截 iPhone 特写（无 iPad） */
.offline-bento-banner {
  background: var(--bg-tinted);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3.8vw, 44px) clamp(24px, 3.8vw, 44px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  overflow: hidden;
}

.offline-bento-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: clamp(28px, 3.8vw, 44px);
}

.offline-bento-copy h3 {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.offline-bento-copy p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

.offline-bento-bleed {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: end;
}

.offline-bento-bleed img {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

/* ---------- 章节四：免费与会员 ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.tier-card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3.6vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tier-card.tier-pro {
  background: linear-gradient(155deg, rgba(10, 132, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(94, 176, 255, 0.32);
  color: #f5f5f7;
}

.tier-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.tier-badge {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.tier-badge.pro {
  background: transparent;
  color: var(--nav-cta-ink);
}

.tier-header h3 {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tier-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tier-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tier-list strong {
  font-size: 1.0625rem;
  font-weight: 600;
}

.tier-list span {
  font-size: 0.9375rem;
  color: var(--muted);
}

.tier-card.tier-pro .tier-list span {
  color: rgba(255, 255, 255, 0.72);
}

.privacy-pill-banner {
  margin-top: 24px;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
}

/* ---------- 章节五：常见问题 ---------- */
.faq-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.faq-card {
  background: var(--bg-tinted);
  border-radius: var(--radius-card);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}

.faq-card p {
  font-size: 0.96875rem;
  color: var(--muted);
  line-height: 1.6;
}

.faq-card a {
  font-weight: 600;
}

/* ---------- 章节六：更多独立作品与友情链接 ---------- */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.app-link-card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}

.app-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
}

.app-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.app-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.app-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  background: linear-gradient(135deg, #1d1d1f 0%, #3a3a3c 100%);
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.app-card-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tinted);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.app-link-card:hover .app-card-arrow {
  background: transparent;
  color: var(--nav-cta-ink);
}

.app-card-body h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

.app-card-tagline {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.52;
}

.app-card-meta {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--bg-tinted);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- 章节七：底部 App Store 下载收尾 ---------- */
.sec-cta {
  padding-block: clamp(56px, 7vw, 96px);
}

.cta-banner {
  background: var(--bg-tinted);
  border-radius: 32px;
  padding: clamp(44px, 6vw, 76px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.cta-icon {
  width: 72px;
  height: 72px;
  border-radius: 17px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  margin-bottom: 4px;
}

.cta-title {
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.024em;
}

.cta-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 48ch;
  margin-bottom: 8px;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 36px 48px;
  background: var(--nav-bg);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
}

.footer-brand {
  font-weight: 600;
  color: var(--ink);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.footer-nav a {
  color: var(--muted);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

.footer-nav a:hover {
  color: var(--ink);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--muted);
}

/* ---------- 入场动效 ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .device-img, .btn-store, .btn-secondary, .app-link-card { transition: none; }
}

/* ---------- 平板适配（≤960px） ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .bento-crop-grid,
  .steps-pills-grid,
  .compression-split-layout,
  .albums-copy-bar,
  .offline-bento-banner,
  .tier-grid,
  .faq-bento {
    grid-template-columns: 1fr;
  }
  .offline-bento-copy {
    padding-bottom: 0;
  }
  .apps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 移动端单 iPhone 展示尺寸控制（≤768px） ---------- */
@media (max-width: 768px) {
  .hero-device-figure,
  .albums-visual-wrap {
    max-width: 330px;
    margin-inline: auto;
  }
  .single-phone-showcase img {
    max-width: 310px;
  }
}

/* ---------- 手机端适配（≤640px） ---------- */
@media (max-width: 640px) {
  :root {
    --margin: 20px;
    --radius-card: 24px;
  }

  .hero { padding-top: 32px; padding-bottom: 44px; }
  .hero-icon { width: 40px; height: 40px; border-radius: 10px; }
  .hero-title { font-size: clamp(1.95rem, 8vw, 2.4rem); }
  .hero-cta-group { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-cta-group .btn-store,
  .hero-cta-group .btn-secondary { width: 100%; min-width: 0; }

  .sec { padding-block: 52px; }
  .bento-crop-card { padding: 24px 20px 0; }
  .offline-bento-banner { padding: 24px 20px 0; }
  .step-card,
  .sample-card,
  .albums-copy-bar,
  .tier-card,
  .faq-card,
  .app-link-card {
    padding: 22px 20px;
  }

  .apps-grid {
    grid-template-columns: 1fr;
  }

  .compare-loupe {
    width: 78px;
    height: 78px;
  }

  .privacy-pill-banner {
    border-radius: 20px;
    padding: 14px 18px;
  }

  .cta-banner {
    border-radius: 26px;
    padding: 36px 20px;
  }
  .cta-buttons { width: 100%; flex-direction: column; align-items: stretch; }
  .cta-buttons .btn-store,
  .cta-buttons .btn-secondary { width: 100%; min-width: 0; }
}

/* Keep the product CTA ahead of the compact collection of other apps. */
.more-apps-compact { padding-block: 40px; }
.more-apps-compact .sec-head-wrap { margin-bottom: 24px; }
.more-apps-compact .sec-title { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.more-apps-compact .app-link-card { padding: 20px; }
section[id] { scroll-margin-top: 70px; }
.switch-mode-label { cursor: default; }
@media (max-width: 640px) {
  .hero-lead { margin-bottom: 20px; }
  .hero-cta-group { gap: 6px; }
  .hero-cta-group .btn-secondary { background: none; border-color: transparent; box-shadow: none; }
  .hero-showcase { margin-top: 24px; }
  .more-apps-compact .app-card-tagline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body::before, .hero::before, .sec::before { display: none; }
  *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .global-nav { background: var(--bg); }
  :root { --muted: #d1d1d6; --glass-border: #85858d; --border: #85858d; }
}

@media (max-width: 360px) {
  .nav-bar { gap: 8px; }
  .brand { flex-shrink: 0; gap: 6px; }
  .nav-actions { gap: 6px; }
  .lang-select { width: 86px; padding-left: 10px; }
  .nav-cta { padding-inline: 12px; }
}