/* ============================================================
   PommeToys home — cream instrument design system.
   Tokens & hero styles kept in lock-step with dev-assets/hero.html so the
   shared three.js scene (site/hero/hero-scene.js) mounts identically.
   Hand-rolled, zero dependencies, self-hosted font, no external requests.
   ============================================================ */

/* ————— Instrument Sans (SIL OFL 1.1, self-hosted, latin subset, variable 400–600) ————— */
@font-face {
  font-family: "InstrumentSansWeb";
  src: url("assets/fonts/InstrumentSans-latin-wght.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;    /* 生效主题唯一由 html[data-theme] 决定 (见下方 dark 块) */
  --bg:        #F6F1E7;   /* warm gallery */
  --bg-sink:   #F1EBDE;   /* one notch deeper cream (alt band) */
  --panel:     #EBE6DA;   /* panel gray (secondary button) */
  --panel-dn:  #E1DBCC;
  --card:      #FBF8F1;   /* raised card face */
  --seam:      #E4DED0;   /* hairline seam (never a shadow sink) */
  --ink:       #2B2925;   /* ink — never pure black */
  /* 工单B8 (WCAG 1.4.3 正文 ≥4.5:1): 两级次要墨色按"用得到的最暗底 = --panel"定值,
     因为 .rname(--ink-2) 与 .ridx(--fine) 都长在仪器面板 --panel 上。
     --ink-2 #6D6760→#6A645D (on panel 4.49→4.69)   --fine #8E8779→#6E6658 (on panel 2.86→4.55) */
  --ink-2:     #6A645D;
  --fine:      #6E6658;
  --btn-ink:   #1A1917;
  --btn-ink-h: #2D2B28;
  --btn-sink:  #050505;   /* candy-button hard bottom edge */
  --btn-label: #F6F3EC;   /* 主按钮/糖块键文字色 (暗色下按钮翻转为奶油底深字) */
  /* brand accents — one per element, small areas only */
  --red:    #FF5D55;
  --blue:   #3D8BFF;
  --yellow: #FFC531;
  --green:  #34C77B;
  --orange: #F26B22;
  /* 工单B8: --red 太亮, 白字压上去只有 3.02:1 —— 只给"红底白字"的贴章一个深一档的红,
     点缀用的 --red(LED 灯、图标底色)保持原样, 观感不动。白字 on --stamp-bg = 4.88:1 */
  --stamp-bg: #CE3B34;
  /* 工单B8 (WCAG 1.4.11 非文本 ≥3:1): 焦点圈不能用点缀蓝 --blue —— 它 on --bg 只有 2.94:1。
     复用同一套"当前底色上读得清的蓝"= --gly-blue (亮 #2A6FE0 / 暗 #7CB0FF), 不新增颜色。
     值随主题自动切换: --gly-blue 在 [data-theme=dark] 里被覆盖, 此处 var() 使用时才求值。 */
  --focus:  var(--gly-blue);
  /* glyph inks — feature 图标色 (亮底用深酽版, 暗底换亮版才可读) */
  --gly-red:    #D8443C;
  --gly-blue:   #2A6FE0;
  --gly-green:  #1FA765;
  --gly-yellow: #B7841A;
  --gly-orange: #D2591A;
  /* theater (dark band) */
  --stage:      #221E19;   /* warm cocoa, never cold black */
  --stage-2:    #2C2721;
  --stage-ink:  #EFE9DC;
  --stage-fine: #A79E8C;
  /* shape */
  --r-pill: 999px;
  --r-card: 22px;
  --r-stage: 26px;
  --r-sm: 12px;
  /* elevation — soft & warm, never heavy */
  --sh-soft: 0 1px 2px rgba(43,41,37,.05), 0 14px 34px -16px rgba(43,41,37,.20);
  --sh-lift: 0 2px 4px rgba(43,41,37,.06), 0 22px 48px -20px rgba(43,41,37,.28);
  --sh-stage: 0 2px 6px rgba(0,0,0,.14), 0 40px 90px -34px rgba(20,16,12,.55);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --maxw: 1120px;
}

/* ————— 暗色主题 (工单A §2.2): 只覆盖变量, 组件一律吃变量 —————
   起步值, 终值以所有者眼睛验收微调。品牌点缀色与 --stage* 两主题通用不覆盖;
   暖色阴影 --sh-* 暗色下原样(影子更隐形, 可接受)。 */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #211D18;  --bg-sink: #1A1613;
  --panel: #2E2921; --panel-dn: #3A3329;
  --card: #292420;  --seam: #3B342B;
  /* 工单B8: 暗色 --fine 同样按 --panel 定值 (#7E766A on panel 仅 3.22:1 → #9A9182 = 4.64:1);
     --ink-2 #A79E8F on panel 已有 5.45:1, 不动。 */
  --ink: #EFEAE0;  --ink-2: #A79E8F;  --fine: #9A9182;
  --btn-ink: #F2EEE6;  --btn-ink-h: #FFFFFF;  --btn-sink: #000000;
  --btn-label: #1A1917;
  --gly-red:    #FF837B;
  --gly-blue:   #7CB0FF;
  --gly-green:  #55D695;
  --gly-yellow: #FFCE57;
  --gly-orange: #FF9457;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "InstrumentSansWeb", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* shared eyebrow */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-2);
}

