/* ==========================================================
   Tokens
   ========================================================== */
:root {
  --font-sans: "Inter", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei", "Source Han Sans CN",
               ui-sans-serif, system-ui, sans-serif;
  --font-display: "Montserrat", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC",
                  "Microsoft YaHei", sans-serif;
  --font-serif: "Playfair Display", "Noto Serif SC", "Source Han Serif SC",
                "Songti SC", "SimSun", serif;
  --font-article-head: var(--font-display);

  --accent: #E5A338;
  --accent-2: #F0B95C;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* Dark mode (default) — neutral charcoal */
:root, :root[data-theme="dark"] {
  --bg: #0E0E10;
  --bg-2: #131315;
  --bg-3: #18181B;
  --surface: #161618;
  --surface-2: #1C1C1F;
  --border: #26262A;
  --border-2: #34343A;
  --text: #F5F2EA;
  --text-2: #A8A5A0;
  --text-3: #6E6B66;
  --accent-ink: #0E0E10;
  --shadow: 0 30px 60px -30px rgba(0,0,0,.7);
  --grid: rgba(245,242,234,.035);
  --hl-bg: rgba(229,163,56,.10);
  --glow: rgba(229,163,56,0.17);
}

/* Light mode — per design system */
:root[data-theme="light"] {
  --bg: #FAF8F2;
  --bg-2: #F5F2EA;
  --bg-3: #EFEADC;
  --surface: #FFFFFF;
  --surface-2: #F5F2EA;
  --border: #E5E0D5;
  --border-2: #C8C0AE;
  --text: #1B2230;
  --text-2: #5A6173;
  --text-3: #A3A6AE;
  --accent-ink: #1B2230;
  --shadow: 0 24px 56px -32px rgba(27,34,48,.18);
  --grid: rgba(27,34,48,.05);
  --hl-bg: rgba(229,163,56,.14);
  --glow: rgba(229,163,56,0.18);
}

/* ==========================================================
   Reset
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 关掉 macOS 触控板的橡皮筋回弹(2026-08-06 需求):滚到顶/底继续滑时,
   整个文档(连同 sticky 导航/页脚)会被弹性拖动露出底色,观感像"没钉住"。
   html 是视口滚动的归属(overflow-x: clip 在 html 上),body 一并设保证传播。 */
html, body { overscroll-behavior-y: none; }

/* 全站滚动条走自己的皮,不用系统默认那根灰条(2026-08-05 需求)。
   口径沿用 theme.css 里已有的 .onb-page / .article-toc:10px 宽、--border-2 圆头、
   3px 透明描边 + background-clip 让它看着更细、轨道全透明。两套主题都跟着变量走。
   ⚠️ macOS 默认是「滚动时才显形」的 overlay 条,一旦自定义就变成常驻 —— 这是取舍,
   不是 bug。Firefox 只认 scrollbar-width/scrollbar-color 两个属性。 */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 10px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-3); background-clip: padding-box; border: 3px solid transparent;
}
::-webkit-scrollbar-corner { background: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  --cx: 50vw;
  --cy: 30vh;
}

/* Cursor-following ambient glow (works in light & dark) —— 2026-07-21 按需求恢复:
   只删静态琥珀光晕(.hero::after / .page-hero::after),光标跟随光晕保留 */
.cursor-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  /* 参数对齐设计稿 theme.css(2026-07-21 拍板:改重/改小两轮尝试后回到原版) */
  background: radial-gradient(
    700px circle at var(--cx) var(--cy),
    var(--glow),
    transparent 62%
  );
  mix-blend-mode: screen;
  opacity: 1;
  transition: opacity .25s ease;
}
:root[data-theme="light"] .cursor-glow {
  mix-blend-mode: multiply;
  background: radial-gradient(
    700px circle at var(--cx) var(--cy),
    rgba(229, 163, 56, 0.16),
    transparent 62%
  );
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ol, ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
strong { font-weight: 600; color: var(--text); }
em {
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
}

/* Only hero / final CTA keep bold italic emphasis */
.display--hero em,
.display--xl em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Chinese display headlines — match Latin weight via Noto SC */
:lang(zh) .display,
[lang="zh"] .display,
[lang="zh-CN"] .display {
  font-weight: 400;
  line-height: 1.2;
}
:lang(zh) .display--hero,
[lang="zh"] .display--hero,
[lang="zh-CN"] .display--hero { line-height: 1.18; }
:lang(zh) .display--xl,
[lang="zh"] .display--xl,
[lang="zh-CN"] .display--xl { line-height: 1.15; }
.display em { font-weight: 800; font-style: normal; }
.display--hero em, .display--xl em { font-weight: 800; font-style: italic; }
:lang(zh) .display em,
[lang="zh"] .display em,
[lang="zh-CN"] .display em { font-weight: 900; }

/* Typewriter (cycling words in hero) */
.typer {
  display: inline-block;
  min-width: 4ch;
  white-space: nowrap;
}
[data-lang="zh"] .typer { min-width: 2ch; }
.typer__text {
  display: inline-block;
  vertical-align: baseline;
  border-right: 0.08em solid currentColor;
  padding-right: 0.05em;
  margin-right: 0.04em;
  animation: typer-caret 1.05s steps(2) infinite;
}
@keyframes typer-caret {
  0%, 50% { border-right-color: currentColor; }
  50.01%, 100% { border-right-color: transparent; }
}
[data-lang="en"] .typer { min-width: 9ch; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* show/hide by lang —— 默认英文:只要 html[data-lang] 不是 zh(en / 非法值如 404 页的
   data-lang="blog" / 缺失)就隐藏中文、显英文,保证任何异常上下文也是单语言(英文=x-default),
   不会中英双拼。data-lang="zh" 时反过来隐藏英文。 */
[data-lang="zh"] [data-en], :root:not([data-lang="zh"]) [data-zh] { display: none !important; }

.mono { font-family: var(--font-sans); font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
}
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ==========================================================
   Display type — Montserrat
   ========================================================== */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, 4.6vw, 60px);
}
.display--hero {
  font-size: clamp(44px, 6.8vw, 96px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.display--xl {
  font-size: clamp(48px, 7vw, 108px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
.display em {
  display: inline-block;
  position: relative;
}
.hl { color: var(--accent); }

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: background .14s, color .14s, border-color .14s, transform .14s, box-shadow .14s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.btn__arrow { transition: transform .18s; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover { background: var(--accent-2); }
.btn--ghost { color: var(--text); }
.btn--ghost:hover { color: var(--accent); }
/* compact nav buttons — 与 toggle-group 同高(36px)。原来用 padding 撑到 34.8px,
   比两个 toggle 矮 1.2px;改成写死高度,三个控件共用同一条上下缘。 */
.nav__cta, .nav__login { height: 36px; padding: 0 16px; font-size: 13px; }
/* 2026-09-03 用户:幽灵按钮无底色,16px 内边距全读成空白,与金色 CTA 之间显得太空 —— 收窄 */
.nav__login { padding: 0 8px; }
.btn--outline { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn--outline:hover { border-color: var(--text); }
.btn--lg { padding: 13px 26px; font-size: 15px; }
.btn--block { display: flex; justify-content: center; width: 100%; }

/* ===== WhatsApp 联系入口 ===== */
.whatsapp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 44;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, #35c866 70%, var(--border));
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #42d971, #1aab54);
  box-shadow: 0 12px 28px -12px rgba(19, 144, 67, .85), inset 0 1px 0 rgba(255,255,255,.32);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.whatsapp-fab svg { width: 27px; height: 27px; }
.whatsapp-fab__label {
  position: absolute;
  right: calc(100% + 10px);
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.whatsapp-fab:hover {
  filter: saturate(1.06) brightness(1.04);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -13px rgba(19, 144, 67, .95), inset 0 1px 0 rgba(255,255,255,.36);
}
.whatsapp-fab:hover .whatsapp-fab__label,
.whatsapp-fab:focus-visible .whatsapp-fab__label { opacity: 1; transform: translateX(0); }
.whatsapp-fab:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 75%, white); outline-offset: 3px; }
/* Cookie 告知仍在屏幕上时，上移入口，避免两个固定浮层重叠。 */
.cookie-notice ~ .whatsapp-fab { bottom: 104px; }
@media (max-width: 560px) {
  .whatsapp-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 15px; }
  .cookie-notice ~ .whatsapp-fab { bottom: 104px; }
  .whatsapp-fab__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab, .whatsapp-fab__label { transition: none; }
}

/* ===== Cookie 告知条(2026-07 加;只告知,单「同意」按钮,右下角低调悬浮)===== */
.cookie-notice {
  position: fixed;
  right: 20px; bottom: 20px;
  /* 45:高于正常内容(最高 ~z5),但低于移动抽屉(49)/导航(50)/mega menu(60)——
     菜单一打开就盖住这条,不让它浮在菜单上挡内容。 */
  z-index: 45;
  /* 2026-08-07 二次收敛:文案砍成一句 + 字号/内边距整体再小一号 */
  width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 10px 12px;
  /* 半透明磨砂:底色不实心,右上角带一层极淡的品牌金辉光,与 .mega__feature 同一套材质语言 */
  background:
    radial-gradient(130% 150% at 100% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%),
    color-mix(in oklab, var(--surface) 60%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid color-mix(in oklab, var(--border-2) 65%, transparent);
  border-radius: 14px;
  /* 外阴影拉开层次,内高光模拟玻璃边缘 */
  box-shadow: var(--shadow), 0 2px 18px -6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
  animation: cookie-in .3s ease both;
}
/* 磨砂底上文字要再亮一档才读得清 */
.cookie-notice__text { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-2); flex: 1 1 auto; min-width: 0; }
/* 按钮压小一档,弱化存在感 */
.cookie-notice__btn { flex-shrink: 0; padding: 4px 12px; font-size: 11.5px; }
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .cookie-notice { animation: none; } }
@media (max-width: 560px) {
  .cookie-notice { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* ==========================================================
   Nav
   ========================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex; align-items: center; gap: 24px;
  height: 64px;
}
.nav__logo {
  display: inline-flex; align-items: center;
  color: var(--text);
  /* 顶栏项变多(2026-08-06 加 Industries)后禁止 flex 挤压 logo */
  flex: none;
}
.nav__logo img {
  height: 28px;
  width: auto;
  display: block;
}
.nav__logo .logo-dark { display: block; }
.nav__logo .logo-light { display: none; }
:root[data-theme="light"] .nav__logo .logo-dark { display: none; }
:root[data-theme="light"] .nav__logo .logo-light { display: block; }
.nav__links {
  display: flex; align-items: center; gap: 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  margin-left: 36px;
}
.nav__links a { transition: color .14s; white-space: nowrap; }
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.toggle-group {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
/* 高度写死 + flex 居中,不让 line-height 决定高度:否则语言组(文字撑到 29.2px)会比
   主题组(图标按钮固定 28px)高 1.2px,两颗药丸并排时上下缘对不齐。
   语言切换是 <a>(跳对等语言 URL),主题切换是 <button>,选择器两者都收。 */
.toggle-group :is(button, a) {
  border: none; background: transparent;
  /* 圆形小按钮(2026-08-06 用户反馈原药丸太大):宽高相等 + 50% 圆角 */
  border-radius: 50%;
  color: var(--text-3);
  width: 26px; height: 26px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background .14s, color .14s;
}
/* 圆形按钮宽高已定死 26px,「中」「EN」宽度差自然抹平;老的 40px 下限废弃 */
.toggle-group :is(button, a) { min-width: 26px; }
.toggle-group :is(button, a).is-active {
  background: var(--text);
  color: var(--bg);
}
.theme-switch button {
  height: 26px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Theme toggle hidden only on Insights pages (locked to dark) */
[data-lock-dark] .theme-switch { display: none !important; }
@media (max-width: 980px) { .nav__links { display: none; } }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  padding-block: clamp(72px, 8vw, 128px) clamp(64px, 6vw, 96px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
  mask-image: radial-gradient(ellipse 65% 60% at 50% 30%, #000 30%, transparent 100%);
  pointer-events: none;
}
/* 静态琥珀光晕已按需求移除(2026-07-21):首页 .hero::after 与子页 .page-hero::after
   在亮色主题下顶部一片黄雾观感不适。::before 的网格纹与光标跟随光晕(CursorGlow)保留。 */
.hero__inner { position: relative; text-align: center; z-index: 1; }
/* Cursor glow lives inside the hero only (homepage) — bounded to the hero box */
.hero > .cursor-glow { position: absolute; z-index: 0; }
.hero__copy { max-width: 920px; margin: 0 auto; }
.hero__copy .display--hero { margin: 0 auto; }
.hero__lede {
  margin: 36px auto 0;
  max-width: 80ch;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--text-3);
  line-height: 1.7;
  font-weight: 400;
}
.hero__lede strong { color: var(--text-2); font-weight: 500; }

.hero__ctas { margin-top: 36px; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero__lede + .hero__ctas { margin-top: 28px; }

/* Engine marquee — single row, auto-scroll left */
.engine-marquee {
  margin: 56px auto 0;
  width: min(1160px, calc(100vw - clamp(40px, 7.8vw, 112px)));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.engine-marquee__track {
  --marquee-gap: 56px;
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.engine-marquee__item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-2);
}
.engine-marquee__logo {
  width: 36px; height: 36px;
  object-fit: contain;
  border-radius: 6px;
}
:root[data-theme="dark"] .engine-marquee__logo--invert { filter: brightness(0) invert(1); }
:root[data-theme="light"] .engine-marquee__logo--invert { filter: none; }
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - (var(--marquee-gap) / 2))); }
}

/* hero mock answer */
.hero__mock {
  position: relative;
  margin: 72px auto 0;
  max-width: 920px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  text-align: left;
  box-shadow: var(--shadow);
}
.mock__bar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12px;
}
.mock__avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #19c37d 0%, #0d7c5a 100%);
}
.mock__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; }
.mock__live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.6s infinite; }
.mock__q {
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 16px;
  color: var(--text-2);
  font-size: 13.5px;
}
.mock__q::before { content: "› "; color: var(--accent); font-weight: 700; }
.mock__a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}
.mock__a mark {
  background: var(--hl-bg);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.mock__a sup { color: var(--accent); font-weight: 600; font-size: 0.75em; padding-left: 2px; }
.mock__cites {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex; gap: 20px; flex-wrap: wrap;
  color: var(--text-3);
  font-size: 12px;
}
.mock__cites strong { color: var(--accent); font-weight: 600; margin-right: 4px; }

/* ==========================================================
   Section base
   ========================================================== */
.section { padding-block: clamp(72px, 9vw, 128px); position: relative; }
.section + .section { border-top: 1px solid var(--border); }
.section__head { max-width: 880px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.section__head .display { margin: 0 auto; }
.section__lede {
  margin: 22px auto 0;
  font-size: clamp(15px, 1.15vw, 17.5px);
  color: var(--text-2);
  max-width: 56ch;
  line-height: 1.65;
}
.section__lede--split {
  max-width: 74ch;
}
.section__lede--split span {
  display: block;
}

/* ==========================================================
   Features (4-up grid)
   ========================================================== */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.feature {
  padding: 28px 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  transition: border-color .15s, transform .15s, background .15s;
}
.feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.feature__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--text);
}
.feature__copy { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.feature__list { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.8; }
@media (max-width: 980px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .features--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ==========================================================
   Steps (4-up workflow)
   ========================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}
.step {
  position: relative;
  text-align: left;
  padding: 0;
}
/* thin connector running from each badge to the next (left-anchored timeline) */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 23px;            /* vertical centre of the 46px badge */
  left: 58px;           /* just past the badge */
  right: -30px;         /* reach across the grid gap to the next badge */
  height: 1px;
  background: linear-gradient(to right, var(--border-2), var(--border-2) 72%, transparent);
  z-index: 0;
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--surface));
  border: 1px solid var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  margin: 0 0 20px;
  position: relative; z-index: 1;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.step:hover .step__num {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: 0 8px 20px -8px var(--glow);
}
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 11px;
  text-wrap: balance;
  min-height: 2lh; /* reserve 2 lines so every body copy starts on the same baseline */
}
.step__copy {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.72;
  margin: 0;
  text-wrap: pretty;
  min-height: 3lh; /* reserve 3 lines so every step keeps the same height */
}
[lang="zh-CN"] .step__copy, [data-lang="zh"] .step__copy { line-height: 1.85; }
@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .step:not(:last-child)::before { display: none; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ==========================================================
   Engines · comparison strip
   ========================================================== */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.metric { padding: 28px 28px; border-right: 1px solid var(--border); }
.metric:last-child { border-right: none; }
.metric__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.metric__num .hl { color: var(--accent); }
.metric__lbl { color: var(--text); font-size: 15px; margin-bottom: 6px; max-width: none; line-height: 1.4; text-wrap: balance; }
.metric__sub { color: var(--text-3); font-size: 11.5px; letter-spacing: 0.04em; }
@media (max-width: 880px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metric { padding: 16px 12px; }
  .metric__num { font-size: clamp(22px, 6.4vw, 34px); margin-bottom: 8px; }
  .metric__lbl { font-size: 11.5px; max-width: none; }
  .metric__sub { font-size: 9.5px; letter-spacing: 0.02em; }
}

/* ==========================================================
   Pricing
   ========================================================== */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
/* 四档(2026-08-06:99/199/399 + 托管):卡窄一档,中屏 2×2 */
.plans--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .plans--4 { grid-template-columns: repeat(2, 1fr); } }
/* 2026-08-07 Peec 式收敛:每月单价为主(数字别巨大),价格区高度同步收小;
   同日二轮:卡片整体压短 —— 价格区 64px、行距/区块间距收紧、清单 6 行全单行 */
.plans--4 .plan { padding: 26px 24px 24px; }
.plans--4 .plan__num { font-size: clamp(26px, 2.2vw, 32px); }
.plans--4 .plan__quote { font-size: 22px; }
/* 2026-09-03 用户:最右「定制报价」卡的指标行比旁边高一截 —— 数字价区实测 74px、文字报价区 67px。
   两者钉成同一固定高度(border-box),四张卡的指标行起始线才对齐 */
.plans--4 .plan__price, .plans--4 .plan__quote { height: 74px; min-height: 0; box-sizing: border-box; padding-bottom: 16px; margin-bottom: 16px; }
.plans--4 .plan__name { font-size: 17px; }
.plans--4 .plan__row { padding: 9px 0; }
.plans--4 .plan__rows { margin-bottom: 18px; }
.plans--4 .plan__models { margin: 20px 0 18px; }
.plans--4 .plan__models-note { margin-top: 10px; }
.plan__row svg { flex: none; color: var(--text-3); }
.plan__list--cmp li { white-space: nowrap; }
/* 豆包 logo 是方形头像底,全站统一切圆角(其余 logo 自带形状不受影响) */
img[src*="/logos/doubao"] { border-radius: 26%; }
.plan {
  padding: 32px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* 悬停任意套餐卡:金色描边 + 光晕 + 微抬,交互跟手(此前 hover 仅换 --border-2 几乎不可见,
   加上中间推荐卡常驻高亮,给人「只有中间在亮」的错觉) */
.plan:hover {
  border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
  box-shadow: 0 18px 44px -22px color-mix(in oklab, var(--accent) 30%, transparent);
  transform: translateY(-2px);
}
/* 2026-09-03 用户:推荐卡初始只留金色细边,不再常驻渐变底+光晕(那套读起来像已选中);
   点击任意一张卡才进入选中态 .plan--selected,即原推荐卡的高亮效果 */
.plan { cursor: pointer; }
.plan--featured { border-color: var(--accent); }
.plan--selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, var(--surface)) 0%, var(--surface) 60%);
  box-shadow: 0 24px 56px -24px color-mix(in oklab, var(--accent) 35%, transparent);
}
/* 选中卡悬停时光晕再强一档(避免被通用 hover 的较小 box-shadow 盖弱) */
.plan--selected:hover {
  box-shadow: 0 26px 60px -22px color-mix(in oklab, var(--accent) 42%, transparent);
}
/* 2026-09-03 用户:鼠标移到任意一张卡上,它的 CTA 就先变成金色实心(与选中态同款);
   移开恢复描边,点击后才固定为选中态 */
