/* ============================================
   mobile-app.css — 移动端产品版页面样式（mobile/ 独立版本）
   与桌面共用 base.css 设计 token；控件按移动端习惯重选：
   横滑卡片 + 圆点、分段控件、动作列表、Sticky 章节导航、
   Sticky CTA 条、阅读目录面板
   ============================================ */

/* ---------- 基础 ---------- */
body {
  background-color: #f5f6f7;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: rgba(15, 81, 50, 0.08);
}

body.ma-has-ctabar {
  padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
}

a,
button {
  touch-action: manipulation;
}

.ma-hero-title .accent,
.ma-section-head .text-gradient,
.ma-merchant .accent {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ma-merchant .accent {
  color: var(--color-gold);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ---------- 阅读进度条 ---------- */
.ma-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-gold) 100%);
  pointer-events: none;
}

/* ---------- 顶部 App Bar ---------- */
.ma-appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: 52px;
  padding: 0 var(--sp-4);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.ma-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  min-width: 0;
}

.ma-brand img {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  object-fit: contain;
  flex-shrink: 0;
}

.ma-brand-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.ma-appbar-action {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: var(--r-full);
  background: var(--color-primary);
  color: var(--color-bg);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}

.ma-appbar-action:active {
  background: var(--color-primary-dark);
}

/* ---------- Hero ---------- */
.ma-hero {
  background: linear-gradient(135deg, #0A3D24 0%, #0F5132 50%, #1A7A4F 100%);
  color: var(--color-bg);
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
}

.ma-hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.ma-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  background: rgba(201, 169, 97, 0.15);
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: var(--r-full);
  color: var(--color-gold);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
}

.ma-pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
  animation: ma-float 1.6s ease-in-out infinite;
}

@keyframes ma-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.ma-hero-title {
  font-size: 30px;
  font-weight: var(--fw-black);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--color-bg);
  margin-bottom: var(--sp-3);
}

.ma-hero-sub {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
}

.ma-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.ma-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.ma-hero-cta .btn {
  flex: 1 1 auto;
  min-width: 140px;
}

/* 浅色画布上的 ghost 按钮：深色区块外的透明白在浅底不可读，改主色描边 */
.ma-section .btn-ghost,
.ma-cta-card .btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 深色商家区块内保持透明白 */
.ma-merchant .btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-bg);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---------- 区块 ---------- */
.ma-section {
  padding: var(--sp-5) var(--sp-4);
  max-width: 640px;
  margin: 0 auto;
}

.ma-section-card {
  background: var(--color-bg);
  border-radius: var(--r-lg);
  margin: var(--sp-3) auto;
  border: 1px solid var(--color-border);
  max-width: 608px;
}

.ma-section-head {
  margin-bottom: var(--sp-4);
}

.ma-section-head h2 {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: 1.35;
  margin-bottom: var(--sp-2);
}

.ma-section-head p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.ma-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
}

.ma-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background-color: var(--color-gold);
}

.ma-eyebrow-gold {
  color: var(--color-gold-dark);
}

/* ---------- 横滑卡片 + 圆点 ---------- */
.ma-showcase,
.ma-features {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(var(--sp-4) * -1);
  padding: var(--sp-1) var(--sp-4) var(--sp-2);
}

.ma-showcase::-webkit-scrollbar,
.ma-features::-webkit-scrollbar {
  display: none;
}

.ma-show-card,
.ma-feature-card {
  flex: 0 0 78%;
  max-width: 300px;
  scroll-snap-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.ma-show-tag {
  display: inline-block;
  padding: 3px var(--sp-2);
  background: var(--color-gold-bg);
  color: var(--color-gold-dark);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
}

.ma-show-title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}

.ma-show-rows {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.ma-show-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
}

.ma-show-row strong {
  color: var(--color-ink);
}

.ma-show-card-score {
  text-align: center;
}

.ma-show-vs {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
}

.ma-show-score {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: var(--sp-3) 0;
}

.ma-show-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  font-size: 13px;
  color: var(--color-text);
}

.ma-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.ma-show-score-vs {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--color-gold-dark);
}

.ma-show-info {
  font-size: 13px;
  color: var(--color-text-secondary);
  border-top: 1px dashed var(--color-border);
  padding-top: var(--sp-2);
}

.ma-show-card-num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
}

