/* ============================================================
   Pawindow Landing — v3 (reference: assets/reference-v3.png)
   ============================================================ */
:root {
  --bg: #f5ecdb;            /* L0 paper — the cream canvas (light sections) */
  --bg-soft: #faf3e5;
  --bg-card: #fefbf4;       /* L1 raised — near warm-white so cards/panels clearly lift off cream */
  --bg-trough: #ece0c8;     /* L1.5 recessed — deeper sand for insets / wells */
  --bg-cinema: #241a12;     /* dark anchor — warm espresso (Story 放映厅) */
  --ink-cream: #f3e7d3;     /* warm cream text on dark sections */
  --bg-strip: rgba(243, 163, 115, .15);

  /* 手账纸 — faint tan paw texture for the cream zones (~10% alpha, sparse, two paws per 240px tile @ different rotations so it never reads as a rigid grid). Baked into body; opaque panels (white cards / coral / dark cinema / CTA / footer) cover it, so the dark 放映厅 stays paw-free automatically. */
  --paw-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23d8b88a' fill-opacity='0.2'%3E%3Cg transform='translate(50 56) rotate(-13)'%3E%3Cellipse cx='0' cy='17' rx='15' ry='12'/%3E%3Cellipse cx='-13' cy='-2' rx='5' ry='7'/%3E%3Cellipse cx='-2' cy='-9' rx='5' ry='7.5'/%3E%3Cellipse cx='9' cy='-7' rx='5' ry='7'/%3E%3Cellipse cx='17' cy='3' rx='4.5' ry='6'/%3E%3C/g%3E%3Cg transform='translate(168 160) rotate(22)'%3E%3Cellipse cx='0' cy='17' rx='15' ry='12'/%3E%3Cellipse cx='-13' cy='-2' rx='5' ry='7'/%3E%3Cellipse cx='-2' cy='-9' rx='5' ry='7.5'/%3E%3Cellipse cx='9' cy='-7' rx='5' ry='7'/%3E%3Cellipse cx='17' cy='3' rx='4.5' ry='6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  --ink: #2b211a;
  --ink-soft: #6b5e52;
  --ink-mute: #a89a8c;
  --line: #ead9bd;
  --line-soft: #f1e6d0;
  --bw: 1px;                /* unified component outer-border width (white photo-rings + dashed placeholders excluded by design) */

  --coral: #f0a071;
  --coral-deep: #ea8a4f;
  --coral-soft: #fbd9b8;
  --coral-tint: #fbe6d2;
  --coral-page: #f5c193;

  --font-sans: "Manrope", "Noto Sans SC", system-ui, sans-serif;
  --font-cn:   "Noto Sans SC", system-ui, sans-serif;
  --font-hand: "Liu Jian Mao Cao", "Noto Sans SC", cursive;

  --r-pill: 999px;
  --r-card: 22px;
  --r-lg: 28px;

  --page-max: 1180px;
  --pad-x: clamp(20px, 4vw, 56px);

  --shadow-card: 0 1px 0 rgba(255,255,255,.75) inset, 0 18px 44px -24px rgba(60,40,20,.26), 0 2px 8px -5px rgba(60,40,20,.12);
  --shadow-pop:  0 30px 60px -28px rgba(60,40,20,.3), 0 8px 20px -10px rgba(60,40,20,.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
body {
  font-family: var(--font-cn);
  color: var(--ink);
  background-color: var(--bg);
  background-image: var(--paw-paper);
  background-size: 240px 240px;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .005em;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; cursor: default; }
::selection { background: var(--coral); color: #fff; }

.app {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  appearance: none;
  border: 0;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cn);
  white-space: nowrap;
  line-height: 1;
}
.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(232, 140, 84, .55), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover {
  background: var(--coral-deep);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -10px rgba(232, 140, 84, .65), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(43, 33, 26, .12);
  padding: 13px 26px;
}
.btn-ghost:hover { background: var(--bg-soft); border-color: rgba(43, 33, 26, .25); }
.btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn.btn-primary:active,
.btn.btn-ghost:active {
  transform: scale(.95) !important;
  transition: transform .08s ease !important;
}
.btn-primary:active {
  background: var(--coral-deep);
  box-shadow: 0 6px 16px -8px rgba(232, 140, 84, .55), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-ghost:active {
  background: var(--bg-soft);
}
.btn-lg { padding: 17px 32px; font-size: 15px; }
.btn-sm { padding: 12px 22px; font-size: 14px; }

/* Hero 主 CTA「立即定制」: 暖光晕脉冲,把视线吸到定制入口 */
.hero-cta-row .btn-primary {
  animation: heroCtaGlow 2.2s ease-in-out infinite;
}
.hero-cta-row .btn-primary:hover,
.hero-cta-row .btn-primary:active {
  animation: none;   /* 悬停/按下时由各自的状态接管发光 */
}
@keyframes heroCtaGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(240,160,113,0),
      0 0 16px rgba(240,160,113,.5),
      0 10px 24px -8px rgba(232,140,84,.55),
      inset 0 1px 0 rgba(255,255,255,.25);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(240,160,113,.20),
      0 0 30px rgba(240,160,113,.9),
      0 0 56px rgba(240,160,113,.55),
      0 10px 24px -8px rgba(232,140,84,.55),
      inset 0 1px 0 rgba(255,255,255,.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta-row .btn-primary { animation: none; }
}
.btn-arrow { transition: transform .25s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }
.play-tri { display: inline-flex; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-right: 4px; }

/* ============================================================
   Hero (with wood-table bg + floating feature strip)
   ============================================================ */
/* Bleed strip that carries the warm wood tone from the bottom of the hero
   video down into the page-2 background — the video light "spills" into
   the section below instead of the section bg creeping up into the video. */
.page-bleed {
  display: none;
}
/* Portrait-only wood transition. In contain mode the real .page-bleed (a sibling
   after the now-tall hero) floats far below the scene and reads as disconnected
   ("断开"). This element lives INSIDE .hero, pinned to the contained band's bottom
   edge, so the SAME wood gradient connects the scene down into the cream. Shown
   only ≤760 (see media query); hidden otherwise. */
.hero-bleed-m { display: none; }
/* "Pool" the seam: a wide, soft blob of warm light straddling the boundary —
   lives INSIDE .hero so the FeatureStrip (z-index 5+ inside hero-inner)
   keeps painting above it. */
.hero-seam-pool {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -38px;
  height: 104px;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 100% at 50% 50%,
      rgba(245, 236, 219, .72) 0%,
      rgba(223, 182, 132, .22) 48%,
      transparent 72%);
  filter: blur(24px);
}
.hero-seam-pool::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 38px;
  height: 60px;
  background:
    radial-gradient(ellipse 55% 100% at 50% 50%,
      rgba(255, 238, 208, .36) 0%,
      transparent 70%);
  filter: blur(18px);
}
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(700px, 84vh, 880px);
  isolation: isolate;
  background: var(--bg-strip);
  padding-bottom: 0;
  z-index: 2;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background-color: #f5ecdb;
}
.hero__bg-video,
.hero__bg-canvas,
.hero__bg-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  transform-origin: 66% 52%;
  transition: opacity .4s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.hero__bg-poster {
  object-position: 64% 50%;
}
/* Engaged (hover/press a hotspot): the scene gently pushes in toward the TV;
   on release it settles back — so the background scales in sync with the
   TV/statue cutouts shrinking. Kept subtle ("一定程度"). */
.hero--engaged .hero__bg-video,
.hero--engaged .hero__bg-canvas {
  transform: scale(1.045);
}
@media (prefers-reduced-motion: reduce) {
  .hero--engaged .hero__bg-video,
  .hero--engaged .hero__bg-canvas { transform: none; }
}
.hero__bg-canvas { z-index: 1; }
/* Hero scene is full-bleed cover at every width (desktop → tablet, no phone mode).
   The old narrow "band"/contain treatment (.hero--anchor-right + .hero-bleed-m seam)
   is retired; those rules were removed and the class is no longer applied in app.jsx. */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
}
.hero__bg-overlay .ho-group,
.hero__bg-overlay .ho-item,
.hero__bg-overlay .ho-item image,
.hero__bg-overlay .ho-label,
.hero__bg-overlay .ho-label rect,
.hero__bg-overlay .ho-label text {
  pointer-events: all;
}
.hero__bg-overlay .ho-item {
  cursor: pointer;
  opacity: 0;
  --ho-peak: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity .35s ease,
    transform .5s cubic-bezier(.2, .7, .2, 1),
    filter .35s ease;
  animation: none;
}
.hero__bg-overlay .ho-group-tv .ho-item { --ho-peak: 1.1; }
/* reveal on hover — pointer devices only, so touch can't make it "stick" */
@media (hover: hover) {
  .hero__bg-overlay .ho-group:hover .ho-item {
    opacity: 1;
    transform: scale(1.2);
    animation: hoCutoutGlow 2.6s ease-in-out infinite;
  }
  .hero__bg-overlay .ho-group-tv:hover .ho-item {
    transform: scale(1.1);
  }
  .hero__bg-overlay .ho-group:hover .ho-label {
    opacity: 1;
    transform: translateY(0);
    animation: none;
  }
}
/* reveal on press — touch: finger down = hover-equivalent (enlarge + glow + label) */
.hero__bg-overlay .ho-group.is-pressed .ho-item {
  opacity: 1;
  transform: scale(1.2);
  animation: hoCutoutGlow 2.6s ease-in-out infinite;
}
.hero__bg-overlay .ho-group-tv.is-pressed .ho-item {
  transform: scale(1.1);
}
.hero__bg-overlay .ho-group.is-pressed .ho-label {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
.hero__bg-overlay .ho-group:active .ho-item {
  transform: scale(.98);
  transition: transform .08s ease;
  animation: none;
}
.hero__bg-overlay .ho-group-tv:active .ho-item {
  transform: scale(.98);
  transition: transform .08s ease;
  animation: none;
}

/* hover label pill */
.hero__bg-overlay .ho-label {
  cursor: pointer;
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(0);
  transition:
    opacity .35s ease .05s,
    transform .35s cubic-bezier(.2, .7, .2, 1) .05s;
  animation: none;
}
.hero__bg-overlay .ho-label rect {
  fill: var(--coral);
  filter: drop-shadow(0 4px 10px rgba(60, 40, 20, .22));
}
.hero__bg-overlay .ho-label text {
  fill: #fff;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}
@keyframes hoCutoutGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(240, 160, 113, .45))
      drop-shadow(0 0 20px rgba(240, 160, 113, .3));
  }
  50% {
    filter:
      drop-shadow(0 0 16px rgba(240, 160, 113, .8))
      drop-shadow(0 0 32px rgba(240, 160, 113, .55));
  }
}
/* 闲置自动脉冲:0→1.5s 淡入放大,1.5→3s 淡出复原,3→5s 静默(共 5s) */
@keyframes hoAutoPulse {
  0%   { opacity: 0; transform: scale(1); filter: none; }
  30%  {
    opacity: 1; transform: scale(var(--ho-peak, 1.2));
    filter:
      drop-shadow(0 0 14px rgba(240, 160, 113, .7))
      drop-shadow(0 0 28px rgba(240, 160, 113, .45));
  }
  60%  { opacity: 0; transform: scale(1); filter: none; }
  100% { opacity: 0; transform: scale(1); filter: none; }
}
@keyframes hoAutoLabel {
  0%   { opacity: 0; transform: translateY(-8px); }
  30%  { opacity: 1; transform: translateY(0); }
  60%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg-overlay .ho-item:hover { animation: none; }
  .hero__bg-overlay .ho-item,
  .hero__bg-overlay .ho-label { animation: none; }
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(245,236,219,.72) 0%,
      rgba(245,236,219,.38) 15%,
      rgba(245,236,219,0) 34%),
    linear-gradient(90deg,
      rgba(245,236,219,.78) 0%,
      rgba(245,236,219,.44) 30%,
      rgba(245,236,219,.10) 56%,
      rgba(245,236,219,0) 72%),
    /* feather the very bottom of the video into the wood tone so the seam
       with the page-bleed strip disappears */
    linear-gradient(180deg,
      rgba(245, 236, 219, 0) 70%,
      rgba(245, 236, 219, .34) 90%,
      rgba(245, 236, 219, .98) 100%);
}

.hero-inner {
  position: relative; z-index: 8;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  pointer-events: none;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 14px;
  gap: 24px;
  background: rgba(250, 244, 232, .32);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 18px;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 24px -22px rgba(70,42,20,.26);
  pointer-events: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(160deg, #fff 0%, #f8e6cf 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(60,40,20,.06);
  color: var(--ink);
}
/* Studio tag — rounded orange pill, white bold sans-serif, sits after the wordmark */
.brand-studio {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .01em;
  color: #fff;
  background: var(--coral-deep);
  padding: 5px 9px 6px;
  border-radius: 8px;
  white-space: nowrap;
  align-self: center;
  box-shadow: 0 1px 4px rgba(234,138,79,.35);
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s, box-shadow .15s;
}
.brand-studio:hover { filter: brightness(1.06); box-shadow: 0 2px 6px rgba(234,138,79,.5); }
.nav-center {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.nav-center::-webkit-scrollbar {
  display: none;
}
.nav-link {
  font-size: 15.5px;
  color: rgba(43, 33, 26, .9);
  font-weight: 650;
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 4px;
  transition: color .2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--coral-deep); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--coral);
  border-radius: 2px;
}
.nav-cta {
  position: relative;
  background: #fff;
  color: var(--ink);
  padding: 10px 22px;
  font-weight: 500;
  border: 1px solid var(--coral);
  box-shadow: 0 1px 2px rgba(60,40,20,.10);
  animation: none;
}
.nav-cta:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(240,160,113,.25),
    0 0 18px rgba(240,160,113,.75),
    0 0 36px rgba(240,160,113,.5),
    0 8px 20px -8px rgba(60,40,20,.22);
}
.nav-cta:active {
  transform: scale(.95);
  transition: transform .08s ease;
  animation: none;
}
@keyframes navCtaGlow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(240,160,113,.16),
      0 0 12px rgba(240,160,113,.45),
      0 0 24px rgba(240,160,113,.28),
      0 6px 16px -6px rgba(60,40,20,.18);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(240,160,113,.28),
      0 0 20px rgba(240,160,113,.75),
      0 0 40px rgba(240,160,113,.5),
      0 6px 16px -6px rgba(60,40,20,.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta { animation: none; }
}