.plan:hover .btn--outline {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
/* mega 菜单条目「NEW」小标(2026-09-03):与 plan__badge 同一套金底深字,行内跟在标题后 */
.mega__new {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  background: var(--accent); color: var(--accent-ink);
  padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; line-height: 1.4; letter-spacing: 0.1em; font-weight: 700;
  text-transform: uppercase; white-space: nowrap;
}
/* 首页 hero 的 OpenAI Select Partner 徽标(2026-09-03 第三版,用户拍板):挂在眉题同一行、
   细分隔线隔开,透明底(深色主题白字、浅色主题黑字,靠 logo-dark/logo-light 切换),
   高度 30px 不另起一块,页面不往下长 */
/* OpenAI 徽标 2026-09-03 在眉题位试了五版都不协调,最终撤出 hero,改为独立的「合作伙伴」模块
   (.partner,见下方);hero 眉题/顶部间距回到基线 */
/* ── 合作伙伴模块(对标 canlah.ai 的 Partner Status 卡,按本站设计语言重做):
   左=官方徽标坐在浅一档的面板上,右=眉题 + display 标题 + 一句说明 + 外链 ── */
.partner {
  display: grid; grid-template-columns: minmax(260px, 2fr) 3fr; align-items: stretch;
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--surface);
}
.partner__badge {
  display: flex; align-items: center; justify-content: center; padding: 40px 32px;
  background: color-mix(in oklab, var(--text) 4%, var(--surface));
  border-right: 1px solid var(--border);
}
.partner__badge img { width: min(100%, 300px); height: auto; border-radius: 14px; }
.partner__body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.partner__body .eyebrow { margin-bottom: 14px; }
.partner__body .display { font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 14px; }
.partner__copy { color: var(--text-2); font-size: 15px; line-height: 1.65; max-width: 560px; margin: 0 0 22px; }
.partner__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--text); padding-bottom: 2px; text-decoration: none; }
.partner__link:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 860px) {
  .partner { grid-template-columns: 1fr; }
  .partner__badge { border-right: 0; border-bottom: 1px solid var(--border); padding: 32px; }
  .partner__body { padding: 28px 24px 32px; }
}
/* 浅色主题下顶部网格线穿过徽标框显得打架 —— 网格遮罩再叠一层自上而下的渐入,顶部 22% 淡出 */
.hero::before {
  mask-image:
    radial-gradient(ellipse 65% 60% at 50% 30%, #000 30%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 22%);
  -webkit-mask-image:
    radial-gradient(ellipse 65% 60% at 50% 30%, #000 30%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 22%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.plan__badge {
  position: absolute; top: -10px; right: 24px;
  background: var(--accent); color: var(--accent-ink);
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: 0.1em; font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan__name {
  order: -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.plan__sub { order: -2; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.plan__price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
}
.plan__currency { color: var(--text-3); font-size: 14px; font-weight: 500; }
.plan__num {
  font-weight: 800;
  font-size: clamp(42px, 4vw, 54px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plan__per { color: var(--text-3); font-size: 13.5px; font-weight: 500; }
/* 价格下的口径注(问句数 / 引擎数 / 加购价):换行占满整行,观感与 .plan__quote small 一致 */
.plan__price { flex-wrap: wrap; }
/* 数字版(.plan__price)与文字版(.plan__quote,如「Base + Bonus」)同排时高度要一致,
   否则同一排卡片的功能列表起始线错位。数字行跟着 .plan__num 的 clamp 走,
   余下 52px = 注释行 + 间距 + 下内边距(border-box,实测对齐值)。 */
.plan__price, .plan__quote { min-height: calc(clamp(42px, 4vw, 54px) + 52px); }
.plan__price small {
  flex: 0 0 100%;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-weight: 500; font-size: 12.5px; line-height: 1.5;
  color: var(--text-3);
}
/* Peec 式定价卡内部(2026-08-06):计费切换 / 指标行 / AI 引擎 / ✓·— 对照清单 */
/* 2026-08-07 用户:切换器不要单独右挂,居中、贴着下面的卡片组一起出现 */
.plans__cycle { display: flex; justify-content: center; margin-bottom: 22px; }
.plan__rows { border-top: 1px solid var(--border); margin-bottom: 22px; }
.plan__row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.plan__row i { margin-left: auto; font-style: normal; font-weight: 700; color: var(--text); font-size: 13.5px; }
.plan__models { margin: 22px 0 20px; }
.plan__models-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.plan__models-hd em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
/* logo 缩到 16px、间距收紧:四列窄卡里 9 个 logo 也排得下一行 */
/* 引擎选择器(2026-08-07):9 选 N 的档位可点,未选的置灰但仍可点亮;
   格子放宽到 30px 并允许换行(一行 5 个 + 一行 4 个),比原来挤成一行好点也好看 */
.plan__engs { display: flex; flex-wrap: wrap; gap: 7px; }
.plan__eng {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
}
.plan__eng img { width: 17px; height: 17px; }
.plan__eng:not(.is-on) img { opacity: .32; filter: grayscale(1); }
:root[data-theme="dark"] .plan__eng:not(.is-on) img.ha-eng__logo--invert { filter: brightness(0) invert(1) grayscale(1); }
/* 选中=金边金底(全含档位的静态格子同样式,四张卡视觉一致);未选=素边;可点的另有 hover/focus */
.plan__eng.is-on { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: color-mix(in oklab, var(--accent) 10%, transparent); }
button.plan__eng { cursor: pointer; transition: border-color .15s, background .15s; }
button.plan__eng:not(.is-on) { border-color: var(--border); }
button.plan__eng:hover { border-color: var(--accent); }
button.plan__eng:focus-visible { outline: 2px solid var(--hl-bg); outline-offset: 2px; }
.plan__models-hd em { white-space: nowrap; }
.plan__models-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-3); }
:root[data-theme="dark"] .plan__engs img.ha-eng__logo--invert { filter: brightness(0) invert(1); }
/* 卡内只留差异项(托管执行);5 项共有功能移到卡组下方,见 .plans__incl */
.plan__managed {
  display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: baseline;
  margin: 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.plan__managed .check { color: var(--accent); font-weight: 700; font-size: 11px; }
.plan__managed.is-off { color: var(--text-3); }
.plan__managed.is-off .check { color: var(--text-3); font-weight: 500; }
/* 共有功能一条带:圆点分隔的小字,替代四张卡里各重复一遍的清单 */
.plans__incl {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 8px 18px;
  margin: 26px auto 0; max-width: 940px;
  font-size: 12.5px; color: var(--text-3); text-align: center;
}
.plans__incl b { color: var(--text-2); font-weight: 600; }
.plans__incl > span { position: relative; }
.plans__incl > span + span::before {
  content: '·'; position: absolute; left: -11px; color: var(--text-3); opacity: .6;
}

.plan__list { display: grid; gap: 9px; margin-bottom: 28px; }
.plan__list li {
  display: grid; grid-template-columns: 14px 1fr; gap: 8px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}
.plan__list .check { color: var(--accent); font-weight: 700; }
.plan .btn--block { margin-top: auto; }
@media (max-width: 980px) {
  .plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq { margin-top: 48px; }
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__item:first-child { border-top: 1px solid var(--border); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  transition: transform .25s ease;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a {
  padding: 0 0 20px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
}

/* ==========================================================
   Final CTA
   ========================================================== */
.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(80px, 10vw, 144px);
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 100%);
  pointer-events: none;
}
.cta::after {
  content: ""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%);
  filter: blur(40px);
  opacity: 0.4;
  pointer-events: none;
}
.cta__inner { position: relative; max-width: 1120px; margin: 0 auto; }
.cta .display--xl {
  font-size: clamp(40px, 5.9vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.text-nowrap { white-space: nowrap; }
.cta__lede { margin-top: 28px; color: var(--text-2); font-size: 18px; max-width: 48ch; margin-inline: auto; }
.cta__actions { margin-top: 36px; display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta__sig { margin-top: 56px; color: var(--text-3); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }

/* ==========================================================
   Footer
   ========================================================== */
.footer {
  background: var(--bg-2);
  padding-block: 64px 36px;
  border-top: 1px solid var(--border);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 2.4fr;
  gap: 48px;
}
.footer__tag {
  font-size: 14px;
  margin: 16px 0 18px;
  max-width: none;
  color: var(--text-2);
  line-height: 1.65;
}
.footer__socials {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: background .14s, color .14s, border-color .14s, transform .14s;
}
.footer__socials a:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.footer__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px 20px; }
.footer__cols .footer__col-title {
  margin: 0 0 16px;
  color: var(--text-3);
  font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-family: var(--font-display);
}
.footer__cols a {
  display: block; padding: 5px 0;
  color: var(--text-2);
  font-size: 14px;
  transition: color .14s;
}
.footer__cols a:hover { color: var(--text); }
.footer__base {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  color: var(--text-3);
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
}
.footer__base a:hover { color: var(--text); }
@media (max-width: 880px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   Sub-pages (about / blog / article) — extends base theme
   ========================================================== */

/* Page header (sub-page hero, smaller than landing hero) */
.page-hero {
  position: relative;
  padding-block: clamp(96px, 12vw, 168px) clamp(48px, 6vw, 80px);
  text-align: center;
  overflow: hidden;
}
/* compact hero for Insights listing pages — so the first article card shows above the fold */
.page-hero--compact { padding-block: clamp(44px, 6vw, 76px) clamp(22px, 3vw, 36px); }
.page-hero--compact .display--hero { font-size: clamp(38px, 4.6vw, 60px); }
.page-hero--compact .page-hero__lede { margin-top: 14px; font-size: 16px; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 25%, transparent 100%);
  pointer-events: none;
}
/* .page-hero::after 静态光晕已移除(2026-07-21,同 .hero::after) */
.page-hero__inner { position: relative; max-width: 920px; margin: 0 auto; }
.page-hero__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  height: 64px;
}
.page-hero__logo img {
  height: 100%;
  width: auto;
  display: block;
}
.page-hero__logo .logo-dark { display: block; }
.page-hero__logo .logo-light { display: none; }
:root[data-theme="light"] .page-hero__logo .logo-dark { display: none; }
:root[data-theme="light"] .page-hero__logo .logo-light { display: block; }
.page-hero__lede {
  margin: 22px auto 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--text-2);
  line-height: 1.65;
}
.page-hero[data-screen-label="02 Pricing hero"] {
  padding-bottom: clamp(24px, 3vw, 40px);
}

/* Two-column prose ↔ aside */
.prose-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.prose-grid > h2.display {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  font-weight: 500;
  line-height: 1.1;
  max-width: 12ch;
}
.prose-grid .prose-body { color: var(--text-2); font-size: 16px; line-height: 1.75; max-width: 64ch; }
.prose-grid .prose-body p + p { margin-top: 16px; }
.prose-grid .prose-body strong { color: var(--text); }
@media (max-width: 880px) { .prose-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Timeline (eras of search) */
.era {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.era__card {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  transition: border-color .15s, transform .15s;
}
.era__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.era__tag {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.era__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 14px;
}
.era__num--accent { color: var(--accent); }
.era__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 8px;
}
.era__copy { color: var(--text-2); font-size: 14px; line-height: 1.6; }
@media (max-width: 880px) { .era { grid-template-columns: 1fr; } }

/* Failure grid — 2 column "ways brands go silent" */
.failures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.failure {
  padding: 26px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  transition: border-color .15s, transform .15s;
}
.failure:hover { border-color: var(--accent); transform: translateY(-2px); }
.failure__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--accent);
  margin-bottom: 16px;
}
.failure__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 4px;
}
.failure__en {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 12px;
}
/* In English the title is already English — drop the duplicate label */
[data-lang="en"] .failure__en { display: none; }
.failure__copy { color: var(--text-2); font-size: 14px; line-height: 1.6; }
@media (max-width: 1080px) { .failures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .failures { grid-template-columns: 1fr; } }

/* Case studies */
.cases-grid {
  display: grid;
  gap: 16px;
}
.case-card {
  padding: 36px clamp(28px, 4vw, 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.case-card::before {
  content: ""; position: absolute;
  top: -200px; right: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.5;
}
.case-card__meta { position: relative; }
.case-card__tag {
  display: inline-block;
  padding: 5px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.case-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--text);
  max-width: 22ch;
}
.case-card__title .hl { color: var(--accent); }
.case-card__copy { color: var(--text-2); font-size: 15px; line-height: 1.7; max-width: 50ch; }

.case-card__stats {
  display: grid;
  gap: 18px;
  position: relative;
  border-left: 1px solid var(--border);
  padding-left: clamp(20px, 3vw, 32px);
}
.case-card__stat { display: grid; gap: 4px; }
.case-card__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.case-card__stat-num small {
  font-size: 0.42em;
  font-weight: 600;
  margin-left: 4px;
  opacity: 0.75;
}
.case-card__stat-lbl { color: var(--text-2); font-size: 13px; }
@media (max-width: 880px) {
  .case-card { grid-template-columns: 1fr; }
  .case-card__stats { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 24px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .case-card__stats { grid-template-columns: 1fr; }
}

/* Engines list (about) */
.engines-grid {
  display: grid;
  /* 9 家引擎:3×3 正好铺满;4 列会剩一张孤卡吊在第三行(2026-08-06 用户反馈「排列奇怪」) */
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.engine-card {
  padding: 22px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: border-color .15s, transform .15s;
}
.engine-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.engine-card__glyph {
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}
:root[data-theme="dark"] .engine-card__glyph--invert { filter: brightness(0) invert(1); }
:root[data-theme="light"] .engine-card__glyph--invert { filter: none; }
.engine-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 4px;
}
.engine-card__owner { color: var(--text-3); font-size: 12px; }
@media (max-width: 980px) { .engines-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .engines-grid { grid-template-columns: repeat(2, 1fr); } }

/* Delivery process (5 steps) */
.process {
  display: grid;
  gap: 0;
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.process__step {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  gap: 24px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background .14s;
}
.process__step:last-child { border-bottom: none; }
.process__step:hover { background: var(--bg-3); }
.process__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3vw, 48px);
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.process__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 6px;
}
.process__copy { color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 56ch; }
.process__out {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-transform: uppercase;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.process__out strong { display: block; color: var(--text); font-weight: 600; font-size: 13px; margin-top: 3px; text-transform: none; letter-spacing: -0.01em; }
@media (max-width: 880px) {
  .process__step { grid-template-columns: 60px 1fr; }
  .process__out { grid-column: 1 / -1; padding-left: 0; padding-top: 12px; border-left: none; border-top: 1px solid var(--border); }
}

/* Locations */
.locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.location {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.location__city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 6px;
}
.location__addr { color: var(--text-2); font-size: 14px; line-height: 1.6; }
@media (max-width: 720px) { .locations { grid-template-columns: 1fr; } }

/* ==========================================================
   Blog index + article
   ========================================================== */

/* Blog index */
.blog-index {
  position: relative;
  padding: 96px 0 clamp(84px, 10vw, 128px);
  overflow: hidden;
  background: #050609;
}
.blog-index__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.blog-index__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 62% at 50% 30%, #000 28%, transparent 90%);
  opacity: .45;
}
.blog-index__bg::after {
  content: "";
  position: absolute;
  top: 150px;
  left: 50%;
  width: min(760px, 80vw);
  height: 620px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 15%, rgba(112, 96, 255, .16), transparent 54%),
    radial-gradient(circle at 50% 70%, rgba(112, 96, 255, .08), transparent 62%);
  filter: blur(28px);
}
.blog-hero {
  position: relative;
  max-width: 880px;
  text-align: center;
  padding-top: 16px;
  padding-bottom: clamp(72px, 8vw, 104px);
}
.blog-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: rgba(255,255,255,.38);
  font-size: 16px;
  font-weight: 500;
}
.blog-crumb a { color: inherit; }
.blog-crumb a:hover { color: rgba(255,255,255,.82); }
.blog-crumb span:last-child { color: rgba(255,255,255,.78); }
.blog-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(58px, 7.8vw, 88px);
  line-height: .96;
  letter-spacing: -0.06em;
  font-weight: 900;
}
.blog-hero p {
  margin: 26px auto 0;
  color: rgba(255,255,255,.48);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.45;
  max-width: 760px;
}
.blog-controls {
  position: relative;
  max-width: 1160px;
  padding-bottom: 38px;
}
.blog-controls__label {
  margin: 0 0 12px;
  text-align: center;
  color: rgba(255,255,255,.35);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-categories,
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.blog-categories { margin-bottom: 20px; }
.blog-categories button,
.blog-tags button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.62);
  font-family: var(--font-sans);
  transition: color .14s, background .14s, border-color .14s, transform .14s;
}
.blog-categories button {
  padding: 11px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}
.blog-categories button.is-active {
  border-color: transparent;
  background: #6f5cff;
  color: #fff;
  box-shadow: 0 16px 34px -18px rgba(111,92,255,.95);
}
.blog-categories button span {
  margin-left: 6px;
  font-size: 12px;
  opacity: .68;
}
.blog-tags span {
  margin-right: 8px;
  color: rgba(255,255,255,.35);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-tags button {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
}
.blog-categories button:hover,
.blog-tags button:hover {
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
.blog-grid {
  position: relative;
  max-width: 1160px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.blog-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  text-align: left;
  transition: border-color .16s, transform .16s, background .16s;
}
.blog-card:hover {
  border-color: rgba(111,92,255,.45);
  background: rgba(255,255,255,.052);
  transform: translateY(-3px);
}
.blog-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255,255,255,.05);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.blog-card__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
.blog-card__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(111,92,255,.13);
  color: #9488ff;
  font-size: 11px;
  line-height: 1;
}
.blog-card__chips .blog-card__cat {
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  font-weight: 600;
}
.blog-card h2 {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.03em;
}
.blog-card p {
  margin: 0 0 20px;
  color: rgba(255,255,255,.5);
  font-size: 14px;
  line-height: 1.75;
}
.blog-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.4);
  font-size: 12px;
}
.blog-card__stats {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  color: rgba(255,255,255,.35);
  font-size: 11px;
}
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .blog-index { padding-top: 84px; }
  .blog-hero { padding-bottom: 56px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-tags span { width: 100%; margin: 0 0 2px; text-align: center; }
}

.posts {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.post-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  padding: 32px clamp(24px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .15s, transform .15s;
  text-align: left;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.post-card__meta { display: inline-flex; flex-wrap: wrap; gap: 12px; color: var(--text-3); font-size: 12px; margin-bottom: 14px; align-items: center; }
.post-card__meta .dot { width: 3px; height: 3px; background: var(--text-3); border-radius: 50%; opacity: .6; }
.post-card__cat {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.post-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--text);
  max-width: 22ch;
}
.post-card__excerpt { color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 56ch; margin-bottom: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.post-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent);
  font-weight: 500;
  font-size: 14px;
}
.post-card__visual {
  position: relative;
  height: 100%;
  min-height: 180px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    var(--bg-3);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.post-card__visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  pointer-events: none;
}
.post-card__visual span {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 0.95;
  padding: 24px;
  text-align: center;
}
.post-card__visual .hl { color: var(--accent); }

.posts-coming {
  margin-top: 36px;
  padding: 36px 28px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  color: var(--text-3);
}
.posts-coming strong { color: var(--text); display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }

@media (max-width: 720px) {
  .post-card { grid-template-columns: 1fr; }
  .post-card__visual { min-height: 160px; }
}

