/* 首页品牌叙事独立于法务页；四段体验共用字级和节奏，各自用不同材质呈现。 */
.brand-intro,
.value-section {
  scroll-margin-top: 88px;
}

.brand-intro {
  width: 100%;
  margin: 0;
  background: #fff;
}

.brand-intro-inner {
  width: var(--page);
  margin: 0 auto;
  padding: 84px 0 78px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: clamp(52px, 6vw, 80px);
  row-gap: 64px;
}

.brand-intro-art {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #edf2e8;
}

.brand-intro-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: inherit;
  box-shadow: inset 0 -90px 110px rgb(54 72 55 / 8%);
  pointer-events: none;
}

.brand-intro-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 74%;
}

.brand-intro-copy {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.brand-intro-heading,
.brand-intro-summary { min-width: 0; }
.brand-intro-summary { margin-top: 22px; }
.brand-intro .section-kicker { margin-bottom: 18px; }

.brand-intro h2 {
  max-width: 690px;
  margin: 0;
  font-size: clamp(36px, 3.2vw, 48px);
  font-weight: 580;
  line-height: 1.16;
  letter-spacing: -.055em;
}

.brand-intro-lead {
  max-width: 600px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.72;
}

.brand-intro-link {
  width: fit-content;
  min-height: 44px;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-deep);
  font-size: 16px;
  font-weight: 630;
}

.brand-intro-link:hover,
.brand-intro-link:focus-visible { color: #1a5278; }

.brand-intro-chevron {
  width: 8px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.brand-intro-link:hover .brand-intro-chevron,
.brand-intro-link:focus-visible .brand-intro-chevron { transform: translateX(3px); }

.value-index {
  font: 600 12px/1.4 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .12em;
}

.value-section {
  position: relative;
  overflow: hidden;
}

.value-inner {
  position: relative;
  width: var(--page);
  min-height: 700px;
  margin: 0 auto;
  padding: 104px 0;
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  align-items: center;
  gap: clamp(36px, 6vw, 110px);
}

.value-copy {
  position: relative;
  z-index: 2;
  max-width: 510px;
}

.value-index {
  margin: 0 0 27px;
  color: var(--blue-deep);
}

.value-index span {
  margin-left: 18px;
  font: 650 13px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: .1em;
}

/* 功能名与收益组成一句完整标题；较轻字重和两行上限接近 Tide 的叙事节奏。 */
.value-copy h2 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(30px, 2.7vw, 40px);
  line-height: 1.24;
  letter-spacing: -.04em;
  font-weight: 500;
}

.value-lead {
  max-width: 440px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.8;
}

.value-detail {
  display: inline-block;
  margin: 32px 0 0;
  padding-top: 15px;
  border-top: 1px solid currentColor;
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 590;
  letter-spacing: .05em;
}

.value-timer {
  background: radial-gradient(circle at 78% 45%, #d5f0eb, transparent 42%), linear-gradient(125deg, #f5faf7, #e9f5f3);
}

.timer-art {
  position: relative;
  width: min(100%, 590px);
  min-height: 650px;
  justify-self: end;
}

.timer-ripple,
.timer-ripple span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.timer-ripple {
  z-index: 1;
  width: min(54vw, 620px);
  aspect-ratio: 1;
  top: 50%;
  /* 圆心落在样式卡一侧，避免与手机截图中的原生涟漪重叠。 */
  right: clamp(-220px, -15vw, -150px);
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgb(88 184 173 / 18%), transparent 64%);
}

.timer-ripple span {
  border: 1px solid rgb(78 174 164 / 22%);
}

.timer-ripple span:nth-child(2) { inset: 12%; }
.timer-ripple span:nth-child(3) { inset: 24%; }

.native-screen {
  position: relative;
  z-index: 2;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.native-screen img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 28px rgb(35 74 77 / 19%));
}

.timer-art > .native-screen {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 8px;
  width: clamp(250px, 22vw, 300px);
  transform: translateY(-50%);
  color: #496a70;
}