/* Hero main grid */
.hero-main {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  padding-top: clamp(92px, 11vw, 150px);
  padding-bottom: clamp(120px, 14vw, 190px);
}
.hero-copy {
  max-width: 520px;
  position: relative;
  pointer-events: auto;
}
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -42px;
  top: -34px;
  width: min(600px, 58vw);
  height: 112%;
  background: radial-gradient(ellipse at 22% 42%,
    rgba(250,244,232,.62) 0%,
    rgba(250,244,232,.36) 46%,
    rgba(250,244,232,0) 74%);
  filter: blur(10px);
  pointer-events: none;
}
.hero-copy .hero-desc { margin-left: 0; margin-right: 0; }
.hero-copy .hero-cta-row { justify-content: flex-start; }
.hero-title {
  margin: 0 0 18px;
  line-height: 0;
}
.hero-title img {
  display: block;
  width: clamp(260px, 31vw, 470px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 18px rgba(255,245,230,.38));
}
.hero-sub {
  font-family: var(--font-cn);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: .01em;
  text-shadow: 0 1px 12px rgba(255,245,230,.55);
}
.hero-desc {
  font-size: clamp(.94rem, 1.04vw, 1.04rem);
  line-height: 1.95;
  color: rgba(70, 58, 48, .92);
  margin: 0 0 32px;
  max-width: 430px;
  text-shadow: 0 1px 14px rgba(255,245,230,.58);
}
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-hotspot-actions {
  display: none;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.hero-hotspot-actions button {
  border: 1px solid rgba(234, 138, 79, .35);
  border-radius: 999px;
  background: rgba(255, 250, 244, .76);
  color: var(--ink);
  padding: 10px 14px;
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 22px -18px rgba(60, 40, 20, .35);
  cursor: pointer;
}

/* Device frame (CSS-built so we can put any pet on the screen) */
.device-stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.device-cube {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1.18 / 1;
  filter: drop-shadow(0 30px 40px rgba(80, 50, 25, .18));
  animation: none;
}
@keyframes dev-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.device-body {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 30% 20%, #ffffff 0%, #fbf3e7 60%, #f1e5d0 100%);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(0,0,0,.04),
    inset 0 -16px 32px rgba(60,40,20,.05);
}
.device-body::after {
  /* the right side groove */
  content: "";
  position: absolute;
  top: 8%; bottom: 8%; right: 6%;
  width: 6%;
  background: linear-gradient(90deg, transparent 0%, rgba(60,40,20,.045) 50%, transparent 100%);
  border-radius: 6px;
  pointer-events: none;
}
.device-button {
  position: absolute;
  right: -1px;
  top: 36%;
  width: 5px;
  height: 12%;
  background: linear-gradient(180deg, #ece1cc, #d4c4a8);
  border-radius: 0 4px 4px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.device-screen {
  position: absolute;
  inset: 14% 22% 14% 12%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    inset 0 2px 6px rgba(0,0,0,.08);
}
.device-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.device-statusbar {
  position: absolute;
  top: 4%; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8%;
  font-size: clamp(10px, 1.1vw, 13px);
  color: rgba(43,33,26,.82);
  font-family: var(--font-sans);
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
}

/* Floating feature strip */
.feature-strip {
  position: relative;
  z-index: 8;
  margin: 0 auto;
  transform: translateY(clamp(28px, 3vw, 44px));
  background: rgba(255, 250, 240, .55);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 22px;
  padding: clamp(18px, 1.6vw, 24px) clamp(20px, 2.5vw, 36px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 30px -20px rgba(60,40,20,.18);
}
.feat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.feat-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: var(--bw) solid rgba(43, 33, 26, .32);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
  background: transparent;
}
.feat-title { font-weight: 700; font-size: 15.5px; color: var(--ink); margin: 0 0 3px; line-height: 1.2; }
.feat-sub   { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.45; }

/* ============================================================
   Sections — shared
   ============================================================ */
.section { padding: clamp(60px, 7vw, 110px) 0 clamp(20px, 3vw, 36px); }
.section-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: clamp(36px, 4vw, 60px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.section-card--coral {
  background: var(--coral-tint);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 18px 44px -24px rgba(180,90,40,.28), 0 2px 8px -5px rgba(120,60,30,.14);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eyebrow::before { content: ""; width: 14px; height: 1px; background: var(--ink-mute); }

.section-title {
  font-family: var(--font-cn);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 600px;
}
.section-lede {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.85;
  margin: 0;
  max-width: 380px;
}

/* ============================================================
   Product section — 3x2 card grid
   ============================================================ */
.product-section { display: grid; grid-template-columns: 280px 1fr; gap: clamp(20px, 3vw, 50px); align-items: start; padding-top: clamp(60px, 6vw, 100px); }
.product-section-copy { padding-top: 8px; }
.product-section-copy h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.35; margin: 0 0 18px; font-weight: 700; }
.product-section-copy p { font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); margin: 0; max-width: 240px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 220px 200px;
  gap: 16px;
}
.p-card {
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.p-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.p-card-title { font-size: 17px; font-weight: 700; margin: 0; color: var(--ink); line-height: 1.4; }
.p-card-sub   { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.p-card-foot  { margin-top: auto; }
.p-card-title-small { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.p-card-sub-small   { font-size: 12px; color: var(--ink-mute); margin: 0; line-height: 1.55; }

/* (1,1) photo card — spans 2 rows */
.p-card--photo {
  grid-row: span 2;
  padding: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(43,33,26,.05) 100%),
    var(--bg-card);
  display: flex;
  flex-direction: column;
}
.p-card--photo .photo-area {
  flex: 1;
  background-image: url("assets/schnauzer.png");
  background-size: cover;
  background-position: 50% 25%;
  background-repeat: no-repeat;
}
.p-card--photo .photo-foot {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--line-soft);
  background: #fbf5e9;
}

/* (1,2) 1.69" screen with small device */
.p-card--screen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: stretch;
  padding-right: 0;
}
.p-card--screen .device-mini {
  position: relative;
  width: 130px;
  height: 100%;
  align-self: stretch;
}
.device-mini-cube {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  aspect-ratio: 1.18/1;
  background: radial-gradient(120% 90% at 30% 20%, #fff 0%, #fbf3e7 60%, #f1e5d0 100%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(0,0,0,.05);
}
.device-mini-screen {
  position: absolute;
  inset: 14% 22% 14% 12%;
  background: #fff;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
  overflow: hidden;
}
.device-mini-screen::after {
  content: "16:34";
  position: absolute;
  top: 4px; left: 0; right: 0;
  text-align: center;
  font-size: 7px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: rgba(43,33,26,.6);
}

/* (1,3) 200+ 微表情 with bubbles */
.p-card--expr { overflow: visible; }
.p-card--expr .bubbles {
  position: absolute;
  right: 18px;
  bottom: 20px;
  display: flex;
  gap: 6px;
}
.bubble-emoji {
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 6px;
  background: #fff;
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 6px 12px -6px rgba(60,40,20,.18);
}
.bubble-emoji:nth-child(2) { border-radius: 50% 50% 6px 50%; }

/* (2,2) 定制化记忆 with handwritten-style notes */
.p-card--memory { grid-column: span 1; }
.mem-notes {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mem-note {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 8px 10px 8px 22px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 4px 10px -8px rgba(60,40,20,.25);
}
.mem-note:nth-child(1) { transform: rotate(-1.2deg); }
.mem-note:nth-child(2) { transform: rotate(.6deg); margin-left: 6px; }
.mem-note:nth-child(3) { transform: rotate(-.4deg); }
.mem-note-quote {
  position: absolute;
  left: 7px; top: 2px;
  font-family: var(--font-serif, serif);
  font-size: 22px;
  line-height: 1;
  color: var(--coral);
  font-weight: 600;
}
.mem-note-text { display: inline-block; }

/* (2,3) 专属定制 with pet thumbs */
.p-card--custom .pet-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.pet-thumb {
  width: 44px; height: 44px;
  border-radius: 12px;
  background-image: url("assets/schnauzer.png");
  background-size: cover;
  background-position: 50% 25%;
  border: 1.5px solid #fff;
  box-shadow: 0 4px 10px -2px rgba(60,40,20,.18);
}
.pet-thumb:nth-child(2) { background-position: 35% 30%; filter: hue-rotate(8deg); }
.pet-thumb:nth-child(3) { background-position: 65% 30%; filter: brightness(.92) sepia(.15); }

/* ============================================================
   Process section — coral card with horizontal flow
   ============================================================ */
.process-section { padding: clamp(20px, 2vw, 28px) 0; }
.process-section .section-card { background: var(--coral-tint); padding: clamp(28px, 3.4vw, 52px); }

/* ── 定制流程 — 图文并茂 timeline ── */
.cflow-head {
  margin-bottom: clamp(24px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 36px);
}
.cflow-head-copy { min-width: 0; }
.cflow-head .section-title { margin-bottom: 12px; }
.cflow-head .section-lede { max-width: 460px; }
.cflow-head-cta {
  flex: 0 0 auto;
  padding: 14px 28px;
  box-shadow: 0 14px 28px -14px rgba(234, 138, 79, .75);
}

/* 四宫格 2×2 */
.cflow-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.cflow-cell {
  display: flex; flex-direction: column;
  align-self: start;            /* 展开时不撑高同行另一格 */
  background: var(--bg-card);
  border: var(--bw) solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.cflow-cell:hover,
.cflow-cell:focus-visible {
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 26px 56px -26px rgba(60,40,20,.34), 0 4px 12px -6px rgba(232,140,84,.22);
  border-color: var(--coral);
  transform: translateY(-3px);
}
.cflow-cell:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* figure placeholder — top of cell, carries the step number */
.cflow-fig {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--bg-trough);
  border-bottom: 1.5px dashed rgba(180, 120, 70, .32);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  overflow: hidden;
}
.cflow-num {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-family: var(--font-sans); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(232, 140, 84, .5);
}
.cflow-fig-ic { color: var(--coral-deep); opacity: .5; }
.cflow-fig-label { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--ink-mute); letter-spacing: .02em; }
/* drop placeholder chrome once a real image is nested */
.cflow-fig:has(img) { border-bottom: 0; background: none; }
.cflow-fig:has(img) .cflow-fig-ic, .cflow-fig:has(img) .cflow-fig-label { display: none; }
.cflow-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cflow-body { padding: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; flex: 1; }
.cflow-titleline { display: flex; align-items: center; gap: 10px; }
.cflow-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--coral-tint); color: var(--coral-deep);
  display: flex; align-items: center; justify-content: center;
}
.cflow-t { font-family: var(--font-cn); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 700; color: var(--ink); margin: 0; }

/* expand affordance — chevron at right of title, rotates when open */
.cflow-toggle {
  margin-left: auto; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--coral-deep); background: var(--coral-tint);
  transition: transform .35s cubic-bezier(.34, 1.3, .5, 1), background .25s;
}
.cflow-cell:hover .cflow-toggle,
.cflow-cell:focus-visible .cflow-toggle { transform: rotate(180deg); background: var(--coral); color: #fff; }

/* collapsible body — hidden by default, reveals on hover (mouse) / focus-visible (keyboard), auto-collapses on leave */
.cflow-more {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .42s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.cflow-more-inner { overflow: hidden; min-height: 0; }
.cflow-cell:hover .cflow-more,
.cflow-cell:focus-visible .cflow-more { grid-template-rows: 1fr; opacity: 1; }
.cflow-d { font-size: 14px; color: var(--ink-soft); line-height: 1.8; margin: 10px 0 0; }

/* step 02 — material chips with 必填/选填 tag */
.cflow-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cflow-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--bg); border: var(--bw) solid var(--line-soft);
  border-radius: 999px; padding: 5px 10px;
}
.cflow-chip em {
  font-style: normal; font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px; background: var(--bg-trough); color: var(--ink-mute);
}
.cflow-chip.is-req em { background: var(--coral); color: #fff; box-shadow: 0 3px 8px -3px rgba(232, 140, 84, .5); }

@media (max-width: 760px) {
  .cflow-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .cflow-head-cta {
    align-self: flex-start;
  }
}

@media (max-width: 430px) {
  .process-section .section-card {
    padding: 24px 18px;
  }

  .cflow-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cflow-cell {
    border-radius: 18px;
  }

  .cflow-body {
    padding: 15px 16px 17px;
  }

  .cflow-titleline {
    gap: 9px;
  }

  .cflow-t {
    min-width: 0;
    font-size: 1.08rem;
    line-height: 1.35;
    white-space: normal;
    word-break: keep-all;
  }

  .cflow-ico {
    width: 32px;
    height: 32px;
  }

  .cflow-toggle {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================
   Story section
   ============================================================ */
.story-section { padding: clamp(20px, 2vw, 28px) 0; }
.story-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.story-card::after {
  /* soft warmth tint at the photo edge */
  content: "";
  position: absolute;
  right: -10%; bottom: -10%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(243, 163, 115, .12) 0%, transparent 70%);
  pointer-events: none;
}
.story-h { font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.5; font-weight: 700; margin: 0 0 22px; color: var(--ink); }
.story-body p { font-size: 14.5px; line-height: 2.05; color: var(--ink-soft); margin: 0 0 4px; }
.story-sig { margin-top: 22px; font-size: 13px; color: var(--ink-mute); font-weight: 500; }

.story-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 280px;
}
.story-visual-product {
  position: relative;
  width: 60%;
  z-index: 2;
}
.story-visual-product .device-cube { width: 100%; animation: none; }
.story-quote {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-hand);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.75;
  color: var(--coral-deep);
  white-space: pre-line;
  text-align: left;
  z-index: 1;
  letter-spacing: .02em;
  font-weight: 400;
}
.story-quote-paw {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  color: var(--coral);
}

/* ---- Story 深色放映厅：暗色锚点,衬亮前后章节 ---- */
.story-stage {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  /* 上:标题 · 左右:幕口留边(露出帷幕) · 下:观众席空带(给背景图底部背对的宠物) */
  padding: clamp(30px, 3.5vw, 52px) clamp(30px, 5.5vw, 92px) clamp(76px, 8.5vw, 132px);
  /* --story-bg 未设时为 none → 显示下面的深棕渐变;设成 url('assets/帷幕.png') 即叠在最上层 */
  background:
    var(--story-bg, none),
    radial-gradient(125% 135% at 50% -12%, #32261b 0%, var(--bg-cinema) 66%);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: var(--shadow-pop), 0 0 0 1px rgba(0,0,0,.2);
  overflow: hidden;             /* clip the curtain bg to the rounded corners */
}
.story-stage-cap { text-align: left; position: relative; z-index: 2; }
.eyebrow--on-dark { color: var(--coral); justify-content: flex-start; }
.eyebrow--on-dark::before { background: var(--coral); }
.story-stage-h {
  font-family: var(--font-cn);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink-cream);
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55);   /* keep legible over the curtain bg image */
}

/* ---- Story 银幕：居中画框(幕口里的屏) ---- */
.story-film {
  position: relative;
  max-width: 850px;            /* 比舞台窄一圈,左右露出帷幕(幕口感) */
  margin: clamp(18px, 2.4vw, 36px) auto 0;
}
/* warm halo — the screen is "lifted" by a spotlight off the dark stage (Apple-style) */
.story-film::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 112%;
  height: 90%;
  background: radial-gradient(circle, rgba(255, 171, 105, .26), transparent 66%);
  filter: blur(46px);
  pointer-events: none;
}
.story-film-frame {
  position: relative;
  z-index: 1;
  border-radius: 26px;
  padding: 14px;                /* the cream frame thickness */
  background: linear-gradient(180deg, #fff8ec, #f1e1c5);
  box-shadow: var(--shadow-pop),
              0 1px 0 rgba(255,255,255,.85) inset,
              0 0 0 1px var(--line);
}
.story-film-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 15px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(130% 120% at 50% -10%, var(--coral-tint) 0%, var(--bg-soft) 52%, #f1e3cc 100%);
  box-shadow: inset 0 2px 16px rgba(60,40,20,.13), inset 0 0 0 1px rgba(255,255,255,.5);
}
/* play / placeholder button */
.story-film-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.story-film-play-ring {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--coral);
  display: grid; place-items: center;
  box-shadow: 0 16px 32px -12px rgba(234,138,79,.65), 0 0 0 10px rgba(240,160,113,.16);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: none;   /* gentle "alive" pulse */
}
.story-film-play:hover .story-film-play-ring {
  animation: none;                                    /* hover takes over the glow */
  transform: scale(1.06);
  box-shadow: 0 20px 40px -12px rgba(234,138,79,.75), 0 0 0 15px rgba(240,160,113,.22);
}
@keyframes playBreath {
  0%, 100% { box-shadow: 0 16px 32px -12px rgba(234,138,79,.6),  0 0 0 9px  rgba(240,160,113,.18); }
  50%      { box-shadow: 0 18px 38px -12px rgba(234,138,79,.72), 0 0 0 17px rgba(240,160,113,.08); }
}
.story-film-tri {
  width: 0; height: 0;
  border-left: 23px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 7px;
}
.story-film-play-txt {
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .06em;
}

@media (max-width: 640px) {
  .story-film-play-ring { width: 70px; height: 70px; }
  .story-film-tri { border-left-width: 19px; border-top-width: 12px; border-bottom-width: 12px; }
}