/* Article (single blog post) */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding-block: clamp(48px, 7vw, 96px) clamp(80px, 10vw, 144px);
  padding-inline: var(--gutter);
}
.article__meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.article__meta .dot { width: 3px; height: 3px; background: var(--text-3); border-radius: 50%; opacity: .6; }
.article__cat {
  font-family: var(--font-sans);
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.article__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.13;
  margin: 0 0 24px;
  color: var(--text);
}
.article__lede {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.62;
  color: var(--text-2);
  margin: 0 0 40px;
  max-width: 56ch;
  font-weight: 400;
  letter-spacing: 0;
}
.article__body { color: var(--text); font-family: var(--font-sans); font-size: 18px; line-height: 1.85; margin-top: clamp(36px, 5vw, 52px); }
/* cap the reading measure (~37em ≈ 650px) so English lines stay comfortable; tables/figures stay full width */
.article__body p,
.article__body ul,
.article__body ol,
.article__body blockquote { max-width: 42em; }
.article__body p { margin-bottom: 24px; text-align: left; }
.article__body strong { color: var(--text); font-weight: 600; }
.article__body em { font-family: var(--font-article-head); font-style: italic; font-weight: 500; color: inherit; }
.article__body h2 {
  font-family: var(--font-article-head);
  font-weight: 600;
  font-size: clamp(27px, 2.6vw, 34px);
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin: 88px 0 20px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  color: var(--text);
}
.article__body h3 {
  font-family: var(--font-article-head);
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 48px 0 14px;
  color: var(--text);
}
.article__body ul, .article__body ol {
  margin: 16px 0 20px;
  padding-left: 20px;
}
.article__body ul li, .article__body ol li {
  margin-bottom: 8px;
  color: var(--text-2);
  list-style: disc outside;
}
.article__body ol li { list-style: decimal outside; }
.article__body blockquote {
  margin: 40px 0;
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--accent);
  background: transparent;
  border-radius: 0;
  color: var(--text);
  font-family: var(--font-article-head);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.5;
}
.article__body a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  transition: border-color .14s;
}
.article__body a:hover { border-bottom-color: var(--accent); }
.article__body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}
.article__cta {
  margin-top: 56px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.article__cta-text {
  font-family: var(--font-article-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.article__cta-sub { color: var(--text-2); font-size: 13px; margin-top: 4px; }

/* Article — bilingual serif hardening (Noto Serif SC ships only 700/900) */
:lang(zh) .article__title, [lang="zh"] .article__title, [lang="zh-CN"] .article__title,
:lang(zh) .article__body h2, [lang="zh"] .article__body h2, [lang="zh-CN"] .article__body h2,
:lang(zh) .article__body h3, [lang="zh"] .article__body h3, [lang="zh-CN"] .article__body h3 {
  font-weight: 700;
  letter-spacing: 0;
}
:lang(zh) .article__body em, [lang="zh"] .article__body em, [lang="zh-CN"] .article__body em {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}
:lang(zh) .article__body blockquote, [lang="zh"] .article__body blockquote, [lang="zh-CN"] .article__body blockquote {
  font-family: var(--font-article-head);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7;
}

/* Check form */
.check-form { margin-top: 32px; }
.check-form__row {
  display: flex;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.check-form__input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-family: var(--font-body);
  transition: border-color .2s;
}
.check-form__input::placeholder { color: var(--text-3); }
.check-form__input:focus {
  outline: none;
  border-color: var(--accent);
}
.check-form__note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-3);
}
@media (max-width: 540px) {
  .check-form__row { flex-direction: column; }
}

/* ==========================================================
   Hero Quick-Check search + AI-visibility audit demo
   ========================================================== */
.hero-check { margin: 34px auto 0; max-width: 600px; }
.hero-check__row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 5px 5px 5px 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 18px 40px -30px rgba(0,0,0,.7);
  transition: border-color .18s, box-shadow .18s;
}
.hero-check__row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--hl-bg); }
.hero-check__field { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding-left: 8px; }
.hero-check__icon { color: var(--text-3); flex: none; }
.hero-check__input {
  flex: 1; min-width: 0;
  border: none; background: transparent; color: var(--text);
  font-size: 15px; font-family: var(--font-sans);
  padding: 9px 0; text-align: left;
}
.hero-check__input:focus { outline: none; }
.hero-check__input::placeholder { color: var(--text-3); }
.hero-check__btn { flex: none; position: relative; padding: 10px 22px; font-size: 14px; }
.hero-check__spin {
  position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.22); border-top-color: var(--accent-ink);
  opacity: 0;
}
.hero-check.is-loading .hero-check__btn-label,
.hero-check.is-loading .hero-check__btn .btn__arrow { visibility: hidden; }
.hero-check.is-loading .hero-check__spin { opacity: 1; animation: ha-spin .7s linear infinite; }
.hero-check__note { margin-top: 14px; font-size: 12.5px; color: var(--text-3); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.hero-check__ok { display: inline-flex; align-items: center; gap: 5px; }
.hero-check__ok b { color: var(--accent); font-weight: 700; }

.hero-audit {
  max-width: 760px; margin: 22px auto 0;
  text-align: left;
  overflow: hidden;
  opacity: 0; max-height: 0; transform: translateY(8px);
  transition: opacity .5s ease, max-height .6s ease, transform .5s ease;
}
.hero-audit.is-open { opacity: 1; max-height: 980px; transform: none; }
.hero-audit__card {
  display: grid; grid-template-columns: 1.45fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-audit__main { padding: 20px 22px; }
.hero-audit__side { padding: 20px 22px; border-left: 1px solid var(--border); background: var(--bg-2); display: flex; flex-direction: column; }
.hero-audit__cta-row { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.hero-audit__cta-row .btn { width: 100%; justify-content: center; }

.hero-audit__brandrow { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.hero-audit__favicon {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink); font-weight: 700; font-family: var(--font-display);
  text-transform: uppercase; font-size: 17px;
}
.hero-audit__brandmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hero-audit__domain { font-weight: 600; font-size: 15px; color: var(--text); font-family: var(--font-display); }
.hero-audit__brandsub { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.hero-audit__count { color: var(--accent); font-weight: 700; font-feature-settings: "tnum"; }
.hero-audit__sample {
  flex: none; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}

.hero-audit__prompts { display: flex; flex-direction: column; gap: 8px; }
.ha-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  opacity: 0; transform: translateX(-8px);
  position: relative; overflow: hidden;
}
.ha-prompt.is-in { animation: ha-rowin .42s cubic-bezier(.2,.7,.3,1) forwards; }
/* "generating" sweep as each query row appears */
.ha-prompt.is-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--hl-bg) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: ha-gen-sweep .9s ease both;
}
@keyframes ha-gen-sweep { to { transform: translateX(120%); } }
.ha-prompt--peek { opacity: .5; transform: none; filter: blur(4px); pointer-events: none; user-select: none; }
/* 加载占位行:静态直出(不依赖 is-in 入场动画,避免占位在动画未跑时不可见) */
.ha-prompt--static { opacity: 1; transform: none; }
.ha-prompt__q { font-size: 13px; color: var(--text); line-height: 1.4; flex: 1; }
.ha-prompt__engs { display: flex; gap: 5px; flex: none; }
/* 每问右侧:自有品牌在该问回答中的最优名次(未提及留白占位,保持对齐) */
.ha-prompt__rank { flex: none; min-width: 26px; text-align: right; font-size: 12px; font-weight: 700; color: var(--accent); font-feature-settings: "tnum"; }
.ha-eng {
  width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--border);
  opacity: .32; filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ha-eng img { width: 12px; height: 12px; }
.ha-eng.is-lit { opacity: 1; filter: none; border-color: rgba(229,163,56,.5); box-shadow: 0 0 0 2px var(--hl-bg); }
/* 品牌小圆片:该问题回答里出现的品牌(按名次排列);is-self=我们的品牌高亮 */
.ha-prompt__brands { display: flex; gap: 5px; flex: none; }
.ha-bchip {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  opacity: 0; transform: scale(.6);
  transition: opacity .3s ease, transform .3s ease;
}
.ha-bchip.is-in { opacity: 1; transform: none; }
/* 目标品牌:与其他圆片同尺寸,靠主题色底 + 光圈区分(放大会挤乱行内节奏) */
.ha-bchip.is-self {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--hl-bg);
  border: 1px solid rgba(229,163,56,.5);
}
/* 品牌 logo 图:必须 contain 不能 cover —— favicon 大多四周留白,cover 会放大裁剪到
   只剩中间的白边,整个圆片糊成一片白(实测 ruidaedu/zqbao 等一批中文站)。
   白底 + 内缩衬托透明 PNG,深色主题下也看得清。 */
.ha-bchip img,
.aud-comp__av img,
.hero-audit__favicon img {
  width: 100%; height: 100%; border-radius: inherit; display: block;
  object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box;
}
.ha-bchip--dim { background: var(--bg-3); border: 1px solid var(--border); }
/* 等待态:问题已亮、名次/品牌还在跑 —— 圆片与名次条脉动 */
.ha-bchip--wait { background: var(--bg-3); border: 1px solid var(--border); animation: ha-wait-pulse 1.1s ease-in-out infinite; }
.ha-rankwait { display: inline-block; width: 22px; height: 10px; border-radius: 999px; background: var(--bg-3); animation: ha-wait-pulse 1.1s ease-in-out infinite; }
@keyframes ha-wait-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
.hero-audit__loadline { display: flex; align-items: center; gap: 8px; padding: 12px 2px 0; font-size: 12.5px; color: var(--text-2); }
:root[data-theme="dark"] .ha-eng__logo--invert { filter: brightness(0) invert(1); }
:root[data-theme="light"] .ha-eng__logo--invert { filter: none; }

.hero-audit__load { position: relative; min-height: 200px; }
.hero-audit__load[hidden], .hero-audit__result[hidden], .hero-audit__prompts[hidden] { display: none; }
.hero-audit__load-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.hero-audit__load-txt { font-size: 13px; color: var(--text-2); }
.aud-comp--ghost { filter: blur(7px); opacity: .5; pointer-events: none; user-select: none; }
/* 竞品榜:榜外自有品牌前的虚化占位行 + 底部自有行(与上方虚线隔开) */
.aud-comp__row--ghost { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; }
.aud-comp__row--foot { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border-2); }
.hero-audit__spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-2); border-top-color: var(--accent);
  animation: ha-spin .7s linear infinite;
}
.hero-audit__side-title { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }
.hero-audit__bars { display: flex; flex-direction: column; gap: 13px; }
.ha-bar { display: flex; flex-direction: column; gap: 6px; }
.ha-bar__head { display: flex; align-items: center; gap: 8px; }
.ha-bar__logo { width: 15px; height: 15px; flex: none; }
.ha-bar__name { font-size: 12.5px; color: var(--text); flex: 1; }
.ha-bar__pct { font-size: 12.5px; color: var(--text-2); font-weight: 600; font-feature-settings: "tnum"; }
.ha-bar__track { height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.ha-bar__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s cubic-bezier(.2,.7,.3,1); }

.hero-audit__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--accent); }
.hero-audit__cta:hover { color: var(--accent-2); }
.hero-audit__cta:hover .btn__arrow { transform: translateX(3px); }

@keyframes ha-spin { to { transform: rotate(360deg); } }
@keyframes ha-rowin { to { opacity: 1; transform: none; } }

/* 速查失败态:按失败类型给明确提示(替代静默演示数据) */
.aud-report__error {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 72px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
}
.aud-report__error-ico {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--accent); background: var(--hl-bg);
}
.aud-report__error-title { font-size: 20px; margin: 0; color: var(--text); }
.aud-report__error-sub { font-size: 14px; color: var(--text-2); margin: 0; max-width: 480px; line-height: 1.6; }
.aud-report__error-actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }

/* 检测入口:空输入提交时的抖动提示 */
.hero-check__row.is-shake { animation: hc-shake .35s ease; }
@keyframes hc-shake {
  25% { transform: translateX(-5px); }
  55% { transform: translateX(4px); }
  85% { transform: translateX(-2px); }
}

@media (max-width: 720px) {
  .hero-audit__card { grid-template-columns: 1fr; }
  .hero-audit__side { border-left: none; border-top: 1px solid var(--border); }
  .hero-audit__load { min-height: 0; }
}
@media (max-width: 540px) {
  .hero-check__row { flex-direction: column; align-items: stretch; gap: 10px; border-radius: 16px; padding: 12px; }
  .hero-check__field { padding-left: 4px; }
  .hero-check__btn { width: 100%; justify-content: center; }
  .ha-prompt { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-audit, .ha-prompt, .ha-bar__fill { transition: none; }
  .ha-prompt.is-in { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================
   Audit flow page (result → onboarding split)
   ========================================================== */
.aud-top { border-bottom: 1px solid var(--border); }
.aud-top__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.aud-top__back { font-size: 13px; color: var(--text-2); }
.aud-top__back:hover { color: var(--text); }
/* 精简页头的两个出口(退出登录 / 返回首页):金色主按钮,与完整页头的「联系销售」
   (.nav__cta.btn--primary)同一套配色与尺寸 —— 页头这一排全是图标控件,
   文字链在里面读不出"这是可点的动作"(2026-08-19 用户要求配色对齐)。 */
.aud-top__act { height: 36px; padding: 0 16px; font-size: 13px; }
button.aud-top__act { cursor: pointer; font-family: var(--font-sans); }
.aud-top__act .aud-top__back-ar { transition: transform .18s; }
.aud-top__act:hover .aud-top__back-ar { transform: translateX(-2px); }
/* 手机宽度:登录态两个出口并排(2026-10-16),收窄内边距、去掉箭头 —— 否则 337px 宽时「返回首页」被挤出屏 */
@media (max-width: 420px) {
  .aud-top__act { padding: 0 9px; font-size: 12px; }
  .aud-top__act .aud-top__back-ar { display: none; }
}

.aud__screen { animation: aud-in .42s cubic-bezier(.2,.7,.3,1) both; }
.aud__center[hidden], .aud-onb[hidden], .aud-stepscreen[hidden] { display: none; }
.aud__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); margin: 0 0 16px; }
.aud__eyebrow b { color: var(--text); font-weight: 600; }
.aud__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; }
.aud__sub { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 0 0 28px; }

/* ── Result · centered wide card ─────────────────────────── */
.aud__center { min-height: calc(100vh - 68px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px var(--gutter) 64px; }
.aud-report { width: 100%; max-width: 1200px; }
.aud__cta-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.aud__disclaimer { margin-top: 16px; font-size: 12px; color: var(--text-3); line-height: 1.5; }

.aud-comp { display: flex; flex-direction: column; gap: 3px; }
.aud-comp__row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; }
.aud-comp__row.is-self { background: var(--hl-bg); }
.aud-comp__rank { width: 16px; flex: none; text-align: center; font-size: 12.5px; color: var(--text-3); font-feature-settings: "tnum"; }
.aud-comp__av { flex: none; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.aud-comp__row.is-self .aud-comp__av { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
.aud-comp__name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-comp__row.is-self .aud-comp__name { font-weight: 700; }
.aud-comp__pct { flex: none; font-size: 13px; font-weight: 600; color: var(--text-2); font-feature-settings: "tnum"; }

/* ── Onboarding · split (form + persistent preview) ──────── */
.aud-onb { display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - 68px); --aud-edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.aud-onb__main { display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(40px,6vw,88px) clamp(28px,5vw,64px) clamp(40px,6vw,88px) var(--aud-edge); min-width: 0; }
/* 2026-08-06:onboarding 步骤屏只滚左列 —— 右侧预览钉死不动;
   窄屏(≤980)aside 本来就隐藏,保持整页自然滚动 */
@media (min-width: 981px) {
  .aud-onb { height: calc(100vh - 68px); overflow: hidden; }
  .aud-onb__main { overflow-y: auto; }
  .aud-aside { overflow: hidden; }
}
.aud-stepscreen { width: 100%; }
.aud-pane__inner { width: 100%; max-width: 540px; }
.aud-step { font-family: var(--font-display); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin: 0 0 14px; }

.aud-opts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.aud-opt {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .16s, box-shadow .16s;
}
.aud-opt:hover { border-color: var(--border-2); }
.aud-opt.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--hl-bg); }
.aud-opt__ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent); transition: background .16s, color .16s, border-color .16s; }
.aud-opt.is-active .aud-opt__ico { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.aud-opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aud-opt__t { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text); }
.aud-opt__d { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.aud-opt__facts { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; font-size: 11px; color: var(--text-2); line-height: 1.45; }
.aud-opt__facts > span::before { content: '✓'; margin-right: 4px; color: var(--accent); font-weight: 800; }
.aud-opt__feats { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.aud-opt__feat { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.aud-opt__feat b { color: var(--accent); font-weight: 700; }
.aud-opt__arrow { flex: none; align-self: center; color: var(--text-3); transition: color .16s, transform .16s; }
.aud-opt.is-active .aud-opt__arrow { color: var(--accent); transform: translateX(2px); }

.aud-form { display: grid; gap: 16px; margin-bottom: 4px; }
.aud-form__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aud-field { display: flex; flex-direction: column; gap: 7px; }
.aud-field__label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.aud-field__note { font-size: 11.5px; line-height: 1.5; color: var(--text-3, var(--text-2)); opacity: .82; }
/* 提醒态说明(2026-08-28):开头带警示 icon,金色调突出但不到报错的红 */
.aud-field__note--warn { display: flex; align-items: flex-start; gap: 6px; color: var(--accent); opacity: .92; }
.aud-field__note--warn svg { flex: none; margin-top: 2px; }
.aud-field__input {
  width: 100%; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 14.5px; font-family: var(--font-sans);
  transition: border-color .16s, box-shadow .16s;
}
.aud-field__input::placeholder { color: var(--text-3); }
.aud-field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--hl-bg); }
.aud-field__select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236E6B66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.aud-field__area { resize: vertical; min-height: 88px; line-height: 1.6; }
.aud-field input[type="number"] { -moz-appearance: textfield; }

/* ── 自定义下拉(圆角菜单 + 可控滚动条 + 固定宽度不跳变)── */
.gx-sel { position: relative; width: 100%; }
.gx-sel__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 14.5px; font-family: var(--font-sans);
  cursor: pointer; text-align: left; transition: border-color .16s, box-shadow .16s;
}
.gx-sel__btn:hover { border-color: var(--border-2); }
.gx-sel__btn.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--hl-bg); }
.gx-sel__btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-sel__btn svg { color: var(--text-3); flex: none; transition: transform .18s; }
.gx-sel__btn.on svg { transform: rotate(180deg); }
.gx-sel.is-disabled .gx-sel__btn { opacity: .58; cursor: default; }
.gx-sel__pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  max-height: 300px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .5);
  animation: gxpop .16s cubic-bezier(.34, 1.1, .5, 1);
}
/* searchable 变体(2026-08-24 地域检索):检索框钉顶,列表单独滚动 */
.gx-sel__search { flex: none; padding: 8px 8px 6px; border-bottom: 1px solid var(--border); }
.gx-sel__search input {
  width: 100%; padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-family: var(--font-sans); font-size: 13px;
}
.gx-sel__search input::placeholder { color: var(--text-3); }
.gx-sel__search input:focus { outline: none; border-color: var(--accent); }
.gx-sel__list { overflow-y: auto; padding: 6px; min-height: 0; }
.gx-sel__empty { margin: 0; padding: 10px 12px; color: var(--text-3); font-size: 13px; }
.gx-sel__pop--up { top: auto; bottom: calc(100% + 6px); }
@keyframes gxpop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.gx-sel__opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: none; border-radius: 9px; background: transparent; color: var(--text);
  font-size: 13.5px; cursor: pointer; text-align: left; transition: background .12s;
}
.gx-sel__opt:hover { background: var(--surface-2); }
.gx-sel__opt.on { color: var(--accent); font-weight: 600; }
.gx-sel__ck { opacity: 0; color: var(--accent); font-size: 12px; flex: none; }
.gx-sel__opt.on .gx-sel__ck { opacity: 1; }
.gx-sel__btn.is-ph > span { color: var(--text-3); }

/* 创建项目页顶栏的账号信息 */
.onb-acct { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); max-width: 220px; }
.onb-acct__av { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; background: var(--accent); color: var(--accent-ink, #1a1608); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.onb-acct__email { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── step3/4 右栏预览:分组(左 topic / 右 query),不换行,自适应 ── */
.onb-pv2 { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 15px; }
.onb-pv2__chip { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 13px; }
.onb-pv2__body { display: flex; flex-direction: column; gap: 11px; }
.onb-pv2__grp { display: grid; grid-template-columns: 84px 1fr; gap: 11px; align-items: start; }
.onb-pv2__topic {
  font-size: 11px; font-weight: 700; color: var(--accent); line-height: 1.35;
  background: var(--hl-bg); padding: 5px 8px; border-radius: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.onb-pv2__qs { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; }
.onb-pv2__q { font-size: 12px; color: var(--text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-pv2__qs .sk { height: 9px; }

/* ── onboarding 全局滚动条美化(#1)── */
.onb-page ::-webkit-scrollbar, .onb-page::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
.onb-page ::-webkit-scrollbar-thumb, .onb-page::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box;
}
.onb-page ::-webkit-scrollbar-thumb:hover, .onb-page::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; border: 3px solid transparent; }
.onb-page ::-webkit-scrollbar-track, .onb-page::-webkit-scrollbar-track { background: transparent; }
.onb-page { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }

.aud-prefix { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--surface); transition: border-color .16s, box-shadow .16s; }
.aud-prefix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--hl-bg); }
.aud-prefix__b { display: flex; align-items: center; padding: 0 13px; font-size: 13.5px; color: var(--text-3); background: var(--surface-2); border-right: 1px solid var(--border); }
.aud-prefix .aud-field__input { border: none; border-radius: 0; background: transparent; }
.aud-prefix .aud-field__input:focus { box-shadow: none; }

