/* 官网静态页（套餐、新手指南、常见问题、教程、条款）：2026-10-31 按 Material 3 Expressive 重做。
   颜色（跨性别旗官方色 + 苹果 Pride 壁纸粉蓝白）、形状、字体、动效、图标字体全部用 /m3-tokens.css（先于本文件加载），这里不写死颜色、不用渐变。 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
}
/* 站徽同款旗帜色条：跨性别旗官方色硬分段（不是渐变），品牌标识 */
.flag { height: 4px; background: linear-gradient(90deg, var(--yn-flag-blue) 0 20%, var(--yn-flag-pink) 20% 40%, var(--yn-flag-white) 40% 60%, var(--yn-flag-pink) 60% 80%, var(--yn-flag-blue) 80%); }
main { max-width: 840px; margin: 0 auto; padding: 24px 20px 64px; }

header a {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--md-sys-color-on-surface); text-decoration: none;
  font: var(--md-sys-typescale-emphasized-title-large);
}
header img { border-radius: var(--md-sys-shape-corner-medium); }

/* 导航：M3 assist chip（高 32、圆角 small、outline-variant 描边、18px 图标）；悬停时图标变实心并弹一下 */
nav[aria-label="官网导航"] { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0; }
nav[aria-label="官网导航"] a {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 16px 0 8px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface-variant); text-decoration: none;
  font: var(--md-sys-typescale-label-large);
}
nav[aria-label="官网导航"] a .msr { font-size: 18px; color: var(--md-sys-color-primary); }
nav[aria-label="官网导航"] a:hover .msr, nav[aria-label="官网导航"] a:focus-visible .msr { --msr-fill: 1; transform: scale(1.12); }
/* 当前栏目：M3 选中的 filter chip（苹果壁纸浅蓝 secondary-container 底、图标实心、不要描边） */
nav[aria-label="官网导航"] a[aria-current="page"] {
  border-color: transparent; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
nav[aria-label="官网导航"] a[aria-current="page"] .msr { --msr-fill: 1; color: currentColor; }

/* 正文卡片：surface-container-low + extra-large 圆角（M3 Expressive 鼓励大内容块用大圆角） */
article {
  margin-top: 20px; padding: 28px 32px 32px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-large);
}
.crumbs { margin: 0 0 8px; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--md-sys-color-primary); text-decoration: underline; }

h1 { margin: 0 0 16px; font: var(--md-sys-typescale-emphasized-headline-large); letter-spacing: -0.01em; color: var(--md-sys-color-on-surface); }
h2 { margin: 32px 0 8px; font: var(--md-sys-typescale-emphasized-title-large); color: var(--md-sys-color-on-surface); }
h3 { margin: 24px 0 6px; font: var(--md-sys-typescale-emphasized-title-medium); }
p, li { margin: 0 0 12px; }
ul, ol { padding-left: 1.3em; }
li::marker { color: var(--md-sys-color-primary); }
a { color: var(--md-sys-color-primary); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
.meta { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }

/* 表格：M3 数据表格的描边与表头 */
table {
  width: 100%; margin: 12px 0; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden; background: var(--md-sys-color-surface);
}
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--md-sys-color-outline-variant); font: var(--md-sys-typescale-body-medium); }
thead th { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small); }
tbody th { font: var(--md-sys-typescale-emphasized-body-medium); color: var(--md-sys-color-on-surface); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

blockquote {
  margin: 16px 0; padding: 12px 16px;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
code { padding: 2px 6px; border-radius: var(--md-sys-shape-corner-extra-small); background: var(--md-sys-color-surface-container-highest); font-size: .92em; }
pre { overflow-x: auto; padding: 12px 16px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-highest); }

/* 常见问题：每个问答一张 surface 卡片 */
.faq h2 {
  margin: 16px 0 0; padding: 16px 20px 4px;
  background: var(--md-sys-color-surface); border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0;
  font: var(--md-sys-typescale-emphasized-title-medium);
}
.faq h2 + p {
  margin: 0; padding: 4px 20px 16px;
  background: var(--md-sys-color-surface); border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
  color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium);
}

/* 按钮：M3 Expressive 小号按钮（高 40、左右 16、图标 20、label-large 字），按下时圆角从全圆变成 small（形变） */
.cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.cta a {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large); text-decoration: none;
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
    box-shadow var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
/* 主按钮：旗帜浅蓝 #5BCEFA（primary-container）+ 深色字，和首页一致 */
.cta a.primary { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.cta a.primary:hover { box-shadow: var(--md-sys-elevation-level1); }
.cta a.ghost { border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); }
.cta a:active { border-radius: var(--md-sys-shape-corner-small); }
/* 图标各有各的小动作（M3E：图标也参与表达）：悬停变实心；购物袋跳一下、火箭往右上飞、价签晃一下；按下变粗 */
.cta a .msr { font-size: 20px; }
.cta a:hover .msr, .cta a:focus-visible .msr { --msr-fill: 1; }
.cta a:hover .msr[data-icon="shopping_bag"], .cta a:focus-visible .msr[data-icon="shopping_bag"] { transform: translateY(-3px); }
.cta a:hover .msr[data-icon="rocket_launch"], .cta a:focus-visible .msr[data-icon="rocket_launch"] { transform: translate(3px, -3px); }
.cta a:hover .msr[data-icon="sell"], .cta a:focus-visible .msr[data-icon="sell"] { transform: rotate(-14deg); }
.cta a:active .msr { --msr-wght: 600; }

/* 状态层：悬停 8%、按下 10%（M3 state layer） */
nav[aria-label="官网导航"] a::before, .cta a::before {
  content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
nav[aria-label="官网导航"] a:hover::before, .cta a:hover::before { opacity: var(--md-sys-state-hover); }
nav[aria-label="官网导航"] a:active::before, .cta a:active::before { opacity: var(--md-sys-state-pressed); }

footer { margin-top: 32px; text-align: center; font: var(--md-sys-typescale-body-small); line-height: 2; color: var(--md-sys-color-on-surface-variant); }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--md-sys-color-primary); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-extra-small); }

/* 公告入口：静态页没有主站的客服浮标，手机上也贴回右下角（公告样式里 152px 的高度是给主站客服浮标让位的） */
body > .yn-launch-reopen { bottom: calc(16px + env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
  main { padding: 16px 12px 48px; }
  article { padding: 20px 16px 24px; border-radius: var(--md-sys-shape-corner-large-increased); }
  h1 { font: var(--md-sys-typescale-emphasized-headline-medium); }
  th, td { padding: 10px 12px; }
}