/*
 | Bayria 营销站样式表。
 |
 | ⚠️ 这是**静态文件，不经构建**，由 <link> 直接引入。
 |
 | 为什么不用 Vite：项目现在没有 npm 依赖（见 README「前端构建：目前没有」）。
 | 这套样式是纯 CSS，没有预处理、没有 JS 框架，Vite 只能带来压缩和缓存指纹。
 | 引进来的代价是一个必须先 npm install 才能跑起来的构建步骤，
 | 而收益在这个体量上接近于零。真需要时再迁，迁移成本也只是改个引入方式。
 |
 | 缓存靠 <link> 上的 ?v= 查询串，见 layouts/public.blade.php。
 |
 | 设计来源：docs/design_src/theme.jsx 与 primitives.jsx
 */

/* ══════════════════════════════════════════════════════════
   设计令牌
   ══════════════════════════════════════════════════════════ */

html[data-theme='light'] {
  --bg: #f6f4ee;
  --bg-elev: #ffffff;
  --bg-surface: #efece4;
  --bg-input: #ffffff;
  --text: #0a0a0a;
  --text2: rgba(10, 10, 10, 0.72);
  --text3: rgba(10, 10, 10, 0.5);
  --line: rgba(10, 10, 10, 0.08);
  --line-strong: rgba(10, 10, 10, 0.14);
  --mint: #1aa886;
  --danger: #d9364b;
  --cipher-opacity: 0.05;
}

html[data-theme='dark'] {
  --bg: #0b0d10;
  --bg-elev: #12151a;
  --bg-surface: #181c23;
  --bg-input: #0f1216;
  --text: #f2f3f5;
  --text2: rgba(242, 243, 245, 0.72);
  --text3: rgba(242, 243, 245, 0.5);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --mint: #5fe3c9;
  --danger: #ff4e6b;
  --cipher-opacity: 0.07;
}

:root {
  --orange: #ff4200;
  --orange-soft: #ff6b35;

  /* 原型自托管 JetBrains Mono / Systematic TT；此处退到系统栈。
     接入品牌字体时只改这两行。 */
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1280px;
  --gutter: 24px;
}

/* ══════════════════════════════════════════════════════════
   基础
   ══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* 设计稿全程直角。一个 border-radius 都没有——这是它的识别特征。 */

img,
svg {
  display: block;
  max-width: 100%;
}

/*
 | 焦点样式必须可见。
 |
 | 设计稿没画焦点态，但去掉 outline 会让键盘用户完全无法定位——
 | F1-44 明确要求修无障碍问题。用 outline 而不是 border：
 | border 会改变盒模型让布局跳动。
 */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* 尊重系统的减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   排版
   ══════════════════════════════════════════════════════════ */

/* 小标签。全站的「◆ FEATURES · 2 LIVE」这类都用它 */
.kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0;
}

.kicker--accent {
  color: var(--orange);
  font-size: 11px;
}