/* ---- Story 短片库：主屏视频 + 隐藏播放列表 ---- */
.story-film-video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 15px;
  display: block;
  background: #1c140d;
}
/* 未上线短片的封面态 */
.story-film-poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
}
/* now-playing 胶囊(同卡2 语言)— 置左上,避开视频原生控制条 */
.story-film-now {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(28, 20, 13, .8);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-cn); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5);
}
.story-film-now-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral);
  animation: none;
}
/* 播放列表工具条 — 画框下方,不再压住视频 */
.story-pl-bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px;
}
.story-pl-bar-label {
  font-family: var(--font-cn); font-size: 13px; font-weight: 600;
  color: rgba(244, 234, 217, .62); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
/* 播放列表开关 */
.story-film-listbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #f3cfa6; color: var(--coral-deep);
  font-family: var(--font-cn); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 12px -6px rgba(60, 40, 20, .4);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.story-film-listbtn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(60, 40, 20, .5); }
.story-film-listbtn.is-open { background: var(--coral); color: #fff; border-color: var(--coral); }

/* 抽屉式播放列表 — 画框下方向下展开(不再盖住视频) */
.story-playlist {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .42s cubic-bezier(.4, 1.1, .4, 1), opacity .3s ease, margin-top .42s ease;
  margin-top: 0;
}
.story-playlist.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
.story-playlist-track {
  min-height: 0; overflow: hidden;
  display: flex; gap: 10px; overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.story-pl-thumb {
  flex: 0 0 156px; padding: 0; border: 0; cursor: pointer; text-align: left;
  background: none; display: flex; flex-direction: column; gap: 7px;
  opacity: .62; transition: opacity .22s ease, transform .22s ease;
}
.story-pl-thumb:hover { opacity: .9; }
.story-pl-thumb.is-on { opacity: 1; transform: translateY(-2px); }
.story-pl-art {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0, rgba(240, 160, 113, .28), transparent 60%),
    linear-gradient(160deg, #3a2c1f, #241a12);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: box-shadow .22s ease;
}
.story-pl-thumb.is-on .story-pl-art {
  box-shadow: inset 0 0 0 2px var(--coral), 0 8px 16px -8px rgba(0, 0, 0, .6);
}
.story-pl-tri {
  width: 0; height: 0;
  border-left: 13px solid rgba(255, 255, 255, .92);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  margin-left: 3px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
.story-pl-cap { display: flex; align-items: center; gap: 8px; padding-left: 1px; }
.story-pl-title { font-family: var(--font-cn); font-size: 13px; font-weight: 600; color: #f4ead9; }
.story-pl-soon {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  color: var(--coral); border: 1px solid rgba(240, 160, 113, .5);
  padding: 1px 6px; border-radius: 999px;
}
@media (max-width: 640px) {
  .story-pl-thumb { flex-basis: 130px; }
}

/* ============================================================
   FAQ section
   ============================================================ */
.faq-section { padding: clamp(20px, 2vw, 28px) 0 clamp(56px, 6vw, 88px); }
.faq-card { background: var(--bg-card); border-radius: var(--r-lg); padding: clamp(36px, 4vw, 56px); box-shadow: var(--shadow-card); }
.faq-head { margin-bottom: clamp(24px, 3vw, 40px); }
.faq-head h2 { margin: 0 0 8px; }
.faq-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 13px;
  color: var(--ink-mute);
}
.faq-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.faq-email-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--coral-tint);
  color: var(--coral-deep);
  display: flex; align-items: center; justify-content: center;
}
.faq-email--wechat .faq-email-icon {
  background: #e7f6e9;
  color: #2aae67;
}
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faq-item {
  background: var(--bg);
  border: var(--bw) solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 22px;
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.faq-item:hover,
.faq-item.open { background: #fff; border-color: var(--coral-soft); box-shadow: 0 10px 24px -16px rgba(60,40,20,.3); }
.faq-contact-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.faq-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}
.faq-item-toggle {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--coral-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 300;
  flex-shrink: 0;
  transition: transform .3s ease, background .25s ease;
}
.faq-item.open .faq-item-toggle { transform: rotate(45deg); background: var(--coral); color: #fff; }
.faq-item-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.85;
}
.faq-item.open .faq-item-body {
  max-height: 240px;
  opacity: 1;
  margin-top: 12px;
}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--coral-page) 0%, var(--coral) 100%);
  border-radius: var(--r-lg);
  margin: clamp(20px, 2vw, 28px) 0;
  padding: clamp(28px, 3vw, 44px) clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  overflow: hidden;
}
.cta-peek {
  width: 130px; height: 130px;
  background-image: url("assets/schnauzer.png");
  background-size: cover;
  background-position: 50% 20%;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.5);
  box-shadow: 0 12px 24px -8px rgba(60,40,20,.3);
  flex-shrink: 0;
}
.cta-band h2 {
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.35;
}
.cta-band p { color: rgba(255,255,255,.88); font-size: 14.5px; margin: 6px 0 0; }
.cta-band .btn-ghost {
  background: #fff;
  border: 0;
  padding: 16px 26px;
  box-shadow: 0 12px 24px -8px rgba(60,40,20,.25);
}

/* ============================================================
   Footer
   ============================================================ */
.footer-wrap { background: #1c1611; color: rgba(255,255,255,.62); margin-top: clamp(28px, 3vw, 40px); }
footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--pad-x) 28px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: clamp(20px, 3vw, 48px);
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.foot-brand { color: #fff; margin-bottom: 14px; }
.foot-brand .brand-mark { background: linear-gradient(160deg, #fff 0%, #f8e6cf 100%); }
.foot-tagline { font-size: 13px; line-height: 1.8; margin: 0; }
.foot-tagline span { display: block; }
.foot-socials { display: flex; gap: 10px; margin-top: 18px; }
.foot-social {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: all .2s;
}
.foot-social:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.foot-social--wechat:hover { color: #7bd9a0; border-color: rgba(123,217,160,.45); }
.foot-social--email:hover { color: var(--coral); border-color: rgba(234,138,79,.45); }
.foot-contact-pop {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  line-height: 1.2;
}
.foot-contact-pop span {
  color: rgba(255,255,255,.45);
}
.foot-contact-pop b {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
}
footer h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 0 0 16px;
  font-family: var(--font-sans);
}
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer ul a { font-size: 13.5px; color: rgba(255,255,255,.62); transition: color .2s; cursor: pointer; }
footer ul a:hover { color: var(--coral); }

.foot-qr {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.foot-qr-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.foot-qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.foot-qr-img {
  width: 96px; height: 96px;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  flex-shrink: 0;
  overflow: hidden;
}
.foot-qr-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.foot-qr-text { font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.7); }
.foot-qr-text strong { display: block; color: #fff; font-weight: 600; margin-bottom: 4px; }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  /* Hero 和网页版(桌面)看齐: 每个宽度都是满屏 cover 场景 + 标题左上叠加
     (继承 base .hero / .hero-main / .hero-copy)。不做条带、不把文案推到下方,
     所以这里无需任何 hero 覆盖。只有下方的内容网格在窄屏塌成单列。 */
  /* 平板及更窄(≤1024)cover 视图向右平移,聚焦画面右侧(雕像那侧)。手机条带模式已弃用,
     hero 在每个 ≤1024 宽度都是 cover,此平移一律生效。 */
  .hero__bg-video,
  .hero__bg-canvas { object-position: 68% 50%; }
  /* 同步 tv / statue 两个点击热点:SVG 锚在中心(xMid)无法表达 object-position 75%。
     固定像素偏移(原 -80px)只在某一个宽度对齐、resize 时会漂移 ±50px。改由 JS 按
     实时 cover 几何算出与视频完全一致的水平平移量,写进 --ho-pan-x(px),两组随整帧
     一起平移、在每个宽度都锁定在电视/雕像上。 */
  .hero__bg-overlay .ho-group { transform: translateX(var(--ho-pan-x, 0px)); }
  .hero-chat { opacity: .64; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); padding: 20px 24px; }
  .product-section { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .p-card--photo { grid-row: span 2; grid-column: 1; }
  .story-card { grid-template-columns: 1fr; }
  .story-visual { justify-content: center; }
  .story-quote { position: static; transform: none; margin-top: 24px; text-align: center; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-contact-row { justify-content: stretch; }
  .faq-head-meta { align-items: flex-start; text-align: left; }
  .cta-band { grid-template-columns: 1fr; text-align: center; }
  .cta-peek { margin: 0 auto; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot-qr { grid-column: 1 / -1; margin-top: 20px; }
}
@media (max-width: 760px) {
  .hero-chat { display: none; }
  .nav {
    gap: 10px;
    padding: 10px 12px;
  }
  .nav-center {
    display: none;
  }
  .brand {
    min-width: 0;
    gap: 8px;
    font-size: 18px;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .brand-studio {
    font-size: 10.5px;
    padding: 5px 7px 6px;
  }
  .nav-cta {
    flex: 0 0 auto;
    padding: 9px 15px;
    font-size: 13px;
  }
  .hero {
    min-height: min(760px, 100svh);
  }
  .hero__bg-overlay {
    display: none;
  }
  .hero__bg::after {
    background:
      linear-gradient(180deg,
        rgba(245,236,219,.66) 0%,
        rgba(245,236,219,.34) 16%,
        rgba(245,236,219,0) 38%),
      linear-gradient(90deg,
        rgba(245,236,219,.86) 0%,
        rgba(245,236,219,.55) 42%,
        rgba(245,236,219,.08) 72%,
        rgba(245,236,219,0) 100%);
  }
  .hero-inner {
    min-height: inherit;
  }
  .hero-main {
    padding-top: clamp(94px, 21vw, 132px);
    padding-bottom: clamp(92px, 22vw, 150px);
  }
  .hero-copy {
    max-width: min(82vw, 360px);
  }
  .hero-copy::before {
    left: -24px;
    top: -22px;
    width: min(430px, 96vw);
    height: 118%;
    background: radial-gradient(ellipse at 24% 42%,
      rgba(250,244,232,.76) 0%,
      rgba(250,244,232,.48) 48%,
      rgba(250,244,232,0) 76%);
  }
  .hero-title {
    margin-bottom: 14px;
  }
  .hero-title img {
    width: clamp(210px, 64vw, 320px);
  }
  .hero-sub {
    margin-bottom: 14px;
    font-size: clamp(1.02rem, 4.4vw, 1.24rem);
  }
  .hero-desc {
    max-width: 300px;
    margin-bottom: 20px;
    font-size: .92rem;
    line-height: 1.75;
  }
  .hero-hotspot-actions {
    display: flex;
  }
  .feature-strip {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    transform: translateY(28px);
  }
  .feat {
    gap: 9px;
  }
  .feat-icon {
    width: 34px;
    height: 34px;
  }
  .feat-title {
    font-size: 13px;
  }
  .feat-sub {
    display: none;
  }
}
/* 手机模式已弃用:站点只有 桌面 → 平板 两档,平板布局(≤1024px)在任何更窄宽度
   下都完整延续——hero 始终满屏 cover、产品网格 2 列、定制流程 2 列、页脚 3 列等
   全部沿用平板规则,不再有任何 ≤640 的整页版式覆盖(原条带 band hero + 中段导航/
   聊天气泡隐藏已全部移除)。弹窗(联系/雕像)的窄屏适配在各自模块里另行处理。 */

/* Reveal */
.reveal { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; }
@media (prefers-reduced-motion: no-preference) {
  .reveal:not(.in) { opacity: 0; transform: translateY(20px); }
}

/* ============================================================
   Product section — coverflow carousel
   ============================================================ */
.product-section--cf {
  display: block;
  padding-top: clamp(40px, 5vw, 80px);
}
.product-section--cf .product-section-copy { max-width: 820px; margin-bottom: clamp(32px, 4.5vw, 64px); }
.product-section--cf .product-section-copy h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); margin: 0 0 22px; }
.product-section--cf .product-section-copy p { max-width: 520px; font-size: 15.5px; line-height: 1.95; }

.cf-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: stretch;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  padding: clamp(36px, 4vw, 60px);
  overflow: hidden;
  position: relative;
}

/* ---------- Stage (left) ---------- */
.cf-stage {
  position: relative;
  height: clamp(440px, 42vw, 540px);
  outline: none;
  user-select: none;
}
.cf-stage-floor {
  position: absolute;
  left: 0; right: 0; bottom: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
  opacity: .55;
}

/* Large invisible click zones — tap left/right side of the stage to advance */
.cf-zone {
  position: absolute;
  top: 0;
  bottom: 60px;
  width: 30%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 50;
  appearance: none;
  outline: none;
  transition: background .2s ease;
}
.cf-zone--prev { left: 0; }
.cf-zone--next { right: 0; }
.cf-zone:hover { background: linear-gradient(90deg, rgba(60,40,20,.04), transparent); }
.cf-zone--next:hover { background: linear-gradient(270deg, rgba(60,40,20,.04), transparent); }
.cf-zone:active { background: linear-gradient(90deg, rgba(60,40,20,.07), transparent); }
.cf-zone--next:active { background: linear-gradient(270deg, rgba(60,40,20,.07), transparent); }

.cf-card {
  position: absolute;
  left: 50%; top: 50%;
  width: 210px;
  height: 306px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.22,.8,.22,1), opacity .35s ease, filter .35s ease;
  will-change: transform;
}
.cf-card-frame {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #fff 0%, #fbf5e9 100%);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow:
    0 26px 42px -22px rgba(60,40,20,.45),
    0 2px 0 rgba(255,255,255,.5) inset,
    0 0 0 5px #fff inset;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cf-card.active .cf-card-frame {
  box-shadow:
    0 30px 50px -22px rgba(232,140,84,.55),
    0 0 0 1px var(--coral) inset,
    0 0 0 5px #fff inset;
}
.cf-card:not(.active):hover .cf-card-frame {
  box-shadow:
    0 26px 42px -20px rgba(60,40,20,.5),
    0 0 0 1px var(--coral-soft) inset,
    0 0 0 5px #fff inset;
  filter: brightness(1.04);
}

/* card header strip */
.cf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.cf-card-no { font-weight: 700; color: var(--ink); }
.cf-card-kicker { font-weight: 600; }

/* art area */
.cf-card-art {
  flex: 1;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* name banner */
.cf-card-name {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--coral-tint);
  border: 1px solid #f3cfa6;
  padding: 9px 12px;
  border-radius: 10px;
  letter-spacing: .02em;
}
.cf-card-name-paw { color: var(--coral-deep); display: inline-flex; }
.cf-card.active .cf-card-name { background: var(--coral); color: #fff; border-color: var(--coral-deep); }
.cf-card.active .cf-card-name-paw { color: #fff; }

/* card-art variants */
.art-core { position: absolute; inset: 0; }
.art-core-photo {
  position: absolute; inset: 0;
  background: url("assets/schnauzer.png") center 22% / cover no-repeat, var(--bg-soft);
}
.art-core::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(40,28,18,.18));
}

.art-screen {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(240,160,113,.18), transparent 60%),
    var(--bg-soft);
}
.art-screen-device {
  width: 80px; height: 80px;
  border-radius: 16px;
  background: #2b211a;
  padding: 7px;
  box-shadow: 0 10px 22px -10px rgba(40,28,18,.45);
}
.art-screen-display {
  width: 100%; height: 100%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 35% 40%, #fbe6d2, #f0a071 60%, #c9794a),
    var(--coral);
}
.art-screen-spec {
  position: absolute;
  bottom: 10px; left: 10px;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: .05em;
}

.art-expr {
  position: relative;
  width: 100%; height: 100%;
  background: var(--bg-soft);
}
.art-expr-bubble {
  position: absolute;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px -4px rgba(60,40,20,.25);
}
.art-expr-bubble:nth-child(1) { top: 14%; left: 12%; }
.art-expr-bubble:nth-child(2) { top: 8%;  right: 14%; transform: scale(.9); }
.art-expr-bubble:nth-child(3) { top: 45%; left: 38%; transform: scale(1.1); }
.art-expr-bubble:nth-child(4) { bottom: 18%; left: 14%; transform: scale(.95); }
.art-expr-bubble:nth-child(5) { bottom: 10%; right: 18%; }
.art-expr-bubble:nth-child(6) { top: 38%; right: 8%; transform: scale(.85); }

.art-memory {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%; height: 100%;
  padding: 12px 10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(180,140,90,.10) 18px 19px),
    var(--bg-soft);
}
.art-memory-note {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 6px 8px 6px 16px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: 0 3px 6px -4px rgba(60,40,20,.25);
}
.art-memory-note:nth-child(1) { transform: rotate(-1.5deg); }
.art-memory-note:nth-child(2) { transform: rotate(.8deg); margin-left: 4px; }
.art-memory-note:nth-child(3) { transform: rotate(-.4deg); }
.art-memory-q {
  position: absolute; left: 5px; top: 1px;
  font-size: 16px; line-height: 1;
  color: var(--coral);
  font-weight: 700;
}