/* 六张卡直接使用 App 运行态截图；不在网页端重画计时样式，避免把示意图误认成产品界面。 */
.timer-mode-grid {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0;
  width: 218px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  transform: translateY(-50%);
}

.timer-mode-card {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  color: #315f62;
}

.timer-mode-frame {
  height: 106px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 18px;
  background: #d7eeea;
  box-shadow: 0 18px 34px rgb(53 116 111 / 13%);
}

.timer-mode-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* App 原图的主体高度不同；在方形缩略卡内分别上移，使六种样式的视觉重心对齐。 */
.timer-mode-scene .timer-mode-shot { transform: scale(1.08) translateY(-2%); }
.timer-mode-clock .timer-mode-shot { transform: scale(1.08) translateY(-2%); }
.timer-mode-ripple .timer-mode-shot { transform: scale(1.24) translateY(-10%); }
.timer-mode-breathe .timer-mode-shot { transform: scale(1.08) translateY(-2%); }
.timer-mode-wave .timer-mode-shot { transform: scale(1.12) translateY(-5%); }
.timer-mode-incense .timer-mode-shot { transform: scale(1.28) translateY(-13%); }

.timer-mode-card figcaption {
  padding: 0 2px;
  font-size: 11px;
  font-weight: 620;
  line-height: 1.35;
  text-align: center;
}

.value-journal {
  min-height: 720px;
  background: #182f3c;
  color: #fff;
}

.value-journal .value-inner {
  position: static;
  min-height: 720px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(36px, 5vw, 70px);
}

.journal-landscape,
.value-journal::after {
  position: absolute;
  inset: 0;
}

/* 日记与洞察的视觉置左、文案置右，和前后板块形成交替节奏。 */
.journal-stage { position: static; grid-column: 1; grid-row: 1; }

.journal-landscape {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}

/* 深色渐层让自然照片上的文案在任何裁切比例下都保持可读。 */
.value-journal::after {
  content: "";
  z-index: 1;
  background: linear-gradient(90deg, rgb(12 31 41 / 26%), rgb(12 31 41 / 60%) 52%, rgb(12 31 41 / 86%));
  pointer-events: none;
}

.value-journal .value-copy {
  grid-column: 2;
  grid-row: 1;
  color: #fff;
}

.value-journal .value-index,
.value-journal .value-lead,
.value-journal .value-detail {
  color: rgb(255 255 255 / 88%);
}

.journal-cluster {
  position: relative;
  z-index: 2;
  width: min(100%, 590px);
  height: 660px;
}

.native-screen-journal {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 310px;
}

/* 六种情绪沿用 App 原生表情资源，并以提问直接引出选项。 */
.journal-mood-panel {
  position: absolute;
  z-index: 3;
  right: 40px;
  bottom: 52px;
  width: 250px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 19px;
  background: rgb(250 252 252 / 93%);
  box-shadow: 0 28px 55px rgb(11 29 37 / 24%);
  color: var(--ink);
  backdrop-filter: blur(14px);
}

.journal-mood-panel > p {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 620;
  line-height: 1.4;
}