.ma-show-num-label {
  font-size: 12px;
  opacity: 0.75;
  letter-spacing: 0.08em;
}

.ma-show-num {
  font-size: 40px;
  font-weight: var(--fw-black);
  color: var(--color-gold);
  line-height: 1;
}

.ma-show-num-unit {
  font-size: 12px;
  opacity: 0.8;
}

.ma-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-2) 0 var(--sp-1);
}

.ma-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: #D5DBD6;
  transition: width var(--t-base), background var(--t-base);
}

.ma-dots span.is-active {
  width: 16px;
  background: var(--color-primary);
}

/* ---------- 数据带 ---------- */
.ma-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.ma-stat {
  background: var(--color-bg-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
}

.ma-stat-num {
  font-size: 26px;
  font-weight: var(--fw-black);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

.ma-stat-suffix {
  font-size: 14px;
  color: var(--color-gold-dark);
  font-weight: var(--fw-bold);
  margin-left: 2px;
}

.ma-stat-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ---------- 功能卡 ---------- */
.ma-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

.ma-feature-icon img,
.ma-feature-icon svg {
  width: 26px;
  height: 26px;
}

.ma-feature-title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}

.ma-feature-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* ---------- 分段控件（赛事场景） ---------- */
.ma-scenes {
  position: relative;
}

.ma-scenes > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ma-segmented {
  display: flex;
  gap: 4px;
  background: #E9EDEA;
  border-radius: var(--r-md);
  padding: 3px;
  margin-bottom: var(--sp-4);
}

.ma-segmented label {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  border-radius: 9px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.ma-scene-item {
  display: none;
}

#ma-scene-1:checked ~ .ma-segmented label[for="ma-scene-1"],
#ma-scene-2:checked ~ .ma-segmented label[for="ma-scene-2"],
#ma-scene-3:checked ~ .ma-segmented label[for="ma-scene-3"] {
  background: var(--color-bg);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
}

#ma-scene-1:checked ~ .ma-scene-item:nth-of-type(1),
#ma-scene-2:checked ~ .ma-scene-item:nth-of-type(2),
#ma-scene-3:checked ~ .ma-scene-item:nth-of-type(3) {
  display: block;
}

.ma-scene-banner {
  height: 140px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

.ma-scene-banner-1 { background: linear-gradient(135deg, #0F5132 0%, #2A9D8F 100%); }
.ma-scene-banner-2 { background: linear-gradient(135deg, #7B2CBF 0%, #E63946 100%); }
.ma-scene-banner-3 { background: linear-gradient(135deg, #C9A961 0%, #F4A261 100%); }

.ma-scene-tag {
  display: inline-block;
  padding: 3px var(--sp-3);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  border-radius: var(--r-full);
  background: var(--color-gold-bg);
  color: var(--color-gold-dark);
  margin-bottom: var(--sp-2);
}

.ma-scene-title {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}

.ma-scene-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-3);
}

.ma-scene-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: 12px;
  color: var(--color-text-muted);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}

/* ---------- 商家入驻区块（首页） ---------- */
.ma-merchant {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  color: var(--color-bg);
}

.ma-merchant h2 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-bg);
  margin-bottom: var(--sp-3);
}

.ma-merchant > p {
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-4);
}

.ma-merchant .ma-hero-cta {
  margin-bottom: var(--sp-5);
}

.ma-steps {
  position: relative;
}

.ma-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.ma-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 40px;
  bottom: -2px;
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.ma-step-num {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--fw-bold);
  position: relative;
  z-index: 1;
}

.ma-step-title {
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-bg);
  margin-bottom: 2px;
}

.ma-step-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- 动作列表 ---------- */
.ma-actions {
  display: flex;
  flex-direction: column;
}

.ma-action-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.ma-action-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ma-action-row:first-child {
  padding-top: 0;
}

.ma-action-row:active {
  opacity: 0.7;
}

.ma-action-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--color-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ma-action-icon img,
.ma-action-icon svg {
  width: 22px;
  height: 22px;
}

.ma-action-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ma-action-label {
  font-size: 12px;
  color: var(--color-text-muted);
}