.art-custom {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(100% 100% at 50% 30%, rgba(240,160,113,.12), transparent 60%),
    var(--bg-soft);
}
.art-custom-thumb {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: url("assets/schnauzer.png") 50% 25% / cover no-repeat;
  border: 2px solid #fff;
  box-shadow: 0 8px 14px -8px rgba(60,40,20,.4);
}
.art-custom-thumb--lg { width: 96px; height: 96px; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: 2; }
.art-custom-thumb:nth-child(2) { left: 8%; bottom: 14%; transform: rotate(-6deg); }
.art-custom-thumb:nth-child(3) { right: 8%; bottom: 14%; transform: rotate(6deg); }

/* Controls */
.cf-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 2px;
}
.cf-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, transform .2s;
  box-shadow: 0 6px 14px -8px rgba(60,40,20,.3);
}
.cf-arrow:hover { background: var(--coral); color: #fff; border-color: var(--coral-deep); transform: translateY(-1px); }
.cf-arrow:active { transform: scale(.95); transition: transform .08s ease; }
.cf-dot:active { transform: scale(.9); }
.cf-dots { display: flex; gap: 6px; }
.cf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s, width .25s;
}
.cf-dot.on { background: var(--coral); width: 20px; border-radius: 4px; }

/* ---------- Detail panel (right) ---------- */
.cf-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(8px, 1.5vw, 20px) 0;
  min-width: 0;
}
.cf-detail-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--coral-deep);
  font-weight: 700;
  margin-bottom: 14px;
}
.cf-detail-bullet { width: 4px; height: 4px; border-radius: 50%; background: var(--coral); }
.cf-detail-kicker { color: var(--ink-mute); font-weight: 600; }
.cf-detail-title {
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  line-height: 1.35;
  margin: 0 0 16px;
  font-weight: 700;
  color: var(--ink);
  animation: cfFadeUp .45s ease both;
}
.cf-detail-desc {
  font-size: 15px;
  line-height: 2;
  color: var(--ink-soft);
  margin: 0 0 26px;
  max-width: 480px;
  animation: cfFadeUp .55s ease both .05s;
}
.cf-detail-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}
.cf-detail-specs li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-soft);
  animation: cfFadeUp .5s ease both;
}
.cf-detail-specs li:last-child { border-bottom: 0; padding-bottom: 0; }
.cf-spec-k {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}
.cf-spec-v {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.cf-detail-foot {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: .06em;
}
.cf-detail-foot > span:first-child {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cf-detail-foot em {
  font-style: normal;
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 500;
}
.cf-detail-name { color: var(--coral-deep); font-weight: 600; }

@keyframes cfFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .cf-row { grid-template-columns: 1fr; }
  .cf-stage { height: 380px; }
  .cf-detail-specs li { grid-template-columns: 120px 1fr; }
}


/* ============================================================
   Hero chat stream (top-right floating conversation feed)
   ============================================================ */
.hero-chat {
  position: absolute;
  top: clamp(118px, 13vh, 150px);
  right: clamp(20px, 6vw, 100px);
  width: clamp(280px, 26vw, 360px);
  height: clamp(220px, 28vh, 280px);
  overflow: hidden;
  z-index: 6;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
}
.hero-chat-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: chat-scroll 40s linear infinite;
  will-change: transform;
}
@keyframes chat-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.chat-row { display: flex; align-items: center; gap: 8px; }
.chat-row--right { justify-content: flex-end; }

.chat-bubble {
  padding: 10px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(60, 40, 20, .12);
  max-width: 250px;
  line-height: 1.45;
}
.chat-bubble--user { border-bottom-right-radius: 6px; }
.chat-bubble--pet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-bottom-right-radius: 6px;
}
.chat-bubble--pet .chat-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--coral-tint);
  flex-shrink: 0;
}
.chat-bubble--pet .chat-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.chat-wave {
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 14px;
  color: var(--coral-deep);
}
.chat-wave i {
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  display: block;
}
.chat-wave i:nth-child(1) { height: 40%; }
.chat-wave i:nth-child(2) { height: 95%; }
.chat-wave i:nth-child(3) { height: 70%; }
.chat-wave i:nth-child(4) { height: 100%; }
.chat-pet-text { color: var(--ink); font-size: 14px; font-weight: 500; }

.chat-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(60, 40, 20, .12);
}
.chat-icon--paw { background: var(--coral); color: #fff; }
.chat-icon--heart { background: #fff; color: var(--coral); }

.chat-memory {
  width: 240px;
  background: rgba(255, 255, 255, .94);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 22px rgba(60, 40, 20, .14);
}
.chat-memory-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 8px;
}
.chat-memory-head .chat-memory-idx {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
}
.chat-memory-photo {
  height: 100px;
  border-radius: 10px;
  background-color: #d4c5a5;
  background-size: cover;
  background-position: center 30%;
}
.chat-memory-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-size: 12px;
}
.chat-memory-foot span:first-child {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.chat-memory-foot .chat-memory-date {
  color: var(--ink-soft);
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-chat-track { animation: none; }
}




/* ============================================================
   Card pet — a cute pet peeks over the top edge of each cf-card
   like the reference design.
   ============================================================ */
.cf-card { overflow: visible; }
.cf-card-pet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 58%;
  height: auto;
  transform: translate(-50%, -68%);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 14px 18px rgba(60, 40, 20, .22));
  transition:
    transform .55s cubic-bezier(.2, .7, .2, 1),
    filter .35s ease,
    opacity .35s ease;
  opacity: .92;
}
.cf-card.active .cf-card-pet {
  transform: translate(-50%, -72%) scale(1.06);
  opacity: 1;
  filter: drop-shadow(0 22px 26px rgba(60, 40, 20, .3));
  animation: none;
}
@keyframes cfPetBob {
  0%, 100% { transform: translate(-50%, -72%) scale(1.06); }
  50%      { transform: translate(-50%, -76%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-card.active .cf-card-pet { animation: none; }
}

/* ============================================================
   Contact modal
   ============================================================ */
.contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 12, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: contactFadeIn .28s ease both;
}
.contact-card {
  position: relative;
  width: min(640px, 100%);
  background: var(--bg-card);
  border-radius: 24px;
  border: 1px solid var(--line-soft);
  padding: clamp(32px, 4vw, 44px) clamp(28px, 3.5vw, 44px) clamp(28px, 3vw, 36px);
  box-shadow:
    0 40px 80px -28px rgba(40, 24, 10, .45),
    0 0 0 1px rgba(255, 255, 255, .5) inset;
  animation: contactPopIn .35s cubic-bezier(.2, .8, .2, 1) both;
}
.contact-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .2s ease;
}
.contact-close:hover { background: var(--coral); color: #fff; border-color: var(--coral-deep); }
.contact-close:active { transform: scale(.92); }

.contact-pet {
  position: absolute;
  top: 0;
  right: clamp(24px, 5vw, 56px);
  width: clamp(110px, 14vw, 140px);
  height: auto;
  transform: translateY(-62%);
  filter: drop-shadow(0 14px 18px rgba(60, 40, 20, .25));
  pointer-events: none;
  animation: none;
}
@keyframes contactPetBob {
  0%, 100% { transform: translateY(-62%); }
  50%      { transform: translateY(-66%); }
}

.contact-head {
  max-width: 360px;
  margin-bottom: 26px;
}
.contact-head .eyebrow { margin-bottom: 10px; }
.contact-title {
  font-family: var(--font-cn);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 10px;
}
.contact-lede {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

.contact-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line-soft);
}
.contact-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-soft);
  align-items: baseline;
}
.contact-k {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.contact-v {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.contact-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  padding: 14px 16px 16px;
  box-shadow: 0 8px 20px -12px rgba(60, 40, 20, .25);
}
.contact-qr-grid {
  display: flex;
  gap: 14px;
}
.contact-qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: .02em;
}
.contact-qr-img {
  width: 104px;
  height: 104px;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  overflow: hidden;
}
.contact-qr-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contact-qr-text {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.contact-qr-text strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}

/* fake QR code */
.qr-grid {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 0;
  background: #fff;
  position: relative;
}
.qr-cell {
  background: #1c130a;
  border-radius: 1px;
}
.qr-finder {
  background: #1c130a;
  padding: 14%;
  position: relative;
}
.qr-finder-inner {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-finder-inner::after {
  content: "";
  width: 42%;
  height: 42%;
  background: #1c130a;
  border-radius: 1px;
}

@keyframes contactFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes contactPopIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .contact-body { grid-template-columns: 1fr; }
  .contact-qr { width: 100%; align-items: center; }
  .contact-qr-img { width: 100px; height: 100px; flex-shrink: 0; }
  .contact-pet { width: 96px; right: 16px; }
}

/* ============================================================
   Trial modal (线上模拟试用) — TV stage + composer (left) / log (right)
   ============================================================ */
.trial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 12, .5);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: contactFadeIn .28s ease both;
}
.trial-card {
  position: relative;
  width: min(960px, 100%);
  height: min(560px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 326px;
  grid-template-rows: minmax(0, 1fr);   /* 把行高锁进弹窗，左右两栏才能各自内部滚动 */
  background: var(--bg-card);
  border-radius: 24px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  box-shadow:
    0 40px 90px -28px rgba(40, 24, 10, .5),
    0 0 0 1px rgba(255, 255, 255, .5) inset;
  animation: contactPopIn .38s cubic-bezier(.2, .8, .2, 1) both;
}
.trial-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, transform .1s;
}
.trial-close:hover { background: var(--coral); color: #fff; border-color: var(--coral-deep); }
.trial-close:active { transform: scale(.92); }

/* LEFT — stage */
.trial-stage {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: default;
}
.trial-stage-title {
  position: absolute;
  left: clamp(24px, 3vw, 36px);
  top: clamp(22px, 2.6vw, 32px);
  margin: 0;
  font-family: var(--font-cn);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: 0;
}
/* TV — photo frame + screen overlay */
.trial-tv {
  flex: none;                  /* 保持电视图原始比例,绝不被弹窗高度压扁 */
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 22px 48px -28px rgba(40, 24, 10, .55);
  cursor: default;
}
.trial-tv-img {
  display: block;
  width: 100%;
  height: auto;
}
/* screen overlay — measured to the cream short-plush TV image */
.trial-tv-screen {
  position: absolute;
  left: 26.6%;
  top: 26.8%;
  width: 46.8%;
  height: 45.4%;
  border-radius: 16px;
  overflow: hidden;
  background: #000;            /* true-black letterbox around the square media */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
}
/* full-bleed slot — the device-screen reproduction fills the entire glass */
.trial-screen-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  cursor: none;
}
/* live device screen (小黑 canvas animation) embedded via iframe */
.trial-screen-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  pointer-events: none;
  cursor: none;
}
/* fallback: any plain img/video dropped in still covers the slot */
.trial-screen-media > img,
.trial-screen-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* composer — ChatGPT-style */
.trial-composer {
  margin-top: 18px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 7px 7px 7px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.trial-composer:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(240, 160, 113, .18);
}
.trial-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-family: var(--font-cn);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  padding: 7px 0;
  min-height: 44px;
  max-height: 96px;
  outline: none;
}
.trial-input::placeholder { color: var(--ink-mute); }
.trial-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -8px rgba(234, 138, 79, .8);
  transition: transform .12s, opacity .2s, filter .2s;
}
.trial-send:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.trial-send:active:not(:disabled) { transform: scale(.94); }
.trial-send:disabled { opacity: .4; cursor: default; box-shadow: none; }
.trial-hint {
  margin: 10px 2px 0;
  font-size: 11.5px;
  color: var(--ink-mute);
  text-align: center;
}
/* 对话框移到右边对话栏:输入框贴底,上方一道贯通分隔线 */
.trial-log-foot {
  flex: none;
  border-top: 1px solid var(--line-soft);
  padding: 10px 14px 10px;
  background: var(--bg-soft);
}
.trial-log-foot .trial-composer { margin: 0; }
.trial-log-foot .trial-hint { margin: 6px 2px 0; }

/* 对话记录里的系统提示行（如：回忆检索命中条数） */
.tmsg-sys {
  align-self: center;
  max-width: 92%;
  margin: 2px auto;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--ink-mute);
  background: var(--line-soft);
  border-radius: var(--r-pill);
  text-align: center;
}

/* RIGHT — conversation log */
.trial-log {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-soft);
  border-left: 1px solid var(--line-soft);
}
.trial-log-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.trial-log-head .trial-log-title { margin-right: auto; }
.trial-log-clear {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-cn);
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.trial-log-clear:hover {
  color: var(--coral-deep);
  border-color: var(--coral-deep);
  background: var(--coral-tint);
}
.trial-log-clear:active { transform: translateY(1px); }
.trial-log-title {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.trial-log-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--coral-deep);
  background: var(--coral-tint);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.trial-log-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.trial-log-body::-webkit-scrollbar { width: 6px; }
.trial-log-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.tmsg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: trialMsgIn .32s cubic-bezier(.2, .8, .2, 1) both;
}
.tmsg--user { flex-direction: row-reverse; }
.tmsg-av {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
}
.tmsg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmsg-av--pet { box-shadow: 0 3px 8px -3px rgba(234, 138, 79, .6); }
.tmsg-av--user { box-shadow: 0 3px 8px -3px rgba(60, 40, 20, .35); }
.tmsg-bubble {
  max-width: 80%;
  font-family: var(--font-cn);
  font-size: 13px;
  line-height: 1.55;
  padding: 8px 12px;
  border-radius: 15px;
}
.tmsg-bubble--user {
  background: var(--coral);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.tmsg-bubble--pet {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 5px;
}
.tmsg-bubble--pending {
  background: #fff;
  border: 1px dashed var(--coral-soft);
  border-bottom-left-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tmsg-pending-label {
  font-size: 11.5px;
  color: var(--ink-mute);
}
.tmsg-dots { display: inline-flex; gap: 3px; }
.tmsg-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral);
  animation: trialDot 1.2s ease-in-out infinite;
}
.tmsg-dots i:nth-child(2) { animation-delay: .18s; }
.tmsg-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes trialDot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}
@keyframes trialMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  /* 竖屏顺序:电视 → 对话记录 → 声音说明 → 设备状态。
     .trial-stage 用 display:contents 化掉,让 电视/说明/面板 成为卡片的可重排直接子项,
     再用 order 把"对话记录"插到电视与设备状态之间。整张卡片滚动,对话框内部独立滚动。 */
  .trial-card {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    height: auto;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .trial-stage { display: contents; }
  .trial-stage-title {
    position: static;
    order: 0;
    margin: 20px clamp(16px, 4vw, 24px) 0;
    font-size: 19px;
  }

  /* width:auto (overrides base width:100%) so the horizontal margins actually
     inset the TV to the SAME width as the conversation box below it, instead of
     rendering full-width-plus-margins and overflowing the card's right edge. */
  .trial-tv    { order: 1; width: auto; margin: clamp(20px, 5vw, 30px) clamp(16px, 4vw, 24px) 0; }
  /* 对话记录:做成加高的独立框,放在设备状态上面,内部独立滚动可看更多消息 */
  .trial-log {
    order: 2;
    flex: 0 0 auto;
    height: clamp(360px, 58vh, 540px);
    margin: 16px clamp(16px, 4vw, 24px) 0;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    overflow: hidden;
  }
  /* All widths ≤1024 use the desktop full-bleed cover treatment — the desktop
     .page-bleed + .hero__bg::after wood-feather handle scene→page. The old
     contain "band" mode (≤640) is retired; no narrow-width hero override remains. */
}