/* 页面大标题。clamp 让它在窄屏自动收缩，不用写断点 */
.h-display {
  font-family: var(--sans);
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.h-section {
  font-family: var(--sans);
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  color: var(--text);
}

/* 设计稿用斜体 + 橙色做强调，只出现在标题第二行 */
.h-display em,
.h-section em {
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}

.lede {
  font-size: 17px;
  color: var(--text2);
  line-height: 1.6;
  max-width: 620px;
  margin: 24px 0 0;
}

.mono {
  font-family: var(--mono);
}

/* ══════════════════════════════════════════════════════════
   布局
   ══════════════════════════════════════════════════════════ */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--narrow {
  max-width: 1080px;
}

.wrap--prose {
  max-width: 920px;
}

/*
 | ⚠️ 只设垂直内边距，用 padding-block 而不是 padding 简写。
 |
 | .wrap 与 .section 经常同时用在一个元素上（<div class="wrap section">）。
 | 简写 `padding: 72px 0` 会把 .wrap 的左右 gutter 一并清零——
 | 结果是手机上正文直接贴屏幕边缘，而在宽屏上因为有 max-width 留白，
 | 完全看不出来。这个 bug 是靠 390px 实机渲染才发现的。
 */
.section {
  padding-block: 72px;
  border-bottom: 1px solid var(--line);
}

.section--tight {
  padding-block: 40px;
}

/*
 | 网格用 1px gap + 背景色画分隔线，而不是给每个格子加 border。
 | 加 border 的话相邻格子会出现 2px 的双线，且转角对不齐。
 */
.grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.grid > * {
  background: var(--bg);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ══════════════════════════════════════════════════════════
   元件
   ══════════════════════════════════════════════════════════ */

.wordmark {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

/* ── 按钮 ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: none;
}

.btn--block { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: 13px; }

.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); }

.btn--ghost {
  background: var(--bg-input);
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--line-strong); }

/*
 | 禁用态用 [disabled] 与 [aria-disabled] 双选择器。
 |
 | <a> 元素没有 disabled 属性，而下载页有「文件未上传」的禁用链接
 | （F1-36：不许给死链）。那种情况只能用 aria-disabled 表达，
 | 样式必须跟着一起生效，否则看起来可点实则不可点。
 */
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 输入框 ── */

.field {
  display: block;
  background: var(--bg-input);
  border: 1px solid var(--line);
  padding: 10px 14px;
  cursor: text;
}

.field:focus-within { border-color: var(--line-strong); }

.field__label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  padding: 3px 0 2px;
}

.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text3); }

.field--error { border-color: var(--danger); }

.field-error {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--danger);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* ── 标签片 ── */

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--text3);
  background: var(--bg);
}

.chip--live { color: var(--mint); border-color: var(--mint); }
.chip--warn { color: var(--orange); border-color: var(--orange); }
.chip--danger { color: var(--danger); border-color: var(--danger); }

/* ── 分隔与提示 ── */

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text3);
}

.divider i { flex: 1; height: 1px; background: var(--line); }

.notice {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--orange);
  color: var(--text3);
}

.notice--error { border-color: var(--danger); }
.notice b { color: var(--text); font-weight: 400; }

/* ── 图标按钮 ── */

.iconbtn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text2);
  cursor: pointer;
}

.iconbtn:hover { color: var(--text); border-color: var(--line-strong); }

/*
 | 主题图标按 data-theme 切换（设计稿 marketing.jsx：dark 显示太阳，
 | light 显示月亮——图标表达的是「点了会变成什么」，不是当前状态）。
 |
 | 用 CSS 而不是 JS 换图标：主题在 <head> 的内联脚本里就定好了，
 | 而按钮在 body 中段。JS 换图标会让页面先渲染错误的图标再改正，
 | 和首屏闪白同类。CSS 方案第一帧就是对的。
 */
html[data-theme='light'] .icon-sun { display: none; }
html[data-theme='dark'] .icon-moon { display: none; }

/* 只对屏幕阅读器可见。图标按钮必须有可读名字。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════
   顶栏
   ══════════════════════════════════════════════════════════ */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* 胶带条。数据由 App\Support\Site\TapeRail 提供，不写死 */
.tape {
  height: 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text3);
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}

.tape .dot { color: var(--orange); }
.tape .end { margin-left: auto; text-decoration: none; }

.nav {
  height: 64px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__links { display: flex; gap: 24px; }

.nav__links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text2);
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  text-decoration: none;
}

.nav__links a:hover { color: var(--text); }

.nav__links a[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--orange);
}

.nav__tools { margin-left: auto; display: flex; gap: 12px; align-items: center; }

/* ══════════════════════════════════════════════════════════
   页脚
   ══════════════════════════════════════════════════════════ */

.footer {
  border-top: 1px solid var(--line);
  padding: 48px var(--gutter) 24px;
  background: var(--bg);
}

.footer__cols {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
}

.footer__tagline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 14px;
  line-height: 1.7;
}

.footer__heading {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 14px;
}

.footer__cols a {
  display: block;
  font-size: 13px;
  color: var(--text2);
  padding: 4px 0;
  text-decoration: none;
}

