/* Ordo 官网 · 全站组件层
 *
 * 本文件不含任何字面色值，颜色一律来自 tokens-light.css 的 token。
 * 改版前就存在的页面（ordo-*.html / checkout.html）自带内联组件样式，
 * 接上本文件只是为了拿 token 与少数共享组件，不会覆盖它们自己的规则。
 */

/* ── 基础 ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 88px }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main {
  flex: 1;
}
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
h1, h2, h3 { font-family: var(--serif); margin: 0 }

/* ── 标题字号阶梯（工作块 B / F2）───────────────────────────────────────
 * 全站标题字号只允许这四条，各页 <style> 里不得再出现标题 font-size。
 * 判据：aliyun/ordo-cloud/test/login-page.test.js 的静态字号白名单闸。
 * 方案与取值出处：.scratch/homepage-revamp/type-scale.md §2。 */
h1 {                                    /* T1 首屏主标题 */
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.20;
  font-weight: 500;
  letter-spacing: -.01em;
}
h2 {                                    /* T2 分节标题 */
  font-size: clamp(25px, 3.4vw, 32px);
  line-height: 1.30;
  font-weight: 500;
  letter-spacing: -.01em;
}
h3 {                                    /* T3 卡片标题、场景小标题 */
  font-size: 24px;
  line-height: 1.40;
  font-weight: 600;
  letter-spacing: 0;
}
/* T4 条目标题、FAQ 问句：比卡片标题低一档，仍走衬线 */
.detail-card h3, .check-card h3, .plan-card h3 {
  font-size: 18px;
  line-height: 1.50;
  font-weight: 600;
  letter-spacing: 0;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px }
/* 内容页的正文框。首页用 .wrap（1240，落地页的窄栏），内页一律用这一套：
   1440/38 是已上线那五个内页各自 <style> 里写的同一组值，更新日志页要跟它们
   对齐就得用同一个框，而不是把 1240 那套搬过去。顶栏的 70px 内缩就是按这里的 38 算出来的。 */
.page { max-width: 1440px; margin: 0 auto; padding: 0 38px 42px }
/* 窄屏收到 20，和五个内页各自的 @media(max-width:960px) 一致。
   这条不能少：顶栏在 ≤960 用 20+20=40 内缩，正文框若还留在 38，两者就差 18px。 */
@media (max-width: 960px) { .page { padding: 0 20px 30px } }
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
}
/* 卡片内的小一档：卡片标题只有 18px，eyebrow 再用 12px 会跟它抢层级 */
.detail-card .eyebrow { font-size: 10px }

/* ── 导航 ───────────────────────────────────────────────────────────── */
/* 顶栏尺寸以「线上已发布的那五个内页」为准：68/14 这套是改版时新写的，
   从没上过线（CDN 上根本没有 site.css），拿它当基准会让所有老页面当场变样。 */
.site-nav {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 250, 247, .86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; letter-spacing: .02em; font-weight: 600; font-size: 16px }
/* 品牌锁标 = 品牌资产 assets/brand.svg：AppIcon 上那两枚开口的 O 环，
   stroke #C4A477、viewBox 160x100。尺寸按 1.6 的宽高比给，非等比会改变标志形状。 */
.brand-mark { width: 32px; height: 20px; flex: none }
/* line-height 单独收到 1.55：老内页 body 写的是 1.55，站公共 body 的 1.6 会让
   13px 链接的行盒 20→21px，顶栏看着就差半格。正文仍走全局 1.6，不动。 */
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 13px; line-height: 1.55; color: var(--text-muted) }
.nav-links a:hover { color: var(--text) }
.nav-cta {
  background: var(--brand-fill);
  color: var(--brand-ink);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
}
/* 导航里的「登录」：描边胶囊，和 .nav-cta 的实心胶囊配成一对。
   原先 4 个内页各抄了一份，首页没有，所以首页加 class 也不生效——收上来只留这一条。
   color 用语义名；内页原来那几份抄的是旧别名 var(--white)，语义层禁用（--white 本就等于 --text）。 */
.mini-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .18s ease, transform .12s ease;
}
.mini-btn:hover { border-color: var(--brand) }
.mini-btn:active { transform: scale(.97) }