/* ============================================================
   Product section v2 — varied-size sliding card carousel
   ============================================================ */
.ps2-section {
  padding: clamp(44px, 5.5vw, 78px) 0 clamp(18px, 2.4vw, 32px);
  position: relative;
}
.ps2-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.ps2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-trough);
  color: var(--ink-soft);
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.ps2-title {
  font-family: var(--font-cn);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 16px;
}
.ps2-sub {
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}

/* Stage */
.ps2-stage {
  position: relative;
  width: 100%;
  outline: none;
}
.ps2-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* (carousel ‹ › arrows removed — click side cards / dots to switch) */

/* Card — absolute, positioned with transform */
.ps2-card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg-card);
  border-radius: clamp(16px, 2.4vw, 22px);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  /* Query container so inner card-1 strip + active type scale with the card
     width (cqw) instead of fixed px that overflowed on shrunk/portrait cards. */
  container-type: inline-size;
  transform: translate(var(--tx, 0), -50%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 22px 40px -20px rgba(60,40,20,.34);
  transition:
    transform .55s cubic-bezier(.22,.8,.22,1),
    width .55s cubic-bezier(.22,.8,.22,1),
    height .55s cubic-bezier(.22,.8,.22,1),
    opacity .35s ease,
    filter .35s ease,
    box-shadow .35s ease;
  will-change: transform, width;
  font-family: inherit;
  color: inherit;
}
.ps2-card.is-active {
  background: var(--bg-card);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 34px 60px -24px rgba(60,40,20,.42);
}
.ps2-card.is-side { filter: brightness(.985); }
.ps2-card.is-peek { filter: brightness(.94); }
.ps2-card:not(.is-active):hover { filter: brightness(1.02); transform: translate(var(--tx, 0), calc(-50% - 3px)); }

/* Per-card art background layer. Each card's modifier sets --card-art;
   the texture reads on collapsed cards (sparse content) and is pressed
   very faint on the active card so the foreground demo stays readable. */
.ps2-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-art, none);
  background-size: cover;
  background-position: center;
  opacity: .7;
  pointer-events: none;
  z-index: 0;
  transition: opacity .4s ease;
}
.ps2-card.is-active::before { opacity: .38; }
.ps2-card--shape  { --card-art: url("mpggeafd-image.png"); }
.ps2-card--action { --card-art: url("mpggcnbo-image.png"); }
.ps2-card--memory { --card-art: url("mpggb4t2-image.png"); }
.ps2-card--ai     { --card-art: url("mpgfzxe0-image.png"); }
.ps2-card--voice  { --card-art: url("mpgg9k53-image.png"); }
.ps2-card--remind { --card-art: url("mpgg4xk0-image.png"); }

/* Warm-glow motif (暖光晕): a soft coral bloom in the lower-right corner that
   fades in only when a card is active — sits above the art layer (::before,
   z0) and below content (.ps2-card-inner, z1), so it reads as warm light
   behind the demo, never washing the foreground. */
.ps2-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at center, var(--coral-soft) 0%, rgba(251,217,184,0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .45s ease;
}
.ps2-card.is-active::after { opacity: .5; }

.ps2-card-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps2-card.is-active .ps2-card-inner { padding: clamp(16px, 4.24cqw, 28px) clamp(16px, 4.24cqw, 28px) clamp(15px, 3.94cqw, 26px); }

/* Card header */
.ps2-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps2-card-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ps2-card.is-active .ps2-card-num { width: clamp(23px, 4.85cqw, 32px); height: clamp(23px, 4.85cqw, 32px); font-size: clamp(12px, 2.27cqw, 15px); }
.ps2-card-title {
  font-family: var(--font-cn);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.005em;
}
.ps2-card.is-active .ps2-card-title { font-size: clamp(17px, 3.94cqw, 26px); }
.ps2-card.is-peek .ps2-card-title { font-size: 17px; }

.ps2-card-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  white-space: pre-line;
}
.ps2-card.is-active .ps2-card-desc { font-size: clamp(11.5px, 2.27cqw, 15px); }
.ps2-card.is-peek .ps2-card-desc { font-size: 12px; line-height: 1.55; }

.ps2-card-body {
  flex: 1;
  min-height: 0;
  position: relative;
  margin-top: 6px;
}

/* Tag chip */
.ps2-tag-wrap {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
}
.ps2-card.is-active .ps2-tag-wrap { left: 28px; bottom: 28px; }
.ps2-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--coral-tint);
  color: var(--coral-deep);
  border: 1px solid #f3cfa6;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-cn);
  font-size: 12.5px;
  font-weight: 600;
}
.ps2-card.is-active .ps2-tag { background: #fff; color: var(--coral-deep); border-color: #f3cfa6; padding: 8px 14px; font-size: 13.5px; }

/* ====== Body: SHAPE — circular pet portrait ====== */
.psb-shape {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.psb-shape-photo {
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #fbe9d2 100%);
  border: 4px solid #fff;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 18px 28px -16px rgba(60,40,20,.3);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.psb-shape-photo img {
  width: 96%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(60,40,20,.18));
}
.ps2-card.is-peek .psb-shape-photo { width: 100%; border-width: 3px; }

/* Active state: full-card overlay with thumb + arrow + big portrait circle */
.ps2-card--shape.is-active .ps2-card-head,
.ps2-card--shape.is-active .ps2-card-desc {
  max-width: 46%;
  position: relative;
  z-index: 2;
}
/* Collapse the body so head/desc sit at the top and the absolutely-positioned
   active overlay (rendered inside body) can fill the whole card-inner. */
.ps2-card--shape.is-active .ps2-card-body {
  flex: 0 0 auto;
  height: 0;
  min-height: 0;
  margin-top: 0;
  position: static;
  overflow: visible;
}
/* The "1:1 还原" promise now lives on the transform axis, so drop the generic
   bottom-left tag for this card only. */
.ps2-card--shape.is-active .ps2-tag-wrap { display: none; }

/* Card 1 paw watermark — brand motif, decorative only */
.psb-shape-paw {
  position: absolute;
  left: 6px;
  bottom: 2px;
  color: var(--coral);
  opacity: .14;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* psb-shape--active fills the entire .ps2-card-inner (the next positioned
   ancestor once we make body static above). */
.psb-shape.psb-shape--active {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* ── Transform strip: 随手拍 → AI 复刻 → 桌宠成品, all on ONE vertical axis ──
   One flexbox row replaces the three hard-coded absolute boxes. align-items:
   center locks the thumb circle, arrow line and portrait circle to a single
   centreline; justify-content + flex-grow on the arrow distributes the gap, so
   nothing breaks if sizes change. */
.psb-shape-strip {
  position: absolute;
  /* insets scale with the card so the strip never overflows a shrunk card */
  left: clamp(13px, 4.24cqw, 28px);
  right: clamp(13px, 4.24cqw, 28px);
  top: clamp(60px, 13.9cqw, 92px);     /* clears the head + 2-line description */
  bottom: clamp(34px, 8.5cqw, 56px);   /* leaves room for the captions hanging below */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(3px, 0.9cqw, 6px);
}
/* Soft unified ground-glow so 随手拍 and 桌宠成品 read as one scene on a shared
   surface instead of two objects floating over the paper texture. Edge-free by
   design — a radial wash, no border/line — so it can never clip the captions
   that hang below each subject. */
.psb-shape-strip::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: -8%;
  bottom: 6%;
  border-radius: 50%;
  background:
    radial-gradient(70% 62% at 50% 46%,
      rgba(255, 252, 247, .9) 0%,
      rgba(251, 233, 210, .55) 46%,
      rgba(251, 233, 210, 0) 78%);
  filter: blur(6px);
  z-index: 0;
}
.psb-shape-strip::after {
  content: "";
  position: absolute;
  right: -3%;
  top: 16%;
  width: 48%;
  height: 66%;
  border-radius: 42%;
  background:
    radial-gradient(70% 64% at 50% 58%,
      rgba(168, 111, 63, .18) 0%,
      rgba(220, 174, 126, .12) 38%,
      rgba(250, 238, 220, 0) 74%);
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
}
/* lift the subjects above the wash */
.psb-shape-unit,
.psb-shape-arrow { z-index: 1; }

/* A unit = circle + caption. The caption is taken out of flow (absolute) so the
   circles — not the circle+caption blocks — share the centreline. */
.psb-shape-unit {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared circular disc — same SHAPE for input and output ("same dog, two
   forms"); size + treatment differ to read as snapshot vs. finished portrait. */
.psb-shape-disc {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fbe9d2 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Input — casual photo, smaller, photographic crop */
.psb-shape-disc--in {
  width: clamp(56px, 21.8cqw, 144px);
  border: clamp(2px, 0.5cqw, 3px) solid #fff;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .04),
    0 12px 20px -14px rgba(60, 40, 20, .28);
}
.psb-shape-disc--in img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
/* Output — the hero portrait, larger, ringed, sitting on its table shadow */
.psb-shape-disc--out {
  width: clamp(104px, 40cqw, 264px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    inset 0 0 0 2px rgba(241, 215, 184, .6),
    0 22px 44px -22px rgba(60, 40, 20, .28);
}
.psb-shape-disc--out img {
  position: relative;
  width: 92%;
  height: auto;
  max-height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(60, 40, 20, .22));
  z-index: 2;
}
/* Table-surface shadow band, clipped inside the output circle */
.psb-shape-disc--out::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  height: 22%;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%,
      rgba(60, 38, 20, .28) 0%,
      rgba(60, 38, 20, .14) 35%,
      rgba(60, 38, 20, 0) 70%);
  filter: blur(2px);
  z-index: 1;
}
/* Symmetric captions hang below each circle; the result pill is coral to pull
   the eye to the outcome. */
.psb-shape-cap {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-family: var(--font-cn);
  font-size: clamp(9.5px, 1.85cqw, 12px);
  font-weight: 600;
  padding: clamp(3px, 0.75cqw, 5px) clamp(7px, 1.8cqw, 12px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink-soft);
  border: 1px solid var(--line-soft);
  box-shadow: 0 8px 16px -12px rgba(60, 40, 20, .3);
}
.psb-shape-cap--out {
  background: var(--coral);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 18px -10px rgba(240, 160, 113, .7);
}
.psb-shape-tv-stage + .psb-shape-cap--out {
  margin-top: clamp(3px, 0.8cqw, 7px);
}

/* Finished TV output: use the hero hotspot's transparent PNG directly.
   No circular crop, ring, radial gradient, or extra shell. */
.psb-shape-unit--tv {
  width: clamp(122px, 36cqw, 246px);
}
.psb-shape-tv-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / .98;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.psb-shape-tv-stage::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 7%;
  height: 18%;
  border-radius: 50%;
  background:
    radial-gradient(70% 58% at 50% 50%,
      rgba(77, 48, 24, .24) 0%,
      rgba(77, 48, 24, .12) 42%,
      rgba(77, 48, 24, 0) 76%);
  filter: blur(10px);
  z-index: 0;
}
.psb-shape-tv-stage::after {
  content: none;
}
.psb-shape-tv-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter:
    saturate(.94)
    contrast(.96)
    drop-shadow(0 14px 18px rgba(60, 40, 20, .16));
}

/* Dashed coral arrow + the 1:1 promise riding above it (matches the site's
   coral dashed process language). The svg child sits ON the centreline; the
   label floats above it without shifting the axis. */
.psb-shape-arrow {
  position: relative;
  flex: 1 1 auto;
  min-width: clamp(22px, 10.6cqw, 70px);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
}
.psb-shape-arrow-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 9px;
  white-space: nowrap;
  font-family: var(--font-cn);
  font-size: clamp(9.5px, 1.9cqw, 12.5px);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--coral-deep);
}
.psb-shape-arrow-svg {
  width: 100%;
  max-width: 116px;
  height: 22px;
  color: var(--coral);
  opacity: .95;
}

/* ====== Body: ACTION — thumbs row + hero ====== */
.psb-action {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
  height: 100%;
}
.psb-action-hero {
  position: relative;
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 50% 60%, rgba(240, 160, 113, .18), transparent 60%),
    repeating-linear-gradient(45deg,
      rgba(168, 130, 80, .10) 0 8px,
      rgba(168, 130, 80, .02) 8px 16px),
    var(--bg-soft);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.psb-action-hero img {
  width: 85%;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(60,40,20,.18));
}

/* Active: hero action + selected glimpses */
.ps2-card--action.is-active .ps2-card-head,
.ps2-card--action.is-active .ps2-card-desc {
  position: relative;
  z-index: 2;
}
.ps2-card--action.is-active .ps2-card-body {
  margin-top: 8px;
}
/* breadth is now visible in the strip — hide the floating tag for this card */
.ps2-card--action.is-active .ps2-tag-wrap { display: none; }

.psb-action.psb-action--active {
  width: 100%;
  height: 100%;
}
.psb-action-stage {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(210px, .9fr);
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

/* Hero — square stage so the 1:1 gif fills it (no more 3:1 letterboxing) */
.psb-action-hero-wrap {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 18%, #fff 0%, #fbf1e3 60%, #f7ead7 100%);
  box-shadow:
    inset 0 0 0 1.5px #fff,
    inset 0 0 0 2.5px rgba(232, 200, 160, .38),
    0 16px 26px -18px rgba(60, 40, 20, .3);
}
.psb-action-hero-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  filter: drop-shadow(0 12px 16px rgba(60, 40, 20, .2));
  animation: psbActionPop .4s ease both;
}
@keyframes psbActionPop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.psb-action-now {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(43, 33, 26, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -6px rgba(60, 40, 20, .4);
}
.psb-action-now-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  animation: none;
}
@keyframes psbActionPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240, 160, 113, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(240, 160, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 160, 113, 0); }
}

.psb-action-glimpse {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(14px, 2.4cqw, 20px);
  border-radius: 16px;
  background:
    radial-gradient(90% 80% at 20% 18%, rgba(255, 255, 255, .86), transparent 62%),
    linear-gradient(135deg, rgba(251, 243, 231, .96), rgba(246, 228, 207, .72));
  border: 1px solid rgba(232, 200, 160, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}
.psb-action-glimpse p {
  margin: 0;
  font-family: var(--font-cn);
  font-size: clamp(14px, 2cqw, 16px);
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink-soft);
}
.psb-action-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.psb-action-mini {
  min-width: 0;
  appearance: none;
  border: 1px solid rgba(232, 200, 160, .62);
  background: rgba(255, 255, 255, .62);
  border-radius: 14px;
  padding: 8px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 18px -16px rgba(60, 40, 20, .28);
  transition: transform .16s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.psb-action-mini:hover,
.psb-action-mini.is-on {
  transform: translateY(-1px);
  border-color: rgba(240, 160, 113, .78);
  background: rgba(255, 247, 239, .9);
  box-shadow: 0 14px 22px -17px rgba(60, 40, 20, .35);
}
.psb-action-mini-thumb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff, #f8ecdc);
  border: 1px solid rgba(232, 200, 160, .52);
}
.psb-action-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}
.psb-action-mini-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.psb-action-mini-copy b {
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: 13px;
  line-height: 1.25;
}
.psb-action-mini-copy small {
  color: var(--ink-mute);
  font-size: 10.5px;
  line-height: 1.35;
  white-space: normal;
}
.psb-action-secret {
  display: flex;
  justify-content: flex-end;
}
.psb-action-secret span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  border: 1px dashed rgba(232, 200, 160, .68);
  color: var(--coral-deep);
  font-size: 11.5px;
  font-weight: 700;
}

/* Side / peek action card: just the hero gif */
.ps2-card--action:not(.is-active) .psb-action-hero {
  height: 100%;
}