/* ===================== NAV ===================== */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.nav.scrolled { border-bottom-color: var(--seam); }
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand svg { display: block; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.pill):not(.btn) { color: var(--ink-2); font-size: 15px; transition: color 120ms ease; }
.nav-links a:not(.pill):not(.btn):hover { color: var(--ink); }
.nav-links .sep { color: var(--seam); }

/* buttons */
.btn {
  appearance: none; border: 0; border-radius: var(--r-pill); font-family: inherit;
  font-size: 17px; font-weight: 500; letter-spacing: -0.005em;
  padding: 16px 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background-color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.975); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-primary { background: var(--btn-ink); color: var(--btn-label); }
.btn-primary:hover { background: var(--btn-ink-h); }
.btn-secondary { background: var(--panel); color: var(--ink); }
.btn-secondary:hover { background: var(--panel-dn); }
.btn-sm { font-size: 15px; padding: 10px 18px; }
/* 导航主 CTA 长短两版 (工单A2): 宽屏出全名, 窄屏换短词(断点见 RESPONSIVE 段的导航三级折叠)。
   窄屏三件套(语言选择器+拨杆+CTA)都不可压缩, 全名会把 .nav-links 顶到 432px 宽, 被
   body{overflow-x:hidden} 直接切掉半个词。两个 span 显隐切换 = 无 JS、display:none 也会
   把隐藏的那版从无障碍树里摘掉, 读屏不会念两遍。 */
.nav-links .cta-short { display: none; }

/* ===================== THEME DIAL — Braun 式物理拨杆 (工单A §2.3) =====================
   一个 <button> 三档循环: 白天 −55° · 跟随系统 0° · 黑夜 +55°。
   指针档位吃 html[data-theme-pref], JS 只维护属性。48px 命中区内嵌 Ø40 圆座。 */
/* 物理拨杆(所有者参考图): 白圆座 + 伸出座外的圆头把手 + 端部橙槽;
   三档各配图标(太阳/半明半暗圆/月亮)扇形排布, 当前档点亮 → 一眼知道拨到哪是什么。
   几何(须成套改, 否则把手会压住图标): 控件 72×48, 圆心 (36,31), 圆座 Ø26,
   把手尖端 r=16(座外 3px), 图标 10px 落在 r=24 的 −55°/0°/+55° —— 图标内缘 r=19 > 把手 16, 留 3px 净空。 */
