/* 寻迹官网：版式对齐 arczip.app；冷灰页面、白卡、墨色字，强调色只有普鲁士蓝，地图里的绿是路线本身 */
:root {
  --page: #F6F7F9;
  --ink: #192837;
  --ink2: #535E69;
  --ink3: #616B75;
  --soft: #7D8590;
  --accent: #003153;
  --line: rgba(32, 37, 44, .08);
  --frame: #23272C;
  --panel: radial-gradient(at 48% 22%, #fff 8%, rgba(255, 255, 255, 0) 58%), radial-gradient(at 2% 24%, #D9ECF2, rgba(217, 236, 242, 0) 66%), radial-gradient(at 99% 47%, #DCEFE2, rgba(220, 239, 226, 0) 62%), linear-gradient(#EDF1F4, #F6F7F9);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color-scheme: light;
}
:root:lang(zh-Hant) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", sans-serif; --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC", sans-serif; }
:root:lang(zh-Hant-HK) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang HK", sans-serif; --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang HK", sans-serif; }
:root:lang(ko) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
:lang(ko) { word-break: keep-all; }
:root:lang(ja) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1100px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; z-index: 30; left: 12px; top: -80px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.mbr { display: none; }

/* 导航：悬浮胶囊 */
.nav { position: fixed; z-index: 20; top: 24px; left: 50%; transform: translateX(-50%); width: min(1100px, 100% - 40px); height: 64px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; background: rgba(255, 255, 255, .76); border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; box-shadow: 0 10px 30px rgba(25, 40, 55, .08), 0 1px 2px rgba(25, 40, 55, .05); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-right: auto; font: 600 17px/1 var(--display); text-decoration: none; white-space: nowrap; }
.brand img { width: 28px; height: 28px; }
.brand small, .name small { font-weight: 500; color: var(--soft); }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 28px; font-size: 14px; color: var(--ink2); white-space: nowrap; }
.nav-links a { padding: 10px 0; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current] { font-weight: 600; }
.pop { position: relative; }
.pop summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink2); }
.pop summary::-webkit-details-marker { display: none; }
.pop summary:hover, .pop[open] summary { background: rgba(25, 40, 55, .06); color: var(--ink); }
.pop-body { position: absolute; top: 52px; right: 0; display: grid; min-width: 196px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 40px rgba(25, 40, 55, .14); text-align: left; }
.pop-body a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; text-decoration: none; white-space: nowrap; }
.pop-body a:hover { background: var(--page); }
.pop-body a[aria-current] { background: var(--page); font-weight: 600; }
.menu { display: none; }