/* ====== Body: STYLE — two plush shell variants ====== */
.psb-style {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  align-content: center;
}
.ps2-card.is-active .psb-style {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 18px);
  align-items: stretch;
}
.psb-style-card {
  min-width: 0;
  margin: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(226, 196, 166, .68);
  box-shadow: 0 12px 22px -18px rgba(60, 40, 20, .32);
  overflow: hidden;
}
.psb-style-photo {
  aspect-ratio: 4 / 3;
  background: var(--bg-trough);
  overflow: hidden;
}
.psb-style-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.psb-style-card figcaption {
  padding: 10px 12px 12px;
  display: grid;
  gap: 4px;
}
.psb-style-card figcaption span {
  color: var(--coral-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.psb-style-card figcaption strong {
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.25;
}
.ps2-card:not(.is-active) .psb-style-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
}
.ps2-card:not(.is-active) .psb-style-photo {
  height: 48px;
  aspect-ratio: 1;
}
.ps2-card:not(.is-active) .psb-style-card figcaption {
  padding: 8px 9px;
}
.ps2-card:not(.is-active) .psb-style-card figcaption span {
  display: none;
}
.ps2-card:not(.is-active) .psb-style-card figcaption strong {
  font-size: 12px;
}

/* ====== Body: MEMORY — recall demo (你问 → 先搜记忆库 → 用记得的细节回答) ====== */
/* Side / peek state: a calm glance at the memory bank */
.psb-memory {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.psb-mem-chip {
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.4;
}
.ps2-card.is-active .psb-mem-chip { font-size: 14px; padding: 9px 13px; }
.psb-mem-dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  transform: translateY(-1px);
}
.psb-mem-chip-k { font-weight: 700; color: var(--ink); }
.psb-mem-chip-v { color: var(--ink-soft); }

/* Active state — fill the card below head/desc, like the action card */
.ps2-card--memory.is-active .ps2-card-body { margin-top: 8px; }

.psb-memory.psb-memory--active {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 0;
}

/* The exchange stage — ask → recall → answer, staggered in on each cycle */
.psb-mem-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 4px 2px;
}
@keyframes psbMemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Chat avatars (shared by memory / AI / remind cards) ──
   Owner avatar rides the ask side, pet avatar rides the answer side, so each
   exchange reads as a real conversation between 主人 and 桌宠. */
.psb-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  max-width: 94%;
}
.psb-chat-row--user { align-self: flex-end;  flex-direction: row-reverse; }
.psb-chat-row--pet  { align-self: flex-start; flex-direction: row; }
/* the row now owns outer alignment + width; let the bubble fill it */
.psb-chat-row > .psb-mem-ask,
.psb-chat-row > .psb-mem-answer,
.psb-chat-row > .psb-ai-say,
.psb-chat-row > .psb-ai-did,
.psb-chat-row > .psb-rmd-bubble {
  align-self: auto;
  max-width: 100%;
}
.psb-av {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  border: 2px solid #fff;
}
.psb-av--user { box-shadow: 0 4px 11px -6px rgba(60,40,20,.5); }
.psb-av--pet  { box-shadow: 0 5px 13px -6px rgba(232,140,84,.6); }
@keyframes psbAvIn {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}
/* fade the avatar in on the same beat as the bubble it sits beside */
.psb-chat-row--user .psb-av { animation: psbAvIn .4s ease both; }
.psb-chat-row--pet  .psb-av { animation: psbAvIn .44s ease both .82s; }
.psb-chat-row--solo .psb-av { animation-delay: .35s; }

/* Owner question — secondary, plain, right-aligned */
.psb-mem-ask {
  align-self: flex-end;
  max-width: 76%;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px 16px 4px 16px;
  padding: 9px 14px;
  font-family: var(--font-cn);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 6px 14px -10px rgba(60,40,20,.35);
  opacity: 0;
  animation: psbMemIn .42s ease both;
}

/* Recall step — the "先搜再答" search indicator, the mechanism made visible */
.psb-mem-recall {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--coral-tint);
  border: 1px dashed #e6b988;
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--coral-deep);
  opacity: 0;
  animation: psbMemIn .42s ease both .4s;
}
.psb-mem-recall-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  animation: none;
}
@keyframes psbMemPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,160,113,.6); }
  70%  { box-shadow: 0 0 0 7px rgba(240,160,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,160,113,0); }
}
.psb-mem-recall-txt { font-weight: 700; }
.psb-mem-recall-kw { color: var(--ink-soft); }
.psb-mem-recall-kw::before { content: "“"; }
.psb-mem-recall-kw::after  { content: "”"; }

/* Pet answer — the payoff. Coral, larger, the visual hero of the card */
.psb-mem-answer {
  align-self: flex-start;
  max-width: 82%;
  background: linear-gradient(180deg, #fff3e6 0%, #ffe6cf 100%);
  border: 1px solid #f3cfa6;
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  font-family: var(--font-cn);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: 0 10px 22px -14px rgba(232,140,84,.6);
  opacity: 0;
  animation: psbMemIn .46s ease both .82s;
}

/* The memory bank — structure stays on screen; the recalled field glows */
.psb-mem-rail {
  flex-shrink: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 7px;
}
.psb-mem-tag {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 9px 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.55);
  cursor: pointer;
  text-align: left;
  opacity: .55;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease,
              background .25s ease, border-color .25s ease;
}
.psb-mem-tag:hover { opacity: .85; }
.psb-mem-tag-k {
  font-family: var(--font-cn);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.psb-mem-tag-v {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.psb-mem-tag.is-hit {
  opacity: 1;
  transform: translateY(-3px);
  background: var(--coral-tint);
  border-color: var(--coral);
  box-shadow:
    inset 0 0 0 1px var(--coral),
    0 8px 16px -9px rgba(232,140,84,.65);
}
.psb-mem-tag.is-hit .psb-mem-tag-k { color: var(--coral-deep); }
/* "档案标签被翻开" — coral file-tab spine on the recalled field */
.psb-mem-tag.is-hit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--coral);
}

/* Card 3 handwritten flourish (柳建毛草) — decorative, never functional copy */
.psb-mem-hand {
  position: absolute;
  right: 12px;
  bottom: 44px;
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  opacity: .22;
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 1;
}

/* ====== Body: AI — 动动嘴，它就办到 (voice command → on-board capability) ====== */
/* Side / peek state: a calm glance at three things it can do */
.psb-ai {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.psb-ai-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.4;
}
.ps2-card.is-active .psb-ai-chip { font-size: 14px; padding: 9px 13px; }
.psb-ai-chip-ic {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--coral-tint);
  color: var(--coral-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.psb-ai-chip-t { font-weight: 700; color: var(--ink); }

/* Active state — fill the card below head/desc, like the memory card */
.ps2-card--ai.is-active .ps2-card-body { margin-top: 8px; }
.psb-ai.psb-ai--active {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 0;
}

/* The exchange stage — say → did, staggered in on each cycle */
.psb-ai-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  padding: 4px 2px;
}
@keyframes psbAiIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* What the owner says — secondary, plain, right-aligned with a mic cue */
.psb-ai-say {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 80%;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px 16px 4px 16px;
  padding: 9px 14px;
  font-family: var(--font-cn);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 6px 14px -10px rgba(60,40,20,.35);
  opacity: 0;
  animation: psbAiIn .42s ease both;
}
.psb-ai-say-mic {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--coral-tint);
  color: var(--coral-deep);
  display: inline-flex; align-items: center; justify-content: center;
}


/* What it does — the payoff. Coral, larger, the visual hero of the card */
.psb-ai-did {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 86%;
  background: linear-gradient(180deg, #fff3e6 0%, #ffe6cf 100%);
  border: 1px solid #f3cfa6;
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  font-family: var(--font-cn);
  color: var(--ink);
  box-shadow: 0 10px 22px -14px rgba(232,140,84,.6);
  opacity: 0;
  animation: psbAiIn .46s ease both .36s;
}
.psb-ai-did-ic {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: #fff;
  color: var(--coral-deep);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -6px rgba(232,140,84,.7);
}
.psb-ai-did-t { font-size: 15px; line-height: 1.5; font-weight: 600; }

/* The capability rail — all six on screen; the active one lights up */
.psb-ai-rail {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.psb-ai-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.55);
  cursor: pointer;
  opacity: .5;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease,
              background .25s ease, border-color .25s ease;
}
.psb-ai-cap:hover { opacity: .85; }
.psb-ai-cap-ic { color: var(--ink-soft); display: inline-flex; }
.psb-ai-cap-t {
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.psb-ai-cap.is-on {
  opacity: 1;
  transform: translateY(-3px);
  background: var(--coral-tint);
  border-color: var(--coral);
  box-shadow:
    inset 0 0 0 1px var(--coral),
    0 8px 16px -9px rgba(232,140,84,.65);
}
.psb-ai-cap.is-on .psb-ai-cap-ic { color: var(--coral-deep); }

/* ====== Body: VOICE — waveform ====== */
.psb-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.psb-voice-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  height: 60%;
  padding: 0 4px;
}
.psb-voice-wave i {
  flex: 1;
  background: linear-gradient(180deg, var(--coral-deep) 0%, var(--coral) 100%);
  border-radius: 2px;
  min-height: 8%;
  display: block;
}

/* ====== Body: REMIND — time list ====== */
.psb-remind {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.psb-rem-row {
  display: grid;
  grid-template-columns: 18px 52px 1fr;
  gap: 10px;
  align-items: center;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
}
.psb-rem-ic { display: inline-flex; align-items: center; color: var(--coral-deep); }
.psb-rem-time {
  font-family: var(--font-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--coral-deep);
}
.psb-rem-label { color: var(--ink); font-weight: 500; }

/* ====== Body: VOICE active — animated waveform ====== */
.ps2-card--voice.is-active .ps2-card-body { margin-top: 8px; }
/* breadth now in the emotion rail — hide the floating tag */
.ps2-card--voice.is-active .ps2-tag-wrap { display: none; }

.psb-voice.psb-voice--active {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 0;
}

.psb-voc-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 4px 2px;
}
@keyframes psbVocIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animated waveform hero */
.psb-voc-wave-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  opacity: 0;
  animation: psbVocIn .42s ease both;
}
.psb-voc-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 0 4px;
}
@keyframes psbVocBar {
  0%   { height: var(--bh); }
  50%  { height: calc(var(--bh) * 0.38 + 8%); }
  100% { height: var(--bh); }
}
.psb-voc-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--coral-deep) 0%, var(--coral) 100%);
  border-radius: 2px;
  display: block;
  height: var(--bh);
  animation: psbVocBar 1.05s ease-in-out infinite;
  transition: height .3s ease;
}
/* Emotion peak — center bars run a deeper coral, the "loudest" moment */
.psb-voc-bar.is-peak {
  background: linear-gradient(180deg, #cf6a2c 0%, var(--coral-deep) 100%);
}

/* Context badges overlaid on waveform */
.psb-voc-now {
  position: absolute;
  bottom: 4px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-cn);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--coral-deep);
  background: var(--coral-tint);
  border: 1px dashed #e6b988;
  border-radius: 999px;
  padding: 2px 9px 2px 7px;
}
.psb-voc-now-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  animation: none;
  flex-shrink: 0;
}

/* Sample spoken line — like the ai-did bubble but left-anchored */
.psb-voc-line {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 86%;
  background: linear-gradient(180deg, #fff3e6 0%, #ffe6cf 100%);
  border: 1px solid #f3cfa6;
  border-radius: 16px 16px 16px 4px;
  padding: 10px 15px;
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: 0 10px 22px -14px rgba(232,140,84,.6);
  opacity: 0;
  animation: psbVocIn .46s ease both .5s;
}
.psb-voc-line-ic {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--coral-tint);
  color: var(--coral-deep);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Emotion rail — 4 items across */
.psb-voc-rail {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.psb-voc-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.55);
  cursor: pointer;
  opacity: .5;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease,
              background .25s ease, border-color .25s ease;
}
.psb-voc-cap:hover { opacity: .85; }
.psb-voc-cap-em {
  font-size: 16px;
  line-height: 1;
  filter: grayscale(1);
  transition: filter .25s ease;
}
.psb-voc-cap-t {
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.psb-voc-cap.is-on {
  opacity: 1;
  transform: translateY(-3px);
  background: var(--coral-tint);
  border-color: var(--coral);
  box-shadow:
    inset 0 0 0 1px var(--coral),
    0 8px 16px -9px rgba(232,140,84,.65);
}
.psb-voc-cap.is-on .psb-voc-cap-em { filter: grayscale(0); }

/* ====== Body: REMIND active — day companion nudges ====== */
.ps2-card--remind.is-active .ps2-card-body { margin-top: 8px; }
/* companion context now visible in the bubbles — hide the floating tag */
.ps2-card--remind.is-active .ps2-tag-wrap { display: none; }

.psb-remind.psb-remind--active {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 0;
}

.psb-rmd-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 4px 2px;
}
@keyframes psbRmdIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Time chip — clock icon + period + time */
.psb-rmd-timechip {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--coral-tint);
  border: 1px dashed #e6b988;
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--coral-deep);
  opacity: 0;
  animation: psbRmdIn .38s ease both;
}
.psb-rmd-period { font-weight: 700; }
.psb-rmd-clock {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--coral-deep);
}

/* Hero bubble — warm coral gradient "spoken" message */
.psb-rmd-bubble {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 88%;
  background: linear-gradient(180deg, #fff3e6 0%, #ffe6cf 100%);
  border: 1px solid #f3cfa6;
  border-radius: 16px 16px 16px 4px;
  padding: 13px 17px;
  font-family: var(--font-cn);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  box-shadow: 0 10px 22px -14px rgba(232,140,84,.6);
  opacity: 0;
  animation: psbRmdIn .44s ease both .35s;
}
.psb-rmd-bubble-dot {
  flex-shrink: 0;
  margin-top: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  animation: none;
}

/* "轻轻提醒" echo beat — like ai-beat */

/* Day timeline rail — 4 nudges across */
.psb-rmd-rail {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.psb-rmd-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.55);
  cursor: pointer;
  opacity: .5;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease,
              background .25s ease, border-color .25s ease;
}
.psb-rmd-cap:hover { opacity: .85; }
.psb-rmd-cap-time {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--coral-deep);
  white-space: nowrap;
}
.psb-rmd-cap-t {
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.psb-rmd-cap.is-on {
  opacity: 1;
  transform: translateY(-3px);
  background: var(--coral-tint);
  border-color: var(--coral);
  box-shadow:
    inset 0 0 0 1px var(--coral),
    0 8px 16px -9px rgba(232,140,84,.65);
}
.psb-rmd-cap.is-on .psb-rmd-cap-time { color: var(--coral-deep); }
.psb-rmd-cap-ic {
  display: inline-flex;
  color: var(--ink-soft);
  margin-bottom: 1px;
  transition: color .25s ease;
}
.psb-rmd-cap.is-on .psb-rmd-cap-ic { color: var(--coral-deep); }

/* Dots */
.ps2-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(14px, 1.8vw, 22px);
}
.ps2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s, width .25s ease;
}
.ps2-dot.on { background: var(--coral); width: 24px; border-radius: 4px; }
.ps2-dot:active { transform: scale(.9); }