.theme-dial {
  position: relative; width: 72px; height: 48px; flex: none;
  border: 0; padding: 0; background: none; cursor: pointer; border-radius: 14px;
}
.theme-dial:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.td-seat {                       /* 圆座: 沉一档(面板色), 让把手浮在它上面 = 参考图的层次 */
  position: absolute; left: 23px; top: 18px; width: 26px; height: 26px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--seam);
  box-shadow: inset 0 1px 2px rgba(43,41,37,.10);
}
.td-stem {                       /* 圆头把手: 根部落在圆心, 尖端伸到 r=16 (座外 3px), 比座亮 + 投影 */
  position: absolute; left: 36px; top: 31px; width: 9px; height: 18px;
  margin: -16px 0 0 -4.5px; transform-origin: 4.5px 16px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--seam);
  box-shadow: 0 1px 3px rgba(43,41,37,.26);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);  /* back-out, 与 3D 拨杆开关同手感 */
}
.td-slot {                       /* 尖端橙色指示槽 8×2.5 */
  position: absolute; left: 50%; top: 3px; width: 8px; height: 2.5px;
  margin-left: -4px; border-radius: 2px; background: var(--orange);
}
.td-mark {                       /* 档位图标: 未选=淡, 当前=墨色点亮 */
  position: absolute; width: 10px; height: 10px;
  /* 工单B8: --fine 为正文小字调到了 4.5:1, 直接拿来画未选档图标会把"淡"压没、拨杆看着糊成一片。
     这三枚是纯图形(aria-hidden, 信息由点亮的那枚 --ink 12.9:1 承担), 按 1.4.11 只需 ≥3:1 —— 兑回
     原来的浅度: 亮 #8C8577 = 3.25:1 / 暗 #7F776B = 3.79:1, 均达标, 视觉与改前一致。 */
  color: color-mix(in srgb, var(--fine) 78%, var(--bg));
  transition: color 200ms ease;
}
.td-mark svg { width: 10px; height: 10px; display: block; }
.td-mark.light { left: 11.3px; top: 12.2px; }   /* r=24 @ −55° */
.td-mark.auto  { left: 31px;   top: 2px; }      /* r=24 @ 0° */
.td-mark.dark  { left: 50.7px; top: 12.2px; }   /* r=24 @ +55° */
html[data-theme-pref="light"] .td-stem { transform: rotate(-55deg); }
html[data-theme-pref="auto"]  .td-stem { transform: rotate(0deg); }
html[data-theme-pref="dark"]  .td-stem { transform: rotate(55deg); }
html[data-theme-pref="light"] .td-mark.light,
html[data-theme-pref="auto"]  .td-mark.auto,
html[data-theme-pref="dark"]  .td-mark.dark { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .td-stem { transition: none; } }

/* ===================== LANG SELECTOR — Rams 风 (工单A §2.6) =====================
   <details> 原生开合; 面板=功能卡同一张"仪器面板"皮; 当前语言行首 6px LED。 */
.langsel { position: relative; }
.langsel summary {
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-2); transition: color 120ms ease;
  /* 工单A2: 不许被 flex 压扁 —— 挤不下时旧代码会把「简体中文」竖排成 4 行(标签高 80px),
     整条导航条塌陷。nowrap + flex:none 让它保持单行原宽, 空间由 CTA 换短词腾出。 */
  white-space: nowrap; flex: none;
}
.langsel summary::-webkit-details-marker { display: none; }
.ls-globe {
  display: block; width: 18px; height: 18px; flex: none;
}
.langsel summary:hover { color: var(--ink); }
.langsel summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.langsel summary::after {        /* 8px 细箭头 ▾, 开合旋转 180° */
  content: ""; width: 6px; height: 6px; margin-top: -4px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 160ms ease;
}
.langsel[open] summary::after { transform: translateY(4px) rotate(225deg); }
.ls-panel {
  position: absolute; right: 0; top: calc(100% + 12px); width: 200px; z-index: 30;
  background: var(--card); border: 1px solid var(--seam); border-radius: var(--r-card);
  box-shadow: var(--sh-lift); padding: 8px;
}
.langsel[open] .ls-panel { animation: ls-pop 160ms ease both; }
@keyframes ls-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .langsel[open] .ls-panel { animation: none; } }
.ls-panel a {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px;
  border-radius: 12px; font-size: 15px; color: var(--ink); transition: background-color 120ms ease;
}
.ls-panel a:hover { background: var(--panel); }
.ls-panel a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ls-led { width: 6px; height: 6px; border-radius: 999px; flex: none; background: transparent; }
.ls-panel a[aria-current] .ls-led { background: var(--green); }  /* 与仪器 LED 同语言 */

/* 屏幕阅读器专用 (拨杆档位播报) */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* 日文断行 (工单B §3.2 验收: ja 无空格断行) —— 日文可在任意字间折行, 默认会把
   「作業台」「ずっと」这类词从中间劈开。禁则 strict + 标题按文节折行(Chrome 119+,
   不支持的浏览器自动忽略, 退回现有行为)。 */