.mood-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.mood-choice {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid #e7ecee;
  border-radius: 12px;
  background: #fff;
  color: #293d4a;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.mood-choice img { display: block; width: 28px; height: 28px; flex: none; border-radius: 50%; }

.value-sound {
  background:
    radial-gradient(circle at 82% 18%, rgb(206 214 238 / 76%), transparent 33%),
    radial-gradient(circle at 12% 82%, rgb(241 215 177 / 32%), transparent 29%),
    linear-gradient(135deg, #f8f4ec 0%, #edf0f8 100%);
  color: var(--ink);
}

.value-sound .value-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: 20px 70px;
  padding: 92px 0 125px;
}

.value-sound .value-copy {
  max-width: 800px;
}

.native-screen-sound {
  width: 275px;
  justify-self: center;
}

.value-sound .value-index,
.value-sound .value-detail { color: #2a6d78; }

.value-sound .value-lead { color: #586f78; }

.sound-gallery {
  grid-column: 1 / -1;
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.sound-scene {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #25444d;
}

.sound-scene::after {
  position: absolute;
  inset: 35% 0 0;
  content: "";
  background: linear-gradient(transparent, rgb(4 20 28 / 68%));
  pointer-events: none;
}

.sound-scene img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(.2,.7,.25,1);
}

.sound-scene-falls img { object-position: center 75%; }
.sound-scene-forest img { object-position: center 62%; }
.sound-scene:hover img { transform: scale(1.05); }

.sound-scene figcaption {
  position: absolute;
  z-index: 1;
  bottom: 15px;
  left: 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 560;
}

/* “更多”与六张照片使用同一正方形比例，明确通往 App 下载入口。 */
.sound-more {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  aspect-ratio: 1;
  padding: 18px 15px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 18px;
  background: linear-gradient(145deg, #426c74, #1c3c48 72%);
  color: #fff;
}

.sound-more::before {
  position: absolute;
  top: -32px;
  right: -67px;
  width: 178px;
  height: 178px;
  border: 1px solid rgb(210 245 239 / 35%);
  border-radius: 50%;
  content: "";
}

.sound-more-arrow {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 50%;
  font-size: 19px;
}

.sound-more-text { position: relative; display: grid; gap: 5px; }
.sound-more strong { font-size: 17px; font-weight: 620; }
.sound-more small { color: rgb(255 255 255 / 78%); font-size: 12px; line-height: 1.35; }
.sound-more:hover { background: linear-gradient(145deg, #4c8387, #1c3c48 72%); }
.sound-more:focus-visible { outline: 2px solid #d6f7f1; outline-offset: 3px; }

.value-insights {
  background: #f0f4f8;
}

.value-insights .value-inner {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 70px;
  min-height: 800px;
}

.value-insights .value-copy { grid-column: 2; grid-row: 1; align-self: center; max-width: 580px; }
.value-insights .value-lead { max-width: 540px; }

.insights-art {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  height: 650px;
}

.native-screen-insights {
  position: absolute;
  z-index: 1;
  top: 18px;
  /* 入场动效会改写 transform，水平位置必须直接由 left 保持居中。 */
  left: calc(100% - 300px);
  width: 285px;
  color: #526c7c;
}

/* 手机保持原生截图；三张悬浮卡采用独立视觉语言，并用说明区分官网示意。 */
.insight-card-grid {
  position: absolute;
  z-index: 3;
  top: 54px;
  left: 0;
  width: 190px;
  display: grid;
  gap: 12px;
  pointer-events: none;
}

.insight-card {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 22px;
  box-shadow: 0 27px 45px rgb(43 72 99 / 15%);
}

.insight-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insight-card figcaption span {
  color: #425f6e;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .06em;
}

.insight-card figcaption strong {
  color: #284355;
  font-size: 27px;
  font-weight: 610;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.insight-card-calendar {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  height: 160px;
  padding: 14px;
  background: #f1f8f7;
  transform: rotate(4deg);
}

.insight-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 12px;
}

.insight-days span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #adddd6;
}

.insight-days .is-empty { background: rgb(130 167 173 / 14%); }
.insight-days .tone-0 { background: #adddd6; }
.insight-days .tone-1 { background: #e7c4b5; }
.insight-days .tone-2 { background: #d5d0ed; }
.insight-days .tone-3 { background: #a8d4df; }
.insight-days .tone-4 { background: #cce2b9; }

.insight-card-duration {
  position: relative;
  bottom: auto;
  left: auto;
  width: 100%;
  height: 150px;
  padding: 14px;
  background: #fffdfb;
  transform: rotate(-5deg);
}

.insight-card-duration figcaption strong { color: #315e75; font-size: 26px; }

.insight-bars {
  display: flex;
  align-items: end;
  gap: 7px;
  height: 58px;
  margin-top: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dce7e9;
}

.insight-bars i {
  flex: 1;
  height: 52%;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(#88d6df, #6eb8ca);
}

.insight-bars i:nth-child(4n + 1) { height: 36%; }
.insight-bars i:nth-child(4n + 2) { height: 75%; background: linear-gradient(#a6bde9, #7e9bdb); }
.insight-bars i:nth-child(6n + 3) { height: 91%; }
.insight-bars i:nth-child(7n + 4) { height: 26%; background: linear-gradient(#e9b3a0, #d99f8c); }

.insight-card-moods {
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 138px;
  padding: 14px;
  background: #f1f0fb;
  transform: rotate(5deg);
}

.insight-card-moods figcaption strong { font-size: 21px; }

.insight-wave {
  display: block;
  width: 100%;
  height: 58px;
  margin-top: 5px;
}

.use-scenarios {
  position: relative;
  z-index: 4;
  overflow: visible;
  min-width: 0;
  margin-top: 0;
  grid-column: 1 / -1;
  grid-row: 2;
}

.scenario-heading {
  margin-bottom: 17px;
  text-align: left;
}

.scenario-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 580;
  line-height: 1.3;
  letter-spacing: -.035em;
}

.use-scenarios ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 164px));
  justify-content: space-between;
  gap: 11px;
  list-style: none;
}

.scenario-entry { min-width: 0; }

.scenario-item {
  --scenario-wash: #f2f7f5;
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #e4ece9;
  border-radius: 17px;
  background: var(--scenario-wash);
  color: #325f68;
  text-align: center;
  font: inherit;
  outline: none;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.scenario-item:hover,
.scenario-item:focus-visible {
  z-index: 6;
  transform: translateY(-3px);
  border-color: #cfdfda;
  background: #edf5f2;
  box-shadow: 0 16px 34px rgb(45 85 100 / 10%);
}

.scenario-item:focus-visible { outline: 2px solid rgb(38 113 150 / 58%); outline-offset: 4px; }

.scenario-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 82%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%);
}

.scenario-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.scenario-icon,
.scenario-item > strong {
  transition: opacity 150ms ease, transform 180ms ease;
}

.scenario-description {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: auto;
  margin: 0;
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  visibility: hidden;
  border-radius: inherit;
  background: #edf5f2;
  color: #4d6571;
  font-size: clamp(10px, .76vw, 12px);
  font-weight: 430;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
  transition: opacity 150ms ease, transform 180ms ease, visibility 150ms;
}

.scenario-item:hover .scenario-description,
.scenario-item:focus .scenario-description,
.scenario-item.is-open .scenario-description {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.scenario-item:hover > .scenario-icon,
.scenario-item:hover > strong,
.scenario-item:focus > .scenario-icon,
.scenario-item:focus > strong,
.scenario-item.is-open > .scenario-icon,
.scenario-item.is-open > strong {
  opacity: 0;
  transform: translateY(-3px);
}

.scenario-item strong { color: var(--ink); font-size: 16px; font-weight: 620; }
.scenario-entry:nth-child(2) .scenario-item,
.scenario-entry:nth-child(5) .scenario-item { --scenario-wash: #f7f6f1; }
.scenario-entry:nth-child(3) .scenario-item,
.scenario-entry:nth-child(6) .scenario-item { --scenario-wash: #f3f5f8; }

.closing {
  min-height: 0;
  padding: clamp(76px, 8vw, 116px) 24px;
  border-top: 1px solid rgb(75 107 132 / 10%);
  background: #f8fafb;
}

.closing-inner {
  width: min(880px, 100%);
  margin: 0 auto;
  text-align: center;
}

.closing-inner p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 460;
  line-height: 1.65;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* 二级品牌页采用公众号式单栏文章，原图与正文共享同一阅读宽度。 */
.about-site { background: #fff; }
/* 白色首屏下提高页头链接对比度，移动端 14px 文本仍满足 AA。 */
.about-site .site-header nav { color: #5c6872; }

.about-story,
.about-actions,
.about-return {
  width: min(820px, calc(100vw - 48px));
  margin: 0 auto;
}

.about-story { padding: 24px 0 112px; }

/* 页面标题只提供文档结构；正文直接从 App 原图开始，避免重复的故事标题。 */
.about-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.about-hero-art {
  width: 100%;
  margin: 0 0 58px;
  overflow: hidden;
  border-radius: 16px;
  background: #d7eeeb;
}

.about-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

.about-prose p {
  margin: 0 0 29px;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 2;
}

.about-prose p:last-child { margin-bottom: 0; }

.about-actions {
  margin-bottom: 82px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.about-action {
  min-width: 0;
  min-height: 208px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #e0eaed;
  border-radius: 23px;
  background: linear-gradient(145deg, #f1f8f8, #e9f2f7);
}

.about-action h2 { margin: 0 0 18px; font-size: 21px; font-weight: 620; }
.about-action p { margin: 0 0 16px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.about-action a { margin-top: auto; color: var(--blue-deep); font-size: 16px; font-weight: 620; overflow-wrap: anywhere; }
.about-action a:hover, .about-action a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.about-action a span { margin-left: 8px; }

.about-return { padding-bottom: 118px; text-align: center; }
.about-return a { padding: 12px 0; border-bottom: 1px solid var(--blue-deep); color: var(--blue-deep); font-size: 16px; font-weight: 620; }
.about-return a:hover, .about-return a:focus-visible { color: #1a5278; }

@media (min-width: 951px) and (max-width: 1100px) {
  /* 中等桌面保留左右交替，同时收紧手机与卡片的宽度。 */
  .timer-art > .native-screen { left: 0; width: 235px; }
  .timer-ripple { right: -150px; }
  .timer-mode-grid { width: 174px; gap: 8px; }
  .timer-mode-frame { height: 88px; border-radius: 15px; }
  .journal-cluster { height: 575px; }
  .native-screen-journal { width: 270px; }
  .journal-mood-panel { right: 18px; bottom: 45px; width: 230px; }
  .sound-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sound-more { grid-column: auto; }
  .value-insights .value-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; }
  .insights-art { height: 560px; }
  .native-screen-insights { left: calc(100% - 240px); width: 235px; }
  .insight-card-grid { top: 40px; width: 155px; gap: 9px; }
  .insight-card { padding: 11px; border-radius: 16px; }
  .insight-card-calendar { height: 135px; }
  .insight-card-duration { height: 125px; }
  .insight-card-moods { height: 115px; }
  .insight-days { gap: 3px; margin-top: 9px; }
  .insight-days span { width: 8px; height: 8px; }
  .insight-card figcaption strong { font-size: 21px; }
  .insight-card-duration figcaption strong { font-size: 20px; }
  .insight-card-moods figcaption strong { font-size: 17px; }
  .insight-bars, .insight-wave { height: 42px; }
}

@media (max-width: 950px) {
  .brand-intro-inner {
    padding: 78px 0 72px;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-rows: auto auto;
    column-gap: 36px;
    row-gap: 52px;
  }

  .brand-intro-copy { grid-column: 2; grid-row: 1; }
  .brand-intro-art {
    aspect-ratio: 1;
    grid-column: 1;
    grid-row: 1;
    border-radius: 22px;
  }
  .brand-intro-art img { object-position: 50% 74%; }
  .use-scenarios { grid-column: 1 / -1; grid-row: 2; }

  .brand-intro-lead { max-width: 670px; }

  .about-story { padding: 108px 0 96px; }

  .value-inner,
  .value-journal .value-inner,
  .value-insights .value-inner,
  .value-sound .value-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    padding: 84px 0;
  }

  .value-copy { max-width: 680px; }

  .timer-art { width: min(100%, 590px); min-height: 560px; margin: 0 auto; align-self: center; }
  .timer-ripple { width: min(80vw, 570px); right: -170px; }
  .timer-art > .native-screen { width: 270px; }

  .journal-stage { display: flex; justify-content: center; }

  .native-screen-sound { width: 250px; align-self: center; }
  .value-sound .value-inner { padding: 88px 0 115px; }
  .sound-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sound-more { grid-column: auto; }
  .insights-art { width: min(100%, 520px); margin: 0 auto; }

  .use-scenarios { margin-top: 0; }
  /* 平板继续保持单排入口，横向滚动比增加第二行更利于控制模块高度。 */
  .use-scenarios ul {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .scenario-entry { flex: 0 0 144px; scroll-snap-align: start; }
}

@media (max-width: 760px) {
  /* 窄屏把页头唯一的内容入口指向四种体验；下载仍在右侧常驻。 */
  .site-header nav a:first-child { display: none; }
  .site-header nav a:nth-child(2) { display: block; }

  .brand-intro,
  .value-section { scroll-margin-top: 68px; }

  .brand-intro-inner {
    padding: 66px 0 62px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 28px;
  }
  .brand-intro-copy { grid-column: 1; grid-row: 1; }
  .brand-intro-art {
    aspect-ratio: 1;
    grid-column: 1;
    grid-row: 2;
    border-radius: 18px;
  }
  .brand-intro-art img { object-position: 50% 74%; }
  .use-scenarios { grid-column: 1; grid-row: 3; }
  .brand-intro h2 { font-size: clamp(32px, 8vw, 40px); }
  .brand-intro-summary { margin-top: 20px; }
  .brand-intro-lead { font-size: 16px; line-height: 1.75; }
  .brand-intro-link { margin-top: 20px; font-size: 15px; }

  .about-story { width: calc(100vw - 40px); padding: 22px 0 78px; }
  .about-hero-art { margin-bottom: 38px; border-radius: 12px; }
  .about-prose p { font-size: 17px; line-height: 1.85; }
  .about-actions,
  .about-return { width: calc(100vw - 40px); }
  .about-actions { grid-template-columns: 1fr; gap: 13px; margin-bottom: 62px; }
  .about-action { min-height: 170px; padding: 27px; border-radius: 17px; }
  .about-return { padding-bottom: 90px; }

  .value-inner,
  .value-journal .value-inner,
  .value-insights .value-inner { padding: 76px 0; gap: 30px; }

  .value-index { margin-bottom: 18px; }
  .value-copy h2 { font-size: clamp(28px, 7.2vw, 34px); line-height: 1.28; }
  .value-lead { margin-top: 20px; font-size: 17px; line-height: 1.7; }
  .value-detail { margin-top: 22px; font-size: 12px; }

  .timer-art { min-height: 440px; }
  .timer-art > .native-screen { left: 0; width: min(55vw, 205px); }
  .timer-mode-grid {
    right: 0;
    width: min(31vw, 112px);
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .timer-mode-card { gap: 3px; }
  .timer-mode-frame { height: 62px; border-radius: 13px; }
  .timer-mode-card figcaption { padding: 0 2px; font-size: 9px; }
  .timer-ripple { width: min(96vw, 490px); right: clamp(-135px, -32vw, -105px); }

  .value-journal .value-inner { min-height: 0; }
  .value-journal::after { background: linear-gradient(180deg, rgb(12 31 41 / 79%), rgb(12 31 41 / 56%) 55%, rgb(12 31 41 / 35%)); }
  .journal-cluster { width: min(100%, 370px); height: auto; display: block; }
  .native-screen-journal { position: relative; top: auto; left: auto; width: min(245px, 62vw); }
  /* 情绪卡锁在截图右下角以内，避免在窄屏形成额外的长尾空白。 */
  .journal-mood-panel { right: 0; bottom: 18px; width: min(58vw, 210px); }

  .value-sound .value-inner { padding: 78px 0 85px; }
  .native-screen-sound { width: min(62vw, 245px); }
  /* 手机端用单排照片带压缩页面长度，并以露出的下一张卡提示可横向浏览。 */
  .sound-gallery {
    margin-top: 0;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .sound-scene,
  .sound-more {
    flex: 0 0 clamp(136px, 42%, 158px);
    scroll-snap-align: start;
  }
  .sound-scene { border-radius: 13px; }
  .sound-scene figcaption { left: 12px; bottom: 12px; font-size: 15px; }
  .sound-more { border-radius: 13px; }

  /* 手机上先看清真实截图，再以一宽两窄的独立示意卡延续品牌画面。 */
  .insights-art { display: flex; flex-direction: column; align-items: center; gap: 22px; height: auto; }
  .native-screen-insights { position: relative; top: auto; left: auto; width: min(74vw, 300px); transform: none; }
  .insight-card-grid {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    width: 100%;
    pointer-events: auto;
  }
  .insight-card { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: 150px; padding: 13px; border-radius: 17px; transform: none; }
  .insight-card figcaption span { font-size: 11px; }
  .insight-card figcaption strong,
  .insight-card-duration figcaption strong,
  .insight-card-moods figcaption strong { font-size: clamp(18px, 5.2vw, 24px); }
  .insight-card-calendar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(90px, .45fr) minmax(0, 1fr); align-items: center; gap: 10px; height: 138px; }
  .insight-days { justify-items: center; margin-top: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 3px; }
  .insight-days span { width: clamp(11px, 3.7vw, 16px); height: clamp(11px, 3.7vw, 16px); }
  .insight-bars { gap: 4px; height: 66px; margin-top: 12px; }
  .insight-card-moods { background: #f1f0fb; }
  .insight-wave { height: 75px; margin-top: 10px; }
  .use-scenarios { margin-top: 16px; }
  .scenario-heading { margin-bottom: 16px; }
  .scenario-heading h3 { font-size: 20px; }
  .use-scenarios ul { gap: 9px; }
  .scenario-entry { flex-basis: 142px; }
  .scenario-item { min-height: 0; padding: 14px 12px; border-radius: 15px; }
  .scenario-icon { width: 52px; height: 52px; }
  .scenario-item strong { font-size: 15px; }

  .closing { padding: 64px 20px; }
  .closing-inner p { font-size: 20px; line-height: 1.7; }
}

/* 触屏点击后由 li 的焦点态在原卡内替换说明，保持方卡和单排高度。 */
@media (hover: none) {
  .scenario-item:hover { transform: none; }
}

@media (max-width: 380px) {
  .site-header nav a:nth-child(2) { display: none; }

  .mood-choice { font-size: 12px; }
}

/* 只在支持观察器且未要求减少动态效果时做轻微入场与涟漪呼吸。 */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .value-section.reveal .value-copy,
  .motion-ready .value-section.reveal .timer-art,
  .motion-ready .value-section.reveal .native-screen-sound,
  .motion-ready .value-section.reveal .native-screen-insights,
  .motion-ready .value-section.reveal .sound-gallery,
  .motion-ready .value-section.reveal .insight-card-grid {
    transform: translateY(28px);
    transition: transform 800ms cubic-bezier(.2,.7,.25,1);
  }

  .motion-ready .value-section.reveal.is-visible .value-copy,
  .motion-ready .value-section.reveal.is-visible .timer-art,
  .motion-ready .value-section.reveal.is-visible .native-screen-sound,
  .motion-ready .value-section.reveal.is-visible .native-screen-insights,
  .motion-ready .value-section.reveal.is-visible .sound-gallery,
  .motion-ready .value-section.reveal.is-visible .insight-card-grid {
    transform: translateY(0);
  }

  .timer-ripple span { animation: ripple-breathe 7s ease-in-out infinite; }
  .timer-ripple span:nth-child(2) { animation-delay: 700ms; }
  .timer-ripple span:nth-child(3) { animation-delay: 1400ms; }

  @keyframes ripple-breathe {
    50% { opacity: .45; transform: scale(1.08); }
  }

}