.footer__cols a:hover { color: var(--text); }

.footer__legal {
  max-width: var(--maxw);
  margin: 48px auto 0;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
}

/* ══════════════════════════════════════════════════════════
   响应式（F1-08）
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1120px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 880px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  /* 同上：只动垂直方向，别碰 .wrap 的 gutter */
  .section { padding-block: 48px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

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

  /*
   | 窄屏隐藏导航链接与胶带条。
   |
   | ⚠️ 这是临时降级，不是最终方案。F1-08 要求折成汉堡菜单——
   | 现在直接隐藏意味着手机用户**只能通过页脚导航**。页脚有全部
   | 24 个链接，所以不会走进死路，但体验是打折的。
   | 汉堡菜单需要 JS，留到有交互脚本时一起做。
   */
  /*
   | ⚠️ 曾经这里只是 display:none —— 手机上 16 个页面全部无法到达，
   | 而在桌面缩窗口时看起来「只是收起来了」，不像缺陷。
   | 现在由 #nav-toggle 控制展开。
   */
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
    z-index: 40;
  }

  .nav__checkbox:checked ~ .nav__links { display: flex; }

  .nav__links a {
    padding: 11px var(--gutter);
    font-size: 14px;
  }

  /* ⚠️ 汉堡的 display:flex 不在这里 —— 见文件末尾。
     基础规则 .nav__burger{display:none} 排在本块之后，
     同等特异性下后者胜出，写在这里会被静默覆盖。 */
  .tape span:not(:first-child) { display: none; }

  .nav { gap: 16px; }
}

/* ══════════════════════════════════════════════════════════
   首页 · Hero / 功能网格 / 定价（F1-10）
   ══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 80px 0;
}

/* 密文墙背景。纯装饰，压到很低透明度，不可选中不可交互 */
.hero__cipher {
  position: absolute;
  inset: 0;
  padding: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--text);
  opacity: var(--cipher-opacity);
  white-space: pre;
  user-select: none;
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero__panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 28px;
}

.hero__panel-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 8px;
}

/* ── 区块标题 ── */

.sechead {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.sechead__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text3);
}

.sechead__sub {
  margin: 0 0 0 auto;
  color: var(--text2);
  font-size: 15px;
  max-width: 480px;
}

/* ── 功能卡 ── */

.fcard {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--bg);
  text-decoration: none;
  position: relative;
}

.fcard--soon { opacity: 0.78; }

/* soon 卡的斜纹遮罩，暗示「还没上线」 */
.fcard--soon::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 14px);
  opacity: 0.35;
}

.fcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.fcard__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--orange);
  background: var(--bg);
}

.fcard--soon .fcard__icon { color: var(--text3); }

.fcard__name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 24px;
  color: var(--text);
  position: relative;
}

.fcard__blurb {
  font-size: 14px;
  color: var(--text2);
  margin-top: 8px;
  line-height: 1.55;
  position: relative;
  flex: 1;
}

.fcard__cta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 18px;
  position: relative;
}

.fcard--soon .fcard__cta { color: var(--text3); }

/* ── 套餐卡 ── */

.plan {
  background: var(--bg);
  padding: 32px 28px;
  position: relative;
}

.plan--best { background: var(--bg-elev); }

.plan__ribbon {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  padding: 4px 10px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
}

.plan__amount { font-size: 56px; font-weight: 600; letter-spacing: -0.02em; }

.plan__includes {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 18px;
}

.plan__inc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text2);
}

.plan .btn { margin-top: 24px; }

/* ── 加购项 ── */

.addon {
  background: var(--bg);
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.addon__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--orange);
  flex-shrink: 0;
}

.addon__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.addon__desc { font-size: 13px; color: var(--text2); margin-top: 6px; line-height: 1.5; }

/* ── 三段声明 ── */

.pricing-notes {
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  line-height: 1.55;
}

/* ── 首页响应式 ── */

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .pricing-notes { grid-template-columns: 1fr; }
}

/* ── /features 深度介绍区 ── */

.feature-deep {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}