.aud-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.aud-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; color: var(--text); }
.aud-tag i { font-style: normal; color: var(--text-3); cursor: pointer; padding: 0 2px; transition: color .15s; }
.aud-tag i:hover { color: var(--accent); }
.aud-tag--add { color: var(--text-3); border-style: dashed; cursor: pointer; }
.aud-tag--input { display: inline-block; width: auto; min-width: 120px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--hl-bg); background: var(--surface); color: var(--text); font-family: inherit; font-size: 12.5px; outline: none; }
.aud-tag--input::placeholder { color: var(--text-3); }

.aud-actions { display: flex; gap: 12px; margin-top: 30px; }

.aud-aside { background: var(--bg-2); border-left: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 22px; padding: clamp(40px,6vw,88px) var(--aud-edge) clamp(40px,6vw,88px) clamp(28px,5vw,64px); }
/* 老右栏预览卡(.aud-preview/.aud-pv/.aud-answer/.aud-bp)2026-10-07 随 /login 换成 v7 看板预览窗一并删除 */

/* sign up / log in 样式已随控制台删除(2026-07-21) */
.aud-textlink:hover { color: var(--accent-2); text-decoration: underline; }

/* paywall (start free trial) */
.aud-pay__note { margin-top: 16px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.aud-pay.aud-onb { grid-template-columns: 1fr; }
.aud-pay .aud-onb__main { padding-inline: var(--aud-edge); }
.aud-pay .aud-pane__inner { margin-inline: auto; }

/* 保存银行卡之后的方案页:直接复用运营站 .plan 定价卡，只补选择态与计费起点。 */
.aud-planstep { min-height: calc(100vh - 68px); padding: clamp(40px,5vw,72px) var(--gutter) 64px; }
.aud-planstep[hidden] { display: none; }
.aud-planstep__inner { width: min(1120px, 100%); margin: 0 auto; }
.aud-planstep__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.aud-planstep__head .aud-cycle { flex: none; margin-bottom: 2px; }
.aud-onb-plan {
  appearance: none; min-width: 0; width: 100%; color: var(--text); font: inherit;
  text-align: left; cursor: pointer;
}
.aud-onb-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 高亮跟随「选中」而不是「推荐」(2026-08-24 用户拍板):推荐卡未选中时只留徽章,
   常驻高亮让人分不清自己选的是哪档;默认选中项即推荐档(组件里 planKey 初始 pro)。 */
.aud-onb-plan.plan--featured:not(.is-selected) { border-color: var(--border); background: var(--surface); box-shadow: none; }
.aud-onb-plan.is-selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, var(--surface)) 0%, var(--surface) 60%);
  box-shadow: 0 0 0 3px var(--hl-bg), 0 24px 56px -24px color-mix(in oklab, var(--accent) 35%, transparent);
}
.aud-onb-plan.is-disabled { cursor: wait; opacity: .68; }
.aud-onb-plan .btn { pointer-events: none; }
.aud-onb-plan .plan__models { margin-bottom: 0; }

.aud-planstart { margin-top: 24px; }

/* 方案屏账单摘要(2026-09-04):去 Stripe 前把「今天扣多少 / 下次哪天扣多少」摆清楚 */
.aud-order { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.aud-order__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; color: var(--text-2); }
.aud-order__row b { color: var(--text); font-weight: 650; text-align: right; }
.aud-order__row--today { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 4px 0; padding: 9px 0; font-size: 15px; }
.aud-order__row--today b { font-size: 20px; letter-spacing: -.01em; }
.aud-order__note { margin: 8px 0 0; color: var(--text-3, var(--text-2)); font-size: 12.5px; line-height: 1.55; }
.aud-planstart__label { margin: 0 0 9px; color: var(--text-2); font-size: 12.5px; font-weight: 650; }
.aud-planstart__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aud-planstart__card { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--text); font-family: var(--font-sans); text-align: left; cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s; }
.aud-planstart__card:hover:not(:disabled) { border-color: var(--border-2); }
.aud-planstart__card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--hl-bg); }
.aud-planstart__card.is-active { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 5%, var(--surface)); box-shadow: 0 0 0 3px var(--hl-bg); }
.aud-planstart__card:disabled { cursor: wait; opacity: .68; }
.aud-planstart__dot { flex: none; width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid var(--border-2); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--surface); }
.aud-planstart__card.is-active .aud-planstart__dot { border-color: var(--accent); background: var(--accent); }
.aud-planstart__copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; }
.aud-planstart__title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.aud-planstart__title strong { font-size: 13.5px; line-height: 1.3; }
.aud-planstart__title em { padding: 2px 7px; border-radius: 999px; background: var(--hl-bg); color: var(--accent); font-size: 9.5px; font-style: normal; font-weight: 700; }
.aud-planstart__copy small { color: var(--text-3); font-size: 11.5px; line-height: 1.45; }
.aud-planstep__actions { justify-content: flex-end; margin-top: 22px; }

.aud-pay__side { background: var(--bg-3); border-left: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: flex-end; padding: clamp(40px,6vw,88px) var(--aud-edge) clamp(40px,5vw,72px) clamp(28px,5vw,64px); }
.aud-pay__plan { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); }
.aud-pay__plan-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); margin: 0 0 14px; }
/* Peec 式方案卡(2026-08-06):名称+周期切换 / 大价格 / 指标行 / 引擎 logo 行 */
.aud-pay__plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.aud-pay__plan-head .aud-pay__plan-name { margin: 0; }
.aud-cycle { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.aud-cycle button { padding: 4px 12px; border: 0; border-radius: 999px; background: none; color: var(--text-3); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: .14s; }
.aud-cycle button.is-active { background: var(--accent); color: var(--accent-ink); }
.aud-pay__price { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.aud-pay__price-cur { font-size: 14px; color: var(--text-2); font-weight: 600; }
.aud-pay__price b { font-family: var(--font-display); font-weight: 800; font-size: 38px; color: var(--text); line-height: 1; }
.aud-pay__price-per { font-size: 14px; color: var(--text-3); }
.aud-pay__price-sub { margin: 7px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.aud-pay__rows { margin-top: 18px; border-top: 1px solid var(--border); }
.aud-pay__row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.aud-pay__row i { margin-left: auto; font-style: normal; font-weight: 700; color: var(--text); font-size: 13px; }
.aud-pay__models { margin-top: 16px; }
.aud-pay__models-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.aud-pay__models-hd em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.aud-pay__engs { display: flex; flex-wrap: wrap; gap: 9px; }
.aud-pay__engs img { width: 18px; height: 18px; }
:root[data-theme="dark"] .aud-pay__engs img.ha-eng__logo--invert { filter: brightness(0) invert(1); }
.aud-pay__badge { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--hl-bg); border-radius: 999px; padding: 7px 14px; margin-bottom: 22px; }
.aud-pay__feats { display: flex; flex-direction: column; gap: 13px; }
.aud-pay__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.aud-pay__feats b { color: var(--accent); font-weight: 700; flex: none; }
.aud-pay__terms { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* ── 全屏过渡转圈:登录态检查 / 进控制台首屏,盖住页面间的可见跳动 ── */
.page-spin { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--bg); }
.page-spin__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.page-spin__logo img { height: 26px; display: block; }
.page-spin__logo .logo-dark { display: block; }
.page-spin__logo .logo-light { display: none; }
:root[data-theme="light"] .page-spin__logo .logo-dark { display: none; }
:root[data-theme="light"] .page-spin__logo .logo-light { display: block; }
.page-spin .hero-audit__spinner { width: 24px; height: 24px; border-width: 2.5px; }

/* 监测引擎选择(onboarding details 步;外观对齐控制台 board.css 的 eng-pill,
   但 onboarding 是全屏页、不在 .board-page 作用域内,故在这里补一份) */
.eng-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.eng-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: .14s; }
.eng-pill i { width: 8px; height: 8px; border-radius: 50%; }
.eng-pill.on { border-color: color-mix(in oklab, var(--accent) 55%, var(--border-2)); background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--text); }
/* 置灰只降透明度,不划删除线(2026-08-24 用户拍板:横线多余) */
.eng-pill.is-off { opacity: .4; cursor: not-allowed; }
.eng-pill.is-off i { filter: grayscale(1); }
/* 引擎小圆点升级为 logo(2026-08-06 找回 step1 时改用全站 9 引擎 logo) */
.eng-pill img { width: 14px; height: 14px; flex: none; }
.eng-pill.is-off img { filter: grayscale(1); opacity: .7; }
/* 套餐外锁定态(2026-08-28 对齐看板 sp-chip--locked):不藏起来,锁 +「未含」角标 */
.eng-pill--locked { opacity: .45; cursor: not-allowed; }
.eng-pill--locked img { filter: grayscale(1); opacity: .7; }
.eng-pill--locked svg { flex: none; opacity: .8; }
.eng-pill__tag { font-style: normal; font-size: 10px; font-weight: 600; color: var(--text-3); }
:root[data-theme="dark"] .eng-pill--locked img.ha-eng__logo--invert { filter: brightness(0) invert(1) opacity(.7); }
.aud-morereg__eng img { width: 13px; height: 13px; flex: none; }
:root[data-theme="dark"] .eng-pill img.ha-eng__logo--invert,
:root[data-theme="dark"] .aud-morereg__eng img.ha-eng__logo--invert { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .eng-pill.is-off img.ha-eng__logo--invert { filter: brightness(0) invert(1) opacity(.7); }

/* onboarding step1「更多设置」:按平台设置检测地域(值域各不相同) */
.aud-morereg__toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 0; border: 0; background: none; color: var(--text-3); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: color .14s; }
.aud-morereg__toggle:hover { color: var(--accent); }
.aud-morereg__chev { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .14s; }
.aud-morereg__chev.open { transform: rotate(-135deg) translateY(-1px); }
.aud-morereg { display: flex; flex-direction: column; gap: 12px; padding: 13px 14px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface-2); }
.aud-morereg__row { display: flex; flex-direction: column; gap: 7px; }
.aud-morereg__eng { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.aud-morereg__eng i { width: 8px; height: 8px; border-radius: 50%; }
.aud-morereg__pills { display: flex; flex-wrap: wrap; gap: 5px; max-height: 132px; overflow-y: auto; }
.aud-morereg__pill { padding: 3.5px 9px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-3); font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: .12s; }
.aud-morereg__pill:hover { color: var(--text); border-color: var(--text-3); }
.aud-morereg__pill.on { border-color: color-mix(in oklab, var(--accent) 55%, var(--border-2)); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); color: var(--text); }
.aud-morereg__fixed { font-size: 12px; color: var(--text-3); }

/* 必填字段空提交的抖动提示(复用首页快查的 hc-shake 关键帧) */
.aud-field.is-shake { animation: hc-shake .35s ease; }

/* 联系页右栏手风琴(2026-08-06):两卡互斥展开,点头部切换 */
.contact-card__head { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.contact-card__head-tx { flex: 1 1 auto; min-width: 0; }
.contact-card__head .contact-card__title { display: block; margin: 0 0 4px; }
.contact-card__head .contact-card__sub { display: block; margin: 0; }
.contact-card__chev { flex: none; margin-top: 8px; color: var(--text-3); transition: transform .2s; }
.contact-card--acc.is-open .contact-card__chev { transform: rotate(180deg); color: var(--accent); }
.contact-card--acc:not(.is-open):hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.contact-card--acc:not(.is-open) .contact-card__sub { color: var(--text-3); }
/* 折叠动画(2026-08-07):grid-rows 0fr↔1fr 过渡,折叠体常驻 DOM */
.contact-card__fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; overflow: hidden; }
.contact-card--acc.is-open .contact-card__fold { grid-template-rows: 1fr; }
.contact-card__fold > .contact-card__body { overflow: hidden; min-height: 0; }
.contact-card__body { padding-top: 18px; }
/* 约会卡展开态的会议要点(2026-08-07:光一个按钮太空) */
.contact-card__meta { display: grid; gap: 9px; margin: 0 0 16px; padding: 0; list-style: none; }
.contact-card__meta li { display: grid; grid-template-columns: 15px 1fr; gap: 9px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.contact-card__meta .check { color: var(--accent); font-weight: 700; }

/* ── /demo 交互演示页 + 模块引导气泡(2026-08-06,Peec 式 onboarding tooltip) ── */
.demo-page { padding: 26px 0 90px; }
/* 视图切换条:总览 / 意图排名 / 监测记录(看 query 跑) / 竞品对比 + 重看引导 */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.demo-bar__views { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-bar__btn { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: .15s; }
.demo-bar__btn:hover { color: var(--text); border-color: var(--text-3); }
.demo-bar__btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.demo-bar__restart { padding: 8px 16px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border)); background: none; color: var(--accent); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: .15s; }
.demo-bar__restart:hover { background: var(--hl-bg); }
.demo-stage { position: relative; }
.demo-tour { position: absolute; inset: 0; z-index: 20; overflow: hidden; border-radius: 14px; }
.demo-tour__mask { position: absolute; inset: 0; background: rgba(10, 10, 12, .45); }
/* 聚光灯:目标模块抠亮,四周用超大 box-shadow 压暗 */
.demo-tour__spot {
  position: absolute; border-radius: 12px;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(8, 8, 10, .52), 0 0 0 4px var(--hl-bg);
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
  pointer-events: none;
}
.demo-tour__card {
  position: absolute; transform: translate(-50%, 0); width: 340px; max-width: 82vw;
  background: #1E1E24; color: #F5F2EA; border-radius: 12px; padding: 16px 18px 14px;
  box-shadow: 0 18px 44px -10px rgba(0, 0, 0, .5);
}
/* 底部按钮排一行不换行;点击后的焦点圈用浅色细环,别默认黑粗框 */
.demo-tour__foot > * { white-space: nowrap; }
.demo-tour__foot button:focus { outline: none; }
.demo-tour__foot button:focus-visible { outline: 2px solid rgba(255, 255, 255, .4); outline-offset: 2px; }
.demo-tour__card h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; color: #fff; }
.demo-tour__card p { font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; color: #D9D5CB; }
.demo-tour__foot { display: flex; align-items: center; gap: 12px; }
.demo-tour__step { font-size: 11.5px; color: #8E8A80; }
.demo-tour__skip { margin-left: auto; background: none; border: 0; color: #B5B1A6; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.demo-tour__skip:hover { color: #fff; }
.demo-tour__prev { background: none; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; padding: 6px 12px; color: #D9D5CB; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.demo-tour__prev:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.demo-tour__next { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.demo-tour__x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #8E8A80; cursor: pointer; font-size: 13px; line-height: 1; }
.demo-tour__x:hover { color: #fff; }

/* ── /industries 行业页(2026-08-06 pSEO) ── */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1024px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ind-grid { grid-template-columns: 1fr; } }
.ind-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; transition: border-color .15s, transform .12s; }
.ind-card:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); transform: translateY(-2px); }
.ind-card__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); margin: 0; }
.ind-card__desc { color: var(--text-2); font-size: 13.5px; line-height: 1.6; margin: 0; }
.ind-card__cta { margin-top: auto; color: var(--accent); font-size: 13.5px; font-weight: 600; }
/* 2026-08-07 用户:行业页文字对齐首页版式 —— 开场整块居中(首页 .hero__inner/.hero__copy 同款) */
.ind-hero { text-align: center; }
.ind-hero .eyebrow { justify-content: center; }
/* 宽度用 min(px, %) 而不是死值:固定 760px 在 ~900px 窗口下两侧只剩 60 多像素,
   贴着边看着很挤(2026-08-07 用户反馈);百分比那一项保证任何视口都留出页边距。 */
.ind-hero .display { max-width: min(920px, 88%); margin-left: auto; margin-right: auto; }
.ind-hero .section__lede { max-width: min(720px, 74%); margin-left: auto; margin-right: auto; }
.ind-hero__cta { margin-top: 26px; justify-content: center; }
/* 正文块整体居中(与首页 .section__head 一致);卡片/清单内部仍左对齐,保证可读 */
.ind-prose { max-width: min(780px, 82%); margin-left: auto; margin-right: auto; text-align: center; }
.ind-signs, .ind-rkfaq, .ind-reading { margin-left: auto; margin-right: auto; }

/* ── 行业页 2026-08-07 三次改版:交付物 / 原则 / 时间轴(对齐竞品的具体度) ── */
/* 交付物(2026-08-08 四次改版):改成单列编号清单。
   原来是两列条目卡,和下面的「做法」两列卡片几乎一模一样 —— 用户反馈「结构比较单一」,
   三块连着看像同一个模块重复三遍。清单 / 卡片 / 时间轴三种形态错开,页面才有节奏。 */
.ind-builds { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 860px; margin: 0 auto; }
.ind-build { position: relative; padding: 17px 0 17px 44px; border-top: 1px solid var(--border); }
.ind-build:last-child { border-bottom: 1px solid var(--border); }
.ind-build h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 5px; }
.ind-build p { color: var(--text-2); font-size: 14px; line-height: 1.7; margin: 0; }
.ind-build__num { position: absolute; left: 0; top: 18px; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--accent); }
@media (max-width: 560px) { .ind-build { padding-left: 36px; } }
/* 差异化原则:两条大条目,带分类标签 */
.ind-diff { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
@media (max-width: 820px) { .ind-diff { grid-template-columns: 1fr; } }
.ind-diff__item { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 28px; }
.ind-diff__lab { display: block; font-family: var(--font-display); font-weight: 800; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.ind-diff__item h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 10px; line-height: 1.4; }
.ind-diff__item p { color: var(--text-2); font-size: 14px; line-height: 1.7; margin: 0; }
/* 时间轴(2026-08-08 改为横向 stepper):五步平铺一行,顶上一条线串起节点。
   原来是竖排的「标签 + 段落」行,和上面两块清单/卡片叠在一起全是纵向堆叠;
   文案压到一句话之后,横排放得下,也给页面换了个方向。窄屏回落成竖排。 */
.ind-phases { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 22px; }
.ind-phase { position: relative; padding: 24px 0 0; }
.ind-phase::before { content: ''; position: absolute; left: 0; right: -22px; top: 0; height: 1px; background: var(--border); }
.ind-phase:last-child::before { right: 0; }
.ind-phase::after { content: ''; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ind-phase b { display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--accent); letter-spacing: .02em; margin-bottom: 7px; }
.ind-phase p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.65; }
@media (max-width: 1000px) {
  .ind-phases { grid-template-columns: 1fr; gap: 0; max-width: 720px; }
  .ind-phase { padding: 16px 0 16px 26px; }
  .ind-phase::before { right: 0; }
  .ind-phase::after { top: 20px; }
  .ind-phase b { margin-bottom: 4px; }
}
.ind-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .ind-why { grid-template-columns: 1fr; } }
.ind-why__item { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.ind-why__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--accent); margin-bottom: 10px; }
.ind-why__item p { color: var(--text-2); font-size: 14px; line-height: 1.7; margin: 0; }
.ind-queries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 780px) { .ind-queries { grid-template-columns: 1fr; } }
.ind-query { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.ind-query svg { flex: none; margin-top: 3px; color: var(--accent); }
.ind-angle { background: var(--surface); border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border)); border-radius: 18px; padding: 30px 32px; box-shadow: 0 0 0 4px var(--hl-bg); }
.ind-angle__hd { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.ind-angle p:not(.ind-angle__hd) { color: var(--text-2); font-size: 15px; line-height: 1.8; margin: 0; }
/* 优势区(2026-08-07 重排):中文引擎大卡下接三张能力卡 + demo 引流按钮 */
.ind-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .ind-adv { grid-template-columns: 1fr; } }
.ind-adv__item { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.ind-adv__item h3 { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.ind-adv__item p { color: var(--text-2); font-size: 13.5px; line-height: 1.7; margin: 0; }
.ind-adv__cta { margin-top: 26px; justify-content: center; }
.ind-faq { display: grid; gap: 10px; max-width: 860px; }
.ind-faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 20px; }
.ind-faq__item summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--text); font-size: 15px; list-style: none; position: relative; padding-right: 28px; }
.ind-faq__item summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 18px; }
.ind-faq__item[open] summary::after { content: '−'; color: var(--accent); }
.ind-faq__item p { color: var(--text-2); font-size: 14px; line-height: 1.75; margin: 0 0 16px; }

/* ── 行业页 2026-08-07 二次重排新增(novastacks 式版式) ── */
/* 问题陈述:散文两段,读感优先 */
.ind-prose { display: grid; gap: 18px; }   /* 宽度见上面的 min(780px, 82%),别在这里再写死 */
.ind-prose p { color: var(--text-2); font-size: 16px; line-height: 1.8; margin: 0; }
/* 7 个信号(2026-08-08 改双列):文案压到一行以内之后,单列卡片纵向拖得太长。
   拆两列 + 去掉外框,只留细分隔线 —— 高度砍一半,也不再和下面的问句卡撞形。 */