/* 按钮、状态 */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(100deg, #8CC7D6, #9FD9B8) border-box; box-shadow: 0 8px 24px rgba(0, 49, 83, .14); color: var(--accent); font-size: 16px; font-weight: 600; text-decoration: none; }
.btn:hover { box-shadow: 0 10px 28px rgba(0, 49, 83, .2); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid rgba(25, 40, 55, .16); border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1; white-space: nowrap; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: #E3A21A; }
.more { color: var(--accent); font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.spec { margin-top: 16px; font-size: 13px; color: var(--ink3); }
.hero-meta { margin: 16px 20px 0; text-align: center; }
.hero-meta .spec { margin: 0; }
.spec span { white-space: nowrap; }

/* 设备框：深色扁平，CSS 画，不旋转 */
.phone { position: relative; width: 318px; height: 670px; padding: 9px; border-radius: 46px; background: var(--frame); box-shadow: 0 30px 60px rgba(25, 40, 55, .2), 0 6px 16px rgba(25, 40, 55, .12); }
.phone img { width: 300px; height: 652px; border-radius: 38px; }
.watch { position: relative; width: 184px; height: 216px; padding: 9px; border-radius: 50px; background: var(--frame); box-shadow: 0 20px 40px rgba(25, 40, 55, .18), 0 4px 12px rgba(25, 40, 55, .12); }
.watch::after { content: ""; position: absolute; right: -5px; top: 56px; width: 6px; height: 32px; border-radius: 3px; background: var(--frame); }
.watch img { width: 166px; height: 198px; border-radius: 42px; }

/* 首屏：内嵌渐变面板，居中图标、名字、标题，底部一组设备被面板裁掉 */
.hero { position: relative; isolation: isolate; overflow: hidden; margin: 12px 12px 0; padding: 96px 20px 0; border: 1px solid #fff; border-radius: 36px; background: var(--panel); text-align: center; }
.hero-map { position: absolute; inset: auto 0 0; z-index: -1; height: 560px; opacity: .55; -webkit-mask: linear-gradient(transparent, #000 45%); mask: linear-gradient(transparent, #000 45%); }
.hero-map svg { position: absolute; left: 50%; bottom: -120px; width: 1440px; max-width: none; height: 900px; margin-left: -720px; }
.app-icon { width: 80px; height: 80px; margin: 0 auto; filter: drop-shadow(0 12px 24px rgba(25, 40, 55, .14)); }
.name { margin-top: 10px; font: 600 24px/1.2 var(--display); letter-spacing: -.01em; }
.hero h1 { margin-top: 12px; font-size: 64px; line-height: 1.15; letter-spacing: -.02em; }
.hero h1:lang(en), .hero h1:lang(fr), .hero h1:lang(de), .hero h1:lang(es) { font-size: 52px; line-height: 1.12; }
.lead { max-width: 680px; margin: 16px auto 0; font-size: 17px; line-height: 1.75; color: var(--ink3); text-wrap: balance; }
.lead:lang(fr) br, .lead:lang(de) br, .lead:lang(es) br { display: none; }
.hero .cta { margin-top: 24px; }
.devices { position: relative; width: 760px; height: 600px; margin: 36px auto 0; }
.devices > * { position: absolute; }
.devices .phone { left: 221px; top: 0; z-index: 3; }
.devices .side { top: 70px; z-index: 2; transform: scale(.88); }
.devices .side.l { left: 6px; transform-origin: left top; }
.devices .side.r { right: 6px; transform-origin: right top; }
.devices .watch { left: 470px; top: 400px; z-index: 4; }
.note { margin: 4px 0 0; text-align: center; font-size: 12px; line-height: 1.4; color: var(--ink3); }

/* 区块标题：两行两色，右侧一句说明 */
.sec { padding: 120px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 64px; }
.sec-head h2, .center h2 { font-size: 44px; line-height: 1.32; letter-spacing: -.035em; }
.sec-head h2 span, .center h2 span { display: block; color: var(--soft); }
.sec-head p { max-width: 320px; font-size: 15px; line-height: 1.75; color: var(--ink3); }
.center { text-align: center; }
.center h2 + p { max-width: 560px; margin: 20px auto 0; font-size: 15px; line-height: 1.75; color: var(--ink3); }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--accent); }
h3 { font-size: 32px; line-height: 1.3; letter-spacing: -.03em; }
.text p:not(.eyebrow) { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--ink3); }
.text h3 { margin-top: 10px; }

/* 滚动叙事：左边一段段文字，右边的画面跟着换 */
.beat { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; padding: 40px 0; }
.stage { position: relative; display: grid; place-items: center; height: 720px; overflow: hidden; border: 1px solid #fff; border-radius: 32px; background: url(/screens/stage.svg) center / cover, #EAF0E4; }
.stage .phone { transform: scale(.94); }
.stage.duo { grid-auto-flow: column; gap: 28px; }
.stage .watch { transform: scale(1.3); margin: 0 24px; }

/* 细节：一张白卡分成几格 */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--line); box-shadow: 0 20px 50px rgba(25, 40, 55, .06); }
.cell { padding: 32px; background: #fff; }
.cell svg { width: 28px; height: 28px; color: var(--accent); }
.cell h3 { margin-top: 18px; font-size: 19px; line-height: 1.4; letter-spacing: -.01em; }
.cell p { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--ink3); }
.cell.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 4fr 7fr; gap: 40px; align-items: center; padding: 40px 40px 0; }
.cell.wide .text { padding-bottom: 40px; }
.cell.wide h3 { margin-top: 0; font-size: 26px; }
.crop { overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--page); }
.crop img { width: 100%; height: auto; }

