/* 内容页样式（事实页 / 对比页）。复用 family-theme.css 的变量与自托管字体。 */

* { box-sizing: border-box; }
figure { margin: 0; }
body.page {
  margin: 0;
  background: var(--paper);
  color: var(--body-copy);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--white);
  padding: 10px 16px; border-radius: 4px; z-index: 10;
}
.skip:focus { left: 16px; top: 16px; }
/* ---------- 页头 ---------- */
.p-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: sticky; top: 0; z-index: 5;
}
.p-header .wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: 21px; color: var(--ink);
  text-decoration: none; letter-spacing: -0.01em;
}
.p-header nav { display: flex; gap: 22px; font-size: 15px; }
.p-header nav a { color: var(--muted); text-decoration: none; }
.p-header nav a:hover { color: var(--ink); }
.p-cta {
  background: var(--clay); color: var(--white);
  padding: 9px 16px; border-radius: 6px;
  font-size: 15px; text-decoration: none; white-space: nowrap;
}
.p-cta:hover { background: var(--clay-dark); }
@media (max-width: 760px) { .p-header nav { display: none; } }
/* ---------- 版心 ---------- */
.wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 24px; }
.wrap.wide { max-width: 940px; }
h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(32px, 5vw, 46px); line-height: 1.12;
  color: var(--ink); margin: 0 0 20px; letter-spacing: -0.015em;
  text-wrap: balance;
}
h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(23px, 3vw, 29px); line-height: 1.22;
  color: var(--ink); margin: 52px 0 14px; letter-spacing: -0.01em;
  text-wrap: balance;
}
h3 {
  font-family: var(--sans); font-weight: 500; font-size: 17px;
  color: var(--ink); margin: 28px 0 6px;
}
p { margin: 0 0 16px; max-width: 62ch; }
.lede { font-size: 19.5px; line-height: 1.55; color: var(--ink); }
.screen .note { font-size: 15px; color: var(--muted); }
strong { font-weight: 500; color: var(--ink); }
a { color: var(--clay); }
/* ---------- 速览表 ---------- */
.facts { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 16px; }
.facts th, .facts td {
  text-align: left; vertical-align: top;
  padding: 13px 14px; border-bottom: 1px solid var(--line);
}
.facts th { font-weight: 500; color: var(--muted); width: 38%; }
.facts td { color: var(--ink); }
/* ---------- 对比表 ---------- */
.cmp-scroll { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 15.5px; }
.cmp th, .cmp td {
  text-align: left; vertical-align: top;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.cmp thead th {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--ink);
}
.cmp thead th:first-child { width: 30%; }
.cmp tbody th { font-weight: 400; color: var(--muted); }
.cmp td { color: var(--ink); }
.cmp .us { background: var(--sage); }
/* ---------- 问答 ---------- */
.qa { border-top: 1px solid var(--line); margin-top: 32px; }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: 18px 2px;
  font-size: 17px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; }
