/* 家有宠 / Homepaw 网站样式：纸色底、墨色字，印章红只用在少数点缀上。
   不加载任何外部字体、脚本或统计。 */

:root {
  --paper: #F5F1E7;
  --card: #FCFBF7;
  --ink: #5A5A40;
  --ink-strong: #45452F;
  --muted: #726D5C;
  --line: #E8E4D9;
  --line-2: #CFC8B6;
  --seal: #C45A45;
  --seal-text: #A94A38;
  --honey: #F2C572;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
          "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Songti SC", Georgia, serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

a { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--seal); }
a:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* 顶部 */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink-strong); text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand span { font-family: var(--kai); font-size: 20px; letter-spacing: 1px; }
.brand small { font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); padding: 4px 0; }
.nav a[aria-current="page"] { color: var(--ink-strong); border-bottom: 2px solid var(--seal); }
.nav a:hover { color: var(--ink-strong); }

/* 标题区 */
.hero { text-align: center; padding: 48px 0 28px; }
h1, h2, h3 { color: var(--ink-strong); line-height: 1.35; font-weight: 600; text-wrap: balance; }
h1 { font-family: var(--kai); font-size: 32px; letter-spacing: 1px; margin: 36px 0 8px; }
h2 { font-family: var(--kai); font-size: 23px; margin: 40px 0 10px; padding-top: 8px; }
h3 { font-size: 17px; margin: 26px 0 6px; }
section[lang="en"] h1, section[lang="en"] h2 { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; letter-spacing: 0; }

p, ul, ol, dl { margin: 0 0 14px; }
ul, ol { padding-left: 1.3em; }
li { margin: 4px 0; }
strong { color: var(--ink-strong); }

.meta { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

/* 小印章：只在每种语言的开头出现一次 */
.seal {
  display: inline-block; vertical-align: 4px; margin-right: 10px;
  width: 30px; height: 30px; line-height: 30px; text-align: center;
  background: var(--seal); color: #FFF8EE; border-radius: 6px;
  font-family: var(--kai); font-size: 17px; font-weight: 600; letter-spacing: 0;
  transform: rotate(-4deg);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 18px 0;
}
.card > :last-child { margin-bottom: 0; }
.card h3:first-child { margin-top: 0; }

.summary { border-left: 4px solid var(--honey); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0; }
.features .card { margin: 0; }
.features h3 { margin: 0 0 4px; font-size: 16px; }
.features p { margin: 0; font-size: 15px; color: var(--ink); }

.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.links a {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); text-decoration: none; font-size: 15px;
}
.links a:hover { border-color: var(--ink); }

.ui { white-space: nowrap; }
kbd, .ui-name { font-family: inherit; color: var(--ink-strong); font-weight: 600; }

details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; margin: 10px 0; }
details[open] { padding-bottom: 6px; }
summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--ink-strong); list-style-position: outside; }
summary:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 4px; }
details p, details ul, details ol { margin-bottom: 10px; }

.mail { font-size: 18px; font-weight: 600; }

hr.lang { border: 0; border-top: 1px dashed var(--line-2); margin: 56px 0 8px; }

.foot { border-top: 1px solid var(--line); margin-top: 56px; padding: 22px 0 40px; color: var(--muted); font-size: 14px; }
.foot p { margin: 4px 0; }
.foot a { color: var(--muted); }