.feature-deep__art {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 24px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.feature-deep__stat {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
}

/* ── /pricing 覆盖表 ── */

.cover-row {
  display: grid;
  grid-template-columns: 40px 2.4fr 3fr 80px;
  gap: 18px;
  padding: 18px 20px;
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.cover-row:last-child { border-bottom: none; }

@media (max-width: 880px) {
  .feature-deep { grid-template-columns: 1fr; gap: 24px; }
  .cover-row { grid-template-columns: 32px 1fr; }
  /* 窄屏隐藏 blurb 与状态列，只留图标 + 名字 */
  .cover-row > :nth-child(3),
  .cover-row > :nth-child(4) { display: none; }
}

/* ── /download 平台卡 ── */

.dlcard {
  background: var(--bg);
  padding: 28px 24px;
  position: relative;
}

/* 「你的平台」角标，UA 匹配时显示 */
.dlcard__here {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mint);
  padding: 4px 10px;
}

.dlcard__icon { color: var(--orange); margin-bottom: 14px; }
.dlcard__name { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.dlcard__meta { font-size: 11px; color: var(--text3); letter-spacing: 0.12em; margin-top: 6px; }

.dlcard__verify {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.dlcard__vline {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.65;
  word-break: break-all;
}

/* ── 法务文档（/privacy · /terms）── */

.legal-sec {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.legal-sec:last-child { border-bottom: none; }

.legal-sec__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--orange);
  padding-top: 3px;
}

.legal-sec__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--text);
}

.legal-sec__body {
  margin: 0;
  color: var(--text2);
  font-size: 15px;
  line-height: 1.7;
}

/* ── /about ── */

.about-p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text2);
  margin: 0 0 20px;
}

.about-p:last-child { margin-bottom: 0; }

.statbox { padding: 26px 22px; }

.statbox__v {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.statbox__l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 8px;
}