.ind-signs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; max-width: 940px; }
.ind-sign { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--border); }
.ind-sign i { flex: none; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--accent); }
.ind-sign p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 820px) { .ind-signs { grid-template-columns: 1fr; } }
/* 「我们跑什么」四件套 */
.ind-adv--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .ind-adv--4 { grid-template-columns: repeat(2, 1fr); } }
/* 差异化卡里加标题(沿用 ind-why 编号卡) */
.ind-why__item h3 { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
/* 合作流程五步 */
.ind-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .ind-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ind-steps { grid-template-columns: 1fr; } }
.ind-step { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.ind-step i { display: block; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--accent); margin-bottom: 10px; }
.ind-step h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.ind-step p { color: var(--text-2); font-size: 13px; line-height: 1.65; margin: 0; }
/* .ind-engines* 已随「中英双引擎机会」整块删除(2026-08-08) */
/* 行业页 FAQ 沿用博客的 rk-faq,只限宽 */
.ind-rkfaq { max-width: 880px; }
/* 相关阅读:箭头链接行 */
.ind-reading { display: grid; gap: 10px; max-width: 880px; }
.ind-reading__item { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 15px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .15s; }
.ind-reading__item:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
.ind-reading__item .btn__arrow { color: var(--accent); }
/* mega menu 的 BY INDUSTRY 细行链接 */
.mega__link--slim { padding: 8px 14px; }
.mega__link--slim .mega__link-t { font-size: 14px; margin-bottom: 0; }
.mega__all { display: inline-block; margin-top: 8px; padding: 8px 14px; color: var(--accent); font-size: 13px; font-weight: 600; }
.mega__all:hover { text-decoration: underline; }

/* 矮屏自适应(如 13/14 寸笔记本 100% 缩放,视口高 ≤900px):
   压缩 onboarding 的纵向空间,让单步表单(含上一步/下一步)一屏放得下 */
@media (max-height: 900px) {
  .onb-page .aud-onb__main, .onb-page .aud-aside { padding-block: 26px; }
  .onb-page .aud-onb { min-height: calc(100vh - 68px); }
  .onb-page .aud-step { margin-bottom: 8px; }
  .onb-page .aud__title { font-size: clamp(21px, 2.4vw, 28px); margin-bottom: 8px; }
  .onb-page .aud__sub { font-size: 13.5px; margin-bottom: 16px; }
  .onb-page .aud-form { gap: 10px; }
  .onb-page .aud-field { gap: 4px; }
  .onb-page .aud-field__input { padding: 8px 12px; font-size: 14px; border-radius: 9px; }
  .onb-page .aud-field__area { min-height: 64px; }
  .onb-page .aud-actions { margin-top: 16px; }
  .onb-page .aud-opts { gap: 10px; }
  .onb-page .aud-opt { padding: 14px 16px; }
  .onb-page .aud-signup__alt { margin-top: 12px; }
}

@keyframes aud-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 920px) {
  .aud-onb { grid-template-columns: 1fr; }
  .aud-onb__main { padding-inline: var(--gutter); }
  .aud-aside { display: none; }
  .aud-pay__side { order: -1; border-left: none; border-bottom: 1px solid var(--border); justify-content: center; padding-inline: var(--gutter); }
  .aud-planstep__head { align-items: flex-start; flex-direction: column; gap: 18px; }
}

@media (max-width: 600px) {
  .aud-form__row2 { grid-template-columns: 1fr; }
  .aud-planstep { padding-top: 30px; }
  .aud-planstart__grid { grid-template-columns: 1fr; }
  .aud__cta-row .btn, .aud-actions .btn, .aud-actions .btn--lg { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .aud__screen { animation: none; }
  .aud-onb-plan { transition: none; }
}

/* Contact form */
/* 无网格变体:网格底纹的径向遮罩按「居中短标题」设计,全高双栏页里格线会横穿正文 */
.page-hero--flat::before { display: none; }

/* ── Contact Sales 双栏(2026-08-06 对齐 Profound 的售前页) ──
   左栏 = 价值点 + 联系方式(左对齐,压过 page-hero 的居中默认);右栏 = 约会议卡 + 留言卡 */
/* 2026-08-07:双栏改上下堆叠 —— 两栏高度天然对不齐,手风琴一展开就更歪。
   竖排后卡片按自然高度排布,不再需要等高拉伸那套 hack。整体居中,与首页版式一致。 */
.contact-sales__stack { max-width: 880px; margin: 0 auto; padding-top: 12px; text-align: center; }
.contact-sales__stack .eyebrow { justify-content: center; }
.contact-sales__stack .display { margin-left: auto; margin-right: auto; }
.contact-sales__stack .page-hero__lede { margin-left: auto; margin-right: auto; }
/* 2026-08-11:lede + 三条 ✓ 行随需求删除后,标题到手风琴的呼吸空间改由 intro 自己给
   (此前靠 points 的 34px 下边距 + lede 高度撑开,下面 .contact-sales__points 规则已无消费者)。
   40px 仍嫌挤(用户反馈),加到 64px。 */
.contact-sales__intro { margin-bottom: 64px; }
/* 2026-09-03 用户:手风琴改左右抽屉 —— 两卡桌面端并排、各自常开,窄屏回落竖排;
   并排后容器放宽到 1040px,留言表单不至于挤。头部不再是按钮,去掉手型光标 */
.contact-sales__panel--side { display: grid; gap: 16px; align-items: stretch; }
.contact-sales__panel--side .contact-card__head { cursor: default; }
/* 2026-09-04 用户:左卡要与右卡同宽同高 —— 并排时两卡等高拉伸(align-items: stretch);
   并排卡不再吃「.contact-card + .contact-card」的 16px 上边距(那条是竖排用的,并排时让右卡低一截);
   左卡内部改纵向 flex:清单贴着头部,CTA 沉底,与右卡的 Send 按钮齐平。窄屏竖排时没有多余空间,规则自然失效 */
.contact-sales__panel--side .contact-card + .contact-card { margin-top: 0; }
.contact-sales__panel--side .contact-card { display: flex; flex-direction: column; }
.contact-sales__panel--side .contact-card__fold { flex: 1 1 auto; }
.contact-sales__panel--side .contact-card--book .contact-card__body { display: flex; flex-direction: column; }
.contact-sales__panel--side .contact-card--book .contact-card__body .btn--block { margin-top: auto; }
/* 右卡表单最后一行(Send 按钮)不再带 16px 下边距 —— 那是行间距,末行留着只会让按钮比左卡的高 16px */
.contact-sales__panel--side .contact-form .contact-form__row:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .contact-sales__stack { max-width: 1040px; }
  .contact-sales__panel--side { grid-template-columns: 1fr 1fr; }
}
/* 三个价值点:横排一行,窄屏落回竖排 */
.contact-sales__points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px;
  margin: 26px 0 34px; padding: 0; list-style: none;
}
.contact-sales__points li {
  display: flex; align-items: baseline; justify-content: center; gap: 9px;
  color: var(--text-2); font-size: 14.5px; line-height: 1.6; text-align: left;
}
.contact-sales__points .check { flex: none; color: var(--accent); font-weight: 700; }
@media (max-width: 760px) { .contact-sales__points { grid-template-columns: 1fr; } }
/* 手风琴与联系方式:卡内文字左对齐,块本身居中 */
.contact-sales__stack .contact-sales__panel,
.contact-sales__stack .contact-info { text-align: left; }
.contact-sales__stack address { display: block; margin-top: 20px; }
.contact-sales__stack .contact-info { margin-top: 0; }
.contact-sales__stack .check-form__note { margin-top: 16px; }
.contact-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px 26px 24px;
}
.contact-card + .contact-card { margin-top: 16px; }
.contact-card--book {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 7%, var(--surface)) 0%, var(--surface) 70%);
}
/* 手风琴态(2026-08-07 视觉修正):金框跟着「展开的那张」走,收起的一律素框;
   点击后的默认黑焦点圈干掉,换浅金细环 */
.contact-card--acc.contact-card--book:not(.is-open) { border-color: var(--border); background: var(--surface); }
.contact-card--acc.is-open { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
/* 2026-08-07 用户:头部那圈浅金框看着像错位的嵌套模块 —— 焦点态一律不画圈,
   开合状态已由卡片金边表达 */
.contact-card--acc .contact-card__head:focus,
.contact-card--acc .contact-card__head:focus-visible { outline: none; }
.contact-card__row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.contact-card__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}
.contact-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin: 0 0 5px; }
.contact-card__sub { color: var(--text-3); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.contact-card .contact-form { margin-top: 4px; max-width: none; }


.contact-form { margin-top: 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
.contact-form__row { margin-bottom: 16px; }
.contact-form__row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form__input,
.contact-form__select,
.contact-form__textarea { width: 100%; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; font-family: var(--font-body); transition: border-color .2s; }
.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--text-3); }
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus { outline: none; border-color: var(--accent); }
.contact-form__select { appearance: none; cursor: pointer; }
.contact-form__textarea { min-height: 120px; resize: vertical; }
/* 联系方式(2026-08-07 用户:排列太乱 —— 三张竖卡合并成一张三行卡,
   每行图标+标签+值同一行,标签列定宽让值列自然左对齐) */
.contact-info { margin-top: 48px; display: flex; flex-direction: column; align-items: stretch; }
.contact-info--stack {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.contact-info__row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 20px; color: var(--text-2); font-size: 14px; line-height: 1.5;
  text-decoration: none; transition: background .15s;
}
.contact-info__row + .contact-info__row { border-top: 1px solid var(--border); }
.contact-info__row:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.contact-info__row svg { flex: none; margin-top: 3px; color: var(--accent); }
.contact-info__row b { flex: none; width: 64px; font-weight: 600; color: var(--text); }
.contact-info__val { min-width: 0; }
@media (max-width: 540px) { .contact-form__row--half { grid-template-columns: 1fr; } }

/* Pricing card */
.section--pricing-card { padding-top: clamp(24px, 3vw, 44px); }
.pricing-card { max-width: 760px; margin: 0 auto; padding: clamp(46px, 5vw, 64px); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; text-align: center; }
.pricing-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.8vw, 40px); color: var(--text); margin-bottom: 16px; }
.pricing-card__desc { color: var(--text-2); font-size: 16px; line-height: 1.75; margin: 0 auto 32px; max-width: 44ch; }
.pricing-card__features { list-style: none; padding: 0; margin: 0 0 36px; display: flex; gap: 18px 24px; justify-content: center; flex-wrap: wrap; }
.pricing-card__features li { color: var(--text-2); font-size: 14px; }
.pricing-card__features li::before { content: "\2713 "; color: var(--accent); font-weight: 700; }
.pricing-card__email { margin-top: 12px; font-size: 13px; color: var(--text-3); }

::selection { background: var(--accent); color: var(--accent-ink); }

/* Blog page: same site language, reference-page content structure */
.blog-crumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--text-3);
  font-size: 15px;
  font-weight: 500;
}
.blog-crumb a { color: var(--text-3); }
.blog-crumb a:hover,
.blog-crumb span:last-child { color: var(--text); }
.blog-filter {
  max-width: 1040px;
  margin: 0 auto 40px;
  text-align: center;
}
.blog-filter__label {
  margin: 0 0 12px;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
.blog-filter__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.blog-filter__tags {
  justify-content: center;
  margin-bottom: 0;
}
.blog-filter__tags .blog-filter__label {
  margin: 0 10px 0 0;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
}
.blog-pill {
  appearance: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-weight: 500;
  line-height: 1;
  transition: background .14s, border-color .14s, color .14s, transform .14s, box-shadow .14s;
}
.blog-pill:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
}
.blog-pill.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 16px 34px -22px var(--accent);
}
.blog-pill small {
  font-size: .8em;
  opacity: .72;
}
.posts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.post-card {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
  padding: 0;
  overflow: hidden;
  /* 必须显式 stretch:基础 .post-card 是 grid 布局留下的 align-items:center,
     换成 column flex 后 center 变成「横向居中」,文字块会 shrink-to-fit 并居中
     ——标题越短缩得越窄(短标题的卡片看起来像内容居中)。 */
  align-items: stretch;
}
.post-card > div:first-child {
  padding: 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.post-card__title {
  max-width: none;
  font-size: clamp(20px, 1.6vw, 25px);
  line-height: 1.32;
}
.post-card__excerpt {
  max-width: none;
  flex: 0 0 auto;
}
.post-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: -4px 0 14px;
}
.post-card__tags > span {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--hl-bg);
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
}
.post-card__visual--image {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-3);
}
.post-card__visual--image::before { display: none; }
.post-card__visual--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease;
}
.post-card:hover .post-card__visual--image img { transform: scale(1.04); }
/* Featured full-width horizontal card — title/text left, image right (title shows above the fold) */
.post-card--feature { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.post-card--feature > div:first-child { padding: clamp(24px, 2.6vw, 38px); justify-content: center; }
.post-card--feature .post-card__visual { width: 44%; flex: none; align-self: stretch; border-left: 1px solid var(--border); }
.post-card--feature .post-card__visual--image { aspect-ratio: auto; border-bottom: none; }
.post-card--feature .post-card__visual--image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .post-card--feature { flex-direction: column-reverse; }
  .post-card--feature .post-card__visual { width: auto; border-left: none; }
  .post-card--feature .post-card__visual--image { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--border); }
}
@media (max-width: 980px) {
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .posts { grid-template-columns: 1fr; }
  .blog-filter__tags { justify-content: center; }
  .blog-filter__tags .blog-filter__label { width: 100%; margin: 0; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ==========================================================
   Nav v2 — mega menu + mobile drawer
   ========================================================== */
.nav__inner { gap: 18px; }
.nav__links { margin-left: 30px; gap: 22px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--text-2); white-space: nowrap;
  transition: color .14s;
}
.nav__link:hover { color: var(--text); }
.nav__trigger[aria-expanded="true"] { color: var(--text); }
.nav__caret { opacity: .65; transition: transform .2s; }
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__item { position: static; }

/* Mega panel — full-width like Profound */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mega__inner {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px;
  padding-block: 34px 40px;
}
.mega__inner--single { grid-template-columns: 1fr; }
.mega__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; align-content: start; }
.mega__cols--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; }
.mega__group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mega__group-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; align-content: start; }
.mega__label {
  grid-column: 1 / -1; margin: 0 0 10px 14px;
  color: var(--text-3); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.mega__link { display: block; padding: 11px 14px; border-radius: 12px; transition: background .14s; white-space: normal; }
.mega__link:hover { background: var(--surface-2); }
.mega__link-t { display: block; color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: 2px; white-space: normal; }
.mega__link-d { display: block; color: var(--text-2); font-size: 13px; line-height: 1.5; white-space: normal; }
.mega__feature {
  display: flex; flex-direction: column; padding: 28px;
  border-radius: 16px;
  background:
    radial-gradient(120% 110% at 100% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 55%),
    color-mix(in oklab, var(--surface) 72%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border: 1px solid var(--border); transition: border-color .14s;
}
.mega__feature:hover { border-color: var(--accent); }
.mega__feature-eyebrow { color: var(--accent); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.mega__feature-title { font-family: var(--font-display); color: var(--text); font-size: 21px; font-weight: 700; line-height: 1.22; margin-bottom: 9px; }
.mega__feature-desc { color: var(--text-2); font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; }
.mega__feature-cta { color: var(--accent); font-size: 13.5px; font-weight: 600; margin-top: auto; }

/* Chat-style query bubbles (article) */
.query-list { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 28px; }
.query-list span {
  display: inline-flex; align-items: flex-start; gap: 11px;
  align-self: flex-start; max-width: 620px;
  padding: 12px 18px;
  border-radius: 16px; border-top-left-radius: 5px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 15px; line-height: 1.6;
}
.query-list span::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px;
  border-radius: 50%; background: var(--accent);
}

/* Product page dashboard screenshot */
.product-shot {
  margin: 44px auto 0; max-width: 1060px;
  border-radius: 16px; border: 1px solid var(--border);
  overflow: hidden; box-shadow: var(--shadow);
  background: #0d0d0d;
}
.product-shot img { display: block; width: 100%; height: auto; }

/* 可交互 demo 看板(嵌 public/board/ 的静态 SPA)。桌面放 iframe,窄屏退回静态截图 ——
   看板那种信息密度在手机上横竖都读不了,给一张图比给一个能捏的小窗口体面。
   iframe 固定 1440×900 逻辑视口 + transform 等比缩放(比例由 DemoBoard.tsx 运行时算),
   这样嵌进来的是一整块正常桌面屏幕,而不是被压窄后重排的看板。 */
/* demo 撑到内容区的边:父级 .page-hero__inner 只有 920,比 .container 窄,所以要
   横向破格一档,正好落在 .container 的左右内边缘(与导航、正文同边)。
   上限就是容器内宽,不再往外 —— 破到满视口会越过页面内容边界、横向溢出。 */
.product-shot--demo {
  /* 不要写死深色:看板自己有明暗两套主题,iframe 还没画出来时这块底色会露出来,
     深色站看着是黑边、浅色站是一条黑杠(刷新时一闪而过那个)。跟随站点表面色即可。 */
  background: var(--surface);
  max-width: none;
  width: min(calc(var(--container) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)));
  margin-left: 50%; transform: translateX(-50%);
}
.product-demo { display: block; }
.product-demo__viewport { position: relative; overflow: hidden; }
/* 仿浏览器标题栏(2026-08-07 用户:网址整个去掉,只留红黄绿灯) */
.product-demo__chrome {
  display: flex; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 80%, transparent);
}
.product-demo__dots { display: inline-flex; gap: 6px; flex: none; }
.product-demo__dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.product-demo__dots i:nth-child(1) { background: #FF5F57; }
.product-demo__dots i:nth-child(2) { background: #FEBC2E; }
.product-demo__dots i:nth-child(3) { background: #28C840; }
.product-demo__frame {
  display: block; border: 0; transform-origin: top left;
  /* 背景交给 iframe 内部文档(它自己有明暗主题),这里留透明,别抢在它前面刷一层色 */
  background: transparent;
}
/* 权重必须压过上面的 `.product-shot img`(0,1,1),否则截图和 iframe 会同时出现 */
.product-shot img.product-demo__fallback { display: none; }
@media (max-width: 900px) {
  .product-demo { display: none; }
  .product-shot--demo img.product-demo__fallback { display: block; }
  /* /demo 页看板是主角:任何宽度都保留 iframe(DemoBoard 自身会等比缩放) */
  .demo-stage .product-demo { display: block; }
}

/* Hamburger toggle (hidden on desktop) */
.nav__toggle {
  display: none; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 10px; padding: 0; position: relative;
}
.nav__toggle span { position: absolute; left: 10px; right: 10px; height: 1.6px; background: var(--text); border-radius: 2px; transition: transform .22s, opacity .22s; }
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 19px; }
.nav__toggle span:nth-child(3) { top: 24px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; left: 0; right: 0; top: 64px; bottom: 0;
  background: var(--bg); border-top: 1px solid var(--border);
  overflow-y: auto; z-index: 49; padding: 6px var(--gutter) 48px;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__inner { display: flex; flex-direction: column; max-width: var(--container); margin: 0 auto; }
.mobile-nav__link, .mobile-nav__summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 4px; font-family: var(--font-display);
  font-size: 17px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-nav__group summary { list-style: none; cursor: pointer; }
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__plus { position: relative; width: 15px; height: 15px; flex: none; }
.mobile-nav__plus::before, .mobile-nav__plus::after { content: ""; position: absolute; background: var(--text-2); }
.mobile-nav__plus::before { left: 0; right: 0; top: 6.7px; height: 1.6px; }
.mobile-nav__plus::after { top: 0; bottom: 0; left: 6.7px; width: 1.6px; transition: transform .2s; }
.mobile-nav__group[open] .mobile-nav__plus::after { transform: scaleY(0); }
.mobile-nav__group[open] .mobile-nav__summary { border-bottom-color: transparent; }
.mobile-nav__sub { display: block; padding: 13px 4px 13px 18px; font-size: 15px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.mobile-nav__cta { margin-top: 26px; }

/* Switch to hamburger nav */
@media (max-width: 980px) {
  /* Drop backdrop-filter so the position:fixed drawer is NOT clipped to the
     nav box (filter/backdrop-filter makes an element the containing block
     for fixed descendants). Use a solid bar instead on mobile. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .nav__links { display: none; }
  .nav__cta, .nav__login { display: none; }
  /* keep the theme (brightness) + language toggles reachable on mobile */
  .nav__actions { gap: 7px; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (min-width: 981px) {
  .mobile-nav { display: none !important; }
}
/* 锁滚动:html 因 overflow-x: clip 而成为视口滚动容器,故 html/body 都要锁 */
html.nav-open, body.nav-open { overflow: hidden; }

/* ==========================================================
   Cursor glow — desktop (fine pointer) only
   ========================================================== */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
  .cursor-glow { display: none !important; }
}

/* ==========================================================
   Mobile polish
   ========================================================== */
/* Tablet / large-phone: shrink display type so CJK clauses don't break mid-word */
@media (max-width: 980px) {
  .display { font-size: clamp(30px, 5.4vw, 50px); }
  .display--hero { font-size: clamp(38px, 6.6vw, 58px); }
  .display--xl { font-size: clamp(40px, 7vw, 62px); }
}
@media (max-width: 600px) {
  .nav__inner { gap: 8px; height: 58px; }
  .nav__logo img { height: 25px; }
  /* compact the toggles so brightness + language + menu all fit on narrow phones */
  .nav__actions { gap: 6px; }
  .toggle-group { padding: 2px; }
  /* 语言与主题都是纯图标/短码切换，不能被移动端通用 padding 拉宽。 */
  .toggle-group :is(button, a) { width: 26px; height: 26px; min-width: 26px; padding: 0; }
  .theme-switch button { height: 26px; padding: 0; }
  .mobile-nav { top: 58px; }
  .display { font-size: clamp(28px, 8vw, 40px); }
  .display--hero { font-size: clamp(31px, 8.4vw, 44px); line-height: 1.06; }
  .display--xl { font-size: clamp(33px, 9vw, 48px); line-height: 1.08; }
  .hero__lede, .page-hero__lede { font-size: 15px; }
  .section__head { margin-bottom: 40px; }
  .hero__ctas, .cta__actions { width: 100%; }
  .hero__ctas .btn, .cta__actions .btn { width: 100%; justify-content: center; }
  /* Force single column on phones — beats inline grid-template-columns
     set on some .features/.plans grids (inline style would otherwise win
     over the stylesheet media query and cause horizontal overflow). */
  .features, .plans, .prose-grid, .era, .locations { grid-template-columns: 1fr !important; }
  /* Compact icon cards stay 2-up on phones; text-heavy failure cards
     go single-column (their original behaviour) for readability. */
  .engines-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .failures { grid-template-columns: 1fr !important; }
  .mega__inner { grid-template-columns: 1fr !important; }
}
/* Belt-and-suspenders: never allow horizontal scroll on small screens */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}
/* 桌面同理:aud-onb 等全出血布局用 100vw 计边距,出现纵向滚动条时 100vw 含滚动条宽,
   会多出 ~15px 横向滚动(底部滚动条)。clip 不产生新的滚动容器,统一裁掉。 */
html, body { overflow-x: clip; }
/* Small phones (≈320–400px logical): keep hero clause on one line */
@media (max-width: 400px) {
  .display { font-size: clamp(25px, 8.2vw, 34px); }
  .display--hero { font-size: clamp(27px, 8.2vw, 36px); }
  .display--xl { font-size: clamp(29px, 8.6vw, 38px); }
}
/* The hero headline reads as a balanced 2-line block on every width */
.display--hero, .display--xl { text-wrap: balance; }

/* ==========================================================
   Feature cards — count modifiers + bottom-pinned CTA link
   ========================================================== */
.feature { display: flex; flex-direction: column; }
.feature__link {
  margin-top: auto; padding-top: 16px; align-self: flex-start;
  color: var(--accent); font-weight: 600; font-size: 14px;
  transition: color .14s;
}
.feature__link:hover { color: var(--accent-2); }
/* rows that don't have 4 cards still fill the width and stay aligned */
.features--3 { grid-template-columns: repeat(3, 1fr); }
.features--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) {
  .features--2 { grid-template-columns: repeat(2, 1fr); }
  .features--3 { grid-template-columns: 1fr; }
}

/* ==========================================================
   Article Table of Contents — article + TOC centered as a group
   ========================================================== */
.article-toc { display: none; }
@media (min-width: 1200px) {
  /* JS wraps .article + .article-toc in .article-shell */
  .article-shell {
    display: grid;
    grid-template-columns: minmax(0, 800px) 240px;
    gap: 64px;
    justify-content: center;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: var(--gutter);
    padding-top: clamp(40px, 6vw, 80px);   /* top padding lives on the shell so both columns start on the same line */
  }
  .article-shell > .article {
    max-width: none; margin: 0; padding-inline: 0;
    padding-block-start: 0;                 /* article no longer adds its own top padding inside the shell */
  }
  .article-toc {
    display: block;
    position: sticky; top: 104px;
    max-height: calc(100vh - 140px); overflow-y: auto;
    padding-top: 0;                         /* aligns CONTENTS with the cover/article top */
  }
}
.article-toc__label { color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.article-toc__nav { display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--border); }
.article-toc__link { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1.45; transition: color .14s, border-color .14s; }
.article-toc__link:hover { color: var(--text); }
.article-toc__link.is-active { color: var(--text); border-left-color: var(--accent); font-weight: 600; }
.article-toc__link--sub { padding-left: 30px; font-size: 13px; color: var(--text-3); }
.article-toc__link--sub:hover { color: var(--text-2); }

/* ==========================================================
   Article figures + cover (shared across all article pages)
   ========================================================== */
.article__body figure { margin: 40px 0; text-align: center; }
.article__body figure img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 14px; background: #0b0b0b; box-shadow: var(--shadow); }
.article__body figcaption { margin-top: 12px; color: var(--text-3); font-size: 13px; letter-spacing: .01em; }
.article__cover { margin: 4px 0 34px; }
.article__cover img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 16px; }
@media (max-width: 600px) { .article__body figure { margin: 28px 0; } }

/* Article TOC — thin, subtle scrollbar */
.article-toc { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.article-toc::-webkit-scrollbar { width: 4px; }
.article-toc::-webkit-scrollbar-track { background: transparent; }
.article-toc::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.article-toc::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ==========================================================
   Article title weight-contrast + heading scroll offset
   ========================================================== */
/* (legacy title two-tone rules removed — unified ivory serif rule below) */
/* When a TOC link is clicked, land the heading below the sticky nav */
.article__body h2, .article__body h3 { scroll-margin-top: 112px; }

/* ==========================================================
   Nav links — animated underline on hover / open
   ========================================================== */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.nav__caret + .nav__link::after { right: 15px; }
.nav__trigger.nav__link::after { right: 15px; } /* leave room for the caret */
.nav__link:hover::after,
.nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }

/* Article title — gold lead + white tail (two-tone, restored as before) */
.article__title-lead { color: var(--accent); }
.article__title-sub { font-weight: 400; color: var(--text); }

/* ==========================================================
   Article: emphasized conclusion callout + de-emphasized note
   ========================================================== */
/* 正文内联 CTA(2026-08-07 随三篇新文章引入的 class,片段用了就得有规则) */
.article__cta-inline {
  margin: 28px 0; padding: 16px 20px;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  font-size: 15px; line-height: 1.65;
}
.article__cta-inline strong { font-weight: 600; }
.article__cta-inline a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.article__takeaway {
  margin: 8px 0 40px;
  padding: 4px 0 4px 24px;
  background: transparent;
  border: none;
  border-left: 2px solid var(--border-2);
  border-radius: 0;
}
.article__takeaway-label {
  display: block;
  font-family: var(--font-sans);
  color: var(--text-3);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 8px;
}
.article__takeaway p {
  margin: 0;
  color: var(--text-2);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.article__note {
  margin: 0 0 26px !important;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.65;
  font-style: italic;
}

/* ==========================================================
   Article tables
   ========================================================== */
.article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 14.5px;
  line-height: 1.55;
  border: 1px solid var(--border);
}
.article__body thead th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.article__body th,
.article__body td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--text-2);
}
.article__body th { color: var(--text); white-space: nowrap; }
.article__body th:last-child,
.article__body td:last-child { border-right: none; }
.article__body tbody tr:last-child td { border-bottom: none; }
.article__body tbody tr:nth-child(even) { background: rgba(245,242,234,.025); }
.article__body td:first-child { color: var(--text); font-weight: 500; }