/* 首页（index.html 中文、en.html 英文） */
.home .hero { padding: 56px 16px 36px; }
.hero-icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 6px 20px rgba(90, 90, 64, .14); }
.home .hero-name { font-size: 44px; margin: 24px 0 4px; }
.home .hero-name .seal { width: 40px; height: 40px; line-height: 40px; font-size: 23px; border-radius: 8px; vertical-align: 6px; margin-right: 14px; }
html[lang="en"] .hero-name { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; letter-spacing: 0; }
.hero-sub { font-size: 19px; color: var(--ink-strong); margin: 0 0 14px; }
.hero-line { color: var(--ink); margin: 0 auto 26px; max-width: 34em; text-wrap: balance; }
.badge { display: inline-block; border-radius: 12px; }
.badge img { display: block; height: 60px; width: auto; }
.hero-note { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.hero-more { margin: 18px 0 0; font-size: 16px; font-weight: 600; }
.hero-more a { text-decoration-color: var(--seal); }

/* 页面打开时章落下一次 */
@media (prefers-reduced-motion: no-preference) {
  .seal-drop { animation: seal-drop .42s cubic-bezier(.3, 1.5, .55, 1) .35s both; }
  @keyframes seal-drop {
    from { opacity: 0; transform: rotate(-14deg) scale(1.8); }
    to { opacity: 1; transform: rotate(-4deg) scale(1); }
  }
}

/* 截图：横向滑动，宽屏下居中铺开 */
.gallery { margin: 8px 0 12px; }
.shots {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 8px max(16px, calc((100vw - 1180px) / 2)) 22px; scrollbar-width: thin;
}
.shots img {
  flex: 0 0 auto; width: 240px; height: auto; scroll-snap-align: center; border-radius: 22px;
  background: var(--card); box-shadow: 0 10px 28px rgba(90, 90, 64, .16);
}
.shots:focus-visible { outline: 2px solid var(--seal); outline-offset: -2px; }

.lede { color: var(--muted); }

/* 功能清单：像 App 里的今日页，每一件盖着一枚家人的名章 */
.today { list-style: none; padding: 0; margin: 20px 0; border-top: 1px solid var(--line); }
.today li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); margin: 0; }
.today h3 { margin: 2px 0 4px; font-size: 17px; }
.today p { margin: 0; font-size: 15px; }
.stamp {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-family: var(--kai); font-size: 21px; font-weight: 600; letter-spacing: 0; line-height: 1;
  color: var(--seal-text); border: 2.5px solid var(--seal); border-radius: 9px; background: rgba(196, 90, 69, .05);
}
html[lang="en"] .stamp { font-family: Georgia, serif; font-size: 18px; }
.stamp.s0 { transform: rotate(-6deg); }
.stamp.s1 { transform: rotate(4deg); border-radius: 50%; }
.stamp.s2 { transform: rotate(-2deg); background: var(--seal); color: #FFF8EE; }
.stamp.s3 { transform: rotate(7deg); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.plan h3 { margin: 0 0 6px; font-size: 17px; }
.plan p { margin: 0; font-size: 15px; }
.plan-member { border-color: var(--honey); box-shadow: inset 0 4px 0 var(--honey); }

.closing { text-align: center; padding-top: 28px; }
.closing-line { font-family: var(--kai); font-size: 24px; color: var(--ink-strong); margin: 32px 0 20px; }
html[lang="en"] .closing-line { font-family: Georgia, "Iowan Old Style", serif; }
.closing .meta { max-width: 36em; margin: 18px auto 0; }
.closing .links { justify-content: center; }

@media (max-width: 480px) {
  .home .hero-name { font-size: 36px; }
  .shots img { width: 200px; border-radius: 18px; }
  .today li { grid-template-columns: 44px 1fr; gap: 12px; }
  .stamp { width: 40px; height: 40px; font-size: 18px; }
}

@media (max-width: 480px) {
  body { font-size: 15.5px; }
  h1 { font-size: 27px; }
  h2 { font-size: 21px; }
  .hero { padding-top: 36px; }
  .card { padding: 16px; border-radius: 16px; }
  .brand small { display: none; }
}

@media print {
  .top, .foot, .links { display: none; }
  body { background: #fff; }
  details { border: 0; padding: 0; }
}

/* 首页功能故事：纸本分栏 + 实际 App 界面。仅作用于本节。 */
.feature-section { max-width: 1100px; margin: 64px auto 0; padding: 0 24px; }
.feature-heading { text-align: center; margin-bottom: 32px; }
.feature-eyebrow { color: var(--seal-text); font-size: 13px; letter-spacing: .16em; margin-bottom: 8px; }
.feature-heading h2 { font-size: clamp(30px, 4vw, 42px); margin: 0 0 16px; padding: 0; }
.feature-heading .lede { font-size: 18px; }
.feature-grid { display: grid; gap: 24px; }
.feature-story { display: grid; grid-template-columns: 1.1fr .9fr; border: 1px solid var(--line-2); border-radius: 28px; background: var(--card); overflow: hidden; }
.feature-copy { padding: 44px 40px; align-self: center; }
.feature-kicker { display: block; font-size: 12px; letter-spacing: .1em; color: var(--seal-text); margin-bottom: 18px; }
.feature-copy h3 { font-family: var(--kai); font-size: clamp(28px, 3vw, 38px); margin: 0 0 20px; line-height: 1.4; }
.feature-copy > p { max-width: 30em; }
.feature-points { padding: 0; list-style: none; font-size: 14px; margin: 22px 0; }
.feature-points li { padding: 7px 0 7px 20px; position: relative; border-bottom: 1px solid var(--line); }
.feature-points li::before { content: '✓'; position: absolute; left: 0; color: #607654; }
.feature-caption { font-family: var(--kai); font-size: 20px; color: var(--seal-text); margin-bottom: 0; }
.feature-visual { margin: 0; padding: 28px 28px 0; background: #eee9da; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.feature-visual img { display: block; width: min(100%, 286px); height: auto; margin-bottom: -45px; filter: drop-shadow(0 12px 14px #45452f20); }
.feature-story-family { grid-template-columns: .9fr 1.1fr; }
.feature-story-family .feature-visual { grid-column: 1; grid-row: 1; background: #e6eadf; }
.feature-story-family .feature-copy { grid-column: 2; }
.feature-access { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 16px 0 0; }
.feature-chapter { display: flex; justify-content: center; align-items: center; gap: 20px; text-align: left; margin: 44px 0; }
.feature-chapter > span { font-size: 42px; color: var(--seal); }
.feature-chapter p { margin: 0; color: var(--muted); }
.feature-chapter strong { font-weight: 500; }
.feature-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.feature-detail { border: 1px solid var(--line-2); border-radius: 24px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.feature-detail-copy { padding: 30px 30px 24px; }
.feature-detail-copy .feature-kicker { margin-bottom: 12px; }
.feature-detail h3 { margin: 0 0 14px; font-size: 23px; font-family: var(--kai); }
.feature-detail-copy > p:not(.feature-access) { font-size: 15px; margin: 0; }
.feature-detail-visual { margin: auto 0 0; padding: 24px 24px 0; height: 340px; background: #eee9da; overflow: hidden; text-align: center; }
.feature-detail:nth-child(2) .feature-detail-visual { background: #e6eadf; }
.feature-detail:nth-child(3) .feature-detail-visual { background: #e9e5df; }
.feature-detail:nth-child(4) .feature-detail-visual { background: #f0e5cf; }
.feature-detail-visual img { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 8px 12px #45452f18); }
.feature-pocket { display: flex; gap: 20px; align-items: flex-start; padding: 28px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin-top: 32px; }
.feature-pocket .stamp { flex-shrink: 0; }
.feature-pocket h3 { margin: 0 0 8px; font-size: 20px; }
.feature-pocket p { margin: 0; font-size: 14px; color: var(--muted); }
.feature-footnote { text-align: center; font-size: 12px; color: var(--muted); margin: 18px 0 40px; }
@media (max-width: 700px) {
  .feature-section { padding: 0 16px; margin-top: 44px; }
  .feature-story, .feature-story-family { grid-template-columns: 1fr; }
  .feature-copy { padding: 28px 24px; }
  .feature-story-family .feature-copy { grid-column: auto; grid-row: auto; }
  .feature-story-family .feature-visual { grid-column: auto; grid-row: auto; }
  .feature-visual { height: 340px; padding-top: 24px; align-items: flex-start; }
  .feature-visual img { width: 260px; margin: 0; }
  .feature-detail-grid { grid-template-columns: 1fr; gap: 20px; }
  .feature-detail-copy { padding: 26px 24px 22px; }
  .feature-heading .lede { font-size: 16px; }
  .feature-chapter { gap: 12px; margin: 30px 0; font-size: 14px; }
  .feature-pocket { padding: 24px 4px; gap: 14px; }
}

/* 渐进增强动效：首屏入场、滚动揭示、界面纵深；不改变原来的内容顺序。 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; scroll-padding-top: 100px; }
  .home .top { position: sticky; top: 0; z-index: 20; background: rgba(245,241,231,.94); transition: box-shadow .3s ease, background .3s ease; }
  .motion-ready.has-scrolled .home .top { background: rgba(252,251,247,.96); box-shadow: 0 6px 24px #45452f0c; }
  @supports (backdrop-filter: blur(16px)) {
    .home .top { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  }
  .reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 30; background: var(--seal); transform: scaleX(0); transform-origin: left; pointer-events: none; }
  .motion-ready .hero > :not(.hero-name) { animation: home-arrive .85s cubic-bezier(.2,.7,.25,1) both; }
  .motion-ready .hero .hero-icon { animation-delay: .02s; }
  .motion-ready .hero .hero-sub { animation-delay: .12s; }
  .motion-ready .hero .hero-line { animation-delay: .22s; }
  .motion-ready .hero .badge { animation-delay: .32s; }
  .motion-ready .hero .hero-note, .motion-ready .hero .hero-more { animation-delay: .4s; }
  .motion-ready .motion-reveal { opacity: 0; transform: translate3d(0,30px,0); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.75,.2,1); }
  .motion-ready .motion-reveal.is-visible, .motion-ready .motion-reveal:focus-within { opacity: 1; transform: none; }
  .motion-ready .feature-detail:nth-child(even) { transition-delay: .1s; }
  .motion-ready .feature-visual img, .motion-ready .feature-detail-visual img { transform: translate3d(0,var(--scene-y,0px),0); }
  .feature-visual { background-image: radial-gradient(ellipse at 50% 35%,#fff9 0%,transparent 72%); }
  .feature-detail-visual { background-image: radial-gradient(ellipse at 50% 40%,#fff8 0%,transparent 75%); }
  .home .badge { transition: transform .25s ease, filter .25s ease; }
  @media (hover: hover) and (pointer: fine) {
    .home .badge:hover { transform: translateY(-3px); filter: drop-shadow(0 8px 12px #45452f24); }
    .feature-detail { transition: box-shadow .35s ease, border-color .35s ease; }
    .feature-detail:hover { border-color: #bcb49e; box-shadow: 0 18px 40px #45452f0d; }
    .motion-ready .feature-detail { transition: opacity .8s ease, transform .9s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease, border-color .35s ease; }
  }
  @keyframes home-arrive {
    from { opacity: 0; transform: translate3d(0,18px,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  html { scroll-padding-top: 176px; }
  .motion-ready .motion-reveal { transform: translate3d(0,18px,0); transition-duration: .65s; }
  .motion-ready .motion-reveal.is-visible, .motion-ready .motion-reveal:focus-within { transform: none; }
  .motion-ready .feature-detail:nth-child(even) { transition-delay: 0s; }
}
@media print {
  .motion-ready .motion-reveal { opacity: 1; transform: none; }
  .reading-progress { display: none; }
}
/* 留出多行移动导航与标题入场的空间，直接打开锚点时不遮住标题。 */
.home #what, .home #plan, .home #privacy { scroll-margin-top: 80px; }