/* 隐私：三栏 */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); text-align: left; }
.cols svg { width: 24px; height: 24px; color: var(--accent); }
.cols h3 { margin-top: 14px; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; }
.cols p { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--ink3); }
.center .more { display: inline-block; margin-top: 40px; }

/* 免费版和完整版 */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 880px; margin: 56px auto 0; }
.plan { padding: 10px; border: 1px solid var(--line); border-radius: 28px; background: #EEF1F4; }
.plan-top { padding: 28px; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(25, 40, 55, .06); }
.plan-name { font: 600 20px/1.3 var(--display); }
.plan-big { margin-top: 14px; font: 600 40px/1.15 var(--display); letter-spacing: -.02em; }
.plan-sub { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--ink3); }
.ticks { display: grid; gap: 12px; padding: 24px 18px 18px; text-align: left; font-size: 14px; line-height: 1.6; color: var(--ink2); }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 49, 83, .08); }
.ticks li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 4px; border: solid var(--accent); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.fine { margin-top: 24px; text-align: center; font-size: 13px; color: var(--ink3); }

/* 收尾面板 */
.end { padding-bottom: 80px; }
.closing { margin: 0 auto; padding: 88px 24px; border: 1px solid #fff; border-radius: 32px; background: var(--panel); text-align: center; }
.closing h2 { font-size: 40px; line-height: 1.35; letter-spacing: -.03em; }
.closing .cta { margin-top: 28px; }

/* 常见问题 */
.faq { max-width: 760px; margin: 48px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 18px 4px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border: solid var(--soft); border-width: 0 1.6px 1.6px 0; transform: translateY(-3px) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { padding: 0 4px 24px; font-size: 15px; line-height: 1.8; color: var(--ink3); }
.faq-foot { max-width: 760px; margin: 28px auto 0; padding: 0 4px; text-align: left; font-size: 14px; color: var(--ink3); }
.faq-foot p + p { margin-top: 12px; }
.faq-foot a:not(.more), .mail { overflow-wrap: anywhere; }

/* 页脚 */
.foot { margin-top: 40px; padding: 56px 0 48px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; }
.foot .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; }
.foot-brand p { max-width: 360px; margin-top: 14px; color: var(--ink3); }
.foot-grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 24px 32px; }
.foot h2 { margin-bottom: 2px; font: 500 13px/1.4 var(--font); color: var(--soft); }
.foot nav a { display: block; padding: 10px 0; line-height: 24px; color: var(--ink2); text-decoration: none; overflow-wrap: anywhere; }
.foot nav a:hover, .foot nav a[aria-current] { color: var(--ink); }

/* 帮助、隐私、条款：居中阅读栏 */
.doc { width: min(720px, 100% - 40px); margin: 0 auto; padding: 160px 0 96px; }
.doc h1 { font-size: 40px; line-height: 1.25; letter-spacing: -.03em; }
.updated { margin-top: 16px; font-size: 13px; color: var(--ink3); }
.doc h2 { margin-top: 48px; font: 600 21px/1.4 var(--display); letter-spacing: -.01em; }
.doc p { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--ink2); }
.doc a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc .faq { margin-top: 40px; }