@media (max-width: 640px) {
  .legal-sec { grid-template-columns: 1fr; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════
   config 驱动的内容页（roadmap / open-source / bounty / audit / press）
   ══════════════════════════════════════════════════════════ */

.notice {
  border: 1px dashed var(--line);
  padding: 22px;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 12px;
}

/* ── /roadmap ── */

.rm-item { padding: 24px 22px; }

.rm-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.rm-item__body { font-size: 14px; color: var(--text2); line-height: 1.6; }

/* 「不做」的项压暗，与在做的区分开 */
.rm-item--no .rm-item__body { color: var(--text3); }

/* ── /open-source ── */

.repo { display: block; padding: 26px 24px; text-decoration: none; }

.repo__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.repo__name { font-size: 17px; font-weight: 600; color: var(--text); }
.repo__desc { font-size: 14px; color: var(--text2); margin-top: 10px; line-height: 1.55; }
.repo__meta { font-size: 11px; color: var(--text3); margin-top: 14px; letter-spacing: 0.08em; }

.repro { border: 1px solid var(--line); }

.repro__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.repro__row:last-child { border-bottom: none; }
.repro__label { color: var(--text); }
.repro__tool { color: var(--text3); font-size: 12px; }

/* ── /bug-bounty ── */

.tier { padding: 26px 22px; }
.tier__payout { font-size: 30px; font-weight: 600; color: var(--orange); margin-top: 10px; }
.tier__desc { font-size: 13px; color: var(--text2); margin-top: 10px; line-height: 1.55; }

.scope-col { padding: 26px 24px; }

.scope-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.scope-row:last-child { border-bottom: none; }
.scope-row__t { font-size: 13px; color: var(--text); }
.scope-row__n { font-size: 12.5px; color: var(--text3); margin-top: 4px; line-height: 1.5; }
.scope-row--out .scope-row__t { color: var(--text3); }

.hof { border: 1px solid var(--line); }

.hof__row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 18px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.hof__row:last-child { border-bottom: none; }
.hof__handle { color: var(--text); }
.hof__finding { color: var(--text2); font-size: 13px; }
.hof__payout { color: var(--orange); }

/* ── /audit ── */

.findings { border: 1px solid var(--line); }

.finding {
  display: grid;
  grid-template-columns: 90px 1fr 100px 90px;
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.finding:last-child { border-bottom: none; }
.finding__id { font-size: 11px; color: var(--text3); padding-top: 2px; }
.finding__title { font-size: 15px; font-weight: 500; color: var(--text); }
.finding__desc { font-size: 13px; color: var(--text2); margin-top: 5px; line-height: 1.55; }

/* 严重度按级别着色，不只用文字——扫一眼就要能看出有没有高危 */
.chip--sev-critical,
.chip--sev-high { color: var(--danger); border-color: var(--danger); }
.chip--sev-medium { color: var(--orange); border-color: var(--orange); }

.report {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  padding: 22px 24px;
}

.report--sm { padding: 12px 16px; margin-top: 8px; font-size: 13px; }
.report__title { font-size: 17px; font-weight: 500; color: var(--text); }

/* ── /press ── */

.prlist { border: 1px solid var(--line); }

.prlist__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 14px;
}

.prlist__row:last-child { border-bottom: none; }
a.prlist__row:hover { background: var(--bg-elev); }
.prlist__title { color: var(--text); }

@media (max-width: 880px) {
  .finding { grid-template-columns: 1fr; gap: 8px; }
  .hof__row { grid-template-columns: 1fr; gap: 6px; }
  .prlist__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ══════════════════════════════════════════════════════════
   数据库驱动页（changelog / status / transparency / help / contact）
   ══════════════════════════════════════════════════════════ */

/* ── /changelog ── */

.rel { padding: 28px 0; border-bottom: 1px solid var(--line); }
.rel:last-child { border-bottom: none; }

.rel__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rel__ver { font-size: 24px; font-weight: 600; color: var(--text); }
.rel__date { font-size: 11px; color: var(--text3); margin-left: auto; }
.rel__summary { color: var(--text2); font-size: 15px; margin: 12px 0 0; line-height: 1.6; }
.rel__entries { margin-top: 16px; }

.rel__entry {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  padding: 7px 0;
  align-items: start;
}

.rel__body { font-size: 14px; color: var(--text2); line-height: 1.55; }

/* 变更类型着色。security 必须一眼可辨——它决定用户要不要立刻升级 */
.chip--kind-security { color: var(--danger); border-color: var(--danger); }
.chip--kind-feat { color: var(--mint); border-color: var(--mint); }
.chip--kind-fix { color: var(--orange); border-color: var(--orange); }

/* ── /status ── */

.sc { padding: 26px 0; border-bottom: 1px solid var(--line); }
.sc:last-child { border-bottom: none; }

.sc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sc__name { font-size: 18px; font-weight: 600; color: var(--text); }
.sc__desc { font-size: 13px; color: var(--text3); margin-top: 4px; }

/* 90 格 uptime 条。flex 等分，窄屏自动变细而不换行 */
.uptime { display: flex; gap: 2px; margin-top: 16px; height: 34px; }

.uptime__day { flex: 1; min-width: 2px; background: var(--mint); cursor: help; }
.uptime__day--degraded { background: var(--orange); }
.uptime__day--down { background: var(--danger); }
.uptime__day--maintenance { background: var(--text3); }

.uptime__legend {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text3);
  margin-top: 8px;
  letter-spacing: 0.1em;
}

.inc { padding: 20px 0; border-bottom: 1px solid var(--line); }
.inc:last-child { border-bottom: none; }
.inc__meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text3); flex-wrap: wrap; }
.inc__title { font-size: 16px; font-weight: 600; color: var(--text); margin-top: 10px; }
.inc__body { font-size: 14px; color: var(--text2); margin-top: 6px; line-height: 1.6; }

/* ── /transparency ── */

.jur { border: 1px solid var(--line); }

.jur__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  align-items: center;
}

.jur__row:last-child { border-bottom: none; }

.jur__row--head {
  background: var(--bg-elev);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
}

.canary { border: 1px solid var(--line); padding: 26px; }
.canary--overdue { border-color: var(--danger); }