.ma-action-value {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.ma-action-hint {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.ma-action-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ---------- Sticky 章节导航（商家页） ---------- */
.ma-secnav {
  position: sticky;
  top: 52px;
  z-index: 40;
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(245, 246, 247, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.ma-secnav::-webkit-scrollbar {
  display: none;
}

.ma-chip {
  flex: 0 0 auto;
  padding: 7px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 12.5px;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.ma-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  font-weight: var(--fw-semibold);
}

/* ---------- 长文区块 ---------- */
.ma-sec {
  padding: var(--sp-5) var(--sp-4);
  max-width: 640px;
  margin: 0 auto;
  scroll-margin-top: 104px;
}

.ma-sec + .ma-sec {
  border-top: 1px solid var(--color-border);
}

.ma-sec-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: var(--sp-3);
}

.ma-sec-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.ma-reader .ma-sec h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: var(--sp-3);
  scroll-margin-top: 104px;
}

.ma-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-4);
}

.ma-p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
}

.ma-h3 {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: var(--sp-4) 0 var(--sp-2);
}

.ma-ol {
  margin: 0 0 var(--sp-4) var(--sp-5);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-text);
}

.ma-ol li {
  margin-bottom: var(--sp-2);
  padding-left: var(--sp-1);
}

.ma-ol li::marker {
  color: var(--color-gold-dark);
  font-weight: var(--fw-semibold);
}

/* ---------- 提示框 ---------- */
.ma-callout {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
  border: 1px solid;
  scroll-margin-top: 104px;
}

.ma-callout-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ma-callout-icon svg {
  width: 15px;
  height: 15px;
}

.ma-callout-title {
  font-weight: var(--fw-bold);
  font-size: 13.5px;
  margin-bottom: var(--sp-1);
}

.ma-callout-text {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.ma-callout-warning { background: #FEF3E2; border-color: #F4A261; }
.ma-callout-warning .ma-callout-icon { background: #F4A261; }
.ma-callout-warning .ma-callout-title { color: #C2410C; }

.ma-callout-danger { background: #FEE2E2; border-color: #E63946; }
.ma-callout-danger .ma-callout-icon { background: #E63946; }
.ma-callout-danger .ma-callout-title { color: #B82838; }

.ma-callout-info { background: var(--color-primary-bg); border-color: var(--color-primary); }
.ma-callout-info .ma-callout-icon { background: var(--color-primary); }
.ma-callout-info .ma-callout-title { color: var(--color-primary-dark); }

.ma-callout-success { background: #D1FAE5; border-color: var(--color-success); }
.ma-callout-success .ma-callout-icon { background: var(--color-success); }
.ma-callout-success .ma-callout-title { color: #065F46; }

/* ---------- 入驻条件 / 申请方式列表 ---------- */
.ma-req-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.ma-req-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
}

.ma-req-row:active {
  border-color: var(--color-gold);
}

.ma-req-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--color-gold-bg);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ma-req-icon svg {
  width: 18px;
  height: 18px;
}

.ma-req-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ma-req-title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.ma-req-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ---------- 收益板块 ---------- */
.ma-benefit-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.ma-benefit {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.ma-benefit-num {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--color-gold-dark);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}

.ma-benefit-title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}

.ma-benefit-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-3);
}

.ma-benefit-stat {
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--color-border-strong);
  font-size: 12px;
  color: var(--color-text-muted);
}

.ma-benefit-stat strong {
  color: var(--color-primary);
  font-size: 15px;
}

.ma-benefit-featured {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-color: transparent;
  color: #fff;
}

.ma-benefit-featured .ma-benefit-num { color: var(--color-gold); }
.ma-benefit-featured .ma-benefit-title { color: #fff; }
.ma-benefit-featured .ma-benefit-desc { color: rgba(255, 255, 255, 0.85); }

.ma-benefit-featured .ma-benefit-stat {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-gold);
}

.ma-benefit-featured .ma-benefit-stat strong {
  color: #fff;
  font-size: var(--fs-xl);
}

/* ---------- 时间线 ---------- */
.ma-timeline {
  position: relative;
  margin-bottom: var(--sp-4);
}

.ma-timeline-item {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}

.ma-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-gold) 0%, var(--color-border) 100%);
}

.ma-timeline-dot {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-gold-dark);
  position: relative;
  z-index: 1;
}

.ma-timeline-title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--sp-1);
}

