/* V5 — immersive hero carousel */
.hero {
  isolation: isolate;
  min-height: 100svh;
  padding: calc(104px + var(--safe-top)) 20px calc(32px + var(--safe-bottom));
  background: #000;
}
.hero::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.52) 27%, rgba(0,0,0,.10) 56%, rgba(0,0,0,.58) 100%);
  content: "";
  pointer-events: none;
}
.hero-copy {
  z-index: 4;
  width: min(100%, 500px);
  margin: 0 auto;
  padding-top: 5.5vh;
  text-align: center;
  transform: none;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: .08em;
}
.hero .eyebrow::before {
  width: 19px;
  height: 19px;
  border: 2px solid #ff6b00;
  border-radius: 6px 11px 6px 11px;
  content: "";
  transform: rotate(-28deg);
}
.hero h1 {
  margin-bottom: 23px;
  color: #fff;
  font-size: clamp(54px, 15vw, 75px);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: .035em;
}
.hero h1 span { color: #fff; }
.hero-deck {
  color: rgba(255,255,255,.76) !important;
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 420;
  letter-spacing: .06em;
}
.hero-actions { gap: 18px; margin-top: 38px; }
.hero-actions .button {
  min-height: 46px;
  padding: 0 22px;
  background: #ff6b00;
  box-shadow: none;
  font-size: 16px;
}
.hero-actions .text-button { padding: 10px 0; color: #fff; font-size: 16px; }
.hero .scroll-hint {
  position: relative;
  z-index: 4;
  margin-top: auto;
  padding-top: 20px;
  color: rgba(255,255,255,.56);
}
.hero-reveal-line { display: none !important; }

@media (min-width:760px) {
  .hero { min-height: 900px; }
  .hero-copy { padding-top: 7vh; }
}

/* SVG typography alignment — source artboard 1290 × 2796 */
.hero-copy {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: initial;
  transform: none !important;
}
.hero .eyebrow {
  position: absolute;
  top: 12.4%;
  left: 50%;
  margin: 0;
  font-size: clamp(19px, 5.365vw, 26px);
  letter-spacing: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.hero h1 {
  position: absolute;
  top: 17.6%;
  left: 17.2%;
  width: 70%;
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 13.565vw, 68px);
  font-weight: 800;
  line-height: 1.244;
  letter-spacing: .3em;
  white-space: nowrap;
}
.hero h1 span { color: #fff; }
.hero-deck {
  position: absolute;
  top: 35.15%;
  left: 50%;
  width: max-content;
  max-width: 90%;
  margin: 0;
  color: rgba(255,255,255,.8) !important;
  font-size: clamp(14px, 3.605vw, 17px);
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.2;
  transform: translateX(-50%);
  white-space: nowrap;
}
.hero-actions {
  position: absolute;
  top: 43.4%;
  left: 50%;
  gap: 20px;
  width: max-content;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.hero-actions .button {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: clamp(14px, 3.8vw, 17px);
  letter-spacing: .06em;
}
.hero-actions .text-button {
  padding: 9px 0;
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 700;
  letter-spacing: .06em;
}

@media (max-width: 350px) {
  .hero h1 { font-size: 47px; }
  .hero .eyebrow { font-size: 18px; }
  .hero-actions { gap: 15px; }
}
.hero-copy { pointer-events: none; }
.hero-copy .hero-actions { pointer-events: auto; }

/* Official bird mark */
.hero .eyebrow::before { display: none; }
.hero .eyebrow .hero-brand-mark { width: 25px; height: 25px; object-fit: contain; }
.hero .eyebrow span { font-family: system-ui, sans-serif; font-weight: 400; letter-spacing: .06em; }

/* SVG includes the complete wordmark; no duplicate HTML text. */
.hero .eyebrow { display: block; }
.hero .eyebrow .hero-brand-mark { display: block; width: min(42vw, 178px); height: auto; }
.hero .eyebrow span { display: none; }

/* Screen 02 typography — source artboard 1290 × 2796 */
.colors .section-copy {
  width: auto;
  margin-right: 0;
  margin-left: 0;
}
.colors .section-copy h2 {
  margin-bottom: 18px;
  color: #1a1a1a;
  font-size: clamp(42px, 11.715vw, 58px);
  font-weight: 800;
  line-height: 1.164;
  letter-spacing: .06em;
}
.colors .section-copy p {
  color: #1a1a1a;
  font-size: clamp(13px, 3.45vw, 17px);
  font-weight: 400;
  line-height: 1.704;
  letter-spacing: .06em;
}
/* Remove section category labels */
.hardware .section-copy > .eyebrow,
.daily .section-copy > .eyebrow { display: none; }

/* Screen 03 onward — aligned to Screen 02 typography */
.hardware .section-copy h2,
.daily .section-copy h2,
.emotion .emotion-intro h2,
.health .section-copy h2,
.response .section-copy h2,
.app .section-copy h2,
.buy .section-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(42px, 11.715vw, 58px);
  font-weight: 800;
  line-height: 1.164;
  letter-spacing: .06em;
}
.hardware .section-copy > p:not(.eyebrow),
.daily .section-copy > p:not(.eyebrow),
.emotion .emotion-intro > p,
.health .section-copy > p:not(.eyebrow),
.response .section-copy > p:not(.eyebrow),
.app .section-copy > p:not(.eyebrow),
.buy .section-copy > p:not(.eyebrow) {
  font-size: clamp(13px, 3.45vw, 17px);
  font-weight: 400;
  line-height: 1.704;
  letter-spacing: .06em;
}

/* Screen 03 — reference card layout */
.hardware .hardware-lead-card {
  position: relative;
  display: flex;
  min-height: 205px;
  align-items: flex-start;
  overflow: hidden;
  margin: 0 auto 12px;
  padding: 27px 24px;
  border-radius: 24px;
  background: #f3f3f5;
}
.hardware-lead-copy { position: relative; z-index: 2; }
.hardware .hardware-lead-card h3,
.hardware .hardware-card h3 {
  margin: 0;
  color: #171719;
  font-size: clamp(17px, 4.8vw, 23px);
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: .08em;
}
.hardware .hardware-lead-card p,
.hardware .hardware-card p {
  position: relative;
  z-index: 2;
  margin-top: 13px;
  color: #66666c;
  font-size: clamp(12px, 3.25vw, 15px);
  line-height: 1.55;
  letter-spacing: .08em;
}
.hardware .hardware-lead-card img {
  position: absolute;
  right: -18px;
  bottom: -78px;
  width: 64%;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 14px 14px rgba(0,0,0,.08));
}
.hardware .hardware-grid { gap: 12px; }
.hardware .hardware-card {
  position: relative;
  min-height: 228px;
  overflow: hidden;
  padding: 26px 21px;
  border-radius: 22px;
  background: #f3f3f5;
}
.hardware .hardware-card::before,
.hardware .hardware-card::after { display: none; }
.hardware .hardware-card p { margin-top: 13px; }
.hardware .hardware-card img {
  position: absolute;
  right: -9%;
  bottom: -15%;
  width: 100%;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 13px 11px rgba(0,0,0,.08));
}
.hardware .display-card img { right: -18%; bottom: -5%; width: 126%; transform: rotate(-10deg); }
.hardware .protect-card img { right: -25%; bottom: -18%; width: 132%; transform: rotate(-18deg); }
.hardware .sport-card { background: #f3f3f5; }
.hardware .sport-data {
  position: absolute;
  right: 13px;
  bottom: 14px;
  left: 13px;
  height: 94px;
  border: 9px solid #ff6b00;
  border-right-color: rgba(255,107,0,.16);
  border-radius: 29px;
  color: #1d1d1f;
  text-align: center;
  transform: rotate(-2deg);
}
.hardware .sport-data span { position: absolute; top: -20px; right: 28px; color: #66666c; font-size: 9px; }
.hardware .sport-data strong { display: block; margin-top: 24px; font-size: 28px; letter-spacing: -.04em; }
.hardware .sport-data small { display: block; margin-top: 1px; color: #a1a1a6; font-size: 9px; line-height: 1.4; }
@media (min-width:760px) {
  .hardware .hardware-lead-card { min-height: 270px; }
  .hardware .hardware-card { min-height: 270px; }
}
/* Screen 03 — supplied card imagery and SVG type scale */
.hardware .hardware-lead-card h3,
.hardware .hardware-card h3 {
  font-size: clamp(11px, 2.742vw, 14px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .04em;
}
.hardware .hardware-lead-card p,
.hardware .hardware-card p {
  margin-top: 10px;
  font-size: clamp(10px, 2.326vw, 12px);
  font-weight: 400;
  line-height: 1.444;
  letter-spacing: .1em;
}
.hardware .hardware-lead-card img {
  right: -12%;
  bottom: -20%;
  width: 65%;
  max-width: none;
  mix-blend-mode: multiply;
}
.hardware .emotion-card img {
  right: -2%;
  bottom: -4%;
  width: 93%;
  transform: none;
}
.hardware .display-card img {
  right: -27%;
  bottom: -2%;
  width: 136%;
  transform: none;
}
.hardware .protect-card img {
  right: -24%;
  bottom: -5%;
  width: 142%;
  transform: none;
}
.hardware .sport-data-image {
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: 94%;
  height: auto;
  mix-blend-mode: multiply;
  filter: none;
}
/* Exact type mapping from 首页demo_画板 1 副本 5.svg (1290px artboard) */
.hardware .hardware-card h3 {
  font-size: 2.742vw; /* 35.37px / 1290 */
  font-weight: 600;
  line-height: 1.225;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hardware .hardware-lead-card h3 {
  font-size: 3.982vw; /* 51.37px / 1290 */
  font-weight: 600;
  line-height: 1.318;
  letter-spacing: .2em;
}
.hardware .hardware-lead-card p,
.hardware .hardware-card p {
  font-size: 2.326vw; /* 30px / 1290 */
  font-weight: 400;
  line-height: 1.444;
  letter-spacing: .1em;
}
/* Screen 03 — mobile composition reset, matched to approved JPG */
.hardware .hardware-lead-card {
  min-height: 112px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: 18px;
}
.hardware .hardware-card {
  min-height: 152px;
  padding: 16px 15px;
  border-radius: 18px;
}
.hardware .hardware-lead-card h3,
.hardware .hardware-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #151517;
}
.hardware .hardware-lead-card h3 {
  font-size: 15px;
  line-height: 1.38;
  letter-spacing: .12em;
}
.hardware .hardware-card h3 {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hardware .hardware-lead-card p,
.hardware .hardware-card p {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  color: #66666c;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .08em;
}
.hardware .hardware-lead-card img,
.hardware .hardware-card img {
  z-index: 0;
  pointer-events: none;
}
.hardware .hardware-lead-card img {
  right: -7%;
  bottom: -43%;
  width: 52%;
}
.hardware .emotion-card img {
  right: 0;
  bottom: -12%;
  width: 83%;
}
.hardware .display-card img {
  right: -21%;
  bottom: -5%;
  width: 124%;
}
.hardware .protect-card img {
  right: -18%;
  bottom: -6%;
  width: 129%;
}
.hardware .sport-data-image {
  z-index: 1;
  right: 5%;
  bottom: 3%;
  width: 90%;
}
@media (min-width: 760px) {
  .hardware .hardware-lead-card { min-height: 180px; padding: 26px 28px; }
  .hardware .hardware-card { min-height: 225px; padding: 25px 23px; }
  .hardware .hardware-lead-card h3 { font-size: 24px; }
  .hardware .hardware-card h3 { font-size: 18px; }
  .hardware .hardware-lead-card p,
  .hardware .hardware-card p { font-size: 14px; }
}
/* Screen 03 — final supplied composited assets */
.hardware .hardware-lead-card,
.hardware .hardware-card {
  background: #f3f3f5;
}
.hardware .hardware-lead-card > img,
.hardware .hardware-card > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: none;
  mix-blend-mode: normal;
  filter: none;
}
.hardware .hardware-lead-copy,
.hardware .hardware-card h3,
.hardware .hardware-card p {
  position: relative;
  z-index: 2;
}
.hardware .hardware-lead-card h3,
.hardware .hardware-card h3 {
  text-shadow: none;
}
.hardware .hardware-card p {
  max-width: 82%;
}
/* Screen 04 — Apple-style focused feature carousel */
.daily .section-copy > .eyebrow { display: none; }
.daily .section-copy { margin-bottom: 34px; }
.daily-carousel {
  width: calc(100% + 40px);
  margin-left: -20px;
  overflow: hidden;
}
.daily-carousel-track {
  display: flex;
  gap: 12px;
  padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.daily-carousel-track::-webkit-scrollbar { display: none; }
.daily-slide {
  position: relative;
  flex: 0 0 calc(100% - 54px);
  height: 360px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 0;
  border-radius: 30px;
  background: #f5f5f7;
  color: #1d1d1f;
  text-align: left;
}
.daily-slide > p {
  position: relative;
  z-index: 2;
  width: 76%;
  margin: 0;
  padding: 28px 26px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.48;
  letter-spacing: -.02em;
}
.daily-watch-ui {
  position: absolute;
  right: 25px;
  bottom: -8px;
  width: 222px;
  height: 222px;
  border: 12px solid #27272a;
  border-radius: 56px;
  box-shadow: 0 20px 28px rgba(0,0,0,.2), inset 0 0 0 3px rgba(255,255,255,.12);
  transform: rotate(-18deg);
}
.daily-watch-ui::after { position:absolute; top:48px; right:-22px; width:16px; height:42px; border-radius:10px; background:#37373a; content:""; }
.call-ui { background: radial-gradient(circle at 35% 20%, #2f73ff, #07172e 70%); }
.call-ui span,.music-ui span { position:absolute; top:32px; left:26px; color:#b7d0ff; font-size:11px; }
.call-ui strong { position:absolute; top:64px; left:26px; color:#fff; font-size:22px; }
.call-ui i { position:absolute; right:28px; bottom:32px; width:52px; height:52px; border-radius:50%; background:#32d583; }
.sport-ui { background: radial-gradient(circle at 45% 39%, #13486e, #071624 70%); color:#fff; }
.sport-ui b { position:absolute; top:26px; left:28px; color:#aecaff; font-size:13px; }
.sport-ui strong { position:absolute; top:74px; left:28px; font-size:52px; letter-spacing:-.07em; }
.sport-ui span { position:absolute; top:132px; left:33px; color:#9bb8d6; font-size:12px; }
.sport-ui i { position:absolute; right:28px; bottom:34px; width:62px; height:62px; border:9px solid #26e3c1; border-top-color:#ff7b63; border-radius:50%; }
.route-ui { background:#e9eef4; }
.route-ui i { position:absolute; inset:25px; border:6px solid #2b7cff; border-right-color:#8ad2ff; border-radius:42px 54px 44px 48px; transform:rotate(-35deg); }
.route-ui b { position:absolute; top:70px; left:81px; width:28px; height:28px; border-radius:50% 50% 50% 0; background:#ff6b3d; transform:rotate(-45deg); }
.route-ui strong { position:absolute; right:20px; bottom:25px; left:20px; color:#38414a; font-size:12px; text-align:center; transform:rotate(18deg); }
.music-ui { background:linear-gradient(145deg,#34265c,#10101a 68%); color:#fff; }
.music-ui strong { position:absolute; top:65px; left:25px; font-size:22px; }
.music-ui i { position:absolute; top:110px; right:24px; left:24px; height:4px; border-radius:5px; background:linear-gradient(90deg,#ff6961 45%,rgba(255,255,255,.2) 45%); }
.music-ui b { position:absolute; right:30px; bottom:28px; font-size:33px; }
.daily-carousel-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px; }
.daily-page-dots { display:flex; align-items:center; gap:12px; height:54px; padding:0 22px; border-radius:999px; background:#ededf2; }
.daily-page-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#8e8e93; transition:width 280ms ease, background 280ms ease; }
.daily-page-dots button.active { width:30px; border-radius:99px; background:#6e6e73; }
.daily-play { display:grid; width:54px; height:54px; place-items:center; padding:0; border:0; border-radius:50%; background:#ededf2; color:#1d1d1f; }
.daily-play:active { transform:scale(.94); }
.daily-play span { margin-left:2px; font-size:18px; }
.daily .section-closer { display:none; }
@media (min-width:760px) {
  .daily-carousel { width:min(100%,760px); margin-inline:auto; }
  .daily-carousel-track { padding:0; }
  .daily-slide { flex-basis:calc(100% - 90px); height:470px; }
  .daily-watch-ui { width:300px; height:300px; border-radius:72px; }
}
@media (prefers-reduced-motion:reduce) {
  .daily-page-dots button { transition:none; }
}
/* Screen 04 — hero-style linear pagination */
.daily-carousel-controls {
  justify-content: flex-start;
  margin: 20px 0 0 20px;
}
.daily-page-dots {
  gap: 10px;
  height: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.daily-page-dots button,
.daily-page-dots button.active {
  width: 26px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(29,29,31,.28);
  transform: scaleX(1);
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-out);
}
.daily-page-dots button.active {
  width: 26px;
  background: #1d1d1f;
  transform: scaleX(1.77);
}
.daily-play { display: none; }
@media (prefers-reduced-motion:reduce) {
  .daily-page-dots button,
  .daily-page-dots button.active { transition:none; }
}
/* Screen 04 — supplied lifestyle photography */
.daily-slide > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.daily-slide::after { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.16) 35%,rgba(0,0,0,0) 66%); content:""; pointer-events:none; }
.daily-slide > p { z-index:2; color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.28); }
.daily-slide .daily-watch-ui { display:none; }
.daily-carousel-controls { justify-content:center; margin:20px 0 0; }
.daily-page-dots button,.daily-page-dots button.active { background:rgba(29,29,31,.32); }
.daily-page-dots button.active { background:#1d1d1f; }
/* Screen 05 — emotion diary gradient background */
.emotion {
  background: #edf2fb url("./assets/emotion-diary-gradient.jpg") center / cover no-repeat;
  color: #1d1d1f;
}
.emotion::before { background: transparent; opacity: 0; }
.emotion .emotion-intro h2,
.emotion .emotion-intro h2 span { color: #19191b; }
.emotion .emotion-intro > p { color: #61616a; }
.emotion-watch img { filter: drop-shadow(0 28px 38px rgba(70,83,115,.28)); }
.emotion-orbit { border-color: rgba(74,89,151,.16); }
.orbit-two { border-color: rgba(138,105,185,.2); }
.emotion-readout {
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 32px rgba(76,87,117,.12);
}
.emotion-readout,
.emotion-readout strong { color: #1d1d1f; }
.emotion-readout span,
.emotion-readout small { color: #676771; }
.emotion-chips span {
  border-color: rgba(75,86,120,.1);
  background: rgba(255,255,255,.52);
  color: #5e6070;
}
.emotion .mood-block h3 { color: #1d1d1f; }
.emotion .disclaimer { color: rgba(50,53,67,.58) !important; }
.emotion .emotion-intro > .eyebrow { display: none; }

/* Screen 05 — draggable emotion spectrum */
.emotion .emotion-watch {
  min-height: 286px;
  margin-top: 4px;
}
.emotion .emotion-watch img {
  width: min(58vw, 245px);
  filter: drop-shadow(0 20px 26px rgba(66,79,106,.22));
}
.emotion-slider {
  width: min(100%, 390px);
  margin: -2px auto 0;
  text-align: center;
  --mood-position: 58%;
  --mood-color: #55b88e;
}
.emotion-category-labels{display:grid;grid-template-columns:repeat(4,1fr);margin:0 6px 10px;color:#9a9da8;font-size:11px;font-weight:650;letter-spacing:.04em}
.emotion-category-labels span:first-child{text-align:left}
.emotion-category-labels span:last-child{text-align:right}
.emotion-state-copy { display: grid; gap: 10px; margin-bottom: 22px; }
.emotion-state-copy strong { color: #1d1d1f; font-size: 23px; font-weight: 760; letter-spacing: -.035em; }
.emotion-state-copy small { color: #6d7180; font-size: 13px; font-weight: 400; letter-spacing: .03em; line-height: 1.5; }
.emotion-range {
  position: relative;
  height: 30px;
  margin: 0 6px;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.emotion-range:active { cursor: grabbing; }
.emotion-range:focus-visible { outline: 3px solid rgba(85,184,142,.28); outline-offset: 7px; border-radius: 12px; }
.emotion-range-line {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,#f4bda6 0 12%,#eb444a 20%,#bfd1de 31%,#5f87a8 43%,#c4e5d7 51%,#55b88e 62%,#d7edf3 70%,#ffba7d 81%,#ff6b00 100%);
  transform: translateY(-50%);
  box-shadow: 0 5px 16px rgba(77,103,126,.14);
}
.emotion-range-knob {
  position: absolute;
  top: 50%;
  left: var(--mood-position);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--mood-color);
  box-shadow: 0 3px 10px rgba(56,69,94,.24);
  transform: translate(-50%,-50%);
  transition: left 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease;
}
.emotion-range.is-dragging .emotion-range-knob { transition: none; }
.emotion .emotion-chips { margin: 15px auto 46px; }
.emotion .emotion-chips span { background: rgba(255,255,255,.6); }
.emotion .mood-block,
.emotion .emotion-spectrum { display: none; }
@media (prefers-reduced-motion: reduce) {
  .emotion-range-knob { transition: none; }
}
/* Final screen title follows the hero title rhythm */
.buy #buy-title{font-size:clamp(30px,8vw,46px);font-weight:760;line-height:1.1;letter-spacing:.12em;white-space:nowrap}


/* Screen 03: taller cards and decoded copy */
.hardware .hardware-lead-card { min-height: 132px; }
.hardware .hardware-card {
  min-height: 184px;
  padding: 18px 16px;
}
.hardware .hardware-card h3 {
  max-width: 90%;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  text-wrap: balance;
}
.hardware .hardware-lead-card p,
.hardware .hardware-card p {
  max-width: 90%;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
}
@media (min-width: 760px) {
  .hardware .hardware-lead-card { min-height: 210px; }
  .hardware .hardware-card { min-height: 270px; }
  .hardware .hardware-card h3 { font-size: 18px; }
  .hardware .hardware-lead-card p,
  .hardware .hardware-card p { font-size: 14px; }
}

/* Screen 05: align heading and supporting copy with other sections */
.emotion .emotion-intro {
  text-align: left;
}

/* Screen 05: clickable emotion detail pages */
.emotion .emotion-chips button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(75,86,120,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.64);
  color: #555760;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 5px 16px rgba(76,87,117,.06);
  transition: transform 140ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  cursor: pointer;
}
.emotion .emotion-chips button:active { transform: scale(.97); }
/* 情绪页面：居中模态弹框（替代底部抽屉） */
.emotion-page-sheet{
  left:50%;top:50%;right:auto;bottom:auto;
  width:min(92vw,540px);
  max-height:min(88svh,820px);
  padding:12px 20px 22px;
  border-radius:28px;
  background:rgba(250,250,252,.98);
  box-shadow:0 30px 90px rgba(20,22,30,.32);
  transform:translate(-50%,-46%) scale(.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,transform .4s cubic-bezier(.22,.8,.22,1),visibility 0s linear .4s;
}
.emotion-page-sheet.open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s ease,transform .4s cubic-bezier(.22,.8,.22,1),visibility 0s;
}
.emotion-page-sheet .sheet-handle{display:none}
.emotion-page-sheet .sheet-head{position:relative;min-height:46px;justify-content:center;border-bottom:1px solid rgba(29,29,31,.06);margin-bottom:12px}
.emotion-page-sheet .sheet-head button{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.emotion-page-content{
  overflow:hidden;
  display:flex;
  justify-content:center;
  height:min(70svh,620px);
  border:1px solid rgba(29,29,31,.07);
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 50px rgba(29,29,31,.08);
}
.emotion-page-content img{
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  background:#fff;
}
@media (hover:hover) and (pointer:fine) {
  .emotion .emotion-chips button:hover {
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 22px rgba(76,87,117,.1);
  }
}

/* Screen 05: layered, state-driven watch face */
.emotion .emotion-watch-composite {
  position: relative;
  z-index: 2;
  width: min(58vw, 245px);
  aspect-ratio: 711 / 978;
  --face-knob-position: 56%;
  transform-origin: 50% 55%;
}
.emotion .emotion-watch .emotion-watch-base {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 20px 26px rgba(66,79,106,.22));
}
.emotion-face-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.emotion .emotion-watch .emotion-face-icon {
  position: absolute;
  z-index: 2;
  top: 27%;
  left: 50%;
  display: block;
  width: 43%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 5px 7px rgba(31,50,42,.12));
  transform: translateX(-50%);
}
.emotion-face-label {
  position: absolute;
  z-index: 3;
  top: 50.2%;
  left: 50%;
  width: 62%;
  color: #fff;
  font-size: clamp(9px,2.45vw,12px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.42);
  transform: translateX(-50%);
  white-space: nowrap;
}
.emotion-face-progress {
  position: absolute;
  z-index: 3;
  top: 54.5%;
  left: 50%;
  width: 52%;
  transform: translateX(-50%);
}
.emotion .emotion-watch .emotion-face-progress-track {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: none;
}
.emotion .emotion-watch .emotion-face-progress-knob {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--face-knob-position);
  display: block;
  width: 10.5%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
  transform: translate(-50%,-50%);
  transition: left 220ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .emotion .emotion-watch .emotion-face-progress-knob { transition: none; }
}

/* Screen 05: lower watch content and expanding active segment */
.emotion .emotion-watch-composite { --face-knob-position: 83%; }
.emotion .emotion-watch .emotion-face-icon { top: 30%; }
.emotion-face-label { top: 59%; }
.emotion-face-progress {
  top: 64%;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 7px;
}
.emotion-face-segment {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  transition: flex-grow 280ms var(--ease-out), opacity 220ms var(--ease-out);
  opacity: .28;
}
.emotion-face-segment.is-active {
  flex-grow: 1.6;
  opacity: 1;
}
.emotion-face-segment.segment-tense { background: #e64348; }
.emotion-face-segment.segment-low { background: #5f87a8; }
.emotion-face-segment.segment-calm { background: #55b88e; }
.emotion-face-segment.segment-joy { background: #ff6b00; }
.emotion .emotion-watch .emotion-face-progress-knob {
  width: 14px;
  left: var(--face-knob-position);
  transition: left 280ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .emotion-face-segment,
  .emotion .emotion-watch .emotion-face-progress-knob { transition: none; }
}
/* Sleep quality indicator: purple fill with white outline */
.sleep-quality-range::-webkit-slider-thumb {
  width: 30px;
  height: 24px;
  margin-top: 3px;
  border: 0;
  clip-path: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M1 1h28L15 23z' fill='%23fff'/%3E%3Cpath d='M4 3h22L15 19.5z' fill='%239810fa'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(54, 15, 82, .22));
  -webkit-appearance: none;
}

.sleep-quality-range::-moz-range-thumb {
  width: 30px;
  height: 24px;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M1 1h28L15 23z' fill='%23fff'/%3E%3Cpath d='M4 3h22L15 19.5z' fill='%239810fa'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(54, 15, 82, .22));
}
/* Journal voice entry rebuilt from supplied SVG */
.voice-entry-page {
  position: relative;
  display: grid;
  min-height: 430px;
  grid-template-rows: 126px 1fr auto;
  align-content: stretch;
  justify-items: stretch;
  overflow: hidden;
  padding: 14px 0 24px;
  background: #fff;
}

.voice-entry-wave {
  width: 100%;
  height: 126px;
  overflow: hidden;
}

.voice-entry-wave svg {
  display: block;
  width: calc(100% + 16px);
  height: 100%;
  margin-left: -8px;
  overflow: visible;
}

.voice-wave {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.voice-wave-back {
  opacity: .72;
  animation: voiceWaveBack 3.4s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.voice-wave-front {
  animation: voiceWaveFront 2.75s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes voiceWaveBack {
  from { transform: translate3d(-8px, -2px, 0) scaleY(.9); }
  to { transform: translate3d(6px, 3px, 0) scaleY(1.08); }
}

@keyframes voiceWaveFront {
  from { transform: translate3d(7px, 3px, 0) scaleY(1.08); }
  to { transform: translate3d(-9px, -2px, 0) scaleY(.92); }
}

.voice-entry-time {
  align-self: center;
  color: #000;
  font-size: clamp(50px, 14vw, 66px);
  font-weight: 430;
  line-height: 1;
  letter-spacing: -.045em;
  text-align: center;
}

.voice-entry-actions {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items: end;
  padding: 0 20px;
}

.voice-entry-actions span {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: #111;
}

.voice-entry-actions small {
  font-size: 10px;
  white-space: nowrap;
}

.voice-action-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #333;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
}

.voice-start .voice-action-icon {
  width: 66px;
  height: 66px;
  padding-left: 4px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff852e, #ff6a00);
  box-shadow: 0 12px 24px rgba(255, 106, 0, .22);
  color: #fff;
  font-size: 25px;
}

.voice-reset { font-size: 28px; }
.voice-save { font-size: 25px; }

@media (max-width: 420px) {
  .voice-entry-page { min-height: 410px; }
  .voice-entry-actions { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-wave { animation: none !important; }
}
/* AI companion: fixed background with separated message layers */
.ai-dialogue-stage {
  aspect-ratio: 1563 / 2445;
  background: #f7f7f7;
}

.ai-dialogue-stage .ai-dialogue-background {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ai-dialogue-stage .ai-dialogue-message {
  position: absolute;
  z-index: 2;
  left: 5.28%;
  width: 89.44%;
  height: auto;
  clip-path: none;
  opacity: 0;
  filter: none;
  pointer-events: none;
  transform-origin: 50% 65%;
  will-change: transform, opacity;
  animation: dialogueLayerPop .62s cubic-bezier(.2, .82, .25, 1) forwards;
}

.ai-dialogue-stage .message-1 { top: 8%; animation-delay: .35s; }
.ai-dialogue-stage .message-2 { top: 28.5%; animation-delay: 1.25s; }
.ai-dialogue-stage .message-3 { top: 41.5%; animation-delay: 2.15s; }
.ai-dialogue-stage .message-4 { top: 54.5%; animation-delay: 3.05s; transform-origin: 88% 50%; }
.ai-dialogue-stage .message-5 { top: 67%; animation-delay: 3.95s; }

@keyframes dialogueLayerPop {
  0% { opacity: 0; transform: translate3d(0, 13px, 0) scale(.965); }
  68% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.012); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-dialogue-stage .ai-dialogue-message {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
/* App device pair: enlarged watch overlapping the phone */
.app .pair-watch {
  z-index: 4;
  width: 290px;
  height: 365px;
  transform: translateX(8px);
}

.app .phone-frame { z-index: 2; }

@media (max-width: 420px) {
  .app .pair-watch {
    width: 270px;
    height: 340px;
    transform: translateX(8px);
  }
}

@media (min-width: 760px) {
  .app .pair-watch {
    width: 340px;
    height: 425px;
    transform: translateX(16px);
  }
}
/* App overlap correction: watch must not resize the phone grid */
.app .device-pair {
  grid-template-columns: .85fr 1fr;
}

.app .pair-watch {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(8px, -50%);
}

.app .phone-frame {
  grid-column: 2;
  justify-self: start;
}

@media (max-width: 420px) {
  .app .pair-watch { transform: translate(8px, -50%); }
}

@media (min-width: 760px) {
  .app .pair-watch { transform: translate(16px, -50%); }
}
/* Interactive journal recording demo */
.voice-entry-center {
  display: grid;
  align-self: center;
  justify-items: center;
  gap: 15px;
  padding-inline: 20px;
}

.voice-entry-center .voice-entry-time {
  align-self: auto;
  transition: color .28s ease, font-size .34s cubic-bezier(.2, .8, .2, 1), transform .34s cubic-bezier(.2, .8, .2, 1);
}

.voice-transcript {
  width: min(100%, 290px);
  padding: 14px 16px;
  border: 1px solid rgba(255, 106, 0, .16);
  border-radius: 18px;
  background: #fff7f1;
  color: #1d1d1f;
  text-align: left;
  animation: voiceTranscriptIn .42s cubic-bezier(.2, .8, .2, 1) both;
}

.voice-transcript[hidden] { display: none; }
.voice-transcript span { color: #ff6a00; font-size: 11px; font-weight: 700; }
.voice-transcript p { margin-top: 6px; color: #333338; font-size: 13px; line-height: 1.55; }

.voice-entry-page.has-transcript .voice-entry-time {
  color: #86868b;
  font-size: 28px;
  transform: translateY(2px);
}

.voice-entry-actions .voice-entry-action {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.voice-entry-action:disabled {
  cursor: default;
  opacity: .35;
}

.voice-entry-action:focus-visible {
  outline: 3px solid rgba(255, 106, 0, .24);
  outline-offset: 5px;
  border-radius: 18px;
}

.voice-entry-page.is-recording .voice-wave-back { animation-duration: 1.7s; }
.voice-entry-page.is-recording .voice-wave-front { animation-duration: 1.25s; }

.voice-entry-page.is-recording .voice-start .voice-action-icon {
  padding-left: 0;
  animation: voiceRecordPulse 1.35s ease-in-out infinite;
}

@keyframes voiceRecordPulse {
  0%, 100% { box-shadow: 0 10px 22px rgba(255, 106, 0, .2), 0 0 0 0 rgba(255, 106, 0, .24); }
  50% { box-shadow: 0 12px 25px rgba(255, 106, 0, .28), 0 0 0 9px rgba(255, 106, 0, 0); }
}

@keyframes voiceTranscriptIn {
  from { opacity: 0; transform: translateY(9px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-entry-center .voice-entry-time { transition: none; }
  .voice-transcript, .voice-entry-page.is-recording .voice-start .voice-action-icon { animation: none !important; }
}