/* ── 导航：已登录用户态 ─────────────────────────────────────────────── */
.nav-user-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
}
.nav-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(21, 22, 26, .05);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.nav-user-chip:hover {
  border-color: var(--brand);
  background: var(--surface2);
  color: var(--text);
}
.nav-user-chip:active {
  transform: scale(.97);
}
.nav-user-wrap.is-current .nav-user-chip {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.nav-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
  line-height: 1;
}
.nav-user-label {
  font-size: 13px;
  font-weight: 500;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.nav-user-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
}
/* 鼠标搭桥伪元素：填补胶囊与下拉框之间的所有空隙，防止鼠标下移离开悬停判定 */
.nav-user-popover::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 18px;
  background: transparent;
}
.nav-user-wrap:hover .nav-user-popover,
.nav-user-wrap:focus-within .nav-user-popover,
.nav-user-wrap.is-open .nav-user-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.popover-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}
.popover-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
  line-height: 1;
}
.popover-info {
  min-width: 0;
  flex: 1;
}
.popover-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popover-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popover-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}
.popover-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
  font-family: inherit;
}
.popover-link:hover {
  background: var(--surface2);
  color: var(--brand);
}
.popover-link:active {
  transform: scale(.98);
}
.popover-icon {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex: none;
}
.popover-link:hover .popover-icon {
  color: var(--brand);
}
.popover-logout-btn {
  color: var(--danger);
}
.popover-logout-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.popover-logout-btn .popover-icon {
  color: var(--danger);
}

/* ── 按钮 ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px; font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn-primary {
  background: var(--brand-fill);
  color: var(--brand-ink);
  box-shadow: 0 10px 24px rgba(212, 168, 93, .34);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(212, 168, 93, .42) }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--text) }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand) }
.btn-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }

/* ── 区块骨架 ───────────────────────────────────────────────────────── */
.section { padding: 96px 0; border-bottom: 1px solid var(--line) }
.section-head { max-width: 640px }
.section-head h2 { margin: 14px 0 14px }
.section-head p { color: var(--text-muted); font-size: 16px; margin: 0 }

/* 左文右图 / 左图右文两种排布 */
.split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 52px; align-items: center }
.split--flip .split-text { order: 2 }
.split--flip .split-media { order: 1 }
.split h2 { margin: 14px 0 16px }
.split-lede { font-size: 16px; color: var(--text-muted); margin: 0; line-height: 1.85 }
.split-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px }
.split-list li { position: relative; padding-left: 22px; font-size: 15px }
.split-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--brand-fill);
}
.split-list li small { display: block; color: var(--text-muted); font-size: 13px; margin-top: 2px }
.split-more {
  display: inline-block; margin-top: 26px;
  font-size: 14px; font-weight: 600; color: var(--brand);
  border-bottom: 1px solid var(--brand-soft); padding-bottom: 3px;
}
.split-more:hover { border-bottom-color: var(--brand) }

/* ── 截图位 ─────────────────────────────────────────────────────────── */
/* 1345×768 是 assets/product 现有素材的比例。比例写死 = 图没加载完也占住高度，
 * 不会在加载瞬间把首屏文字顶下去（CLS）。 */
.shot {
  position: relative;
  margin: 0;
  aspect-ratio: 1345 / 768;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left }
.shot--hero { box-shadow: 0 40px 90px rgba(21, 22, 26, .18) }
/* 素材未就位时的降级：留白 + 说明，不塞假界面 */
.shot--empty::after {
  content: attr(data-slot);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 14px;
}
.slot-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.slot-note i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--brand-fill) }

/* ── 信任条 ─────────────────────────────────────────────────────────── */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: 13px;
  color: var(--text-muted);
}
.trust-strip strong { font-weight: 600; color: var(--text) }
.trust-strip span::before { content: "·"; color: var(--brand); margin-right: 12px }
.trust-strip span:first-of-type::before { content: none; margin-right: 0 }

/* ── 下载矩阵 ───────────────────────────────────────────────────────── */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.dl-card {
  display: flex;
  flex-direction: column;
  padding: 30px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dl-card:hover {
  box-shadow: var(--shadow-lg);
}

.dl-card.is-recommended {
  border-color: rgba(212, 168, 93, .45);
  box-shadow: 0 4px 16px rgba(21, 22, 26, .04), 0 16px 40px rgba(212, 168, 93, .14);
}

.dl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dl-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dl-os-icon-inline {
  width: 16px;
  height: 20px;
  color: var(--text);
  flex-shrink: 0;
}

.dl-card h3 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

/* 推荐标签：精致微光指示器 */
.dl-tag {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(212, 168, 93, .25);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.dl-card.is-recommended .dl-tag {
  display: inline-flex;
}

.dl-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 2px rgba(212, 168, 93, .3);
  animation: dl-pulse 2s infinite ease-in-out;
}

@keyframes dl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.85); }
}