.ma-timeline-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---------- CTA 卡片 / Sticky CTA 条 ---------- */
.ma-cta-card {
  text-align: center;
  margin: var(--sp-4) 0 var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  background: linear-gradient(135deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
}

.ma-cta-card h3 {
  font-size: var(--fs-lg);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}

.ma-cta-card p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-4);
}

.ma-ctabar {
  position: fixed;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
}

.ma-ctabar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--r-full);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  box-shadow: var(--shadow-gold);
}

.ma-ctabar-btn:active {
  background: var(--color-gold-dark);
}

/* ---------- 阅读目录（法律页） ---------- */
.ma-readerbar {
  position: sticky;
  top: 52px;
  z-index: 40;
  background: rgba(245, 246, 247, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-2) var(--sp-4);
}

.ma-readerbar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 0 var(--sp-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.ma-readerbar-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-fast);
}

.ma-readerbar-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ma-tocsheet {
  margin-top: var(--sp-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  max-height: 50vh;
  overflow-y: auto;
}

.ma-tocsheet[hidden] {
  display: none;
}

.ma-tocsheet-item {
  display: block;
  padding: 11px var(--sp-3);
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--r-sm);
  line-height: 1.5;
}

.ma-tocsheet-item.is-active {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.ma-reader {
  padding-bottom: var(--sp-4);
}

/* ---------- 公司信息卡 / 合作卡 ---------- */
.ma-company {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-bg);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
}

.ma-company h2 {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-bg);
  margin-bottom: var(--sp-3);
  line-height: 1.35;
}

.ma-company > p {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-4);
}

.ma-company-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.ma-company-meta-item {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.ma-company-meta-item strong {
  display: block;
  color: var(--color-gold);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.ma-coop-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ma-coop-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.ma-coop-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ma-coop-icon img,
.ma-coop-icon svg {
  width: 24px;
  height: 24px;
}

.ma-coop-card h3 {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--sp-1);
}

.ma-coop-card p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ---------- 精简页脚 ---------- */
.ma-footer {
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  text-align: center;
}

.ma-footer-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 0 auto var(--sp-3);
}

.ma-footer-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.ma-footer-meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
}

.ma-desktop-link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-4);
  padding: 9px var(--sp-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-full);
  font-size: 12.5px;
  color: var(--color-text-secondary);
  text-decoration: none;
  background: var(--color-bg);
}

.ma-desktop-link:active {
  background: var(--color-bg-soft);
}

/* ---------- 返回顶部 ---------- */
.ma-totop {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  color: var(--color-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

.ma-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ma-totop svg {
  width: 20px;
  height: 20px;
}

/* ---------- 底部标签栏 ---------- */
.ma-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ma-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: var(--sp-1) 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--color-text-muted);
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.ma-tab svg {
  width: 22px;
  height: 22px;
}

.ma-tab.is-active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.ma-tab:active {
  background: var(--color-primary-bg);
}

/* ---------- 按压反馈 ---------- */
.ma-show-card:active,
.ma-feature-card:active,
.ma-stat:active,
.ma-req-row:active,
.ma-benefit:active {
  transform: scale(0.98);
}

.ma-show-card,
.ma-feature-card,
.ma-stat,
.ma-req-row,
.ma-benefit {
  transition: transform var(--t-fast);
}

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

/* ---------- FAQ（商家页常见问题） ---------- */
.ma-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ma-faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ma-faq-q {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  min-height: 52px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  cursor: pointer;
  list-style: none;
}

.ma-faq-q::-webkit-details-marker {
  display: none;
}

.ma-faq-q::before {
  content: 'Q';
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--color-gold-bg);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.ma-faq-q::after {
  content: '';
  flex-shrink: 0;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform var(--t-fast);
}

.ma-faq-item[open] .ma-faq-q::after {
  transform: rotate(225deg);
}

.ma-faq-q:active {
  background: var(--color-primary-bg);
}

.ma-faq-a {
  position: relative;
  padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 38px);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.ma-faq-a::before {
  content: 'A';
  position: absolute;
  left: var(--sp-4);
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* ---------- 关于台云赛（可引用定义 + 关键事实） ---------- */
.ma-about-facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.ma-about-fact {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.ma-about-fact dt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  letter-spacing: 1px;
  margin-bottom: var(--sp-1);
}

.ma-about-fact dt::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}

.ma-about-fact dd {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-ink);
  line-height: var(--lh-relaxed);
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}