/* 木木 · 别吃 —— 视觉方向（§20）
   年轻女性友好 + 教练感：暖色底、卡片化、大 CTA、少数据堆砌。
   刻意避开两种俗套：医院的冷蓝白、传统健身 App 的荧光黑。

   配色说明（无障碍）：
   - 正文 ink 对 surface 对比度 ≈ 13:1，远超 AA 4.5:1。
   - 状态色 ok/warn/danger 都对白底做过加深，保证文字与图标可辨。
   - 审批卡三态**不只靠颜色**区分：同时用图标、边框样式与标题文案，避免色觉障碍下无法区分。 */

:root {
  --bg: #fff6f1;
  --bg-2: #ffede4;
  --surface: #ffffff;
  --surface-2: #fffaf7;
  --ink: #2a2230;
  --ink-2: #6b5f72;
  --muted: #9b8fa3;
  --line: #f0e4dc;
  --brand: #ff6b5a;
  --brand-2: #ff9a6c;
  --plum: #4a2f4f;
  --ok: #1f8f5c;
  --ok-bg: #e8f7ef;
  --warn: #b8730a;
  --warn-bg: #fff3e0;
  --danger: #c62f3c;
  --danger-bg: #fdeaec;
  --cool: #6a4df0;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 10px 30px rgba(74, 47, 79, 0.08);
  --shadow-lg: 0 18px 50px rgba(74, 47, 79, 0.14);
}

* {
  box-sizing: border-box;
}

/* `hidden` 属性必须真的藏得住。
   UA 样式表里的 `[hidden] { display: none }` 只是**作者样式的一个兜底前提**，任何
   作者声明的 `display` 都会盖掉它。本项目里 `.modal` 与 `.recorder` 都是
   `position: fixed; inset: 0; display: grid`，特异度与 `[hidden]` 相同（0,1,0），
   后写的作者样式必然获胜 —— 结果是两个全屏浮层永久显示，
   `z-index: 110` 的 `#recorder` 吞掉整个页面的指针事件，**所有点击全部失效**。
   所以这里必须用 `!important` 把这条兜底提到最高优先级，且必须写成全局选择器：
   `.modal` 与 `.recorder` 是同一个 bug 类，不能只给其中一个打补丁。 */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: radial-gradient(120% 80% at 50% 0%, var(--bg-2) 0%, var(--bg) 45%, #fffdfc 100%);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 96px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- 顶栏 ---------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 10px;
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, var(--bg-2) 60%, rgba(255, 237, 228, 0));
  z-index: 10;
}

.brand {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.brand-mark {
  font-weight: 800;
  font-size: 20px;
  color: var(--plum);
  letter-spacing: -0.5px;
}

.brand-name {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  padding: 2px 9px;
  border-radius: 999px;
}

.topnav {
  display: flex;
  gap: 14px;
}

.topnav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.topnav a:hover {
  color: var(--brand);
}

.view {
  flex: 1;
  padding-top: 6px;
}

.loading,
.empty {
  color: var(--muted);
  text-align: center;
  padding: 48px 16px;
  font-size: 14px;
}

.footer {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  padding: 24px 4px 8px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}

.footer-entry {
  font-variant-numeric: tabular-nums;
}

/* --- 卡片 ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.card.tight {
  padding: 14px;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.hero {
  background: linear-gradient(150deg, #fff 0%, #fff6f1 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 16px;
}

.hero-greet {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 2px;
}

.hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--plum);
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}

/* --- 首页 Hero 的品牌层级（顺序固定，不要调换）-----------------------------
   1. `.hero-slogan` 主口号 —— 全站最大的一行字，原文一字不改
   2. `.hero-sub`    副文案 —— 一行小字
   3. `.cta-mega`    大 CTA「我又想吃了」
   字号必须满足 slogan > CTA > sub，这条层级有测试盯着
   （tests/app-render.test.mjs 断言渲染结果与字号，scripts/ui-acceptance.mjs 在浏览器里量计算值）。 */
.hero-slogan {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -0.5px;
  color: var(--plum);
  margin: 0 0 8px;
}

.hero-sub {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 18px;
}

/* --- 首页「今天的状态」面板（已从 Hero 拆出，避免和品牌层级混在一起）-------- */
.status-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.panel-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--plum);
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}