/* 平板和手机 */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .menu { display: block; }
  .hero { padding-top: 104px; }
  .hero h1 { font-size: clamp(36px, 7vw, 52px); }
  .devices { width: 318px; height: 470px; margin-top: 40px; }
  .devices .phone { left: 0; }
  .devices .side { display: none; }
  .devices .watch { left: auto; right: -54px; top: 300px; }
  .sec { padding: 80px 0; }
  .sec-head { display: block; margin-bottom: 32px; }
  .sec-head h2, .center h2 { font-size: 32px; }
  .sec-head p { max-width: none; margin-top: 14px; }
  h3 { font-size: 26px; }
  .beat { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .stage { height: 440px; place-items: start center; padding-top: 36px; }
  .stage .phone { transform: scale(.82); transform-origin: top center; }
  .stage.duo { place-items: center; padding: 0; gap: 0; }
  .stage .watch { transform: scale(.92); margin: 0 4px; }
  .bento, .cols, .plans { grid-template-columns: 1fr; }
  .cell.wide { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px 0; }
  .cell.wide .text { padding-bottom: 0; }
  .cell { padding: 28px 24px; }
  .cols { gap: 28px; }
  .closing { padding: 64px 20px; }
  .end { padding-bottom: 48px; }
  .closing h2 { font-size: 28px; }
  .foot .wrap { grid-template-columns: 1fr; }
  .doc { padding-top: 120px; }
  .doc h1 { font-size: 30px; }
}
@media (max-width: 599px) {
  .mbr { display: inline; }
  .nav { top: 12px; width: calc(100% - 24px); height: 56px; padding: 0 6px 0 14px; gap: 2px; }
  .hero { margin: 8px 8px 0; padding: 84px 16px 0; border-radius: 28px; }
  .app-icon { width: 60px; height: 60px; }
  .name { margin-top: 8px; font-size: 20px; }
  .hero h1 { margin-top: 10px; font-size: 34px; line-height: 1.18; }
  .hero h1:lang(en), .hero h1:lang(fr), .hero h1:lang(de), .hero h1:lang(es) { font-size: 30px; }
  .lead { margin-top: 12px; font-size: 15px; line-height: 1.65; }
  .lead:lang(ja) br, .lead:lang(en) br, .lead:lang(ko) br { display: none; }
  .hero .cta { margin-top: 18px; gap: 10px; }
  .devices { transform: scale(.8); transform-origin: top center; height: 380px; margin: 24px auto -80px; }
  .hero-meta { margin: 14px 16px 0; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .stage .watch { transform: scale(.78); margin: 0 -8px; }
}

/* 动效签名：路线画出来，再亮起格子和停留点。默认就是画完的样子 */
@media (prefers-reduced-motion: no-preference) {
  .hero-map .route { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) .3s forwards; }
  .hero-map .cells, .hero-map .stops, .hero-map .arrows { opacity: 0; animation: show .4s var(--ease) 1.8s forwards; }
  .btn, .faq summary::after { transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes show { to { opacity: 1; } }

/* 支持滚动时间线的宽屏：右边的画面固定住，跟着左边的段落淡入淡出 */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .story { display: grid; grid-template-columns: 5fr 6fr; column-gap: 64px; timeline-scope: --b1, --b2, --b3, --b4, --b5, --b6, --b7; }
    .beat { display: contents; }
    .beat .text { grid-column: 1; display: flex; flex-direction: column; justify-content: center; min-height: 82vh; animation: dim linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .beat figure { grid-column: 2; grid-row: 1 / span 7; align-self: start; position: sticky; top: max(96px, 50vh - 360px); animation: swap linear both; animation-range: cover 0% cover 100%; }
    .beat:first-child figure { animation-name: swap-first; }
    .beat:last-child figure { animation-name: swap-last; }
  }
}
/* 文字块最小高 82vh：块的上沿过视口中线在 cover 的 27.5%，下沿过中线在 72.5%，与视口高度无关；图在这两处换，下层图等上层完全显出后再淡出 */
@keyframes dim { 0%, 20% { opacity: .28; } 29%, 71% { opacity: 1; } 80%, 100% { opacity: .28; } }
@keyframes swap { 0%, 24% { opacity: 0; } 31%, 76% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes swap-first { 0%, 76% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes swap-last { 0%, 24% { opacity: 0; } 31%, 100% { opacity: 1; } }
.home-links { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 4px; }
.home-links li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.home-links span { color: var(--ink3, #6b7280); font-size: 14px; }