/* Murmo Notes 官网样式（设计稿 D · Full page，2026-10-12）。
   设计稿在 docs/website/claude-design/2026-10-12-D-full/，这里是照它写的。
   只做浅色。不用脚本：首屏演示是关键帧动画，五个分页是单选框加 :checked。
   字体文件放在本站 assets/fonts/，许可文件在同一个文件夹。 */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #F5F5F3;
  --ink: #0E1012;
  --text: #33383D;
  --muted: #4A5056;
  --dim: #7A8086;
  --line: #D9DBD7;
  --line-strong: #C9CCC6;
  --surface: #ECEDEA;
  --white: #FFFFFF;
  --yellow: #FFE14A;
  --yellow-soft: #FFF3D5;
  --blue: #075FC5;
  --blue-soft: #E2EFFF;
  --red: #FF453A;
  --on-dark: #F5F5F3;
  --on-dark-2: #C9CED3;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, "Songti SC", serif;
  --ui: -apple-system, BlinkMacSystemFont, system-ui, "Geist", "PingFang SC", sans-serif;
  --pad: clamp(20px, 5vw, 56px);
  --section: clamp(64px, 9vw, 128px);
  --stack: clamp(28px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
a { color: var(--ink); }
a:hover { color: #0A4FB3; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
summary { cursor: pointer; }
p, li, dd, summary { text-wrap: pretty; }
[id] { scroll-margin-top: 16px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic--solid { fill: currentColor; stroke-width: 1.5; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--white); }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.dim { color: var(--dim); }

/* ---------- 页头 ---------- */
.site-header { min-height: 84px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.brand::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.brand-cn { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; font-size: 15px; font-weight: 500; }
.site-nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--text); }
.site-nav a:hover { color: #0A4FB3; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.site-nav a.nav-pill { padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 600; }
.site-nav a.nav-pill:hover { background: #2A2E33; color: var(--white); }

/* ---------- 首屏 ---------- */
.hero { display: grid; align-items: center; gap: 48px 40px; padding-top: clamp(32px, 5vw, 72px); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hero-title { font-size: clamp(52px, 7.4vw, 104px); font-weight: 600; line-height: 0.96; letter-spacing: -0.055em; }
.hero-lede { max-width: 480px; font-size: 19px; line-height: 1.5; color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn { display: flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 0 24px; border-radius: 16px; background: var(--ink); color: var(--white); text-decoration: none; line-height: 1.15; }
.store-btn small { font-size: 12px; font-weight: 500; color: #C9CED2; }
.store-btn strong { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
a.store-btn:hover { background: #2A2E33; color: var(--white); }
.store-btn--lg { align-self: flex-start; min-height: 64px; padding: 0 28px; }
.store-btn--lg strong { font-size: 23px; }
.btn-outline { display: flex; align-items: center; min-height: 60px; padding: 0 24px; border-radius: 16px; border: 1.5px solid var(--ink); text-decoration: none; font-size: 16px; font-weight: 600; }
.hero-meta { font-size: 14px; color: var(--muted); }
.caption { font-size: 13px; color: var(--muted); }

.demo { display: flex; flex-direction: column; align-items: center; gap: 22px; min-width: 0; }
.demo .caption { text-align: center; }
.devices { display: flex; align-items: center; justify-content: center; }

.watch { position: relative; flex: none; width: 196px; height: 238px; padding: 9px; border-radius: 54px; background: #1B1C1E; box-shadow: 0 30px 60px -20px rgba(14, 16, 18, 0.45); }
.watch::after { content: ""; position: absolute; top: 70px; right: -6px; width: 7px; height: 36px; border-radius: 0 4px 4px 0; background: #1B1C1E; }
.watch-screen { display: grid; height: 100%; padding: 16px 12px 12px; border-radius: 46px; background: #000000; color: #FFFFFF; font-family: var(--ui); }
.watch-screen > * { grid-area: 1 / 1; min-width: 0; }
.w-rec { display: flex; flex-direction: column; align-items: center; justify-content: space-between; opacity: 0; visibility: hidden; }
.w-stop { width: 68px; height: 68px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; }
.w-stop::before { content: ""; width: 22px; height: 22px; border-radius: 5px; background: #FFFFFF; }
.w-row { display: flex; align-items: baseline; gap: 12px; }
.w-time { height: 1.2em; overflow: hidden; font-size: 20px; font-weight: 500; line-height: 1.2; color: #FF6A5E; font-variant-numeric: tabular-nums; }
.w-reel { display: flex; flex-direction: column; }
.w-cancel { font-size: 13px; color: #B4B4BB; }
.w-btns { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.w-btn { min-height: 44px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.w-btn .ic { width: 13px; height: 13px; }
.w-btn--hl { background: #3C2A0F; color: #FFB93E; }
.w-btn--rm { background: #0D2D4D; color: #6DB5FF; }
.w-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 600; text-align: center; line-height: 1.2; }
.w-msg .ic { width: 40px; height: 40px; color: #30D158; stroke-width: 2.4; }
.w-sent, .w-recv { opacity: 0; visibility: hidden; }

.conn { position: relative; flex: none; width: 56px; height: 2px; background: #C9CED2; }
.conn span { position: absolute; inset: 0; opacity: 0; }
.conn i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--red); }

.phone-fit { flex: none; width: 286px; height: 590px; }
.phone-fit--lg { width: 300px; height: 620px; }
.phone { width: 286px; height: 590px; padding: 9px; border-radius: 50px; background: #1B1C1E; box-shadow: 0 30px 60px -20px rgba(14, 16, 18, 0.45); transform-origin: 0 0; }
.phone-fit--lg .phone { width: 300px; height: 620px; border-radius: 52px; box-shadow: 0 30px 60px -20px rgba(14, 16, 18, 0.4); }
.phone-screen { position: relative; height: 100%; border-radius: 42px; background: #F2F2F7; overflow: hidden; color: #111114; font-family: var(--ui); }
.phone-fit--lg .phone-screen { border-radius: 44px; }
.p-layer { position: absolute; inset: 0; }
.p-list { opacity: 0; visibility: hidden; }

/* 手机示意图里的零件 */
.m-pad { padding: 38px 18px 0; display: flex; flex-direction: column; gap: 12px; }
.m-pad--tight { padding: 38px 14px 0; gap: 10px; }
.phone-fit--lg .m-pad { padding-top: 40px; }
.m-h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.6; }
.m-row { display: flex; flex-direction: column; gap: 3px; padding-bottom: 11px; border-bottom: 1px solid #D7D7DD; }
.m-row:last-child { padding-bottom: 0; border-bottom: 0; }
.m-newrow { overflow: hidden; }
.m-newrow > .m-row:last-child { padding-bottom: 11px; border-bottom: 1px solid #D7D7DD; }
.m-group { display: flex; flex-direction: column; gap: 10px; }
.m-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #5C5C63; }
.m-meta .ic { width: 12px; height: 12px; color: #C08A00; }
.m-line { font-size: 14px; font-weight: 600; line-height: 1.35; }
.m-dimtext { color: #5C5C63; }
.m-warn { font-size: 12px; font-weight: 600; color: #9A5B00; }
.m-nav { text-align: center; font-size: 14px; font-weight: 700; }
.m-sec { padding: 0 6px; font-size: 12px; font-weight: 600; color: #5C5C63; }
.m-card { padding: 13px 14px; border-radius: 16px; background: #FFFFFF; font-size: 15px; line-height: 1.5; }
.m-note { display: flex; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E3E3E8; font-size: 11px; line-height: 1.4; color: #5C5C63; }
.m-note .ic { width: 13px; height: 13px; margin-top: 1px; color: #C08A00; }
.m-foot { padding: 2px 6px; font-size: 11px; line-height: 1.4; color: #5C5C63; }
.m-list { border-radius: 16px; background: #FFFFFF; font-size: 15px; }
.m-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #E3E3E8; }
.m-list > div:last-child { border-bottom: 0; }
.m-list--links { color: #075FC5; }
.m-list--pairs > div { justify-content: flex-start; }
.m-placeholder { color: #A1A1A8; }
.m-link { color: #075FC5; }
.m-chev { color: #A1A1A8; }
.m-arrow { width: 14px; height: 14px; color: #5C5C63; }
.m-strong { font-weight: 600; }
.m-switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: #30B455; }
.m-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; }
.m-action { display: flex; gap: 10px; }
.m-action > .ic { width: 20px; height: 20px; margin-top: 1px; color: #075FC5; stroke-width: 1.8; }
.m-action--ask > .ic { color: #9A5B00; }
.m-action-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-action-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.m-action-detail { font-size: 12px; color: #5C5C63; }
.m-action--ask .m-action-detail { color: #9A5B00; }
.m-action-status { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; font-size: 12px; font-weight: 600; }
.m-ok { color: #18713A; }
.m-btns { display: flex; gap: 8px; margin-top: 8px; }
.m-btns span { flex: 1; min-height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: #E9E9EE; color: #111114; }
.m-btns .m-primary { background: #075FC5; color: #FFFFFF; }
.m-rec { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; }
.m-rec span { width: 62px; height: 62px; border-radius: 50%; background: var(--red); color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(255, 69, 58, 0.35); }
.m-rec .ic { width: 26px; height: 26px; }
.hl { background-image: linear-gradient(#FFE14A, #FFE14A); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 3px; }

.steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 98px; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 500; color: #5C6268; }
.steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C9CED2; }
.steps li:last-child { color: var(--ink); font-weight: 700; }
.steps li:last-child::before { background: #D7301F; }

/* ---------- 首屏下面的四项 ---------- */
.strip { padding-top: clamp(48px, 7vw, 96px); }
.strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 32px; border-top: 1px solid var(--ink); }
.strip-grid > div { padding: 18px 0; display: flex; flex-direction: column; gap: 2px; }
.strip-grid strong { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.strip-grid span { font-size: 15px; color: var(--muted); }

/* ---------- 各节共用 ---------- */
.section { padding-top: var(--section); display: flex; flex-direction: column; gap: var(--stack); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 56px; }
.section-head .h2 { flex: 999 1 460px; }
.section-head p { flex: 1 1 300px; max-width: 380px; color: var(--text); }
.h2 { max-width: 940px; font-size: clamp(36px, 5vw, 68px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; }
.note { max-width: 820px; font-size: 15px; color: var(--muted); }
.notes { display: flex; flex-direction: column; gap: 10px; }

/* ---------- 两个入口 ---------- */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; }
.card { padding: clamp(24px, 3.2vw, 40px); border-radius: 28px; display: flex; flex-direction: column; gap: 22px; }
.card--dark { background: var(--ink); color: var(--on-dark); }
.card--dark .eyebrow { color: #B8BEC4; }
.card--light { background: var(--white); border: 1px solid var(--line); }
.kv { display: flex; flex-direction: column; }
.kv > div { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.kv dt { flex: none; width: 150px; font-weight: 600; }
.kv dd { color: var(--text); }
.card--dark .kv > div { border-top-color: #33383D; }
.card--dark .kv dd { color: var(--on-dark-2); }

/* ---------- 五个分页 ---------- */
.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.tab-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tab-label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #B4B8B2; font-size: 15px; font-weight: 600; cursor: pointer; user-select: none; }
.tab-label:hover { border-color: var(--ink); }
.tab-input:checked + .tab-label { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tab-input:focus-visible + .tab-label { outline: 2px solid var(--blue); outline-offset: 3px; }
.stage { flex: 1 1 100%; margin-top: clamp(20px, 3.4vw, 40px); padding: clamp(24px, 4vw, 56px); border-radius: 32px; background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px clamp(32px, 6vw, 88px); }
.stage-copy { flex: 1 1 380px; max-width: 480px; min-width: 0; }
.screen, .panel { display: none; }
#tab-notes:checked ~ .stage .for-notes,
#tab-transcript:checked ~ .stage .for-transcript,
#tab-reminders:checked ~ .stage .for-reminders,
#tab-words:checked ~ .stage .for-words,
#tab-lock:checked ~ .stage .for-lock { display: block; }
.panel-body { display: flex; flex-direction: column; gap: 18px; }
.panel .h3 { font-size: clamp(28px, 3vw, 40px); }
.panel-body > p { color: var(--text); }
.points { margin: 0; padding: 0; list-style: none; }
.points li { padding: 12px 0; border-top: 1px solid var(--line-strong); }
.points strong { font-weight: 600; }
.stage-copy .caption { margin-top: 18px; }

/* ---------- 两个按钮 ---------- */
.card--hl { background: var(--yellow-soft); gap: 18px; }
.card--rm { background: var(--blue-soft); gap: 18px; }
.chip { align-self: flex-start; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 16px; font-size: 17px; font-weight: 700; }
.chip .ic { width: 19px; height: 19px; }
.chip--hl { background: var(--yellow); color: #3D2A00; }
.chip--rm { background: var(--blue); color: var(--white); }
.quote { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -0.015em; }
.quote .hl { border-radius: 4px; }
.card--hl > p:last-child { color: #3D2A00; }
.card--rm > p:last-child { color: #0B2E5C; }
.result { padding: 14px 16px; border-radius: 16px; background: var(--white); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font-size: 15px; }
.result strong { font-weight: 600; }
.result span { color: var(--text); }

/* ---------- 提醒的规则 ---------- */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.rule { padding: 28px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.rule h3 { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.rule p { font-size: 16px; color: var(--text); }
.pill { align-self: flex-start; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pill--ok { background: #DDF3E4; color: #0F5A30; }
.pill--ask { background: var(--yellow-soft); color: #6B4100; }
.pill--plain { background: var(--surface); color: var(--text); }
.timebox { padding: clamp(24px, 3.6vw, 44px); border-radius: 28px; background: var(--surface); display: flex; flex-wrap: wrap; gap: 28px 56px; }
.timebox-copy { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.timebox-copy .h3 { font-size: clamp(26px, 2.6vw, 34px); }
.timebox-copy p { font-size: 16px; color: var(--text); }
.timelist { flex: 2 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 0 32px; font-size: 16px; align-content: start; }
.timelist > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line-strong); }
.timelist dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- 细节 ---------- */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 48px; border-top: 1px solid var(--ink); }
.detail-grid > div { padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.detail-grid h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.detail-grid p { font-size: 16px; color: var(--text); }

/* ---------- 隐私 ---------- */
.band { margin-top: var(--section); background: var(--ink); color: var(--on-dark); }
.band-inner { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 112px); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 52px); }
.statement { max-width: 1040px; font-family: var(--serif); font-size: clamp(30px, 4.2vw, 60px); line-height: 1.14; letter-spacing: -0.02em; }
.statement mark { background: var(--yellow); color: var(--ink); padding: 0 0.08em; border-radius: 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 0 32px; border-top: 1px solid #4A5056; }
.band-grid > div { padding: 20px 0; display: flex; flex-direction: column; gap: 6px; }
.band-grid h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.band-grid p { font-size: 15px; color: var(--on-dark-2); }
.text-link { align-self: flex-start; display: flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; text-underline-offset: 5px; }
.band .text-link { color: var(--on-dark); }
.band .text-link:hover { color: var(--yellow); }

/* ---------- Coming soon ---------- */
.soon { padding: clamp(28px, 5vw, 72px); border-radius: 32px; background: var(--yellow); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 56px; }
.soon-copy { flex: 999 1 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.soon-title { font-size: clamp(40px, 6vw, 84px); font-weight: 600; line-height: 0.96; letter-spacing: -0.055em; }
.soon-copy p { max-width: 520px; font-size: 18px; color: #2B2600; }
.spec { flex: 1 1 320px; max-width: 440px; display: flex; flex-direction: column; font-size: 16px; border-bottom: 1px solid var(--ink); }
.spec > div { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ink); }
.spec dt { flex: none; width: 110px; font-weight: 600; }

/* ---------- 常见问题 ---------- */
.questions { padding-top: var(--section); padding-bottom: var(--section); display: flex; flex-wrap: wrap; gap: 28px 56px; }
.questions .h2 { flex: 1 1 280px; font-size: clamp(32px, 4vw, 52px); }
.qa { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { min-height: 44px; padding: 16px 0; font-size: 18px; font-weight: 600; }
.qa details p { margin: 0 0 18px; color: var(--text); }
.qa .text-link { margin-top: 8px; }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid var(--ink); }
.footer-inner { padding-top: 28px; padding-bottom: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; font-size: 14px; color: var(--text); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-nav a { display: flex; align-items: center; min-height: 44px; color: var(--text); }
.footer-nav a:hover { color: #0A4FB3; }
.footer-note { flex: 1 1 100%; }

/* ---------- 隐私政策、支持这类文字页 ---------- */
.document-shell { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--pad) var(--section); }
.document-header { display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--ink); }
.document-header h1 { font-size: clamp(44px, 6vw, 84px); font-weight: 600; line-height: 0.98; letter-spacing: -0.055em; }
.document-lede { max-width: 640px; font-size: 19px; line-height: 1.5; color: var(--text); }
.document { max-width: 760px; padding-top: clamp(24px, 3vw, 40px); }
.document > p, .document > ul, .document > ol { margin: 0 0 16px; color: var(--text); }
.document h2 { margin: clamp(36px, 5vw, 56px) 0 16px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.04em; }
.document h3 { margin: 28px 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.document ul, .document ol { padding-left: 1.3em; }
.document li { margin: 0 0 8px; }
.document a { text-underline-offset: 4px; }
.document strong { font-weight: 600; color: var(--ink); }
.document table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 16px; }
.document th:first-child, .document td:first-child { min-width: 6.5em; }
.document th, .document td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 44px; padding: 16px 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.faq details > p, .faq details > ul, .faq details > ol { margin: 0 0 16px; color: var(--text); }

/* 中文页：不用负字距，行高放开一点 */
:lang(zh-Hans) .hero-title, :lang(zh-Hans) .h2, :lang(zh-Hans) .h3, :lang(zh-Hans) .soon-title, :lang(zh-Hans) .document-header h1, :lang(zh-Hans) .document h2, :lang(zh-Hans) .rule h3 { letter-spacing: -0.01em; line-height: 1.16; }
:lang(zh-Hans) .hero-title { font-size: clamp(46px, 6.6vw, 92px); }
:lang(zh-Hans) .eyebrow { letter-spacing: 0.02em; }
:lang(zh-Hans) .statement, :lang(zh-Hans) .quote { letter-spacing: 0; line-height: 1.3; }
:lang(zh-Hans) .strip-grid strong, :lang(zh-Hans) .detail-grid h3, :lang(zh-Hans) .band-grid h3 { letter-spacing: 0; }

/* ---------- 宽度 ---------- */
@media (min-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr) 560px; }
}
@media (max-width: 639px) {
  .devices { flex-direction: column; }
  .conn { width: 2px; height: 44px; margin: 14px 0; }
  .conn i { top: 0; left: -4px; margin: -5px 0 0; }
  .kv > div, .spec > div { flex-direction: column; gap: 2px; }
  .kv dt, .spec dt { width: auto; }
  .stage { padding: 24px 14px; border-radius: 24px; }
  .steps { gap: 0; }
  .steps li { min-width: 0; padding: 0 7px; gap: 6px; font-size: 13px; }
  .card, .soon { border-radius: 24px; }
}
@media (max-width: 372px) {
  .phone-fit { width: 229px; height: 472px; }
  .phone-fit--lg { width: 240px; height: 496px; }
  .phone { transform: scale(0.8); }
  .btn-outline, .store-btn { padding: 0 18px; }
}

/* ---------- 动画（系统设了「减少动态效果」时不放，停在最后一幅） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .w-rec { animation: d-rec 18s linear infinite; }
  .w-stop { animation: d-pulse 1.4s ease-out infinite; }
  .w-reel { animation: d-reel 18s linear infinite; }
  .w-btn--hl { animation: d-hl 18s linear infinite; }
  .w-btn--rm { animation: d-rm 18s linear infinite; }
  .w-sent { animation: d-sent 18s linear infinite; }
  .w-recv { animation: d-recv 18s linear infinite; }
  .w-done { animation: d-done 18s linear infinite; }
  .conn span { animation: d-conn 18s linear infinite; }
  .conn i { animation: d-send-x 1s linear infinite; }
  .p-list { animation: d-list 18s linear infinite; }
  .m-newrow { animation: d-newrow 18s linear infinite; }
  .m-blink { animation: d-blink 1.2s linear infinite; }
  .p-detail { animation: d-detail 18s linear infinite; }
  .p-detail .hl { animation: d-mark 18s linear infinite; }
  .p-rem { animation: d-rem 18s linear infinite; }
  .steps li:nth-child(1) { animation: d-s1 18s linear infinite; }
  .steps li:nth-child(1)::before { animation: d-s1dot 18s linear infinite; }
  .steps li:nth-child(2) { animation: d-s2 18s linear infinite; }
  .steps li:nth-child(2)::before { animation: d-s2dot 18s linear infinite; }
  .steps li:nth-child(3) { animation: d-s3 18s linear infinite; }
  .steps li:nth-child(3)::before { animation: d-s3dot 18s linear infinite; }
  .steps li:nth-child(4) { animation: d-s4 18s linear infinite; }
  .steps li:nth-child(4)::before { animation: d-s4dot 18s linear infinite; }
  .tab-input:checked ~ .stage .screen, .tab-input:checked ~ .stage .panel { animation: d-rise 0.35s both; }
  .screen .hl { animation: d-mark-once 0.9s 0.3s both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .conn i { animation-name: d-send-y; }
}

/* 一轮 18 秒：0–6 录音，6–9 发送，9–13 看转写，13–18 建成提醒 */
@keyframes d-rec { 0%, 33.2% { opacity: 1; visibility: visible; } 33.33%, 100% { opacity: 0; visibility: hidden; } }
@keyframes d-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.5); } 100% { box-shadow: 0 0 0 16px rgba(255, 69, 58, 0); } }
@keyframes d-reel {
  0%, 5.5% { transform: translateY(0); }
  5.56%, 11.05% { transform: translateY(-1.2em); }
  11.11%, 16.6% { transform: translateY(-2.4em); }
  16.67%, 22.15% { transform: translateY(-3.6em); }
  22.22%, 27.7% { transform: translateY(-4.8em); }
  27.78%, 100% { transform: translateY(-6em); }
}
@keyframes d-hl { 0%, 11% { background: #3C2A0F; color: #FFB93E; } 11.5%, 16% { background: #FFB93E; color: #1A1000; } 17%, 100% { background: #3C2A0F; color: #FFB93E; } }
@keyframes d-rm { 0%, 22% { background: #0D2D4D; color: #6DB5FF; } 22.5%, 27% { background: #6DB5FF; color: #00172E; } 28%, 100% { background: #0D2D4D; color: #6DB5FF; } }
@keyframes d-sent { 0%, 33.2% { opacity: 0; visibility: hidden; transform: translateY(14px); } 33.33% { opacity: 0; visibility: visible; transform: translateY(14px); } 35.5%, 41.4% { opacity: 1; visibility: visible; transform: none; } 41.67%, 100% { opacity: 0; visibility: hidden; transform: none; } }
@keyframes d-recv { 0%, 41.5% { opacity: 0; visibility: hidden; } 41.67% { opacity: 0; visibility: visible; } 43.5%, 49.8% { opacity: 1; visibility: visible; } 50%, 100% { opacity: 0; visibility: hidden; } }
@keyframes d-done { 0%, 49.9% { opacity: 0; visibility: hidden; transform: translateY(14px); } 50% { opacity: 0; visibility: visible; transform: translateY(14px); } 52.2%, 100% { opacity: 1; visibility: visible; transform: none; } }
@keyframes d-conn { 0%, 33.2% { opacity: 0; } 33.33%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes d-send-x { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes d-send-y { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes d-list { 0%, 49.9% { opacity: 1; visibility: visible; } 50%, 100% { opacity: 0; visibility: hidden; } }
@keyframes d-newrow { 0%, 33.2% { max-height: 0; margin-bottom: -12px; opacity: 0; } 35.5%, 100% { max-height: 64px; margin-bottom: 0; opacity: 1; } }
@keyframes d-blink { 50% { opacity: 0.3; } }
@keyframes d-detail { 0%, 49.9% { opacity: 0; visibility: hidden; transform: translateY(14px); } 50% { opacity: 0; visibility: visible; transform: translateY(14px); } 52.5%, 100% { opacity: 1; visibility: visible; transform: none; } }
@keyframes d-mark { 0%, 52% { background-size: 0% 100%; } 57%, 100% { background-size: 100% 100%; } }
@keyframes d-mark-once { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes d-rem { 0%, 72.1% { opacity: 0; visibility: hidden; transform: translateY(14px); } 72.22% { opacity: 0; visibility: visible; transform: translateY(14px); } 75%, 100% { opacity: 1; visibility: visible; transform: none; } }
@keyframes d-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes d-s1 { 0%, 33.2% { color: #0E1012; font-weight: 700; } 33.33%, 100% { color: #5C6268; font-weight: 500; } }
@keyframes d-s1dot { 0%, 33.2% { background: #D7301F; } 33.33%, 100% { background: #C9CED2; } }
@keyframes d-s2 { 0%, 33.2% { color: #5C6268; font-weight: 500; } 33.33%, 49.9% { color: #0E1012; font-weight: 700; } 50%, 100% { color: #5C6268; font-weight: 500; } }
@keyframes d-s2dot { 0%, 33.2% { background: #C9CED2; } 33.33%, 49.9% { background: #D7301F; } 50%, 100% { background: #C9CED2; } }
@keyframes d-s3 { 0%, 49.9% { color: #5C6268; font-weight: 500; } 50%, 72.1% { color: #0E1012; font-weight: 700; } 72.22%, 100% { color: #5C6268; font-weight: 500; } }
@keyframes d-s3dot { 0%, 49.9% { background: #C9CED2; } 50%, 72.1% { background: #D7301F; } 72.22%, 100% { background: #C9CED2; } }
@keyframes d-s4 { 0%, 72.1% { color: #5C6268; font-weight: 500; } 72.22%, 100% { color: #0E1012; font-weight: 700; } }
@keyframes d-s4dot { 0%, 72.1% { background: #C9CED2; } 72.22%, 100% { background: #D7301F; } }