/* --- KPI 行 -------------------------------------------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.kpi {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
}

.kpi-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.kpi-value small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 1px;
}

.kpi-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* --- 状态灯 -------------------------------------------------------------- */
.status-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
}

.status-light.green {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: #bfe6d1;
}
.status-light.yellow {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: #f2d9a8;
}
.status-light.red {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #f3c4c8;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

/* --- 按钮 ---------------------------------------------------------------- */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover {
  background: var(--surface-2);
}

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

.btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255, 107, 90, 0.32);
}

.btn.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2);
}

.btn.small {
  padding: 8px 12px;
  font-size: 13px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 首页最大 CTA */
.cta-mega {
  display: block;
  width: 100%;
  border: none;
  border-radius: 22px;
  padding: 26px 20px;
  background: linear-gradient(135deg, #ff6b5a 0%, #ff8a5c 55%, #ffa96c 100%);
  color: #fff;
  font-family: inherit;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(255, 107, 90, 0.36);
  margin: 6px 0 16px;
  text-align: center;
}

.cta-mega:active {
  transform: translateY(2px);
}

.cta-mega small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
  margin-top: 4px;
  letter-spacing: 0;
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

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

.entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.entry:hover {
  border-color: #ffcfc2;
}

.entry.secondary {
  color: var(--ink-2);
  font-weight: 600;
  padding: 12px 8px;
}

.entry-icon {
  font-size: 22px;
  line-height: 1;
}

/* --- 表单 ---------------------------------------------------------------- */
.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 6px;
}

input[type='text'],
input[type='number'],
input[type='date'],
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
}

textarea {
  min-height: 84px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--brand);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.chip[aria-pressed='true'] {
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  border-color: var(--brand);
  color: var(--brand);
}

/* --- 木木回复 ------------------------------------------------------------ */
.reply {
  background: linear-gradient(150deg, #fff 0%, #fff4ef 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
}

.reply-name {
  font-weight: 800;
  color: var(--plum);
  font-size: 14px;
}

.tone-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--cool);
  background: #f0ecff;
  border-radius: 999px;
  padding: 2px 9px;
}

.reply-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}

.reply-meta {
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.safety-banner {
  background: var(--warn-bg);
  border: 1px solid #f2d9a8;
  color: var(--warn);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* --- 审批卡（三态，§20 重点） -------------------------------------------- */
.approval {
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 14px;
  border: 2px solid;
  position: relative;
  overflow: hidden;
}

/* 三态不只靠颜色：图标 + 边框样式 + 标题文案三重区分 */
.approval.approved {
  background: linear-gradient(150deg, #f2fbf6 0%, #e8f7ef 100%);
  border-color: #a9dcc2;
  border-style: solid;
}

.approval.conditional {
  background: linear-gradient(150deg, #fffaf0 0%, #fff3e0 100%);
  border-color: #eec98a;
  border-style: dashed;
}

.approval.rejected {
  background: linear-gradient(150deg, #fef4f5 0%, #fdeaec 100%);
  border-color: #eeaab0;
  border-style: solid;
}

.approval-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.approval-emoji {
  font-size: 30px;
  line-height: 1;
}

.approval-label {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.approval.approved .approval-label {
  color: var(--ok);
}
.approval.conditional .approval-label {
  color: var(--warn);
}
.approval.rejected .approval-label {
  color: var(--danger);
}

.approval-message {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  margin: 0 0 12px;
  color: var(--ink);
}

.approval-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-2);
}

.approval-list li {
  padding: 5px 0 5px 22px;
  position: relative;
}

.approval-list li::before {
  content: '·';
  position: absolute;
  left: 8px;
  font-weight: 900;
  color: currentColor;
}

.approval-conditions li::before {
  content: '☐';
  font-size: 13px;
}

.approval-foot {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* --- 结局按钮 ------------------------------------------------------------ */
.outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.outcome-btn {
  padding: 13px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.outcome-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.outcome-btn.ate {
  color: var(--ink-2);
}

/* --- 列表 ---------------------------------------------------------------- */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.list li:last-child {
  border-bottom: none;
}

.list .when {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--bg-2);
  color: var(--ink-2);
}

.tag.ok {
  background: var(--ok-bg);
  color: var(--ok);
}
.tag.warn {
  background: var(--warn-bg);
  color: var(--warn);
}
.tag.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.summary-quote {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--plum);
  border-left: 3px solid var(--brand);
  padding-left: 14px;
  margin: 12px 0 0;
}

/* --- 建档聊天 ------------------------------------------------------------ */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.bubble {
  max-width: 86%;
  padding: 12px 15px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.6;
}

.bubble.mumu {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  box-shadow: var(--shadow);
}

.bubble.me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-bottom-right-radius: 6px;
}

/* --- 毒舌等级 ------------------------------------------------------------ */
.level-scale {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}

.level-pip {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.3;
}

.level-pip[aria-pressed='true'] {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: transparent;
}

.level-pip.locked {
  opacity: 0.85;
}

.level-note {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

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

.switch {
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f1e9e4;
  cursor: pointer;
  padding: 0;
}

.switch[aria-checked='true'] {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
}

.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.16s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.switch[aria-checked='true']::after {
  transform: translateX(20px);
}

/* --- 弹窗 ---------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 48, 0.42);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 100;
}

.modal-card {
  background: var(--surface);
  border-radius: 22px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.modal-card h2 {
  margin: 0 0 12px;
  font-size: 19px;
  color: var(--plum);
}

.consent-text {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-actions .btn {
  flex: 1;
}

.modal-note {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0;
}

/* --- 录音浮层 ------------------------------------------------------------ */
.recorder {
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 48, 0.5);
  display: grid;
  place-items: center;
  z-index: 110;
}

.recorder-inner {
  background: var(--surface);
  border-radius: 22px;
  padding: 28px;
  text-align: center;
  width: 280px;
}

.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 48px;
  margin-bottom: 14px;
}

.wave span {
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to top, var(--brand), var(--brand-2));
  animation: pulse 0.9s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    height: 10px;
  }
  50% {
    height: 40px;
  }
}