/* ==========================================================
   Team grid — balanced wrap, last row centered (5 members → 3+2)
   ========================================================== */
.team-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.team-grid > .feature { flex: 1 1 300px; max-width: 380px; }
@media (max-width: 980px) { .team-grid > .feature { flex-basis: 280px; max-width: none; } }
@media (max-width: 600px) { .team-grid > .feature { flex-basis: 100%; } }
/* team card: portrait + role head */
.team-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.team-card__photo {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  object-fit: cover; border: 1px solid var(--border);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.55);
}
.team-card__photo--mono {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .02em;
  color: var(--accent-ink); border: none;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
}
.team-card__role {
  margin: 4px 0 0; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}
.team-card__list { margin: 0; font-size: 13.5px; color: var(--text-2); list-style: none; padding: 0; line-height: 1.8; }

/* Academic advisor — photo + bio */
.advisor { display: flex; flex-direction: row; gap: clamp(22px, 3vw, 40px); align-items: flex-start; }
.advisor__photo {
  width: 108px; height: 108px; border-radius: 50%; flex: none;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--border-2);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.65);
}
.advisor__body { min-width: 0; flex: 1; }
@media (max-width: 640px) {
  .advisor { flex-direction: column; gap: 18px; }
  .advisor__photo { width: 88px; height: 88px; }
}

/* Settlement & terms — visual card grid */
.terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.term {
  display: flex; gap: 18px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; transition: border-color .15s, transform .15s;
}
.term:hover { border-color: var(--accent); transform: translateY(-2px); }
.term__icon {
  flex: none; width: 48px; height: 48px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border: none;
  background: linear-gradient(150deg, #F7D88E, #E9AC46 46%, #C5871C);
  box-shadow: inset 0 1px 0 rgba(255,252,244,.5), inset 0 0 0 1px rgba(170,116,28,.25), 0 4px 11px -7px rgba(160,110,30,.4);
}
.term__icon svg { width: 27px; height: 27px; }
.term__label { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); margin: 2px 0 6px; letter-spacing: -.01em; }
.term__gist { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
@media (max-width: 720px) { .terms-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   Scroll reveal — JS-driven; without JS, content stays visible
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }
/* stronger entrance — used on workflow steps & pricing plans */
.reveal--rise { transform: translateY(40px) scale(.965); }
.reveal--rise.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--rise {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   Pricing — "custom quote" label (figures removed)
   ========================================================== */
.plan__quote {
  order: 0;
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text);
}
.plan__quote small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--text-3);
}

/* ==========================================================
   Service cards · glow icon tile (premium, layered)
   ========================================================== */
.svc-v-b .feature { overflow: hidden; transition: border-color .2s, transform .2s; }
.svc-v-b .feature > * { position: relative; z-index: 1; }
/* layered card backdrop: grid texture + soft corner glow, faded toward the icon */
.svc-v-b .feature::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 16% 2%, rgba(229,163,56,.09), transparent 62%),
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 24px 24px;
  opacity: .7;
  -webkit-mask-image: radial-gradient(circle at 84% 6%, #000, transparent 62%);
  mask-image: radial-gradient(circle at 84% 6%, #000, transparent 62%);
}
/* grid "charge" — MONTHLY-SERVICE cards only (not Onboarding), hover only:
   a refined gold energy pulse flows bottom-right -> top-left across the grid,
   with a soft champagne glow. Hidden by default (no readability impact). */
.svc-panel[data-svc-panel="b"] .feature::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(rgba(255,228,160,.95) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,228,160,.95) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(120deg, transparent 30%, rgba(0,0,0,.4) 43%, #000 50%, rgba(0,0,0,.4) 57%, transparent 70%);
          mask: linear-gradient(120deg, transparent 30%, rgba(0,0,0,.4) 43%, #000 50%, rgba(0,0,0,.4) 57%, transparent 70%);
  -webkit-mask-size: 260% 260%; mask-size: 260% 260%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 135% 135%; mask-position: 135% 135%;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(240,185,92,.5));
  transition: opacity .25s ease;
}
.svc-panel[data-svc-panel="b"] .feature:hover::after {
  animation: geoGridCharge 1.4s ease-in-out infinite;
}
/* directional pulse: bottom-right -> top-left, brighten mid-travel then fade */
@keyframes geoGridCharge {
  0%   { -webkit-mask-position: 135% 135%; mask-position: 135% 135%; opacity: 0; }
  32%  { opacity: .55; }
  64%  { -webkit-mask-position: -35% -35%; mask-position: -35% -35%; opacity: 0; }
  100% { -webkit-mask-position: -35% -35%; mask-position: -35% -35%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-panel[data-svc-panel="b"] .feature:hover::after { animation: none; opacity: .25; }
}
.svc-v-b .feature:hover { transform: translateY(-3px); }
/* the gold tile — refined champagne→amber gold, specular sheen, layered depth */
.svc-v-b .feature__icon {
  position: relative; overflow: hidden;
  width: 60px; height: 60px; border-radius: 16px;
  border: none; color: #fff;
  margin-bottom: 22px;
  background: linear-gradient(150deg, #F2BC60, #E5A338);
  background-size: 165% 165%;
  box-shadow: none;
  transition: transform .3s cubic-bezier(.2,.7,.25,1.25), box-shadow .3s;
}
/* specular highlight — fixed light source, top-left (glass/metal sheen) */
.svc-v-b .feature__icon::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 26% 14%, rgba(255,252,242,.12), rgba(255,252,242,0) 55%);
}
.svc-v-b .feature__icon svg { position: relative; z-index: 1; width: 34px; height: 34px; stroke-width: 2; }
/* glossy shine sweep across the tile */
.svc-v-b .feature__icon::after {
  content: ""; position: absolute; top: 0; left: -130%; z-index: 2;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.svc-v-b .feature:hover .feature__icon {
  transform: translateY(-3px) rotate(-8deg) scale(1.06);
  box-shadow: none;
}
.svc-v-b .feature:hover .feature__icon::after { left: 130%; }
/* subtle continuous gold sheen (staggered, motion-safe) */
@media (prefers-reduced-motion: no-preference) {
  .svc-v-b .feature__icon { animation: svcSheen 7s ease-in-out infinite; }
  .svc-v-b .feature:nth-child(2) .feature__icon { animation-delay: -1.4s; }
  .svc-v-b .feature:nth-child(3) .feature__icon { animation-delay: -2.8s; }
  .svc-v-b .feature:nth-child(4) .feature__icon { animation-delay: -4.2s; }
}
@keyframes svcSheen { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }

/* Services · Group A/B slide-to-switch toggle (centered, draggable) */
.svc-slider-wrap { display: flex; justify-content: center; margin-bottom: 34px; }
.svc-slider {
  position: relative; display: flex; width: min(440px, 100%);
  padding: 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: grab; user-select: none; touch-action: none; outline: none;
}
.svc-slider.is-dragging { cursor: grabbing; }
.svc-slider:focus-visible { box-shadow: 0 0 0 3px rgba(229,163,56,.35); }
.svc-slider__burst {
  position: absolute; z-index: 0; inset: -12px; border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle at 78% 50%, rgba(229,163,56,.55), transparent 60%);
  opacity: 0;
}
.svc-slider__thumb {
  position: absolute; z-index: 1; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px);
  border-radius: 999px;
  background: linear-gradient(150deg, #F7D88E, #E9AC46 46%, #C5871C);
  box-shadow: 0 6px 18px -8px rgba(196,138,42,.55), inset 0 1px 0 rgba(255,252,244,.5);
  transition: transform .42s cubic-bezier(.34, 1.56, .42, 1), box-shadow .3s;
  overflow: hidden;
}
.svc-slider[data-state="b"] .svc-slider__thumb { transform: translateX(100%); }
/* drag-direction chevron at the thumb's leading edge */
.svc-slider__thumb::before {
  content: ""; position: absolute; top: 50%; right: 15px; width: 8px; height: 8px;
  border-right: 2px solid rgba(74,50,8,.55); border-top: 2px solid rgba(74,50,8,.55);
  transform: translateY(-50%) rotate(45deg);
}
.svc-slider[data-state="b"] .svc-slider__thumb::before { right: auto; left: 15px; transform: translateY(-50%) rotate(225deg); }
/* shine sweep — celebration */
.svc-slider__thumb::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -65%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.78), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.svc-slider.is-celebrating .svc-slider__thumb {
  box-shadow: 0 8px 26px -6px rgba(229,163,56,.95), 0 0 0 4px rgba(229,163,56,.22), inset 0 1px 0 rgba(255,252,244,.6);
  animation: svcPop .5s ease;
}
.svc-slider.is-celebrating .svc-slider__thumb::after { animation: svcShine .7s ease .04s; }
.svc-slider.is-celebrating .svc-slider__burst { animation: svcBurst .72s ease; }
@keyframes svcShine { from { left: -65%; opacity: 1; } to { left: 145%; opacity: 1; } }
@keyframes svcPop { 0% { transform: translateX(100%) scale(1); } 45% { transform: translateX(100%) scale(1.045); } 100% { transform: translateX(100%) scale(1); } }
@keyframes svcBurst { 0% { opacity: 0; transform: scale(.85); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.35); } }
.svc-slider__opt {
  position: relative; z-index: 2; flex: 1 1 50%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 12px; border: none; background: transparent; cursor: inherit;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  color: var(--text-2); white-space: nowrap; transition: color .25s; pointer-events: none;
}
.svc-slider__ico { width: 20px; height: 20px; flex: none; }
.svc-slider[data-state="a"] .svc-slider__opt[data-svc-go="a"],
.svc-slider[data-state="b"] .svc-slider__opt[data-svc-go="b"] { color: var(--accent-ink); }
@media (max-width: 560px) {
  .svc-slider__opt { font-size: 12.5px; gap: 6px; padding: 14px 8px; }
  .svc-slider__ico { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .svc-slider__thumb { transition: none; } }

/* panel switching — premium staggered card reveal on activation */
.svc-panel.is-hidden { display: none; }
.svc-panel .reveal { opacity: 1; transform: none; }
.svc-panel:not(.is-hidden) .feature { animation: svcCardIn .55s cubic-bezier(.16, 1, .3, 1) backwards; }
.svc-panel:not(.is-hidden) .feature:nth-child(1) { animation-delay: .03s; }
.svc-panel:not(.is-hidden) .feature:nth-child(2) { animation-delay: .1s; }
.svc-panel:not(.is-hidden) .feature:nth-child(3) { animation-delay: .17s; }
.svc-panel:not(.is-hidden) .feature:nth-child(4) { animation-delay: .24s; }
@keyframes svcCardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .svc-panel:not(.is-hidden) .feature { animation: none; } }