:lang(ja) { line-break: strict; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3,
:lang(ja) .perks li, :lang(ja) .btn, :lang(ja) .candy { word-break: auto-phrase; }

/* ===================== HERO ===================== */
.hero { display: flex; align-items: stretch; min-height: calc(100vh - 62px); min-height: calc(100svh - 62px); }
.copy {
  width: 40%; display: flex; flex-direction: column; justify-content: center;
  padding: 40px clamp(20px, 2.5vw, 48px) 64px clamp(24px, 6.5vw, 96px);
  position: relative; z-index: 2;
}
.copy h1 {
  font-size: clamp(40px, 4.6vw, 76px); font-weight: 600; line-height: 1.05;
  letter-spacing: -0.02em; text-wrap: balance; margin: 20px 0 24px;
}
.copy .sub { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 42ch; margin-bottom: 36px; }
.cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.fine { font-size: 13px; letter-spacing: 0.01em; color: var(--fine); }

.stage { width: 60%; position: relative; min-height: calc(100vh - 62px); min-height: calc(100svh - 62px); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ——— 工单B6 · 首屏兜底静态图（2026-07-30 所有者拍板改法） ———
   盖在 canvas 之上; cover + center 复刻 3D 相机的取景(竖向视野固定, 横向随宽高比裁切)。
   ⚠ 这张图**默认不在页面上**(藏在 .stage 的 <template> 里, 浏览器不会去下它) ——
   WebGL/three.js 起不来时才由页尾脚本插进来, 无 JS 时由 <noscript> 那份顶上。
   改法的由来: 旧版默认铺着、等入场落定才淡出 = 所有人都看不到入场动画; 首帧就淡出
   又会撞上材质 opacity 还在爬(150ms 处半透明重影)。绝对定位, 不影响 .stage 占位高度。 */
.stage-fallback { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stage-fallback img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 保险丝: 万一图已经插进来了而 3D 又活了(比如别处异常先亮了图), 入场落定后把它淡掉 */
.stage.scene-live .stage-fallback { opacity: 0; transition: opacity 320ms ease-out; }
@media (prefers-reduced-motion: reduce) { .stage.scene-live .stage-fallback { transition: none; } }

/* sound toggle — anchored to the stage, tied to the instruments */
.sound-toggle {                  /* 固定在视口右下角: 滚到哪都在(所有者 2026-07-28), 法务页同款 */
  position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px;
  border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--ink-2); cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center;
  transition: background-color 120ms ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sound-toggle:hover { background: var(--panel-dn); }
.sound-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sound-toggle svg { width: 18px; height: 18px; display: block; }
.sound-toggle .off { display: none; }
.sound-toggle.muted .on { display: none; }
.sound-toggle.muted .off { display: block; }

/* 声音提示: 浏览器规定"无用户手势不得出声"(滚轮不算手势), 用户一进站就滚动时
   会以为坏了 —— 检测到声音被挡就给一句低调提示, 点任意处即通, 一次会话只提示一次 */
.sfx-hint {
  position: fixed; left: 50%; bottom: 22px; z-index: 30;
  transform: translateX(-50%) translateY(8px);
  font-size: 13px; letter-spacing: 0.01em; color: var(--ink-2);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 9px 18px; border-radius: var(--r-pill); box-shadow: var(--sh-soft);
  pointer-events: none; opacity: 0;
  transition: opacity 300ms ease, transform 300ms var(--ease);
}
.sfx-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .sfx-hint { transition: opacity 200ms ease; } }

/* file:// 直开提示（ES 模块被拦、3D 无法加载时替 stage 说明原因） */
.file-note {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 40px;
}
.file-note strong { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.file-note span { font-size: 13px; color: var(--fine); }

/* dev capture mode (?cap=1): fixed hero/stage height so full-page screenshots don't inflate vh/svh */
html.cap .hero { min-height: 0; }
html.cap .stage { min-height: 0; height: 720px; }
html.cap { scroll-behavior: auto; }

/* ===================== SECTION SCAFFOLD ===================== */
.section { padding: 104px 0; }
.section.sink { background: var(--bg-sink); }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.sec-head h2 {
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.02em; text-wrap: balance; margin-top: 12px;
}
.sec-head p { font-size: 18px; color: var(--ink-2); margin-top: 14px; line-height: 1.6; }

/* ===================== FEATURES GRID ===================== */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat {
  background: var(--card); border: 1px solid var(--seam); border-radius: var(--r-card);
  padding: 28px 26px 30px; box-shadow: var(--sh-soft);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.feat .glyph {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px;
}
.feat .glyph svg { width: 22px; height: 22px; display: block; }
.feat h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 9px; }
.feat p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
/* glyph tints — one accent each */
.g-red    { background: color-mix(in srgb, var(--red) 15%, var(--card));    color: var(--gly-red); }
.g-blue   { background: color-mix(in srgb, var(--blue) 15%, var(--card));   color: var(--gly-blue); }
.g-green  { background: color-mix(in srgb, var(--green) 16%, var(--card));  color: var(--gly-green); }
.g-yellow { background: color-mix(in srgb, var(--yellow) 22%, var(--card)); color: var(--gly-yellow); }
.g-orange { background: color-mix(in srgb, var(--orange) 15%, var(--card)); color: var(--gly-orange); }
.g-ink    { background: var(--panel); color: var(--ink); }

/* ===================== THEATER — Rams 仪器面板演示卡（深一档奶油带, 无深色band） =====================
   2026-07-24 所有者否决 cap.so 式深色剧场(macOS红绿灯窗框+彩色光晕, 非 Rams);
   换仪器语言: 浅色面板框内嵌深色屏(同 Finder"凸窗框嵌亮屏"), LED 点+小字名牌+工程编号 */
.theater {
  background: var(--bg-sink);
  border-top: 1px solid var(--seam); border-bottom: 1px solid var(--seam);
  padding: 104px 0 112px;
}
.reels { display: flex; flex-direction: column; gap: 48px; }
.reel { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.reel:nth-child(even) .reel-copy { order: 2; }
.reel-copy .kx { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fine); }
.reel-copy h3 { font-size: clamp(24px, 2.5vw, 32px); font-weight: 600; letter-spacing: -0.015em; margin: 10px 0 12px; color: var(--ink); }
.reel-copy p { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 40ch; }

/* 仪器面板演示卡: 浅面板 + 发丝描边 + 内嵌深屏 */
.screen {
  position: relative; border-radius: var(--r-card);
  background: var(--panel); border: 1px solid var(--seam);
  box-shadow: var(--sh-soft);
  padding: 8px 12px 12px;
  /* 工单B4: 网格项默认 min-width:auto = 最小内容宽, 而名牌 .rname 是 nowrap ——
     德/法/西的长名牌("Butterweiches Scrollen · Vorher / Nachher")会把整条 .reel 撑到
     430px, 375px 屏上被 body{overflow-x:hidden} 横向裁掉。min-width:0 让它缩到可用宽,
     名牌交给自己的省略号处理。 */
  min-width: 0;
}
.rail { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 4px; }
.lamp { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.lamp.b { background: var(--blue); } .lamp.r { background: var(--red); }
.lamp.g { background: var(--green); } .lamp.o { background: var(--orange); }
.rname {
  font-size: 12px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;                  /* 工单B4: 不给 0 的话省略号永远不触发, 名牌硬撑面板 */
}
.ridx {
  margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--fine); font-variant-numeric: tabular-nums;
}
.poster {
  aspect-ratio: 16 / 10; border-radius: 14px;
  background: radial-gradient(120% 80% at 50% 0%, var(--stage-2), var(--stage) 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  position: relative; overflow: hidden;
}
.poster .play {
  width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center;
  background: var(--panel); color: var(--ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .32);
}
.poster .play svg { width: 22px; height: 22px; margin-left: 3px; }
.poster .tag {
  font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stage-fine);
}
.poster .grid-hint {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--stage-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--stage-fine) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 72%);
  opacity: .06;
}
/* before/after twin for the scroll reel */
.twin {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: var(--panel-dn); border-radius: 14px; overflow: hidden;
}
.twin .poster { aspect-ratio: 8 / 10; border-radius: 0; box-shadow: none; }
.twin .lab { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--stage-fine); background: rgba(0,0,0,.25); padding: 4px 9px; border-radius: 999px; }