.ps2-style-block {
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  max-width: 1120px;
}
.ps2-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.ps2-style-item {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(226, 196, 166, .68);
  box-shadow: 0 16px 30px -24px rgba(60, 40, 20, .32);
}
.ps2-style-media {
  aspect-ratio: 16 / 10;
  background: var(--bg-trough);
  overflow: hidden;
}
.ps2-style-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps2-style-copy {
  padding: 14px 16px 16px;
}
.ps2-style-copy span {
  display: inline-flex;
  color: var(--coral-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 7px;
}
.ps2-style-copy h4 {
  margin: 0;
  font-family: var(--font-cn);
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.ps2-style-status {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  transform: translateY(-1px);
  border-radius: 999px;
  background: rgba(234, 138, 79, .12);
  color: var(--coral-deep);
  padding: 2px 8px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
}
.ps2-want-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(234, 138, 79, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: var(--coral-deep);
  padding: 7px 12px;
  font-family: var(--font-cn);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .1s, box-shadow .18s;
}
.ps2-want-btn svg {
  flex-shrink: 0;
}
.ps2-want-btn b {
  font: inherit;
}
.ps2-want-btn em {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(234, 138, 79, .12);
  color: var(--ink-soft);
  font-style: normal;
  font-size: 11px;
  line-height: 1;
}
.ps2-want-btn:hover {
  background: rgba(234, 138, 79, .1);
  border-color: rgba(234, 138, 79, .58);
}
.ps2-want-btn:active {
  transform: scale(.97);
}
.ps2-want-btn.is-liked {
  background: rgba(234, 138, 79, .16);
  border-color: rgba(234, 138, 79, .72);
  box-shadow: 0 10px 20px -18px rgba(234, 138, 79, .8);
}
.ps2-want-btn.is-liked svg {
  fill: currentColor;
}
.ps2-want-btn.is-liked em {
  background: #fff;
  color: var(--coral-deep);
}
@media (max-width: 560px) {
  .ps2-style-grid {
    grid-template-columns: 1fr;
  }
}

/* Foot — two-up highlight strip */
.ps2-foot {
  margin: clamp(40px, 5vw, 70px) 0 0;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.ps2-foot-item {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ps2-foot-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-trough);
  color: var(--coral-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ps2-foot-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.ps2-foot-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.ps2-foot-divider {
  width: 1px;
  height: 48px;
  background: var(--line-soft);
}

@media (max-width: 900px) {
  .ps2-foot { grid-template-columns: 1fr; }
  .ps2-foot-divider { width: 100%; height: 1px; }
}


/* ============================================================
   Scenes (应用场景) — editorial lifestyle collage
   ============================================================ */
.scenes-section {
  padding: clamp(12px, 2vw, 28px) 0 clamp(52px, 6vw, 88px);
}
.scenes-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(28px, 3.4vw, 44px);
}
.scenes-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--coral-deep);
}
.scenes-eyebrow::before,
.scenes-eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--coral-deep));
}
.scenes-eyebrow::after { transform: scaleX(-1); }
.scenes-title {
  margin: 0 0 16px;
  font-family: var(--font-cn);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}
.scenes-lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* Scenes wall — mouse-parallax grid of daily-life moments.
   Ported from React Bits <GridMotion/>; per-row transforms are driven by JS rAF. */
.scene-wall {
  position: relative;
  height: clamp(440px, 62vh, 660px);
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(226, 196, 166, .5);
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 160, 113, .18), transparent 62%),
    var(--bg-trough);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 30px 60px -38px rgba(73, 40, 19, .45);
  isolation: isolate;
}
/* oversized + rotated so the parallaxing rows never reveal an edge */
.scene-wall-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 172%;
  height: 172%;
  transform: translate(-50%, -50%) rotate(-15deg);
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: clamp(10px, 1vw, 16px);
  z-index: 1;
}
.scene-wall-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: clamp(10px, 1vw, 16px);
  will-change: transform;
}
.scene-wall-item { position: relative; }
.scene-wall-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226, 196, 166, .5);
  box-shadow: 0 12px 24px -18px rgba(73, 40, 19, .5);
}
.scene-wall-inner.is-img { background: var(--bg-trough); }
.scene-wall-inner.is-word {
  background: linear-gradient(155deg, rgba(255, 244, 232, .96), rgba(255, 230, 212, .94));
}
.scene-wall-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.scene-wall-word {
  font-family: var(--font-cn);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: .02em;
  color: var(--coral-deep);
  text-align: center;
  padding: 0 10px;
}
/* warm vignette so the rotated wall melts into the section frame */
.scene-wall-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(43, 28, 17, .22) 100%),
    linear-gradient(180deg, rgba(255, 248, 240, .6), transparent 18% 82%, rgba(255, 248, 240, .6));
}

@media (max-width: 760px) {
  .scene-wall { height: clamp(360px, 72vw, 460px); }
  .scenes-br { display: none; }
}

/* ── Plush cover series (毛绒套) ───────────────────────────── */
.plush-section {
  padding: clamp(24px, 4vw, 40px) 0 clamp(52px, 6vw, 84px);
}
.plush-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(22px, 3.6vw, 44px);
  align-items: center;
  background:
    radial-gradient(circle at top left, rgba(255, 244, 232, .95), rgba(255, 244, 232, 0) 42%),
    linear-gradient(180deg, #fffaf6 0%, #fff4ea 100%);
  border: 1px solid rgba(218, 185, 153, .38);
  border-radius: 32px;
  box-shadow: 0 24px 60px -36px rgba(91, 55, 31, .22);
  padding: clamp(22px, 4vw, 40px);
}
.plush-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(224, 190, 157, .7);
  color: #9d5d33;
  font-size: 13px;
  font-weight: 700;
}
.plush-title {
  margin: 16px 0 14px;
  font-family: var(--font-cn);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
}
.plush-lede {
  margin: 0;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.plush-points {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}
.plush-point {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(226, 196, 166, .55);
  border-radius: 18px;
}
.plush-point strong {
  color: var(--ink);
  font-size: 14px;
}
.plush-point span {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}
.plush-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
}
.plush-compare-card,
.plush-card {
  margin: 0;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(226, 196, 166, .68);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 44px -36px rgba(73, 40, 19, .3);
}
.plush-compare-card img,
.plush-card-media img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.plush-compare-card figcaption {
  padding: 14px 16px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.plush-compare-card--featured {
  transform: translateY(28px);
}
.plush-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 24px);
  margin-top: 26px;
}
.plush-card-body {
  padding: 18px 18px 22px;
}
.plush-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(240, 160, 113, .14);
  color: #a45f36;
  font-size: 12px;
  font-weight: 700;
}
.plush-card h3,
.plush-feature h3 {
  margin: 12px 0 8px;
  font-family: var(--font-cn);
  font-size: clamp(1.2rem, 1.65vw, 1.48rem);
  color: var(--ink);
}
.plush-card p,
.plush-feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.82;
}
.plush-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.plush-feature {
  padding: 20px 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(226, 196, 166, .56);
  box-shadow: 0 16px 36px -30px rgba(73, 40, 19, .22);
}
@media (max-width: 980px) {
  .plush-shell,
  .plush-feature-list {
    grid-template-columns: 1fr;
  }
  .plush-compare-card--featured {
    transform: none;
  }
}
@media (max-width: 720px) {
  .plush-grid,
  .plush-compare {
    grid-template-columns: 1fr;
  }
  .plush-point {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.qr-zoom-btn {
  border: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.qr-zoom-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.qr-zoom-btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

.qr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 18, 16, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: qrFade .18s ease;
}
@keyframes qrFade { from { opacity: 0; } to { opacity: 1; } }

.qr-lightbox-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 24px 24px 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  max-width: min(92vw, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: qrPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes qrPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.qr-lightbox-card img {
  width: min(70vw, 360px);
  height: min(70vw, 360px);
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

.qr-lightbox-label {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #2a241f;
}
.qr-lightbox-hint {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(0,0,0,.45);
}

.qr-lightbox-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: rgba(0,0,0,.5);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.qr-lightbox-close:hover { background: rgba(0,0,0,.06); color: rgba(0,0,0,.85); }
.qr-lightbox-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

@media (max-width: 480px) {
  .qr-lightbox-card { padding: 20px 18px 14px; }
  .qr-lightbox-card img { width: 78vw; height: 78vw; }
}

/* "Coming soon" toast — fired by openComingSoon() */
.coming-soon-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 2100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: rgba(30, 18, 10, .92);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45),
              0 0 0 1px rgba(255, 255, 255, .06) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cstIn .28s ease-out both, cstOut .35s ease-in 2.05s both;
  pointer-events: none;
}
.coming-soon-toast .cst-emoji {
  font-size: 16px;
  line-height: 1;
}
.coming-soon-toast strong {
  color: var(--coral);
  font-weight: 600;
  margin-right: 2px;
}
@keyframes cstIn {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cstOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 480px) {
  .coming-soon-toast {
    bottom: 24px;
    font-size: 13px;
    padding: 11px 18px;
    max-width: calc(100vw - 32px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .coming-soon-toast { animation: none; }
}

/* ─── Statue modal ─── */
.statue-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 12, .48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 24px;
  animation: contactFadeIn .28s ease both;
  overflow-y: auto;
}
.statue-card {
  position: relative;
  width: min(820px, 100%);
  background: var(--bg-card);
  border-radius: 24px;
  border: 1px solid var(--line-soft);
  padding: clamp(28px, 3.5vw, 40px);
  box-shadow:
    0 40px 80px -28px rgba(40, 24, 10, .45),
    0 0 0 1px rgba(255, 255, 255, .5) inset;
  animation: contactPopIn .35s cubic-bezier(.2, .8, .2, 1) both;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.statue-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .2s ease;
  z-index: 2;
}
.statue-close:hover { background: var(--coral); color: #fff; border-color: var(--coral-deep); }
.statue-close:active { transform: scale(.92); }
.statue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 6px 0 22px;
  align-items: start;
}
.statue-fig {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  display: block;
}
.statue-fig img {
  width: 100%;
  height: auto;
  display: block;
}
.statue-points {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.statue-point {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: #faf6ef;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.statue-point strong {
  font-size: 13px;
  color: var(--ink);
}
.statue-point span {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}
.statue-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin-inline: auto;
  gap: 6px;
  padding: 12px 28px;
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: background .2s ease, transform .12s ease;
}
.statue-cta:hover { background: var(--coral-deep); transform: translateY(-1px); }
.statue-cta:visited { color: #fff; }

@media (max-width: 640px) {
  .statue-grid { grid-template-columns: 1fr; }
  .statue-points { grid-template-columns: 1fr; }
  .statue-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .statue-overlay, .statue-card { animation: none; }
}

/* ─────────── 在线定制弹窗 (CustomModal) ─────────── */
.cz-overlay {
  position: fixed; inset: 0;
  background: rgba(30, 20, 12, .5);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 24px;
  animation: contactFadeIn .28s ease both;
}
.cz-card {
  position: relative;
  width: min(1120px, 100%);
  height: min(720px, calc(100vh - 48px));
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 360px;
  background: var(--bg-card);
  border-radius: 24px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  box-shadow: 0 40px 90px -28px rgba(40, 24, 10, .5), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  animation: contactPopIn .38s cubic-bezier(.2, .8, .2, 1) both;
}
.cz-card.is-drag { box-shadow: 0 40px 90px -28px rgba(40, 24, 10, .5), 0 0 0 2px var(--coral) inset; }

/* drag-to-upload overlay */
.cz-dragmask {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 250, 245, .82);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: none; animation: contactFadeIn .16s ease both;
}
.cz-dragmask-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 46px; border-radius: 18px;
  border: 2px dashed var(--coral);
  background: rgba(255, 255, 255, .7);
}
.cz-dragmask-inner span { font-size: 15px; font-weight: 800; }
.cz-dragmask-inner small { font-size: 12px; color: var(--ink-mute); }

/* avatar (logo) */
.cz-av {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-trough); border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cz-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz-av--lg { width: 40px; height: 40px; }

/* 用户在对话里上传的照片气泡 */
.tmsg-bubble--img { padding: 5px !important; background: var(--bg-trough) !important; border-radius: 16px; }
.cz-msg-img {
  display: block; width: 180px; max-width: 60vw; max-height: 220px;
  object-fit: cover; border-radius: 12px;
}
.tmsg-bubble--img span { display: block; padding: 4px 6px 2px; font-size: 13px; }

/* LEFT — 定制信息卡 */
.cz-left {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(234, 138, 79, .07), transparent 60%),
    var(--bg-trough);
  border-right: 1px solid var(--line-soft);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}
.cz-left-head { margin-bottom: 16px; }
.cz-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--coral-deep); background: rgba(234, 138, 79, .12);
  border-radius: 999px; padding: 4px 11px;
}
.cz-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); display: block; }
.cz-title { font-family: var(--font-cn); font-size: 24px; font-weight: 800; color: var(--ink); margin: 12px 0 6px; }
.cz-subtitle { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.65; max-width: 560px; }

.cz-photo {
  margin: 4px 0 8px; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16 / 7; background: #fff;
  border: 1.5px solid rgba(234, 138, 79, .32); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -26px rgba(40, 24, 10, .45);
}
.cz-photo.is-filled { cursor: default; }
.cz-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz-drop {
  width: 100%; height: 100%;
  border: 1.5px dashed rgba(234, 138, 79, .55); border-radius: 18px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  color: var(--coral-deep); transition: background .2s, border-color .2s;
}
.cz-photo:hover .cz-drop { background: rgba(234, 138, 79, .06); border-color: var(--coral); }
.cz-drop span { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cz-drop small { font-size: 11.5px; color: var(--ink-mute); }
.cz-format-note {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.cz-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cz-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.cz-progress-bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.cz-progress-num { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

.cz-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cz-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line-soft); transition: border-color .25s, box-shadow .25s; }
.cz-item.is-done { border-color: rgba(234, 138, 79, .35); }
.cz-item:focus-within { border-color: rgba(234, 138, 79, .8); box-shadow: 0 0 0 3px rgba(234, 138, 79, .12); }
.cz-tick {
  margin-top: 3px;
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--bg-trough);
  color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.cz-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cz-item-label { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.cz-item-val { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-item.is-done .cz-item-val { color: var(--ink-soft); }
.cz-item-saved { flex-shrink: 0; margin-top: 1px; font-size: 10.5px; font-weight: 700; color: var(--coral-deep); background: rgba(234, 138, 79, .12); border-radius: 999px; padding: 2px 7px; }

/* 左侧可直接填写：文字输入框 + 文件项「点击编辑」 */
.cz-item-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid rgba(118, 93, 73, .18);
  background: rgba(255, 250, 245, .75);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px; line-height: 1.45; color: var(--ink); font-family: inherit;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.cz-item-input--area { resize: vertical; min-height: 72px; }
.cz-item-input::placeholder { color: var(--ink-mute); opacity: .82; }
.cz-item-input:hover { background: #fff; border-color: rgba(234, 138, 79, .36); }
.cz-item-input:focus { outline: none; background: #fff; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(234, 138, 79, .1); }
.cz-item-edit {
  width: 100%; text-align: left; border: 1px dashed rgba(234, 138, 79, .42);
  background: rgba(234, 138, 79, .06); padding: 9px 10px; border-radius: 10px; cursor: pointer;
  font-size: 13px; color: var(--ink-soft); font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .18s;
}
.cz-item-edit:hover { color: var(--coral-deep); }
.cz-item.is-done .cz-item-edit { color: var(--ink-soft); }
.cz-item-help {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.cz-payment-fields {
  display: grid;
  gap: 8px;
}
.cz-shell-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cz-shell-option {
  min-width: 0;
}
.cz-shell-option.is-disabled {
  cursor: not-allowed;
  opacity: .58;
  background: rgba(255, 255, 255, .48);
}
.cz-shell-option.is-disabled input {
  cursor: not-allowed;
}
.cz-shell-option.is-disabled b,
.cz-shell-option.is-disabled em {
  color: var(--ink-mute);
}
.cz-pay-options {
  display: grid;
  gap: 8px;
}
.cz-pay-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.cz-pay-option.is-on {
  border-color: rgba(234, 138, 79, .65);
  background: rgba(234, 138, 79, .07);
  box-shadow: 0 10px 22px -18px rgba(234, 138, 79, .55);
}
.cz-pay-option input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--coral);
}
.cz-pay-option span {
  display: grid;
  gap: 2px;
  line-height: 1.35;
}
.cz-pay-option b {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.cz-pay-option em,
.cz-payment-note {
  font-style: normal;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.cz-payment-note {
  display: block;
  padding: 0 2px;
}

/* 每项小图标 + 必填标记 */
.cz-item-ic { flex-shrink: 0; width: 16px; display: flex; align-items: center; justify-content: center; color: var(--ink-mute); transition: color .25s; }
.cz-item-ic { margin-top: 5px; }
.cz-item.is-done .cz-item-ic { color: var(--coral-deep); }
.cz-item-label { display: inline-flex; align-items: center; gap: 6px; }
.cz-req {
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--coral-deep); background: rgba(234, 138, 79, .12);
  border-radius: 999px; padding: 1px 6px; line-height: 1.5;
}
.cz-item.is-req:not(.is-done) { border-color: rgba(234, 138, 79, .45); }

/* 下单页：照片缺失时的「上传照片」占位按钮 */
.cz-order-photo--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(234, 138, 79, .06); border: 1.5px dashed; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700;
}
.cz-order-photo--empty span { font-size: 10.5px; }
.cz-order-photo--empty em { font-style: normal; font-size: 9px; font-weight: 800; opacity: .8; }
.cz-order-photo--empty:hover { background: rgba(234, 138, 79, .12); }

/* 底部「可以啦，交付」按钮 */
.cz-deliver {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--coral); background: rgba(234, 138, 79, .06);
  color: var(--coral-deep); font-size: 13.5px; font-weight: 800; font-family: inherit;
  cursor: pointer; transition: background .18s, transform .1s;
}
.cz-deliver:hover { background: rgba(234, 138, 79, .12); }
.cz-deliver:active { transform: scale(.99); }
.cz-deliver:disabled { opacity: .5; cursor: default; }

.cz-foot-note { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-mute); margin: 9px 0 0; line-height: 1.4; }
.cz-foot-note svg { flex-shrink: 0; }

.cz-cta {
  margin-top: auto; border: none; border-radius: 13px; color: #fff;
  font-family: var(--font-cn); font-size: 14.5px; font-weight: 800; letter-spacing: .02em;
  padding: 13px 18px; cursor: pointer; width: 100%;
  box-shadow: 0 10px 22px -10px rgba(234, 138, 79, .8);
  transition: transform .12s, box-shadow .2s, filter .2s;
}
.cz-cta:hover { filter: brightness(1.04); box-shadow: 0 14px 28px -12px rgba(234, 138, 79, .9); }
.cz-cta:active { transform: scale(.985); }
.cz-cta.is-ready { animation: none; }
.cz-foot-cta-m { display: none; }
@media (max-width: 760px) { .cz-foot-cta-m { display: block; } }
.cz-cta.is-ghost { background: #fff !important; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
@keyframes czPulse { 0%, 100% { box-shadow: 0 10px 22px -10px rgba(234,138,79,.7); } 50% { box-shadow: 0 14px 30px -8px rgba(234,138,79,.95); } }

/* RIGHT — 对话 */
.cz-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: rgba(255, 250, 245, .52); }
.cz-right-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.cz-advisor-name { font-family: var(--font-cn); font-size: 14px; font-weight: 800; color: var(--ink); margin: 0; }
.cz-advisor-sub { font-size: 11px; color: var(--ink-mute); margin: 1px 0 0; }
.cz-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-mute); background: var(--bg-trough); border-radius: 999px; padding: 3px 10px; }