.dl-req {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.7;
}

.dl-spacer {
  flex: 1;
  min-height: 14px;
}

/* Windows 待发布卡 */
.dl-card--pending {
  background: var(--surface2);
  border: 1px solid var(--line);
  box-shadow: none;
}

.dl-badge-pending {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(21, 22, 26, .06);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 500;
}

/* 留邮箱组件：统一输入胶囊 */
.waitlist {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 3px 3px 14px;
  box-shadow: 0 2px 8px rgba(21, 22, 26, .04);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.waitlist:focus-within {
  border-color: var(--brand-fill);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.waitlist input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 8px 8px 0;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
}

.waitlist button {
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: var(--brand-fill);
  color: var(--brand-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
  white-space: nowrap;
}

.waitlist button:hover {
  filter: brightness(.95);
}

.waitlist button:active {
  transform: translateY(1px);
}

.dl-alt {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.6;
}

/* 兜底全量列表：高质感折叠卡片 */
.dl-fallback {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(21, 22, 26, .03);
}

.dl-fallback summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  transition: background .18s ease;
}

.dl-fallback summary * {
  pointer-events: none;
}

.dl-fallback summary:hover {
  background: var(--surface2);
}

.dl-fallback summary::-webkit-details-marker {
  display: none;
}

.dl-fallback summary::after {
  content: none;
}

.dl-summary-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dl-summary-tag {
  font-size: 12px;
  font-weight: normal;
  color: var(--text-muted);
}

.dl-chevron {
  width: 16px;
  height: 16px;
  color: var(--brand);
  transition: transform .24s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-fallback[open] .dl-chevron {
  transform: rotate(180deg);
}

.dl-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}

.dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dl-table th, .dl-table td {
  padding: 14px 24px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.dl-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(21, 22, 26, .02);
}

.dl-table tr:last-child td {
  border-bottom: none;
}

.dl-table td strong {
  color: var(--text);
  font-weight: 600;
}

.dl-table td a {
  color: var(--brand);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dl-table .mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .02em;
}

.dl-table-pill {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  background: rgba(21, 22, 26, .05);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}

.slot-note {
  margin: 0;
  padding: 14px 24px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  background: var(--surface2);
  border-top: 1px solid var(--line);
}

.dl-legal {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  text-align: center;
}

.dl-legal a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 页脚 ───────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  background: var(--surface2);
  font-size: 13px; color: var(--text-muted);
}
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap }
.site-footer a:hover { color: var(--brand) }

/* ── 断点 ───────────────────────────────────────────────────────────── */
/* 首页 Hero 是页面专属结构，它的断点写在 index.html 的页面样式块里，不在本文件。 */
@media (max-width: 980px) {
  .split, .split--flip { grid-template-columns: 1fr; gap: 34px }
  .split--flip .split-media { order: 2 }
  .split--flip .split-text { order: 1 }
  .section { padding: 64px 0 }
  .dl-grid { grid-template-columns: 1fr }
  .wrap, .site-nav, .site-footer { padding-left: 20px; padding-right: 20px }
}
@media (max-width: 960px) {
  /* 断点必须是 960 而不是上面那条 980：老内页在 961–980 之间仍是 26px 间距，
     写成 980 会在这个窗口里差出一档。 */
  .nav-links { gap: 13px }
}
@media (max-width: 620px) {
  .site-nav { height: 64px; padding: 0 16px; gap: 10px }
  .nav-links { gap: 10px }
  .nav-links > a:not(.nav-cta) { display: none }
  .nav-cta { padding: 8px 12px; font-size: 13px; white-space: nowrap }
  .nav-user-label { display: none }
  .nav-user-chip { padding: 4px 7px 4px 4px; gap: 4px }
  .site-footer { flex-direction: column }
  .dl-card { padding: 24px 20px }
  .dl-card-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .dl-summary-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .dl-fallback summary {
    padding: 16px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .btn, .btn-primary:hover { transform: none }
}