/* ===================== PRICING ===================== */
/* 三档授权（1/3/5 台 Mac）: 三张完整价签卡并排(所有者定: 保持单卡设计, 只是多两个框),
   每卡都有贴章/价格/四条权益/购买键; 卡片尺寸按三列收窄 */
.price-tiers {                   /* 默认 stretch: 三卡等高, 购买键才能齐底(权益换行数不同也不错位) */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.price-trial {                   /* 三档下方的免费试用入口(次要动作) */
  display: flex; justify-content: center; margin-top: 30px;
}
#pricing .price-fine { text-align: center; max-width: 520px; margin: 20px auto 0; }
.price-wrap { display: flex; justify-content: center; }
.pricecard {
  position: relative; width: 100%; background: var(--card);
  border: 2px solid color-mix(in srgb, var(--yellow) 55%, var(--seam)); border-radius: var(--r-card);
  padding: 38px 26px 32px; text-align: center; box-shadow: var(--sh-soft);
  display: flex; flex-direction: column;        /* 让购买键在卡底对齐(权益行数不同也齐) */
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pricecard:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.stamp {
  position: absolute; top: 16px; right: -6px; transform: rotate(-8deg);
  background: var(--stamp-bg); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 8px; box-shadow: var(--sh-soft);
  white-space: nowrap;
}
.price-num { font-size: 46px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.price-num small { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.02em; }
.perks { list-style: none; margin: 24px 0 26px; text-align: left; display: grid; gap: 11px; }
.perks li { font-size: 14.5px; line-height: 1.45; color: var(--ink); display: flex; align-items: flex-start; gap: 10px; }
.perks li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--green); }
.pricecard .candy { margin-top: auto; }
/* candy buy button (M6, page's only) */
.candy {
  width: 100%; appearance: none; border: 0; border-radius: 16px; font-family: inherit;
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em; color: var(--btn-label); background: var(--btn-ink);
  padding: 17px 24px; cursor: pointer; box-shadow: 0 5px 0 var(--btn-sink);
  transition: transform 60ms ease, box-shadow 60ms ease, background-color 120ms ease;
}
.candy:hover { background: var(--btn-ink-h); transform: translateY(-1px); box-shadow: 0 6px 0 var(--btn-sink); }
.candy:active { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-sink); }
.candy:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.price-fine { margin-top: 18px; font-size: 13px; color: var(--fine); }
.price-fine a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* ===================== FAQ ===================== */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--seam); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 4px; position: relative;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 27px; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); transition: transform 200ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details p { padding: 0 40px 24px 4px; font-size: 15.5px; color: var(--ink-2); line-height: 1.7; }
.faq details p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ===================== FOOTER ===================== */
.foot { border-top: 1px solid var(--seam); padding: 48px 0 60px; }
.foot .wrap { display: flex; flex-direction: column; gap: 16px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot .links a { color: var(--ink-2); font-size: 14.5px; transition: color 120ms ease; }
.foot .links a:hover { color: var(--ink); }
.foot .langs {                   /* 七语母语自称一行 (工单B §3.2): 纯文本链接, 无旗帜无 emoji */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
}
.foot .langs .lang-label { font-size: 13px; color: var(--fine); }
.foot .langs a { font-size: 14px; color: var(--ink-2); transition: color 120ms ease; }
.foot .langs a:hover { color: var(--ink); }
.foot .langs .cur {              /* 当前语言不带链接, 行首 LED 点 (与选择器同语言)
   ⚠ 必须保持 inline(非 inline-flex): flex 容器按 baseline 对齐, 而 inline-flex 的基线
   取自内部首个 flex 项(空的 LED 点)→ 当前语言会比兄弟链接低一截(所有者 2026-07-28 报障) */
  font-size: 14px; color: var(--ink);
}
.foot .langs .cur .ls-led {
  display: inline-block; vertical-align: 0.1em; margin-right: 7px; background: var(--green);
}
.foot .disc { font-size: 13px; color: var(--fine); line-height: 1.6; }

/* ===================== RESPONSIVE ===================== */

/* ——— 导航条三级折叠 (工单A2「下一档」: 621–950px 整页横向溢出) ———————————————
   病灶: 导航条要同时装下 品牌名 + 4 个栏目链接 + 语言选择器 + 拨杆 + 主 CTA, 而唯一的
   折叠断点在 ≤620px —— 中间这一大段够不着, 装不下就被 body{overflow-x:hidden} 裁掉,
   被裁的正是最右边的主 CTA(与 A2 同一种失败, A2 是阻断项)。这一段一点不冷门:
   iPad 竖屏 768、Mac 上半屏/分屏浏览通常落在 700–960。

   实测各语言「全展开导航条」需要的最小视口宽(含两侧 32px 留白, 深浅两主题同值):
     zh 820 · zh-hant 835 · ja 866 · en 870 · fr 897 · de 916 · **es 983**
   西语最挤(「Avísame al lanzamiento」+「Herramientas/Demos/Precios/Preguntas」),
   所以第一级断点取 1040px —— 比最挤的语言再留 57px 余量, 吃得下浏览器间的字体度量差。

   折叠顺序 = 由"可有可无"到"命根子", 逐级只减不加:
     ≤1040  收起 4 个栏目链接   —— 本站是单页滚动站, 这四个只是快捷方式, 收了不丢内容;
                                  主 CTA 的完整文案反而保到 700px, 不在笔记本宽度上被削。
     ≤700   主 CTA 换短文案     —— 品牌名还在, 导航条两头都有东西, 不空;
     ≤620   收品牌名 + 缩按钮   —— 丙修 A2 时定的那一档, 原样不动。
   验收: 七语 × 375…1440 全宽度 documentElement.scrollWidth == 视口宽, 且
   .nav-links .btn-primary 的 right ≤ 视口宽。桌面宽度(1041 以上)一个像素未动。 */
@media (max-width: 1040px) {
  /* 类名沿用 .hide-sm(≤620 时代的历史命名), 现在的含义是"导航条第一级折叠时收起" */
  .nav-links .hide-sm { display: none; }
}
@media (max-width: 700px) {
  .nav-links .cta-long { display: none; }
  .nav-links .cta-short { display: inline; }
  /* ——— 顺手清掉同一段里的第二处横向溢出(与导航条无关, 原先被更大的导航溢出盖住) ———
     三档价签是 repeat(3, 1fr), 而 1fr 轨道的最小尺寸 = 最小内容宽: 46px 的价格数字 +
     26px 卡内边距, 三卡加起来最少要 664px(en) / 683px(es), 而一列化的断点原本在 ≤620,
     于是 621–682px 这一段照样被 body{overflow-x:hidden} 裁掉右边那张卡的贴章。
     一列化断点跟着导航第二级一起抬到 700 —— 620px 时的单列版式所有者已验收过, 这里
     只是把同一个版式多用 80px, 不引入新的视觉语言。 */
  .price-tiers { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .hero { flex-direction: column; min-height: 0; }
  .copy { width: 100%; min-width: 0; padding: 40px 32px 8px; }
  .copy h1, .copy .sub { max-width: none; }
  .stage { width: 100%; min-width: 0; min-height: 0; height: 58vh; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .reel, .reel:nth-child(even) .reel-copy { grid-template-columns: 1fr; order: 0; }
  .reel-copy { order: 0 !important; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 22px; }
  .section { padding: 76px 0; }
  .nav .wrap { gap: 12px; }
  .nav-links { gap: 10px; }
  .brand .brand-name { display: none; }  /* 窄屏只留 App 图标, 给拨杆+语言选择器让位(两控件所有断点保留) */
  /* 工单A2 · 导航条在 375px 塞得下的三件事(栏目链接与 CTA 换短词已上移到本段开头的三级折叠) */
  .btn-sm { padding: 9px 13px; font-size: 13px; }   /* 与法务页 style.css:120 同一配方 */
  .ls-panel {                            /* 旧 right:0 会把 200px 面板推到视口左外(实测 -87px) */
    right: auto; left: 0; max-width: calc(100vw - 24px);
  }
  .copy h1 { font-size: clamp(31px, 8.7vw, 42px); text-wrap: normal; }
  .grid { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: stretch; }
  .cta .btn { width: 100%; }
  .btn { justify-content: center; }
  /* 工单B4 · 手机上「丝滑滚动 前/后」保持并排两栏(此处原为 .twin{grid-template-columns:1fr})。
     理由: 那两格是同一页面同一滚轮速度的同帧对比, 上下堆叠 = 对比语义没了; 堆叠后两张
     8:10 海报还会摞成约 810px 高的空塔。并排后 375px 屏上每格 152×190, 整块 190px 高,
     与相邻单张海报(307×192)齐平。
     没选"横向滚动容器"是因为它会把 After 推到屏外——要滑一下才看得见, 对比同样丢一半,
     还多一处默认隐藏的内容(无障碍与首屏理解都更差)。
     窄格里把角标收一档, 免得 11px 标签在 152px 宽的格子里显得压得慌。 */
  .twin .lab { top: 8px; left: 8px; font-size: 10px; padding: 3px 7px; }
  .twin .poster { gap: 12px; }
}

/* ——— 导航第四级: 320px 兜底 (WCAG 1.4.10 Reflow) ———————————————————————
   320px CSS 宽不只是老 iPhone —— 640px 窗口开 200% 缩放就是它, 而 1.4.10 明文要求
   320px 下不出现横向滚动。此宽度下 logo + 语言选择器 + 拨杆 + 短 CTA 仍差约 25–45px
   (法语/日语最挤), 于是: 收紧导航条自己的两处间距, 并把语言选择器缩成纯地球仪
   —— 语种名让位, 但控件本身、面板与其中的语言清单一个不少(拨杆同样全断点保留)。
   只挂 ≤360, 375/390 的导航条与丙验收时逐像素一致。 */
@media (max-width: 360px) {
  .nav .wrap { gap: 8px; }
  .nav-links { gap: 7px; }
  .langsel .ls-cur { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ——— 工单A1/A5 下载与订阅区 ———
   本块由「乙 · 页面与文案」追加在文件末尾，只含新选择器（.dl-* / .tier-soon /
   .notify-* / .skip-link），未改动上方任何既有规则。全部吃现有 token。
   ═══════════════════════════════════════════════════════════════════ */

/* 三档价签下方的"还买不到"说明——不能让购买键看起来点了就能付钱（工单A1） */
.tier-soon {
  margin-top: 11px; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-2); text-align: center;
}

/* 落地区: 与 #pricing 同底色, 靠一道发丝缝分段（仪器面板的接缝语言, 不加色带） */
.section.dl { border-top: 1px solid var(--seam); }
.dl-panel {
  max-width: 620px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--seam); border-radius: var(--r-card);
  box-shadow: var(--sh-soft); padding: 30px 30px 28px;
}

/* 规格铭牌: 一行一条事实, 行间发丝分隔（不用对勾——这些是参数不是卖点） */
.dl-specs { list-style: none; display: block; }
.dl-specs li {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  padding: 13px 0; border-top: 1px solid var(--seam);
}
.dl-specs li:first-child { border-top: 0; padding-top: 0; }
.dl-specs li:last-child { padding-bottom: 0; }

.dl-recover { margin-top: 20px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.dl-recover a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.dl-recover[hidden] { display: none; }

@media (max-width: 620px) {
  .dl-panel { padding: 24px 20px 22px; }
}

/* 订阅表单: 输入框=面板上下沉的槽, 按钮沿用站内主键; 行内 flex 默认 stretch → 两者自动等高 */
.notify { margin-bottom: 26px; }
.notify-row { display: flex; gap: 10px; }
.notify-input {
  flex: 1 1 auto; min-width: 0; appearance: none; font-family: inherit;
  font-size: 16px; line-height: 1.2; color: var(--ink); background: var(--bg);
  border: 1px solid var(--seam); border-radius: var(--r-pill); padding: 15px 20px;
  box-shadow: inset 0 1px 2px rgba(43, 41, 37, .07);
  transition: border-color 120ms ease;
}
.notify-input::placeholder { color: var(--fine); }
.notify-input:hover { border-color: var(--panel-dn); }
.notify-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.notify-btn { flex: none; }
.notify-btn[disabled] { opacity: .55; cursor: default; }
/* 蜜罐: 不用 display:none —— 有些机器人会跳过不可见字段; 挪出视口最省事 */
.notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 状态行: 文字自己把话说清楚, 颜色只由行首 LED 承担(不靠颜色单独表意) */
.notify-status { margin-top: 15px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.notify-status:empty { display: none; }
.notify-status::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  margin-right: 9px; vertical-align: 0.08em; background: var(--fine);
}
.notify-status.ok::before { background: var(--green); }
.notify-status.bad::before { background: var(--red); }
.notify-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.notify-fine { margin-top: 15px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
/* 小字里的隐私政策链接: 全站基线是 a{color:inherit;text-decoration:none}(见 :106), 本区不给
   单独规则的话链接与正文一模一样、看不出可点。取值与同一面板内的 .notify-noscript a /
   .dl-recover a 完全一致(墨色提一档 + 下划线), 不自创第二套"带链接小字"观感。 */
.notify-fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.notify-noscript { margin-bottom: 26px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.notify-noscript a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 620px) {
  .notify-row { flex-direction: column; }
}

/* 404 页（工单B3）: 一屏居中, 复用法务页的奶油皮与站内按钮, 不引新的视觉语言 */
.nf {                            /* 不钉视口高度: 钉了页脚就被顶出屏外, 白多一条滚动条 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: clamp(72px, 15vh, 170px) 24px clamp(80px, 17vh, 190px);
}
.nf-code { color: var(--ink-2); }
.nf h1 {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 600; line-height: 1.05;
  letter-spacing: -0.025em; text-wrap: balance;
}
.nf-sub { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.nf .btn { margin-top: 12px; }

/* 跳到正文（工单B9）: 平时移出屏外(不用 display:none —— 那样读屏也读不到),
   拿到焦点才滑下来。全站首个可聚焦元素, 首页与 21 个法务页同款。 */
.skip-link {
  position: absolute; left: 50%; top: 0; z-index: 60;
  transform: translate(-50%, -140%);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--seam); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 11px 20px; font-size: 14.5px; box-shadow: var(--sh-lift);
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
main:focus { outline: none; }        /* tabindex="-1" 的 <main> 点过去不该画一圈框 */