.qa details[open] summary::after { content: "–"; }
.qa .answer { padding: 0 2px 20px; }
.qa .answer p:last-child { margin-bottom: 0; }
/* ---------- 强调块 ---------- */
.callout {
  background: var(--linen); border-left: 3px solid var(--clay);
  padding: 20px 22px; margin: 28px 0;
}
.callout p:last-child { margin-bottom: 0; }
.status {
  display: inline-block; font-size: 13.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; margin-bottom: 22px;
}
ul.plain { padding-left: 20px; margin: 0 0 16px; }
ul.plain li { margin-bottom: 8px; max-width: 62ch; }
/* ---------- 页脚 ---------- */
.p-footer {
  border-top: 1px solid var(--line); margin-top: 72px;
  padding: 32px 24px 48px; background: var(--white);
}
.p-footer .inner { max-width: 940px; margin: 0 auto; }
.p-footer a { color: var(--muted); text-decoration: none; margin-right: 20px; font-size: 15px; }
.p-footer a:hover { color: var(--ink); }
.p-footer small { display: block; margin-top: 16px; color: var(--muted); font-size: 13.5px; }
.p-header nav a[aria-current="page"] { color: var(--ink); border-bottom: 1.5px solid var(--clay); padding-bottom: 2px; }
/* ---------- 同一封邮件，两种结果 ---------- */
.shared-input {
  background: var(--linen); border: 1px solid var(--line);
  padding: 18px 22px; margin: 26px 0 0;
}
.shared-input .what { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.shared-input p { margin: 0; color: var(--ink); }
/* ---------- 两种东西 ---------- */
.kinds { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15.5px; }
.kinds th, .kinds td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.kinds thead th { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.kinds tbody th { font-weight: 400; color: var(--muted); width: 26%; }
.kinds td { color: var(--ink); }
.kinds .ours { background: var(--sage); }
/* ---------- 次要事实块 ---------- */
.spec { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.spec thead th { font-weight: 500; color: var(--ink); }
.spec tbody th { font-weight: 400; color: var(--muted); width: 34%; }
.spec td { color: var(--ink); }
/* ---------- 步骤 ---------- */
.steps { counter-reset: step; margin: 32px 0 0; }
.step { counter-increment: step; position: relative; padding: 0 0 36px 62px; border-left: 1px solid var(--line); }
.step:last-child { border-left-color: transparent; padding-bottom: 8px; }
.step::before {
  content: counter(step); position: absolute; left: -17px; top: -4px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--clay); color: var(--white);
  font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.step h2 { margin: -4px 0 10px; font-size: clamp(21px, 2.6vw, 26px); }
.step p:last-child { margin-bottom: 0; }
.step .aside {
  background: var(--linen); border: 1px solid var(--line);
  padding: 14px 18px; margin: 16px 0 0; font-size: 15px;
}
.step .aside p { margin: 0; max-width: none; }
@media (max-width: 560px) { .step { padding-left: 46px; } .step::before { left: -15px; width: 30px; height: 30px; font-size: 14px; } }
/* ===== how-it-works 配图 ===== */

/* 照片 + 界面合成 */
.shot { margin: 20px 0 0; container-type: inline-size; }
.stage { position: relative; }
.shot img { display: block; width: 100%; height: auto; border-radius: 6px; }
.shot figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.screen {
  position: absolute; overflow: hidden;
  font-family: var(--device-sans, var(--sans));
  background: none; color: var(--ink);
  display: flex; flex-direction: column;
}
/* 手机：aurion-phone-share-v1（880×1100） */
.shot.phone .screen { left: 33.52%; top: 11.82%; width: 32.39%; height: 57.18%; border-radius: clamp(4px,1.1cqw,9px); padding: clamp(5px,1.5cqw,11px) clamp(6px,1.7cqw,12px) clamp(6px,1.7cqw,12px); }
.shot.phone .scr-notch { height: clamp(7px,1.9cqw,14px); flex: none; }
.shot.phone .scr-bar { display:flex; justify-content:space-between; font-size: clamp(6px,1.25cqw,9px); color: var(--muted); margin-bottom: clamp(4px,1cqw,7px); }
.shot.phone .scr-from { font-size: clamp(6.5px,1.35cqw,10px); color: var(--muted); }
.shot.phone .scr-subj { font-size: clamp(8px,1.8cqw,13px); line-height:1.25; margin: clamp(3px,.7cqw,5px) 0; }
.shot.phone .scr-body { font-size: clamp(6px,1.3cqw,9.5px); line-height:1.5; color: var(--body-copy); }
.shot.phone .scr-body p { margin: 0 0 clamp(4px,1cqw,8px); max-width: none; }
.shot.phone .scr-meta { display:flex; align-items:center; gap: clamp(3px,.8cqw,6px); margin-bottom: clamp(3px,.8cqw,6px); }
.shot.phone .scr-av { width: clamp(9px,2.1cqw,16px); height: clamp(9px,2.1cqw,16px); border-radius:50%; background: var(--sage); color: var(--ink); font-size: clamp(4.5px,1cqw,7px); display:flex; align-items:center; justify-content:center; flex:none; }
.shot.phone .scr-rule { height:1px; background: rgba(51,47,43,.08); margin: clamp(4px,1cqw,8px) 0; flex:none; }
.shot.phone .scr-sig { font-size: clamp(5.5px,1.2cqw,9px); color: var(--muted); margin-top: clamp(1px,.4cqw,3px); }
.shot.phone .scr-body b { color: var(--ink); font-weight: 500; }
/* 大屏：aurion-hub-kitchen-day-v1（640×800），坐标沿用 styles.css 既有口径 */
.shot.hub .screen { left: 12.66%; top: 35.75%; width: 74.84%; height: 36.12%; border-radius: 4px; padding: clamp(7px,1.9cqw,14px) clamp(9px,2.2cqw,16px); }
/* 第 1 步示意图 */
.syncfig { margin: 18px 0 0; }
.syncfig svg { display:block; width:100%; height:auto; }
/* 第 3 步：一封邮件 → 三条准备项 */
.derive { margin: 26px 0 0; display:grid; gap: 30px; }
.d-said { margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--clay); }
.d-said p { margin: 0; font-family: var(--serif, Georgia, serif); font-size: clamp(19px,2.2vw,24px); line-height: 1.45; color: var(--ink); max-width: none; }
.d-said p b { font-weight: 600; }
.d-said cite { display:block; margin-top: 12px; font-style: normal; font-size: 13.5px; color: var(--muted); }
.d-label { margin: 0 0 4px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.d-row { display:flex; justify-content:space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink); }
.d-row .when { color: var(--muted); font-size: 14.5px; text-align: right; flex: none; }
.d-row.is-known { color: var(--muted); }
.d-row:last-child { border-bottom: none; }
.derive + .note { margin-top: 18px; }
/* 傍晚桌面屏：aurion-family-evening-hub-v4（880×1100），屏幕区按原图量得 */
.shot.evening .screen { left: 21.70%; top: 62.64%; width: 52.50%; height: 24.73%; border-radius: 3px; padding: clamp(6px,1.6cqw,12px) clamp(8px,2cqw,14px); }
.fine-print { color: var(--muted); font-size: 12.5px; }
.forkfig { margin: 30px 0 0; }
.forkfig figcaption { font-size: 15px; color: var(--muted); margin-top: 14px; max-width: 62ch; }
.forkfig + p { margin-top: 26px; }
/* 两条道的时间线：同一封邮件、同一个周四，中间不一样 */
.fork {
  background: var(--linen);
  border-radius: 14px;
  padding: 28px clamp(20px,3.4vw,34px) 32px;
}
.fk-from {
  margin: 0 0 6px; padding-left: 118px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.fk-lane {
  display: grid; grid-template-columns: 96px minmax(0,1fr);
  gap: 22px; align-items: start;
  padding: 26px 0 4px;
}
.fk-lane + .fk-lane { border-top: 1px solid #e6e0d2; margin-top: 4px; }
.fk-who {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: 21px; line-height: 1; padding-top: 1px;
}
.fk-sky .fk-who { color: var(--muted); }
.fk-aur .fk-who { color: var(--clay); }
.fk-track {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  padding-top: 22px;
}
.fk-track::before {
  content: ""; position: absolute; left: 0; right: 33.333%; top: 5px;
  border-top: 1px solid;
}
/* 两条道共同的起点：同一封邮件 */
.fk-track::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 11px;
  background: #c9c0ae;
}
.fk-sky .fk-track::before { border-top-style: dashed; border-top-color: #cfc6b5; }
.fk-aur .fk-track::before { border-top-color: rgba(164,76,50,.4); }
.fk-stop { position: relative; padding-right: 14px; }
.fk-stop b { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.fk-stop > span:not(.fk-dot) { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.fk-dot {
  position: absolute; left: 0; top: -22px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--clay);
}
.fk-sky .fk-dot, .is-end .fk-dot {
  background: var(--white); box-shadow: inset 0 0 0 1.6px var(--muted);
}
.fk-empty {
  grid-column: 1 / 3; margin: 0; padding-right: 20px;
  font-family: var(--serif); font-style: italic; font-size: 18px;
  line-height: 1.4; color: #8d857a;
}
@media (max-width: 720px) {
  .fk-lane { grid-template-columns: 1fr; gap: 14px; }
  .fk-track { grid-template-columns: 1fr; padding-top: 0; padding-left: 26px; gap: 20px; }
  .fk-from { padding-left: 0; }
  .fk-track::before { left: 5px; right: auto; top: 6px; bottom: 40px; border-top: none; border-left: 1px solid; }
  .fk-track::after { left: 0; top: 6px; width: 11px; height: 1px; }
  .fk-sky .fk-track::before { border-left-style: dashed; border-left-color: #cfc6b5; }
  .fk-aur .fk-track::before { border-left-color: rgba(164,76,50,.4); }
  .fk-stop { padding-right: 0; }
  .fk-dot { left: -26px; top: 4px; }
  .fk-empty { grid-column: auto; padding-right: 0; font-size: 17px; }
}
/* 生日图里的桌面屏：aurion-birthday-preparation-v1（1000×750），实测边界内收 10px */
.shot.gift .screen { left: 6.70%; top: 52.13%; width: 42.00%; height: 34.13%; border-radius: 3px; padding: clamp(5px,1.3cqw,10px) clamp(6px,1.6cqw,12px); }
/* ===== 合成屏的真实感：贴合各自场景的光 ===== */
.shot .screen { isolation: isolate; }
/* 屏面反光：一道极淡的斜向渐变 */
.shot .screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 34%, rgba(255,255,255,0) 58%);
  mix-blend-mode: screen;
}
/* 边缘不要刀切感：内阴影把界面压进机身 */
.shot .screen { box-shadow: inset 0 0 0 1px rgba(51,47,43,.06), inset 0 1px 6px rgba(51,47,43,.10); }
/* 傍晚厨房：暖光、偏暗 */
.shot.evening .screen { background: #f3ede1; filter: brightness(.94) saturate(.96); }
/* 生日傍晚：同一场景的暖光 */
.shot.gift .screen { background: #f4eee3; filter: brightness(.95) saturate(.96); }
/* 白天厨房：冷一点、亮一点 */
.shot.hub .screen { background: #f7f5ee; filter: brightness(.985); }
/* 手机握在手里：略微压暗，边缘更圆 */
.shot.phone .screen { background: #f8f6f0; filter: brightness(.975); }
.shot.phone .screen::after { background: linear-gradient(112deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 54%); }
/* ===== 两层合成：场景里只给暗示，读的内容放在放大卡上 ===== */
/* 第一层：屏上内容缩小、压低对比、不要按钮——只是"亮着" */
/* ===== 第 1 步：合并之后的一天（代替管道示意图） ===== */
.oneday {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--white); margin: 22px 0 0;
  box-shadow: 0 2px 10px rgba(51,47,43,.05);
}
.oneday .od-top {
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 15px 20px 13px; border-bottom: 1px solid var(--line);
  background: var(--linen);
}
.oneday .od-day { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.oneday .od-count { font-size: 13px; color: var(--muted); }
.oneday ul { list-style:none; margin:0; padding: 4px 0; }
.oneday li {
  display:grid; grid-template-columns: 62px 1fr auto; align-items:center; gap: 14px;
  padding: 11px 20px; font-size: 15.5px; color: var(--ink);
}
.oneday li + li { border-top: 1px solid rgba(51,47,43,.06); }
.oneday .od-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.oneday .od-src { display:inline-flex; align-items:center; gap:6px; font-size: 13px; color: var(--muted); white-space:nowrap; }
.oneday .od-dot { width:7px; height:7px; border-radius:50%; flex:none; }
.oneday .od-foot {
  border-top: 1px solid var(--line); padding: 13px 20px 15px;
  font-size: 14.5px; color: var(--body-copy); background: var(--sage);
}
.oneday .od-foot b { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
  .oneday li { grid-template-columns: 54px 1fr; row-gap: 3px; }
  .oneday .od-src { grid-column: 2; }
}
/* 屏内的时段分组标签 */
.scr-group { font-size: clamp(5.5px,1.05cqw,8px); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: clamp(7px,1.7cqw,13px); margin-bottom: clamp(1px,.25cqw,2px); }
/* ===== 设备画面：沿用大屏 HOME 定稿的设计语言 ===== */
/* 取自 docs/设计/calendar/Calendar-v3-0901/上游_HOME定稿 的变量 */
.screen {
  --d-ink:#2E2620; --d-sub:#6E655C; --d-meta:#78716A;
  --d-card:#FFFEFB; --d-row:#FAF8F3; --d-zone:#FBEEE3; --d-fold:#F2DBC4;
  --d-key:#A34F2C; --d-signal:#C56A45;
  --d-you:#2A6FE8; --d-emma:#288855; --d-mike:#764BBF;
  --d-you-soft:#E7EEFC; --d-emma-soft:#E6F2EB; --d-mike-soft:#F0EAF9; --d-quiet-soft:#F3F0EB;
}
/* 大屏 Today / Tasks */
.hb-top {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom: clamp(5px,1.1cqw,8px); color: var(--d-ink);
}
.hb-date { font-size: clamp(8px,1.75cqw,13px); font-weight:500; }
.hb-meta { font-size: clamp(7px,1.5cqw,11px); color: var(--d-meta); }
.hb-cols { display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(5px,1.2cqw,9px); flex:1; min-height:0; }
.shot.evening .hb-cols { grid-template-columns: 1.6fr 1fr; }
.hb-col { display:grid; gap: clamp(3px,.7cqw,5px); align-content:start; }
.hb-h {
  margin:0 0 clamp(1px,.3cqw,2px); color: var(--d-ink);
  font-size: clamp(7px,1.5cqw,11px); font-weight:500;
}
.hb-row {
  display:flex; align-items:center; gap: clamp(4px,.9cqw,7px);
  padding: clamp(4px,.95cqw,7px) clamp(5px,1.15cqw,9px);
  border-radius: clamp(4px,1cqw,8px);
  background: var(--d-row);
}
.hb-row.tint-you { background: var(--d-you-soft); }
.hb-row.tint-emma { background: var(--d-emma-soft); }
.hb-row.tint-quiet { background: var(--d-quiet-soft); }
.hb-row.tint-mike { background: var(--d-mike-soft); }
.hb-av.av-mike { background: var(--d-mike); }
.hb-h2 { margin-top: clamp(4px,1cqw,8px); }
.hb-row.is-task { background: var(--d-card); box-shadow: inset 0 0 0 1px rgba(163,79,44,.075); }
.hb-cell { min-width:0; flex:1; }
.hb-cell b { display:block; font-weight:400; font-size: clamp(6.5px,1.45cqw,11px); line-height:1.25; color: var(--d-ink); }
.hb-cell span { display:block; font-size: clamp(5.5px,1.2cqw,9px); line-height:1.25; color: var(--d-sub); margin-top:1px; }
.hb-av {
  flex:none; display:flex; align-items:center; justify-content:center;
  width: clamp(11px,2.4cqw,18px); height: clamp(11px,2.4cqw,18px); border-radius:50%;
  color:#fff; font-style:normal; font-size: clamp(5px,1.05cqw,8px); font-weight:600;
}
.hb-av.av-you { background: var(--d-you); }
.hb-av.av-emma { background: var(--d-emma); }
.hb-ck {
  flex:none; width: clamp(7px,1.5cqw,11px); height: clamp(7px,1.5cqw,11px);
  border-radius:50%; border:1px solid #C7C7CC;
}
/* aurion 的便签纸提案（定稿 .note：暖色纸、微倾、顶上胶带、右下折角） */
.screen .note {
  position: relative;
  background: var(--d-zone, #FBEEE3);
  border-radius: 16px 16px 0 16px;
  padding: clamp(6px,1.4cqw,11px) clamp(7px,1.6cqw,12px);
  transform: rotate(-.8deg);
  box-shadow: 0 18px 44px rgba(163,79,44,.18);
}
.screen .note::before {
  content:""; position:absolute; top:-5px; left:50%; width:34%; height:11px;
  margin-left:-17%; border-radius:2px; transform: rotate(1.6deg);
  background: linear-gradient(104deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.62) 34%, rgba(255,255,255,.58) 66%, rgba(255,255,255,.24) 100%);
  box-shadow: 0 2px 4px rgba(163,79,44,.13);
}
.screen .note::after {
  content:""; position:absolute; right:0; bottom:0; width:16px; height:16px;
  background: linear-gradient(315deg, var(--d-fold,#F2DBC4) 0 50%, rgba(0,0,0,0) 50%);
  filter: drop-shadow(-1.5px -1.5px 2px rgba(163,79,44,.16));
}
.nt-hd { display:flex; align-items:center; gap: clamp(3px,.7cqw,6px); }
.nt-dot {
  width: clamp(3px,.7cqw,6px); height: clamp(3px,.7cqw,6px); border-radius:50%;
  background: var(--d-signal,#C56A45); flex:none;
}
.nt-brand {
  font-size: clamp(5px,1.1cqw,8px); font-weight:700; letter-spacing:.1em;
  text-transform: uppercase; color: var(--d-sub,#6E655C);
}
.nt-say {
  margin: clamp(3px,.8cqw,6px) 0 0;
  font-size: clamp(6.5px,1.45cqw,11px); line-height:1.4; color: var(--d-ink,#2E2620);
}
.nt-src {
  margin: clamp(2px,.5cqw,4px) 0 0;
  font-size: clamp(5.5px,1.15cqw,9px); line-height:1.3; color: var(--d-meta,#78716A);
}
.nt-rows { display:grid; gap: clamp(1px,.3cqw,3px); margin-top: clamp(4px,.9cqw,7px); }
.nt-row {
  display:flex; justify-content:space-between; gap:10px;
  font-size: clamp(6px,1.3cqw,10px); line-height:1.3; color: var(--d-ink,#2E2620);
  padding: clamp(2px,.5cqw,4px) 0;
  border-top: 1px solid rgba(163,79,44,.12);
}
.nt-row .when { color: var(--d-meta,#78716A); white-space:nowrap; }
.nt-keys {
  display:flex; justify-content:flex-end; align-items:center;
  gap: clamp(4px,1cqw,8px); margin-top: clamp(4px,.9cqw,7px);
}
.nt-k1 {
  padding: clamp(2px,.5cqw,4px) clamp(6px,1.4cqw,11px); border-radius:999px;
  background:#FFFFFF; color: var(--d-key,#A34F2C);
  font-size: clamp(5.5px,1.2cqw,9px); line-height:1.2; white-space:nowrap;
  box-shadow: 0 3px 10px rgba(163,79,44,.13);
}
.nt-k2 { font-size: clamp(5.5px,1.2cqw,9px); line-height:1.2; color: var(--d-meta,#78716A); }
/* 放大版的纸条：尺寸按卡片自身宽度走 */
/* 手机里的邮件应用外壳 */
.ph-status {
  display:flex; justify-content:space-between; align-items:center;
  font-size: clamp(5px,1.1cqw,8px); color: var(--ink);
  margin-bottom: clamp(3px,.8cqw,6px); flex:none;
}
.ph-ind { display:inline-flex; align-items:flex-end; gap:2px; }
.ph-ind i { display:block; width: clamp(2px,.45cqw,3px); background: var(--ink); opacity:.55; border-radius:1px; }
.ph-ind i:nth-child(1) { height: clamp(3px,.6cqw,4px); }
.ph-ind i:nth-child(2) { height: clamp(4px,.85cqw,6px); }
.ph-ind i:nth-child(3) { height: clamp(5px,1.1cqw,8px); }
.ph-bar {
  display:flex; justify-content:space-between; align-items:center;
  font-size: clamp(6px,1.25cqw,9px); color: var(--muted);
  padding-bottom: clamp(4px,.9cqw,7px); margin-bottom: clamp(4px,.9cqw,7px);
  border-bottom: 1px solid rgba(51,47,43,.07); flex:none;
}
.ph-acts { display:inline-flex; gap: clamp(4px,1cqw,8px); }
.ph-acts i {
  display:block; width: clamp(5px,1.1cqw,8px); height: clamp(5px,1.1cqw,8px);
  border:1px solid rgba(51,47,43,.3); border-radius:1.5px;
}
.shot.phone .scr-from b { font-weight:500; color: var(--ink); }
.ph-time { margin-left:auto; font-size: clamp(5px,1.1cqw,8px); color: var(--muted); white-space:nowrap; }
.ph-foot {
  margin-top:auto; display:flex; justify-content:space-around; align-items:center;
  padding-top: clamp(5px,1.1cqw,8px); border-top: 1px solid rgba(51,47,43,.07);
  font-size: clamp(5.5px,1.2cqw,9px); color: var(--muted); flex:none;
}
.ph-foot .is-on { color: var(--clay); font-weight:500; }

/* 窄屏：照片里的屏只有 90–210px 宽，字再小也塞不下。
   不往屏上叠了，把同一块界面改成照片下面一张独立卡片，字号回到正常大小。 */
@media (max-width: 760px) {
  .shot.phone .screen, .shot.hub .screen, .shot.evening .screen, .shot.gift .screen {
    position: static; width: auto; height: auto; overflow: visible;
    margin-top: 12px; padding: 15px 16px 16px;
    background: #FBF7F1; border: 1px solid var(--line); border-radius: 10px;
  }
  .scr-notch { display: none; }
  .hb-cols, .shot.evening .hb-cols { grid-template-columns: 1fr; gap: 14px; }
  .hb-col { gap: 6px; }
  .hb-date { font-size: 15px; } .hb-meta { font-size: 12.5px; }
  .hb-h { font-size: 12px; margin-bottom: 3px; }
  .hb-row { padding: 9px 11px; border-radius: 8px; gap: 9px; }
  .hb-cell b { font-size: 14.5px; } .hb-cell span { font-size: 12.5px; margin-top: 2px; }
  .hb-av { width: 22px; height: 22px; font-size: 10px; }
  .hb-ck { width: 14px; height: 14px; }
  .screen .note { padding: 13px 14px 15px; }
  .screen .note::before { height: 14px; top: -6px; }
  .screen .note::after { width: 20px; height: 20px; }
  .nt-dot { width: 6px; height: 6px; }
  .nt-brand { font-size: 10.5px; }
  .nt-say { font-size: 15px; margin-top: 8px; }
  .nt-src { font-size: 12.5px; margin-top: 4px; }
  .nt-rows { margin-top: 10px; }
  .nt-row { font-size: 13.5px; padding: 7px 0; }
  .nt-keys { margin-top: 10px; gap: 12px; }
  .nt-k1 { font-size: 12.5px; padding: 5px 14px; }
  .nt-k2 { font-size: 12.5px; }
  .ph-status { font-size: 11px; margin-bottom: 8px; }
  .ph-ind i { width: 3px; }
  .ph-bar { font-size: 12.5px; padding-bottom: 9px; margin-bottom: 9px; }
  .ph-acts i { width: 9px; height: 9px; }
  .ph-time { font-size: 11.5px; }
  .shot.phone .scr-av { width: 22px; height: 22px; font-size: 9.5px; }
  .shot.phone .scr-from { font-size: 12.5px; }
  .shot.phone .scr-subj { font-size: 16px; margin: 7px 0; }
  .shot.phone .scr-rule { margin: 10px 0; }
  .shot.phone .scr-body { font-size: 13.5px; }
  .shot.phone .scr-body p { margin-bottom: 10px; }
  .shot.phone .scr-sig { font-size: 12.5px; margin-top: 4px; }
  .ph-foot { font-size: 12.5px; padding-top: 10px; margin-top: 12px; }
}

/* 页尾续读 */
.next-read {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line);
  display: grid; gap: 9px; justify-items: start;
}
.nr-label {
  margin: 0 0 3px; font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.next-read a {
  font-size: 17.5px; color: var(--clay); text-decoration: none;
  border-bottom: 1px solid rgba(164,76,50,.28); padding-bottom: 2px;
}
.next-read a:hover { border-bottom-color: var(--clay); }

@media (min-width:761px) { .shot.phone .screen, .shot.hub .screen, .shot.evening .screen, .shot.gift .screen { background:none; box-shadow:none; } }
@media (max-width:760px) { .nt-brand, .ph-status, .ph-time, .shot.phone .scr-av, .hb-av { font-size:12px; } }
@media (max-width:560px) { .oneday .od-top { flex-direction:column; gap:5px; } }

.beta-badge{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:20px;font:500 12px/1.5 var(--sans);color:var(--clay-dark);vertical-align:middle;white-space:nowrap}
.comparison-scroll{max-width:100%;overflow-x:auto}.comparison-scroll table{min-width:560px}.beta-cta{display:inline-block;margin:12px 0;font-weight:600}