/* ---- Monthly-service "unlock" celebration: gold sparks accelerating bottom-left → top-right ---- */
.svc-panel { position: relative; }
/* fx layer sits over the card grid, clipped to it, and never blocks pointer/reading */
.svc-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; border-radius: 16px; }
.svc-particle {
  position: absolute; left: 0; bottom: 0;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #FFF4D8, var(--accent) 58%, #C5871C);
  box-shadow: 0 0 8px 1px rgba(229,163,56,.5);
  opacity: 0; will-change: transform, opacity;
  animation: svcParticleFly var(--dur) cubic-bezier(.3,0,.55,.5) var(--delay) forwards;
}
/* travels up-and-to-the-right (--tx positive, --ty negative), accelerating, then fades so text stays readable */
@keyframes svcParticleFly {
  0%   { transform: translate(0,0) scale(.3); opacity: 0; }
  18%  { opacity: .8; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}
.svc-panel.is-unlocking .feature { animation: svcCharge .9s cubic-bezier(.16, 1, .3, 1) backwards; }
.svc-panel.is-unlocking .feature:nth-child(1) { animation-delay: .02s; }
.svc-panel.is-unlocking .feature:nth-child(2) { animation-delay: .1s; }
.svc-panel.is-unlocking .feature:nth-child(3) { animation-delay: .18s; }
.svc-panel.is-unlocking .feature:nth-child(4) { animation-delay: .26s; }
/* edge-glow pulse only — never washes over the text */
@keyframes svcCharge {
  0%   { opacity: 0; transform: translateY(14px) scale(.97); filter: drop-shadow(0 0 0 rgba(229,163,56,0)); }
  20%  { opacity: 1; }
  50%  { transform: translateY(0) scale(1.006); filter: drop-shadow(0 0 13px rgba(229,163,56,.45)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 0 0 rgba(229,163,56,0)); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-fx { display: none; }
  .svc-panel.is-unlocking .feature { animation: none; }
}

/* Post-card titles: max two lines, site-wide (v44) */
.post-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* v45: TOC sticky lives on an inner wrapper so its travel is bounded by the
   aside's height (set by ArticleToc to end at the article body), not the grid row. */
.article-toc { position: static; max-height: none; overflow: visible; }
.article-toc__stick { position: sticky; top: 104px; max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.article-toc__stick::-webkit-scrollbar { width: 4px; }
.article-toc__stick::-webkit-scrollbar-track { background: transparent; }
.article-toc__stick::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

/* abbr: keep the semantic title for crawlers, drop the default dotted underline (v47) */
abbr[title] { text-decoration: none; border-bottom: 0; cursor: inherit; }

/* Footer address chip: reads as a location control at first glance (v48) */
.footer__addr { margin-top: 14px; font-style: normal; }
.footer__addr a { display: inline-flex; align-items: flex-start; gap: 8px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); transition: color .15s ease, border-color .15s ease; }
.footer__addr a:hover { color: var(--accent); border-color: var(--accent); }
.footer__addr svg { flex: none; margin-top: 2.5px; }

/* Footer meta: quiet address line with a gold pin, socials beneath (v52) */
.footer__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 6px; }
.footer__meta .footer__addr { margin-top: 0; max-width: 100%; min-width: 0; }
.footer__meta .footer__addr a { display: inline-flex; align-items: flex-start; gap: 7px; max-width: 100%; padding: 0; border: 0; background: none; font-size: 13.5px; line-height: 1.65; color: var(--text-2); transition: color .15s ease; }
.footer__meta .footer__addr a:hover { color: var(--accent); }
.footer__meta .footer__addr svg { flex: none; margin-top: 3px; }
.footer__meta .footer__socials { margin-top: 0; }

/* ==========================================================
   Blog list tools: search, tag filter, pagination
   ========================================================== */
.blog-tools { margin: 44px 0 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.blog-tools__search { position: relative; width: 100%; max-width: 420px; }
.blog-tools__search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.blog-tools__input { width: 100%; padding: 10px 18px 10px 40px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; appearance: none; -webkit-appearance: none; }
.blog-tools__input::placeholder { color: var(--text-3); }
.blog-tools__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.blog-tools__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.blog-chip { font: inherit; font-size: 13px; line-height: 1; padding: 8px 14px; border-radius: 999px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.blog-chip:hover { color: var(--text); border-color: var(--border-2); }
.blog-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
/* 2026-09 主题条改为链接(服务端渲染的主题页入口),与 button 版同一视觉 */
a.blog-chip { text-decoration: none; display: inline-block; }
/* 主题页(/blog/<topic>):介绍段 + 按类型分组 + 相关主题 */
.topic-intro { max-width: 720px; margin: 14px auto 0; color: var(--text-2); font-size: 16px; line-height: 1.7; }
.topic-intro p { margin: 0 0 10px; }
.topic-group { margin-top: 44px; }
.topic-group__title { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.topic-related { margin-top: 52px; }
.topic-related .blog-tools__tags { justify-content: flex-start; }
.posts { scroll-margin-top: 84px; }
.blog-empty { display: none; margin: 56px 0; text-align: center; font-size: 15px; color: var(--text-3); }
.blog-empty.is-visible { display: block; }
.blog-pagination { display: none; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 40px 0 8px; }
.blog-pagination.is-visible { display: flex; }
.blog-page-btn { min-width: 36px; height: 36px; padding: 0 10px; font: inherit; font-size: 14px; line-height: 1; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.blog-page-btn:hover:not(:disabled):not(.is-current) { color: var(--text); border-color: var(--border-2); }
.blog-page-btn.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: default; }
.blog-page-btn:disabled { opacity: .35; cursor: default; }
/* Clickable card tag pills: subtle gold hover, matching the .blog-chip treatment */
.post-card__tags > span { cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.post-card__tags > span:hover { background: color-mix(in oklab, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }

/* ==========================================================
   Article breadcrumb, bottom tags & related articles
   ========================================================== */
table caption { caption-side: bottom; text-align: left; color: var(--text-3); font-size: 13px; letter-spacing: .01em; padding: 10px 2px 0; }
.crumbs { font-size: 13px; color: var(--text-3); margin: 0 0 18px; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { margin: 0 7px; opacity: .6; }
.article-foot { border-top: 1px solid var(--border); margin: 56px 0; padding-top: 26px; font-family: var(--font-sans); }
.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.article-tags__label { font-size: 13px; color: var(--text-3); }
.article-tag { display: inline-block; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); padding: 4px 12px; font-size: 13px; line-height: 1.5; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.article-tag:hover { border-color: var(--accent); color: var(--accent); }
.article-related { margin-top: 26px; }
.article-related__title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 10px; }
.article-related ul { list-style: none; margin: 0; padding: 0; }
.article-related li { margin: 0 0 8px; }
.article-related a { color: var(--text-2); font-size: 14.5px; text-decoration: none; transition: color .15s ease; }
.article-related a:hover { color: var(--accent); }

/* FAQ accordion inside article bodies (shared by roundup + guide posts) */
.rk-faq details { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 10px; background: rgba(255,255,255,.02); }
.rk-faq summary { cursor: pointer; padding: 14px 17px; font-weight: 600; list-style: none; }
.rk-faq summary::-webkit-details-marker { display: none; }
.rk-faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; }
.rk-faq details[open] summary::after { content: "–"; }
.rk-faq details p { padding: 0 17px 15px; margin: 0; opacity: .85; }

/* ==========================================================
   Roundup (agency comparison) articles: ranking tables & callouts
   ========================================================== */
.article--roundup .rk-tblwrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--border); border-radius: 12px; }
.article--roundup table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }
.article--roundup th, .article--roundup td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
.article--roundup thead th { background: rgba(255,255,255,.03); font-weight: 600; font-size: 13px; }
.article--roundup tbody tr.rk-host { background: rgba(229,163,56,.10); }
.article--roundup tbody tr.rk-host td:first-child { border-left: 3px solid var(--accent); }
.article--roundup .rk-tool { padding: 0; margin: 34px 0; }
.article--roundup .rk-tool--host { border-left: 3px solid rgba(229,163,56,.55); padding: 16px 0 16px 22px; background: linear-gradient(90deg, rgba(229,163,56,.06), transparent 60%); }
.article--roundup .rk-tool h2 { margin-top: 0; }
.article--roundup .rk-faq details { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 10px; background: rgba(255,255,255,.02); }
.article--roundup .rk-disc { font-size: 13px; opacity: .65; border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 12px; }
.article--roundup .rk-note { font-size: 12.5px; opacity: .6; margin-top: -10px; }
.article--roundup .rk-limit { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; font-size: 14px; margin-top: 12px; }

/* ==========================================================
   Guide / analysis articles: wide tables, source lines & reference lists
   ========================================================== */
/* 表格规则只作用在 .rk-tblwrap 里(2026-08 批次用的包裹层),不要放宽到
   .article--guide table —— 老的 guide 文章用的是无 overflow 的 .tbl-wrap,
   给它们加 min-width 会让整页横向溢出。 */
.article--guide .rk-tblwrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--border); border-radius: 12px; }
.article--guide .rk-tblwrap table { min-width: 720px; margin: 0; border: 0; }
.article--guide .rk-tblwrap tbody tr.rk-host { background: rgba(229,163,56,.10); }
.article--guide .rk-tblwrap tbody tr.rk-host td:first-child { border-left: 3px solid var(--accent); }
.article--guide .rk-disc { font-size: 13px; opacity: .65; border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 12px; }
.article--guide .rk-note { font-size: 12.5px; opacity: .6; margin-top: -10px; }
.article--guide .src { font-size: 13px; color: var(--text-3); margin-top: -8px; }
.article--guide .refs { font-size: 14px; color: var(--text-2); }
.article--guide .refs li { margin-bottom: 6px; word-break: break-all; }
/* 逐款工具卡:与 .article--roundup 同一套视觉,guide 类文章(工具横评)也用得上 */
.article--guide .rk-tool { padding: 0; margin: 34px 0; }
.article--guide .rk-tool--host { border-left: 3px solid rgba(229,163,56,.55); padding: 16px 0 16px 22px; background: linear-gradient(90deg, rgba(229,163,56,.06), transparent 60%); }
.article--guide .rk-tool h2 { margin-top: 0; }
/* 每款工具末尾的一句话结论 */
.article--guide .rk-verdict,
.article--roundup .rk-verdict {
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 8px;
  padding: 11px 14px; font-size: 14.5px; color: var(--text-2); margin-top: 14px;
}
.article--guide .rk-verdict strong,
.article--roundup .rk-verdict strong { color: var(--text); }
/* 数据小卡片组(文中引用的统计数字) */
.article--guide .rk-stats,
.article--roundup .rk-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 18px 0;
}
.article--guide .rk-stat,
.article--roundup .rk-stat {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.article--guide .rk-stat b,
.article--roundup .rk-stat b {
  display: block; font-family: var(--font-display); font-size: 22px; color: var(--accent); line-height: 1.2;
}
.article--guide .rk-stat span,
.article--roundup .rk-stat span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* Quiet page heading above the audit report card */
.aud-h1 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .01em; color: var(--text); margin: 0 0 18px; text-align: center; }

/* ── audit 注册引导 / 付费墙(2026-07-17 随控制台删除,2026-08-05 随流程恢复)
   规则原样取自初始提交 af1b215 的 theme.css,只补当前文件缺的那些 ── */
.aud-signup { max-width: 420px; }
.aud-oauth { display: grid; gap: 10px; }
.aud-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--text-3); font-size: 12.5px; }
.aud-or::before, .aud-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ── audit 注册引导 / 付费墙:补齐 af1b215 里当前文件缺失的全部 .aud-* 规则 ── */
.aud-signup__mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent); margin-bottom: 22px; }
.aud-oauth__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; transition: border-color .15s, background .15s; }
.aud-oauth__btn:hover { border-color: var(--accent); background: var(--surface-2); }
.aud-oauth__btn svg { flex: none; }
.aud-signup__alt { margin-top: 20px; font-size: 13.5px; color: var(--text-2); }
.aud-textlink { color: var(--accent); font-weight: 600; background: none; border: none; cursor: pointer; font-size: inherit; font-family: inherit; padding: 0; }

/* ── audit 引导/付费墙:补齐 af1b215 中当前文件仍缺的 .aud-* 规则(含 @media) ── */

/* 卡片上的标签与上一行的分类是同一个词,重复了 —— 视觉上藏掉。
   DOM 必须保留:列表页的筛选 chip 是从 .post-card__tags 派生的(见 BlogListTools)。 */
.post-card .post-card__tags { display: none; }

/* ── Onboarding 中转屏共用的小字行(paywall 等待态) ── */
.aud-count { color: var(--text-3); font-size: 13px; margin: 20px 0 10px; }
/* 运行/完成屏:整屏居中(与步骤屏分离,不带右栏预览)。
   ⚠️ [hidden] 必须显式压回 display:none —— 作者写的 display:grid 会盖过 hidden
   属性的 UA 默认值,否则两屏常驻页尾(2026-08-06 付费墙下漏出两屏,踩过)。 */
.aud-run { display: grid; place-items: center; min-height: 66vh; text-align: center; padding: 56px 20px; }
.aud-run[hidden] { display: none; }
.aud-run__inner { max-width: 600px; }
.aud-run__inner .aud__title { margin-bottom: 10px; }
.aud-run__ring { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 30px; }
.aud-run__ring img { width: 36px; height: 36px; border-radius: 9px; animation: audpulse 1.25s ease-in-out infinite; }
@keyframes audpulse { 0%, 100% { opacity: .3; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.04); } }
/* 右栏「意图问句」预览卡 */
.aud-tp { padding: 20px 20px 14px; }
.aud-tp__head { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.aud-tp__row { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.aud-tp__row i { margin-left: auto; font-style: normal; color: var(--text-3); font-size: 12px; }

/* 检测入口的「品牌名不是域名」引导(2026-08-06 真实访客漏斗断点):
   小悬浮气泡钉在输入框正下方,不挤占版面;5 秒自动消失(JS 定时)。
   配色走设计令牌(2026-08-06 配色返工):surface 底 + 金色描边 + 品牌金辉光,
   两套主题自动适配,不再写死深灰 */
.hero-check__field { position: relative; }
.hero-check__tip {
  --tip-border: color-mix(in oklab, var(--accent) 42%, var(--border));
  position: absolute; left: 6px; top: calc(100% + 14px); z-index: 30;
  width: max-content; max-width: 340px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--tip-border);
  font-size: 12.5px; line-height: 1.55; font-weight: 500; text-align: left;
  box-shadow: 0 0 0 3px var(--hl-bg), 0 14px 34px -8px rgba(0, 0, 0, .35);
}
.hero-check__tip::before {
  content: ""; position: absolute; top: -6px; left: 24px;
  width: 10px; height: 10px; background: inherit;
  border-top: 1px solid var(--tip-border); border-left: 1px solid var(--tip-border);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.hero-check__tip b { font-weight: 700; color: var(--accent); }

/* 视觉隐藏但对屏幕阅读器与爬虫可见(2026-08-08 为 /demo 补 h1 引入的标准写法)。
   不能用 display:none / visibility:hidden —— 那样辅助技术和文本抽取都读不到。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 2026-08-24 onboarding 界面审查一轮:验证码模块 / 进度条 / 完成屏 / 杂项 ── */

/* 按钮内加载圈(发送中/验证中的即时反馈) */
.btn__spin {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: gxspin .7s linear infinite; margin-right: 2px;
}
@keyframes gxspin { to { transform: rotate(360deg); } }

/* 成型的错误/提示告警条(取代裸红字) */
.aud-alert {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 14px 0 0; padding: 11px 13px; border-radius: 11px;
  border: 1px solid color-mix(in oklab, #ef6a6a 38%, var(--border));
  background: color-mix(in oklab, #ef6a6a 8%, var(--surface));
  color: #ef6a6a; font-size: 13px; line-height: 1.5;
}
.aud-alert svg { flex: none; margin-top: 2px; }
.aud-alert span { color: var(--text-2); }
.aud-alert b { color: var(--text); }

/* 验证码:已发送提示行(邮箱 + 更换) */
.otp-sentline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.otp-sentline__txt { font-size: 13px; color: var(--text-2); line-height: 1.55; min-width: 0; }
.otp-sentline__txt b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.otp-sentline .aud-textlink { flex: none; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }

/* 验证码:6 格分段输入 —— 真输入框透明铺满,格子跟随其值渲染
   (粘贴/输入法/iOS one-time-code 自动填充全都天然可用) */
.otp-boxes { position: relative; display: flex; gap: 8px; }
.otp-boxes__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; font-size: 16px; letter-spacing: 8px;
  color: transparent; caret-color: transparent; background: transparent; cursor: pointer;
}
.otp-box {
  flex: 1; min-width: 0; height: 52px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text);
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.otp-box.is-filled { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); }
.otp-boxes:focus-within .otp-box.is-cursor { border-color: var(--accent); box-shadow: 0 0 0 3px var(--hl-bg); }
.otp-boxes.is-bad .otp-box { border-color: color-mix(in oklab, #ef6a6a 60%, var(--border)); }
.otp-boxes.is-shake { animation: hc-shake .35s ease; }
.otp-cd { color: var(--text-3); }
.aud-signup__alt .aud-textlink { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.aud-signup__alt .aud-textlink:disabled { opacity: .55; cursor: default; }

/* 下拉键盘高亮位(GxSelect) */
.gx-sel__opt.is-hover { background: var(--surface-2); }

/* running 屏:真实进度条(探测 → 分析 → 构建看板) */
.aud-run__progress { margin: 8px auto 0; max-width: 440px; }
.aud-run__bar { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.aud-run__bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 70%, var(--surface)) 0%, var(--accent) 100%);
  transition: width .6s cubic-bezier(.3, .8, .4, 1);
  position: relative; overflow: hidden;
}
.aud-run__bar i::after {
  content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  animation: aud-scan 2.2s ease-in-out infinite;
}
.aud-run__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.aud-run__stage { font-size: 13.5px; color: var(--text-2); }
.aud-run__pct { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.aud-run__actions { justify-content: center; margin-top: 26px; }

/* 合作伙伴模块徽标按主题切换(2026-09-04 用户:黑底用白字版、白底用黑字版) */
.partner__badge .logo-dark { display: block; }
.partner__badge .logo-light { display: none; }
:root[data-theme="light"] .partner__badge .logo-dark { display: none; }
:root[data-theme="light"] .partner__badge .logo-light { display: block; }
/* 浅色主题:面板用暖米灰(--bg-2),徽标米白底(--bg)+ 墨色描边 —— 与深色版「黑徽标坐浅一档面板」同一逻辑,
   不再是 OpenAI 原版纯白卡(2026-09-04 用户:改成同色系) */
:root[data-theme="light"] .partner__badge { background: var(--bg-2); }

/* ══════════════════════════════════════════════════════════════════════
   Onboarding v7(2026-10-07,对标 peec 等竞品的布局/留白/一屏一事,皮肤不变):
   四步分屏(左 500 表单 + 右看板预览窗)+ 第 4 步生成卡/手风琴 + running/done 重排。
   整块追加在文件末尾:.aud-onb / .aud-run / .eng-pill / .aud-tag 的基础定义在前面,这里按 v7 覆盖;
   ≤920 的单列栅格也要在本块自己补(前面的媒体查询会被本块的列定义盖掉)。
   ══════════════════════════════════════════════════════════════════════ */

/* 骨架条与预览窗的专用色:深色下 --surface-2 压 --surface 只有 1.06:1,整张灰稿看不见 */
:root {
  --sk: color-mix(in oklab, var(--text) 8%, var(--surface));
  --sk2: color-mix(in oklab, var(--text) 5%, var(--surface));
  --ob-dot: color-mix(in oklab, var(--text) 8%, transparent);
  --ob-ring: color-mix(in oklab, var(--accent) 85%, transparent);
  --ob-glow: color-mix(in oklab, var(--accent) 12%, transparent);
  --ob-ok: #4cc38a;
}

/* 浮物与页头:AuditFlow 按 screen 在 <html> 打 data-onb=<screen>(result 屏除外) */
html[data-onb] .whatsapp-fab, html[data-onb] .cookie-notice { display: none; }
html[data-onb] .aud-top__inner { max-width: none; padding-inline: var(--gutter); }
html[data-onb] .aud-top__act { background: transparent; color: var(--text); border-color: var(--border-2); box-shadow: none; }
html[data-onb] .aud-top__act:hover { background: transparent; border-color: var(--text); }
/* 2026-10-07 拍板:注册起只有浅色(AuditFlow/LoginCard 把 html[data-theme] 钉成 light,离开流程恢复),页头的明暗切换一并收起 */
html[data-onb] .aud-top .theme-switch { display: none; }

/* ── 步骤屏栅格(2026-10-07 二次验收按竞品比例定:peec 四步屏 33/67、Otterly 47/53,取 42/58;表单本体与它们一样钉死最大宽 640,
   不随列无限拉宽)。右预览窗填满右栏、右下出血。.aud-pay 不带此类,不受影响 ── */
.aud-onb--steps { grid-template-columns: clamp(500px, 42vw, 880px) minmax(0, 1fr); }
.aud-onb--steps .aud-onb__main { padding: 48px clamp(48px, 4vw, 80px) 28px clamp(56px, 4.6vw, 96px); }
.aud-onb--steps .aud-pane__inner { max-width: 640px; }
.aud-onb--steps .aud-stepscreen:not([hidden]) { display: flex; flex-direction: column; flex: 1 0 auto; }
.aud-onb--steps .aud-pane__inner { display: flex; flex-direction: column; flex: 1 0 auto; }
.aud-onb--steps .aud__title { font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0; }
.aud-onb--steps .aud__sub { font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 8px 0 28px; }
.aud-onb--steps .aud-or { margin: 22px 0 16px; }

/* 步骤指示:4 根 24×3 细条 + 「第 n / 4 步 · 名称」 */
.aud-stepper { display: flex; align-items: center; gap: 12px; height: 18px; margin: 0 0 14px; font-size: 12.5px; color: var(--text-2); }
.aud-stepper__bars { display: flex; gap: 5px; }
.aud-stepper__bars i { width: 24px; height: 3px; border-radius: 2px; background: var(--border-2); transition: background .2s; }
.aud-stepper__bars i.is-done { background: var(--text-3); }
.aud-stepper__bars i.is-cur { background: var(--accent); }
.aud-stepper b { color: var(--text); font-weight: 600; }

/* 字段:标签 13/600 正文色,输入 44 高、10 圆角、--border-2 描边 */
.aud-onb--steps .aud-form { gap: 22px; margin: 0; }
.aud-onb--steps .aud-field { gap: 8px; }
.aud-onb--steps .aud-field__label { font-size: 13px; font-weight: 600; color: var(--text); }
.aud-onb--steps .aud-field__input, .aud-onb--steps .gx-sel__btn { height: 44px; padding: 0 14px; border-radius: 10px; border-color: var(--border-2); font-size: 14px; }
.aud-onb--steps .aud-field__area { height: auto; min-height: 86px; padding: 11px 14px; font-size: 13.5px; }
.aud-onb--steps .aud-prefix { border-radius: 10px; border-color: var(--border-2); }
.aud-onb--steps .aud-prefix:focus-within { border-color: var(--accent); }
.aud-onb--steps .aud-prefix__b { padding: 0 12px; font-size: 13px; color: var(--text-2); background: transparent; }
.aud-onb--steps .aud-prefix .aud-field__input { height: 42px; border-radius: 0; }
.aud-onb--steps .aud-field__note--warn { font-size: 12.5px; color: #ef6a6a; opacity: 1; }
.aud-onb--steps .aud-morereg__toggle { color: var(--text-2); }
.aud-onb--steps .aud-morereg { border-color: var(--border-2); background: var(--surface); }

/* 动作条:两个等宽 48 高按钮一行,钉在列底(内容长时随内容下移,左列自己滚) */
.aud-onb--steps .aud-actions { margin-top: auto; padding-top: 18px; gap: 10px; }
.aud-onb--steps .aud-actions .btn { flex: 1; justify-content: center; height: 48px; padding: 0 22px; font-size: 14px; }

/* 分段选择(项目类型):描边轨道,选中格 --hl-bg + 内描金边 */
.aud-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface); }
.aud-seg button { height: 36px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; transition: background .14s, color .14s; }
.aud-seg button:hover { color: var(--text); }
.aud-seg button.on { background: var(--hl-bg); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 70%, transparent); }

/* 引擎胶囊:36 高线框,选中 --hl-bg + 金描边;套餐外折进「+n」 */
.aud-onb--steps .eng-pick { gap: 7px; }
.aud-onb--steps .eng-pill { height: 36px; padding: 0 12px; background: transparent; border-color: var(--border-2); color: var(--text); font-size: 13px; font-weight: 500; }
.aud-onb--steps .eng-pill img { width: 15px; height: 15px; }
.aud-onb--steps .eng-pill.on { border-color: color-mix(in oklab, var(--accent) 75%, transparent); background: var(--hl-bg); }
.eng-pill--more { gap: 4px; padding: 0 10px; color: var(--text-2); }
.aud-onb--steps .eng-pill--more { color: var(--text-2); }
.eng-pill--more svg { transition: transform .18s; }
.eng-pill--more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* 锁定 / 地区不支持的胶囊:暗化放到子元素上,胶囊自身不降 opacity。整颗降 opacity 会把 ::after 提示气泡一起变半透明
   (字发糊、后面的胶囊透出来),还会自成层叠上下文,让气泡的 z-index 压不住相邻胶囊(2026-10-16 验收「有点糊」) */
.aud-onb--steps .eng-pill--locked, .aud-onb--steps .eng-pill.is-off { opacity: 1; border-color: var(--border); }
.aud-onb--steps .eng-pill--locked > *, .aud-onb--steps .eng-pill.is-off > * { opacity: .55; }
/* 胶囊气泡:hover 即现(原生 title 在 disabled 上不弹、还要等一秒),深底浅字,钉在胶囊上方 */
.eng-pill[data-tip] { position: relative; }
.eng-pill[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 6; max-width: 320px; width: max-content; padding: 7px 11px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 500; line-height: 1.45; white-space: normal; text-align: left; pointer-events: none; opacity: 1; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.eng-pill[data-tip]:hover::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); z-index: 6; border: 5px solid transparent; border-top-color: var(--text); border-bottom: 0; pointer-events: none; }
.aud-eng-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); opacity: 1; }
.aud-eng-note .aud-textlink { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.aud-eng-note .aud-textlink:hover { color: var(--accent); }

/* 标签(品牌关键词 / 产品与服务):28 高线框胶囊,信息胶囊一律线框 */
.aud-onb--steps .aud-tags { gap: 6px; }
.aud-onb--steps .aud-tag { height: 28px; padding: 0 11px; gap: 7px; border-color: var(--border-2); background: transparent; }
.aud-onb--steps .aud-tag--add { border-style: dashed; color: var(--text-2); }
.aud-onb--steps .aud-tag--input { height: 28px; padding: 0 11px; border-radius: 999px; }

/* 画像屏状态行:转圈 / 失败 + 重试 / 绿勾 + 重新生成 */
.aud-okline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-2); margin: -12px 0 24px; }
.aud-okline .hero-audit__spinner { width: 14px; height: 14px; }
.aud-okline__ok { width: 16px; height: 16px; border-radius: 50%; background: color-mix(in oklab, var(--ob-ok) 22%, transparent); color: var(--ob-ok); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.aud-okline .aud-textlink { color: var(--text-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.aud-okline .aud-textlink:hover { color: var(--text); }
.aud-okline--err { align-self: flex-start; padding: 7px 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, #ef6a6a 38%, var(--border)); background: color-mix(in oklab, #ef6a6a 8%, var(--surface)); color: var(--text); }
.aud-okline--err svg { color: #ef6a6a; flex: none; }
.aud-okline--err .aud-textlink { color: var(--text); font-weight: 600; text-decoration-color: var(--text-2); }

/* 第 4 步 · 生成中卡片:转圈标题 + 4px 进度 + 三行状态 */
.aud-load { border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface); padding: 18px 18px 16px; }
.aud-load__t { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.aud-load__bar { height: 4px; border-radius: 2px; background: var(--border); margin: 14px 0; overflow: hidden; }
.aud-load__bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .4s ease; }
.aud-load__rows { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text-2); }
.aud-load__rows > span { display: flex; align-items: center; gap: 9px; }
.aud-load__rows i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-2); display: grid; place-items: center; font-style: normal; font-size: 9px; flex: none; }
.aud-load__rows .is-done i { background: var(--text-2); border-color: var(--text-2); color: var(--bg); font-weight: 700; }
.aud-load__rows .is-cur { color: var(--text); font-weight: 600; }
.aud-load .hero-audit__spinner { width: 16px; height: 16px; }

/* 第 4 步 · 就绪:计数行 + 添加主题行 + 主题手风琴(一次只展开一个) */
.aud-cnt { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.aud-cnt b { color: var(--text); font-weight: 600; }
.aud-cnt__add { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.aud-cnt__add:hover { color: var(--accent); }
.aud-addtopic { display: flex; gap: 8px; margin-bottom: 12px; }
.aud-addtopic .aud-field__input { flex: 1; min-width: 0; }
.aud-addtopic .btn { height: 44px; padding: 0 18px; justify-content: center; }
.aud-accs { display: flex; flex-direction: column; gap: 7px; }
.aud-acc { border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface); overflow: hidden; }
.aud-acc__h { display: flex; align-items: center; gap: 10px; padding: 0 0 0 13px; }
.aud-acc__t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 13px 0 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; }
.aud-acc__t .n { margin-left: auto; font-weight: 500; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.aud-acc__t .chev { color: var(--text-2); flex: none; transition: transform .18s; }
.aud-acc.is-open .aud-acc__t .chev { transform: rotate(90deg); }
/* 键盘焦点环画在行内:.aud-acc 有 overflow:hidden,默认外扩的焦点环会被裁成一截 L 形金线 */
.aud-acc__t:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.aud-acc__b { border-top: 1px solid var(--border); padding: 5px 6px 6px; background: var(--bg-3); }
.aud-acc__empty { margin: 0; padding: 8px; font-size: 12.5px; color: var(--text-3); }
.aud-qr { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; line-height: 1.5; color: var(--text); text-align: left; cursor: pointer; }
.aud-qr:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.aud-qr.off { color: var(--text-2); }
.aud-cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-2); flex: none; margin-top: 2px; display: grid; place-items: center; padding: 0; background: var(--surface); cursor: pointer; transition: background .12s, border-color .12s; }
.aud-cb.on, .aud-cb.part { background: var(--accent); border-color: var(--accent); }
.aud-cb.on::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--accent-ink); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.aud-cb.part::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--accent-ink); }
.aud-acc__h > .aud-cb { margin-top: 0; }