.cz-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }

.cz-foot { border-top: 1px solid var(--line-soft); padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.cz-attach {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--coral); color: var(--coral-deep);
  border-radius: 12px; font-family: var(--font-cn); font-size: 13.5px; font-weight: 700;
  padding: 11px 14px; cursor: pointer; transition: background .2s, transform .1s;
}
.cz-attach.is-primary { animation: none; }
.cz-attach:hover { background: rgba(234, 138, 79, .08); }
.cz-attach:active { transform: scale(.98); }
@keyframes czNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.cz-composer { display: flex; align-items: flex-end; gap: 8px; background: var(--bg-trough); border: 1px solid var(--line-soft); border-radius: 14px; padding: 7px 8px 7px 6px; }
.cz-attach-mini { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s, color .18s; }
.cz-attach-mini:hover { background: #fff; color: var(--coral-deep); }
.cz-input { flex: 1; resize: none; border: none; background: transparent; outline: none; font-family: var(--font-cn); font-size: 14px; line-height: 1.5; color: var(--ink); padding: 7px 2px; max-height: 96px; }
.cz-input::placeholder { color: var(--ink-mute); }
.cz-input:disabled { cursor: not-allowed; }
.cz-send { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter .2s, transform .1s; }
.cz-send:disabled { opacity: .4; cursor: not-allowed; }
.cz-send:not(:disabled):hover { filter: brightness(1.05); }
.cz-send:not(:disabled):active { transform: scale(.92); }

/* 下单页 */
.cz-order { position: absolute; inset: 0; background: rgba(36, 26, 18, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 22px; z-index: 6; animation: contactFadeIn .24s ease both; }
.cz-order-card { position: relative; width: min(460px, 100%); max-height: 100%; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 20px; padding: 30px 26px 24px; box-shadow: 0 30px 70px -24px rgba(40, 24, 10, .55); animation: contactPopIn .34s cubic-bezier(.2,.8,.2,1) both; }
.cz-order-title { font-family: var(--font-cn); font-size: 19px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.cz-order-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.6; }
.cz-order-summary { display: flex; gap: 13px; align-items: flex-start; background: var(--bg-trough); border-radius: 14px; padding: 13px; margin-bottom: 16px; }
.cz-order-photo { width: 72px; height: 72px; border-radius: 11px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line-soft); }
.cz-order-summary ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cz-order-summary li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.45; }
.cz-order-summary li span { flex-shrink: 0; width: 30px; color: var(--ink-mute); }
.cz-order-summary li b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.cz-pkgs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.cz-pkg { text-align: left; background: #fff; border: 1.5px solid var(--line-soft); border-radius: 13px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; transition: border-color .2s, background .2s; }
.cz-pkg.is-on { background: rgba(234, 138, 79, .05); }
.cz-pkg-top { display: flex; align-items: baseline; justify-content: space-between; }
.cz-pkg-top b { font-family: var(--font-cn); font-size: 14.5px; font-weight: 800; color: var(--ink); }
.cz-pkg-top em { font-style: normal; font-size: 16px; font-weight: 800; }
.cz-pkg-desc { font-size: 11.5px; color: var(--ink-soft); }
.cz-done { text-align: center; padding: 6px 0; }
.cz-done-ring { width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; margin: 4px auto 16px; animation: contactPopIn .4s cubic-bezier(.2,.8,.2,1) both; }
.cz-success-stage {
  position: relative;
  width: 168px;
  height: 134px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
}
.cz-fireworks {
  position: absolute;
  inset: -22px -32px;
  pointer-events: none;
  overflow: visible;
}
.cz-fireworks i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(234, 138, 79, .13);
  transform: translate(-50%, -50%) scale(.2);
  animation: successFirework 1.18s cubic-bezier(.14, .72, .2, 1) forwards;
}
.cz-fireworks i:nth-child(2n) { background: #f6c56f; box-shadow: 0 0 0 3px rgba(246, 197, 111, .16); }
.cz-fireworks i:nth-child(3n) { background: #9fcf9c; box-shadow: 0 0 0 3px rgba(159, 207, 156, .15); }
.cz-fireworks i:nth-child(1) { --x: -76px; --y: -48px; animation-delay: .08s; }
.cz-fireworks i:nth-child(2) { --x: -34px; --y: -70px; animation-delay: .16s; }
.cz-fireworks i:nth-child(3) { --x: 28px; --y: -78px; animation-delay: .04s; }
.cz-fireworks i:nth-child(4) { --x: 76px; --y: -44px; animation-delay: .2s; }
.cz-fireworks i:nth-child(5) { --x: 88px; --y: 6px; animation-delay: .12s; }
.cz-fireworks i:nth-child(6) { --x: 64px; --y: 52px; animation-delay: .24s; }
.cz-fireworks i:nth-child(7) { --x: 14px; --y: 72px; animation-delay: .1s; }
.cz-fireworks i:nth-child(8) { --x: -48px; --y: 58px; animation-delay: .28s; }
.cz-fireworks i:nth-child(9) { --x: -86px; --y: 14px; animation-delay: .18s; }
.cz-fireworks i:nth-child(10) { --x: -108px; --y: -22px; animation-delay: .32s; }
.cz-fireworks i:nth-child(11) { --x: 104px; --y: -18px; animation-delay: .3s; }
.cz-fireworks i:nth-child(12) { --x: -12px; --y: -104px; animation-delay: .22s; }
.cz-fireworks i:nth-child(13) { --x: 106px; --y: 48px; animation-delay: .36s; }
.cz-fireworks i:nth-child(14) { --x: -96px; --y: 54px; animation-delay: .34s; }
.cz-success-photo {
  width: 118px;
  height: 118px;
  object-fit: cover;
  border-radius: 26px;
  border: 4px solid #fff;
  box-shadow: 0 18px 34px -22px rgba(40, 24, 10, .5);
  transform: rotate(-3deg);
  animation: successPhotoIn .48s cubic-bezier(.2,.8,.2,1) both;
}
.cz-success-stage .cz-done-ring {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 48px;
  height: 48px;
  margin: 0;
  background: var(--bg-card);
  box-shadow: 0 10px 24px -16px rgba(40, 24, 10, .5);
}
.cz-success-title {
  margin-bottom: 8px;
  text-align: center;
}
.split-success {
  display: inline-flex;
  justify-content: center;
  gap: .02em;
  white-space: nowrap;
}
.split-success-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px) scale(.96);
  animation: splitSuccessIn .62s cubic-bezier(.16, .84, .28, 1.18) forwards;
}
@keyframes splitSuccessIn {
  0% { opacity: 0; transform: translateY(22px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes successPhotoIn {
  from { opacity: 0; transform: translateY(12px) rotate(-7deg) scale(.94); }
  to { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
}
@keyframes successFirework {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  18% { opacity: 1; }
  78% { opacity: .9; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.25); }
}
.cz-qr { width: 150px; height: 150px; margin: 16px auto 10px; padding: 10px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; }
.cz-qr-cap { font-size: 12px; color: var(--ink-soft); margin: 0 0 18px; }
.cz-taobao-flow {
  display: grid;
  gap: 14px;
  margin: 14px 0 18px;
  text-align: left;
}
.cz-taobao-copy,
.cz-order-guide {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, .62);
  padding: 13px;
}
.cz-taobao-copy {
  display: grid;
  gap: 8px;
}
.cz-taobao-copy-btn {
  width: 100%;
  border: 1.5px solid;
  background: #fff;
  border-radius: 13px;
  padding: 12px 14px;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s, transform .1s;
}
.cz-taobao-copy-btn:hover { background: rgba(234, 138, 79, .08); }
.cz-taobao-copy-btn:active { transform: scale(.985); }
.cz-taobao-tip {
  min-height: 18px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  text-align: center;
}
.cz-taobao-tip.is-on {
  color: var(--coral-deep);
  font-weight: 800;
}
.cz-order-guide {
  display: grid;
  gap: 10px;
}
.cz-order-guide-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.cz-guide-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.cz-guide-thumb {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(226, 196, 166, .78);
  border-radius: 13px;
  background: rgba(255, 255, 255, .74);
  color: var(--ink-soft);
  font-family: var(--font-cn);
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  cursor: zoom-in;
  transition: transform .16s ease, border-color .18s ease, box-shadow .18s ease;
}
.cz-guide-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(234, 138, 79, .62);
  box-shadow: 0 10px 22px -18px rgba(60, 40, 20, .4);
}
.cz-guide-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / .82;
  object-fit: cover;
  object-position: center top;
  border-radius: 9px;
}
.cz-guide-thumb span { line-height: 1.35; }
.cz-guide-preview {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(36, 26, 18, .42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: zoom-out;
}
.cz-guide-preview img {
  display: block;
  max-width: min(100%, 620px);
  max-height: 92%;
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 70px -24px rgba(40, 24, 10, .62);
  cursor: default;
}
.cz-guide-preview-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(226, 196, 166, .85);
  border-radius: 50%;
  background: rgba(255, 252, 246, .92);
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.cz-taobao-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
}
.cz-taobao-submit {
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .18s, transform .1s;
}
.cz-taobao-submit:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.cz-taobao-submit:not(:disabled):hover { filter: brightness(1.04); }
.cz-taobao-submit:not(:disabled):active { transform: scale(.97); }
.cz-taobao-submitted {
  margin: -2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--coral-deep);
  font-weight: 800;
  text-align: center;
}
.cz-done .cz-cta { margin-top: 0; }

/* 移动端竖屏标签栏（桌面端隐藏，不占网格列） */
.cz-tabs { display: none; }
@media (max-width: 760px) {
  .cz-overlay { padding: 0; }
  /* 全屏卡片：标签栏(自动高) + 内容(填满) */
  .cz-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    width: 100%; height: 100%;
    max-height: 100dvh; max-height: 100vh;
    border-radius: 0; border: none;
  }
  .cz-tabs {
    display: flex; align-items: center; gap: 6px;
    grid-column: 1 / -1; grid-row: 1;
    padding: 10px 52px 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-card);
  }
  .cz-tabs button {
    flex: 0 0 auto; border: none; background: transparent;
    font: inherit; font-weight: 800; font-size: 14px; color: var(--ink-mute);
    padding: 7px 15px; border-radius: 999px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cz-tabs button.is-on { background: var(--bg-trough); color: var(--ink); }
  .cz-tabs button em { font-style: normal; font-size: 12px; opacity: .65; margin-left: 2px; }

  /* 两个面板都落在第 2 行同一格，由 m-chat / m-info 控制谁显示 */
  .cz-left, .cz-right { grid-column: 1 / -1; grid-row: 2; min-height: 0; min-width: 0; }
  .cz-left { border-right: none; padding: 20px 18px 18px; }
  .cz-shell-options,
  .cz-guide-images,
  .cz-taobao-order-row { grid-template-columns: 1fr; }
  .cz-card.m-chat .cz-left { display: none; }
  .cz-card.m-info .cz-right { display: none; }
  .trial-close { z-index: 60; }
}
@media (prefers-reduced-motion: reduce) {
  .cz-overlay, .cz-card, .cz-order, .cz-order-card, .cz-cta.is-ready, .cz-attach.is-primary, .cz-done-ring, .cz-fireworks i, .split-success-char, .cz-success-photo { animation: none; opacity: 1; }
}

/* Mobile product carousel: keep one clean card in view and prevent Chinese text
   from being squeezed into vertical columns on narrow screens. */
@media (max-width: 640px) {
  .ps2-section {
    padding-top: 34px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
  }

  .ps2-header {
    margin-bottom: 24px;
    padding: 0 24px;
  }

  .ps2-title {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
    line-height: 1.22;
  }

  .ps2-sub {
    white-space: normal;
    line-height: 1.75;
  }

  .ps2-canvas {
    overflow: visible;
    width: 100%;
  }

  .ps2-stage {
    touch-action: pan-y;
  }

  .ps2-card.is-side,
  .ps2-card.is-peek {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
  }

  .ps2-card.is-active {
    cursor: default;
    overflow: hidden;
  }

  .ps2-card.is-active .ps2-card-inner {
    padding: 20px 18px;
    gap: 12px;
  }

  .ps2-card-title {
    white-space: nowrap;
    word-break: keep-all;
  }

  .ps2-card-desc {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-line;
    word-break: keep-all;
  }

  .ps2-card-body {
    margin-top: 4px;
  }

  .psb-action-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.15fr) auto;
    gap: 12px;
  }

  .psb-action-hero-wrap {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / .9;
  }

  .psb-action-hero-wrap img {
    padding: 3%;
  }

  .psb-action-now {
    left: 10px;
    bottom: 10px;
    font-size: 13px;
    padding: 6px 11px 6px 10px;
  }

  .psb-action-glimpse {
    padding: 14px;
    gap: 10px;
  }

  .psb-action-glimpse p {
    font-size: 14px;
    line-height: 1.5;
  }

  .psb-action-mini-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .psb-action-mini {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    border-radius: 12px;
  }

  .psb-action-mini-thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .psb-action-mini-copy b {
    font-size: 12.5px;
    line-height: 1.2;
    white-space: nowrap;
    word-break: keep-all;
  }

  .psb-action-mini-copy small {
    display: none;
  }

  .psb-action-secret {
    justify-content: flex-start;
  }

  .psb-action-secret span {
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
  }
}