.canary-warn {
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 16px 20px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.canary__stmt {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
}

.canary__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.canary__verify { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--text3); }
.canary__sig { font-size: 10.5px; white-space: pre-wrap; word-break: break-all; margin: 0; color: var(--text3); }

/* ── /help ── */

.hcat { display: block; padding: 24px 22px; text-decoration: none; }
.hcat--empty { opacity: 0.5; }
.hcat__name { font-size: 17px; font-weight: 600; color: var(--text); }
.hcat__n { font-size: 11px; color: var(--text3); margin-top: 6px; letter-spacing: 0.12em; }

.harts { border: 1px solid var(--line); }
.hart { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.hart:last-child { border-bottom: none; }
.hart__title { font-size: 15px; font-weight: 500; color: var(--text); }
.hart__excerpt { font-size: 13.5px; color: var(--text2); margin-top: 5px; line-height: 1.55; }

/* ── /contact ── */

.chan { padding: 24px 22px; }
.chan__label { font-size: 16px; font-weight: 600; color: var(--text); }
.chan__email { display: block; font-size: 13px; color: var(--orange); margin-top: 8px; text-decoration: none; }
.chan__for { font-size: 13px; color: var(--text2); margin-top: 8px; line-height: 1.5; }

.cform { display: grid; gap: 14px; }
.cform__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.cform select {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  padding: 3px 0 2px;
}

.cform__note { font-size: 11px; color: var(--text3); line-height: 1.7; margin: 4px 0 0; }
.cform__note a { color: var(--orange); }

/*
 | 蜜罐。挪出视口而不是 display:none —— 有些机器人会跳过
 | display:none 的字段，而「移到屏幕外」它们照填不误。
 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.flash-ok {
  border: 1px solid var(--mint);
  color: var(--text);
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 14px;
}

.flash-err { border: 1px solid var(--danger); padding: 14px 18px; margin-bottom: 18px; }
.flash-err div { color: var(--danger); font-family: var(--mono); font-size: 12px; line-height: 1.7; }

@media (max-width: 880px) {
  .jur__row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .jur__row--head { display: none; }
  .canary__meta { grid-template-columns: 1fr; }
  .cform__two { grid-template-columns: 1fr; }
  .rel__entry { grid-template-columns: 1fr; gap: 4px; }
}

/* ══════════════════════════════════════════════════════════
   汉堡菜单（F1-08）
   ══════════════════════════════════════════════════════════ */

/*
 | checkbox 视觉隐藏但**保留在 Tab 序列里**。
 | 用 display:none 或 visibility:hidden 会让它无法用键盘聚焦，
 | 那样汉堡菜单对键盘用户就是打不开的。
 */
.nav__checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid var(--line);
  cursor: pointer;
  margin-left: auto;
}

.nav__burger span {
  display: block;
  height: 1.5px;
  background: var(--text);
}

/* checkbox 获得焦点时给 label 焦点环——否则键盘用户看不到自己在哪 */
.nav__checkbox:focus-visible ~ .nav__burger {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* 展开时汉堡变叉 */
.nav__checkbox:checked ~ .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__checkbox:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
.nav__checkbox:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* .nav 要成为 .nav__links 绝对定位的参照 */
.nav { position: relative; }

/* ── 帮助中心搜索框 ── */

.hsearch {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 28px;
  max-width: 560px;
}

.hsearch .field { flex: 1; }

@media (max-width: 640px) {
  .hsearch { flex-direction: column; }
}

/*
 | ⚠️ 这个媒体查询必须排在 .nav__burger 基础规则**之后**。
 |
 | 第一版把 display:flex 写在文件中部那个 640px 块里，而基础规则
 | .nav__burger{display:none} 在文件末尾——同等特异性，后者胜出，
 | 汉堡在手机上根本不显示。展开逻辑是对的，图标却看不见。
 |
 | 测试断言不到这种事（CSS 里两条规则都在），只有实机渲染能发现。
 */
@media (max-width: 640px) {
  .nav__burger { display: flex; }
}