/* ── 右栏:点阵底 + 780 宽应用窗(顶栏 46 + 侧栏 200 + 主区),右下出血,底部渐隐 ── */
.aud-onb--steps .aud-aside { position: relative; display: block; overflow: hidden; padding: 0; border-left: 1px solid var(--border); background-color: var(--bg-2); background-image: radial-gradient(circle, var(--ob-dot) 1px, transparent 1.4px); background-size: 16px 16px; }
.aud-onb--steps .aud-aside::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(transparent, var(--bg-2)); pointer-events: none; z-index: 3; }
.aud-win { position: absolute; left: 48px; top: 48px; right: -48px; bottom: -40px; min-height: 700px; display: grid; grid-template-rows: 46px 1fr; background: var(--bg); border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); color: var(--text); font-family: var(--font-sans); }
.aud-win__top { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--border); }
.aud-win__top img { height: 17px; display: block; }
.aud-win .logo-light { display: none; }
:root[data-theme="light"] .aud-win .logo-dark { display: none; }
:root[data-theme="light"] .aud-win .logo-light { display: block; }
.aud-win__tg { display: flex; gap: 6px; }
.aud-win__tg i { width: 52px; height: 22px; border-radius: 999px; background: var(--sk2); }
.aud-win__body { position: relative; display: grid; grid-template-columns: 200px 1fr; min-height: 0; }
.aud-win__nav { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 1px solid var(--border); background: var(--bg); }
.aud-win__main { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; min-width: 0; }
/* 注册屏主区:示例看板截图(2x 截图 2560×1840,按 1280×920 的 CSS 尺寸铺;看板自己的顶栏 58、侧栏 271)。缩放按主区宽度算:截图的内容区(1009)正好铺满主区,
   侧栏藏到画出来的 200 宽侧栏下面、顶栏藏到 46 高顶栏下面;窄窗下限 945(= 侧栏恰好 200)。% 在 width/left/margin-top 里都按容器宽算,三处一致 */
.aud-win__shot { position: absolute; inset: 0; overflow: hidden; opacity: .58; filter: saturate(.7); }
.aud-win__shot::before { content: ""; position: absolute; top: 0; --w: max(945px, calc((100% - 200px) * 1280 / 1009)); width: var(--w); left: calc(200px - var(--w) * 271 / 1280); margin-top: calc(var(--w) * -58 / 1280); aspect-ratio: 1280 / 920; background-size: 100% auto; background-repeat: no-repeat; }
.aud-win__shot::before { background-image: none; }
:root[data-theme="light"] .aud-win__shot--dark { display: none; }
:root[data-theme="light"] .aud-win__shot--light { display: block; }
/* 骨架条 / 压暗 / 点亮 */
.aud-win .sk { display: block; height: 8px; border-radius: 4px; background: var(--sk); }
.aud-win .sk--2 { background: var(--sk2); }
.aud-win .q6 { opacity: .6; }
.aud-lit { position: relative; z-index: 2; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--ob-ring), 0 0 0 6px var(--ob-glow), 0 18px 50px -18px color-mix(in oklab, var(--accent) 35%, transparent); }
/* 侧栏:项目 chip + 分组 + 条目 */
.aud-pj { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 8px; border-radius: 10px; margin-bottom: 8px; font: 700 13px var(--font-display); min-width: 0; }
.aud-pj > span:not(.aud-av) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aud-pj .caret { margin-left: auto; color: var(--text-2); flex: none; }
.aud-av { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; flex: none; font: 700 12px var(--font-display); color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); text-transform: uppercase; }
.aud-av--lg { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
.aud-pj.aud-lit { height: 60px; width: 300px; padding: 0 14px 0 10px; margin: -2px -2px 10px; font-size: 16px; gap: 11px; }
.aud-pj.aud-lit .aud-av { width: 34px; height: 34px; border-radius: 9px; font-size: 16px; }
.aud-pj.aud-lit small { display: block; font: 500 12px var(--font-sans); color: var(--text-2); margin-top: 2px; }
.aud-win__g { height: 6px; width: 40%; border-radius: 3px; background: var(--sk2); margin: 12px 0 6px 8px; }
.aud-win__i { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; }
.aud-win__i i { width: 13px; height: 13px; border-radius: 4px; background: var(--sk); flex: none; }
.aud-win__i.on { background: var(--surface-2); color: var(--text); }
.aud-win__i.on svg { width: 14px; height: 14px; color: var(--text-2); flex: none; }
/* 主区部件(预览窗约是真看板的 0.75 倍,胶囊 22 高) */
.aud-win__card { width: 100%; flex: none; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.aud-win__pad { padding: 16px 18px; }
.aud-win h4 { margin: 0; font: 700 15px var(--font-display); }
.aud-win__h4s { font-size: 14px !important; }
.aud-win__h4l { font-size: 17px !important; }
.aud-win__lbl { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.aud-win__lbl--eng { display: flex; align-items: center; gap: 6px; }
.aud-win__sec { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.aud-win__ops { display: flex; flex-wrap: wrap; gap: 5px; }
.aud-op { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--border-2); border-radius: 999px; font-size: 11.5px; color: var(--text); white-space: nowrap; }
.aud-win__kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.aud-win__kv .aud-win__lbl { margin: 0; }
.aud-win__muted { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.aud-win__clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aud-win__grid { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; font-size: 12.5px; }
.aud-win__grid .aud-win__lbl { margin: 0; }
.aud-win__chips { display: flex; gap: 7px; }
.aud-win__chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); flex: none; }
.aud-win__chip i { width: 12px; height: 12px; border-radius: 3px; background: var(--sk); }
.aud-win__chip .sk { width: 46px; height: 6px; }
.aud-win__kpis { display: flex; gap: 10px; }
.aud-win__kp { flex: 1 1 0; min-width: 0; height: 94px; display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.aud-win__kp .sk:nth-child(2) { border-radius: 5px; }
.aud-win__chart { height: 300px; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.aud-win__chart svg { width: 100%; height: 170px; margin-top: 10px; display: block; }
.aud-win__hero { padding: 14px 16px; }
.aud-win__hero-row { display: flex; align-items: center; gap: 12px; }
.aud-win__dom { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12.5px; color: var(--accent); }
.aud-win__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.aud-win__facts > span { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.aud-win__facts b { display: block; font: 800 17px var(--font-display); }
.aud-win__facts span span { font-size: 11px; color: var(--text-2); }
.aud-win__ih { display: flex; flex-direction: column; gap: 4px; }
.aud-win__intents { display: grid; grid-template-columns: 150px 1fr; min-height: 540px; }
.aud-win__ptl { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--border); }
.aud-win__ptl .h { font-size: 12.5px; font-weight: 700; margin: 0 0 8px 6px; }
.aud-win__it { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 32px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.aud-win__it > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aud-win__it.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.aud-win__it em { font-style: normal; color: var(--text-2); font-size: 12px; }
.aud-win__ptr { padding: 12px; min-width: 0; }
.aud-prow { display: flex; align-items: center; min-height: 44px; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.5; }
.aud-prow:first-child { border-top: 0; }
.aud-prow.h { min-height: 36px; font-size: 12px; color: var(--text-2); }
.aud-prow .shim { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--sk) 0%, color-mix(in oklab, var(--accent) 22%, var(--sk)) 50%, var(--sk) 100%); }

/* ── running / done:600 宽居中,logo 排 + 34px 标题 + 真实进度 + 三阶段 + 视频海报 ── */
.aud-run { min-height: calc(100vh - 68px); padding: 48px 20px; }
.aud-run__inner { width: 100%; max-width: 640px; }
.aud-run__ring { gap: 22px; margin-bottom: 34px; }
.aud-run__ring img { width: 48px; height: 48px; border-radius: 12px; }
.aud-run__ring.is-still img { animation: none; }
.aud-run .aud__title { font-size: 44px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 32px; }
.aud-run__progress { max-width: none; margin: 0; }
.aud-run__bar { height: 6px; border-radius: 3px; border: 0; background: var(--border); }
.aud-run__bar i { border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
@keyframes aud-scan { 0% { transform: translateX(0); } 70%, 100% { transform: translateX(350%); } }
/* 进度详情(2026-10-07 二次验收):进度条下一行「状态 · 百分比 · 详情 ˅」,展开才列三阶段(当前阶段附一句说明),默认收起 */
.aud-run .aud-run__meta { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.aud-run .aud-run__stage { flex: 1; min-width: 0; text-align: left; }
.aud-run__dtoggle { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.aud-run__dtoggle:hover { color: var(--text); }
.aud-run__dtoggle svg { transition: transform .18s; }
.aud-run__dtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.aud-run__steps { margin-top: 12px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface); text-align: left; }
.aud-run__step { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 42px; padding: 0 14px; font-size: 13.5px; color: var(--text-2); }
.aud-run__step + .aud-run__step { border-top: 1px solid var(--border); }
.aud-run__step.is-cur { color: var(--text); font-weight: 600; }
.aud-run__step i { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--border-2); display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 700; flex: none; }
.aud-run__step.is-done i { background: var(--text-2); border-color: var(--text-2); color: var(--bg); }
.aud-run__step .hero-audit__spinner { width: 16px; height: 16px; flex: none; }
.aud-run__step__t { flex: 1; min-width: 0; }
.aud-run__step small { font-size: 13px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.aud-run__step__d { flex-basis: 100%; margin: -8px 0 10px 27px; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--text-2); }
.aud-run__note { margin: 26px 0 0; font-size: 14px; color: var(--text-2); }
.aud-run__actions { margin-top: 26px; }
.aud-run .aud-alert { text-align: left; }
/* 产品介绍视频海报(只在配了视频地址时渲染):600×338,金色播放键,右侧半张看板截图渐隐 */
.aud-vid { position: relative; display: block; width: 600px; max-width: 100%; height: 338px; margin: 26px auto 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-2); background: radial-gradient(120% 90% at 85% 10%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%), var(--surface); text-align: left; color: var(--text); text-decoration: none; }
.aud-vid::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--ob-dot) 1px, transparent 1.4px); background-size: 16px 16px; opacity: .9; }
.aud-vid__logo { position: absolute; left: 28px; top: 24px; height: 20px; z-index: 1; }
.aud-vid .logo-light { display: none; }
:root[data-theme="light"] .aud-vid .logo-dark { display: none; }
:root[data-theme="light"] .aud-vid .logo-light { display: block; }
.aud-vid__shot { position: absolute; right: -34px; top: 64px; width: 330px; height: 250px; border-radius: 12px; border: 1px solid var(--border-2); background-size: 1406px auto; background-position: -734px -369px; background-repeat: no-repeat; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%); mask-image: linear-gradient(90deg, transparent 0, #000 36%); }
.aud-vid__t { position: absolute; left: 28px; top: 96px; z-index: 1; font: 800 34px/1.15 var(--font-display); letter-spacing: -.01em; }
.aud-vid__tag { position: absolute; left: 28px; bottom: 26px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--bg); font-size: 12px; color: var(--text-2); }
.aud-vid__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.aud-vid__play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(229, 163, 56, .6); transition: transform .18s; }
.aud-vid:hover .aud-vid__play { transform: translate(-50%, -50%) scale(1.06); }
.aud-vid__play::after { content: ""; margin-left: 5px; border-left: 18px solid var(--accent-ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }

/* 响应式:放在末尾必须自己补,否则 .aud-onb--steps 的列定义会盖掉前面 ≤920 的 1fr */
@media (max-width: 920px) {
  .aud-onb--steps { grid-template-columns: 1fr; }
  .aud-onb--steps .aud-onb__main { padding: 32px var(--gutter) 28px; }
  .aud-onb--steps .aud-aside { display: none; }
}
@media (max-width: 600px) {
  .aud-seg { grid-template-columns: 1fr; }
  .aud-run .aud__title { font-size: 28px; }
  .aud-vid { height: auto; aspect-ratio: 600 / 338; }
  .aud-vid__t { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .aud-load__bar i, .aud-stepper__bars i { transition: none; }
}