.recorder-hint {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 12px;
}

.error-box {
  background: var(--danger-bg);
  border: 1px solid #f3c4c8;
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 12px;
  word-break: break-word;
}

.note {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.6;
}

.estimate-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--warn);
  background: var(--warn-bg);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

/* --- 移动端点击热区 -------------------------------------------------------
   实测（Playwright getBoundingClientRect，390px 视口）改前：
     a[href="#/today"]       52 × 21
     a[href="#/weekly"]      26 × 21
     a[href="#/settings"]    26 × 21
     button#voice (.switch)  50 × 30
   全部低于 44px 的可点高度。这里用**真实的 padding + min-height** 把盒子撑开：
   不用 `transform: scale()`（视觉放大但不改盒模型，命中区不变），
   也不用伪元素（伪元素一旦被 `overflow: hidden` 裁剪就不算热区）。
   `.switch` 是开关，靠 padding 撑会把轨道拉变形，所以直接放大轨道与滑钮本身。 */
@media (max-width: 480px) {
  .topbar {
    padding: 6px 0;
  }

  .topnav {
    gap: 0;
  }

  .topnav a {
    display: inline-flex;
    align-items: center;
    padding: 12px 10px;
    min-height: 44px;
  }

  .switch {
    width: 68px;
    height: 44px;
  }

  .switch::after {
    top: 6px;
    left: 6px;
    width: 30px;
    height: 30px;
  }

  .switch[aria-checked='true']::after {
    transform: translateX(24px);
  }
}

/* --- 移动端 Hero 字号（主口号 21 个全角字符，26px 在 390 宽下必然难看地折行）------
   三档一起降，保持 slogan > CTA > sub 的层级不变。
   390px 内容宽约 358px：17px × 21 字 ≈ 357px，刚好一行。 */
@media (max-width: 480px) {
  .hero-slogan {
    font-size: 19px;
    line-height: 1.32;
    letter-spacing: -0.5px;
    /* 21 个全角字符在 316px 内容宽下必然两行；balance 让两行长度接近，
       避免第一行塞满、第二行只剩「嘴！」两个字的硬折。 */
    text-wrap: balance;
  }

  .cta-mega {
    font-size: 16px;
    padding: 22px 16px;
  }

  .hero-sub {
    font-size: 12px;
  }
}