/*
 * 收工官网（gigwrap.app）共用样式。方向：B 彩色时间轴（2026-11-02 选定）。
 * 颜色照 App 第四版（design/shared/tokens.css）：宣纸、墨、朱砂只用在印和逾期的钱，服务颜色负责彩色。
 * 跟随系统深浅色；网址加 ?theme=light 或 ?theme=dark 固定一种（检查和截图用，site.js 处理）。
 * 不用网络字体（中国大陆打不开 Google Fonts），全部是系统字体。
 */

:root {
  color-scheme: light;
  --page: #FBF7F1; --bg: #F6F1E9; --card: #FFFDF9;
  --fill: rgba(120, 92, 62, 0.10); --sep: rgba(70, 50, 30, 0.13);
  --label: #1C1917; --label-2: #6B6157; --label-3: #A0968A;
  --ink: #1C1917; --on-ink: #FBF7F0;
  --seal: #D23F2A; --tint: #C2361F; --accent-soft: rgba(207, 60, 39, 0.10);
  --green: #23804F; --amber: #A8650A; --blue: #3461B8;
  --p-orange: #E2761A; --p-red: #DC4646; --p-teal: #16958F; --p-blue: #3474E0;
  --p-purple: #8656D6; --p-green: #2E9B57; --p-pink: #D94F86; --p-indigo: #5357C9;
  --p-yellow: #CF9A0B; --p-mint: #22A88A; --p-cyan: #1797C2; --p-brown: #9A6E45; --p-gray: #8A8178;
  --deep: 82%;
  --shadow-card: 0 1px 0 rgba(60, 40, 20, 0.04), 0 6px 20px rgba(60, 40, 20, 0.05);
  --shadow-float: 0 30px 80px -20px rgba(60, 40, 20, .35), 0 4px 14px rgba(60, 40, 20, .08);
  --nav-bg: rgba(251, 247, 241, .82);
  --font: system-ui, -apple-system, "SF Pro Text", "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
  --font-num: system-ui, -apple-system, "SF Pro Display", "PingFang SC", sans-serif;
}
:root[lang="zh-Hant"] { --font: system-ui, -apple-system, "SF Pro Text", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif; }

/* 深色：一份变量，系统深色和 ?theme=dark 共用 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #12100E; --bg: #110F0D; --card: #1E1B18;
  --fill: rgba(255, 235, 210, 0.09); --sep: rgba(255, 235, 210, 0.11);
  --label: #F5EFE6; --label-2: #A99F93; --label-3: #6F665D;
  --ink: #F5EFE6; --on-ink: #161310;
  --seal: #E8513A; --tint: #FF6B52; --accent-soft: rgba(255, 107, 82, 0.15);
  --green: #4CC98A; --amber: #F0A848; --blue: #7EA6F2;
  --p-orange: #FF9A40; --p-red: #FF6369; --p-teal: #3CC8C2; --p-blue: #5E9BFF;
  --p-purple: #B08CFF; --p-green: #4ED07F; --p-pink: #FF7AAE; --p-indigo: #8A8EFF;
  --p-yellow: #FFD23F; --p-mint: #4FD8B8; --p-cyan: #52C7F0; --p-brown: #C99A6E; --p-gray: #A0978C;
  --deep: 64%;
  --shadow-card: 0 0 0 1px rgba(255, 235, 210, 0.06);
  --shadow-float: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 235, 210, .06);
  --nav-bg: rgba(18, 16, 14, .8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #12100E; --bg: #110F0D; --card: #1E1B18;
    --fill: rgba(255, 235, 210, 0.09); --sep: rgba(255, 235, 210, 0.11);
    --label: #F5EFE6; --label-2: #A99F93; --label-3: #6F665D;
    --ink: #F5EFE6; --on-ink: #161310;
    --seal: #E8513A; --tint: #FF6B52; --accent-soft: rgba(255, 107, 82, 0.15);
    --green: #4CC98A; --amber: #F0A848; --blue: #7EA6F2;
    --p-orange: #FF9A40; --p-red: #FF6369; --p-teal: #3CC8C2; --p-blue: #5E9BFF;
    --p-purple: #B08CFF; --p-green: #4ED07F; --p-pink: #FF7AAE; --p-indigo: #8A8EFF;
    --p-yellow: #FFD23F; --p-mint: #4FD8B8; --p-cyan: #52C7F0; --p-brown: #C99A6E; --p-gray: #A0978C;
    --deep: 64%;
    --shadow-card: 0 0 0 1px rgba(255, 235, 210, 0.06);
    --shadow-float: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 235, 210, .06);
    --nav-bg: rgba(18, 16, 14, .8);
  }
}

/* ───────── 基础 ───────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; color: var(--label); background: var(--page); font: 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.soft { color: var(--label-2); }
.tint { color: var(--tint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* 图标：<svg class="i"><use href="assets/icons.svg#camera"/></svg> */
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.14em; }

/* 字标：内联 SVG，颜色跟主题走 */
.logo { display: block; height: 34px; width: auto; }
.logo .mark { fill: var(--seal); }
.logo .word { fill: var(--label); }
.logo .sub { fill: var(--label-2); }

/* ───────── 导航 ───────── */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav .links { display: flex; gap: 26px; flex: 1; font: 500 15px var(--font); color: var(--label-2); }
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--label); }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--fill); font: 500 13px/1 var(--font); flex: none; }
.lang a { padding: 7px 11px; border-radius: 99px; color: var(--label-2); }
.lang a:hover { color: var(--label); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--on-ink); }

/* 换语言的提示条（浏览器语言和页面不一样时，site.js 显示） */
.langhint { display: none; background: var(--ink); color: var(--on-ink); font: 500 14px/1.4 var(--font); }
.langhint.on { display: block; }
.langhint .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.langhint a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.langhint button { border: 0; background: transparent; color: inherit; font: inherit; opacity: .7; cursor: pointer; padding: 4px 6px; }

/* ───────── 按钮 ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 23px; font: 600 15px var(--font); white-space: nowrap; background: var(--ink); color: var(--on-ink); border: 0; cursor: pointer; }
.btn.lg { height: 56px; padding: 0 28px; border-radius: 28px; font-size: 17px; }
.btn.ghost { background: transparent; color: var(--label); box-shadow: inset 0 0 0 1.5px var(--sep); }
.btn.soon { cursor: default; }
.btn .i { font-size: 18px; }

/* ───────── 首屏 ───────── */
.hero { position: relative; padding: 40px 0 100px; overflow: hidden; }
.hero > .wrap { display: grid; grid-template-columns: 1fr 500px; gap: 64px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--font); padding: 7px 14px 7px 8px; border-radius: 99px; background: var(--card); box-shadow: var(--shadow-card); }
.eyebrow .bars { display: flex; gap: 3px; }
.eyebrow .bars b { width: 5px; height: 16px; border-radius: 3px; background: var(--c); }
.hero h1 { font: 800 64px/1.1 var(--font); letter-spacing: -1.5px; margin: 24px 0 0; }
:root[lang="zh-Hant"] .hero h1 { font-size: 60px; }
:root[lang="en"] .hero h1 { font-size: 60px; letter-spacing: -1.2px; line-height: 1.08; }
.hero .sub { font-size: 19px; line-height: 1.65; color: var(--label-2); margin: 24px 0 0; max-width: 500px; }
.ways { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; max-width: 540px; padding: 0; list-style: none; }
.ways li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 5px; border-radius: 19px; background: color-mix(in srgb, var(--c) 13%, var(--card)); font: 600 14.5px var(--font); }
.ways li .ic { width: 28px; height: 28px; border-radius: 14px; background: color-mix(in srgb, var(--c) var(--deep), #000); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.note { font-size: 13.5px; color: var(--label-3); margin-top: 14px; }

/* 首屏右边：今天的时间轴卡片，后面插着五支服务颜色的胶囊 */
.stage { position: relative; padding-top: 118px; }
.pens { position: absolute; left: 44px; right: 44px; top: 0; height: 320px; display: flex; justify-content: space-between; pointer-events: none; }
.pens span { width: 62px; height: 100%; border-radius: 31px; background: color-mix(in srgb, var(--c) var(--deep), #000); }
.day { position: relative; z-index: 1; background: var(--card); border-radius: 34px; box-shadow: var(--shadow-float); padding: 22px 20px 18px; }
.day .hd { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.day .hd b { font: 800 30px var(--font); }
.day .hd span { font: 500 15px var(--font); color: var(--label-2); }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); margin: 14px 0 0; text-align: center; }
.wk div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wk small { font: 500 12px var(--font); color: var(--label-3); }
.wk em { font: 600 16px/34px var(--font-num); font-style: normal; width: 34px; height: 34px; border-radius: 17px; }
.wk em.today { background: var(--ink); color: var(--on-ink); }
.wk .bars { display: flex; gap: 2px; height: 4px; }
.wk .bars b { width: 9px; height: 4px; border-radius: 2px; background: var(--c); }
.wk .bars b.pl { background: transparent; box-shadow: inset 0 0 0 1.2px var(--c); }
.due { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); font: 600 15px var(--font); }
.due .r { margin-left: auto; color: var(--tint); }
.due .i { color: var(--tint); font-size: 18px; }
.tl { position: relative; padding-top: 8px; }
.tl::before { content: ""; position: absolute; left: 70px; top: 18px; bottom: 18px; border-left: 2px dotted var(--sep); }
.row { position: relative; display: grid; grid-template-columns: 52px 36px 1fr auto; column-gap: 12px; align-items: start; padding: 7px 0; }
.row time { font: 500 13px/22px var(--font-num); color: var(--label-2); text-align: right; }
.cap { width: 36px; border-radius: 18px; display: flex; justify-content: center; padding-top: 9px; color: #fff; background: color-mix(in srgb, var(--c) var(--deep), #000); font-size: 17px; }
.cap.draft { background: var(--card); color: var(--label-3); box-shadow: inset 0 0 0 2px var(--label-3); }
.tx { min-width: 0; }
.tx b { display: block; font: 600 16px/22px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx small { display: block; font: 400 13px/19px var(--font); color: var(--label-2); white-space: nowrap; }
.amt { font: 600 16px/22px var(--font-num); white-space: nowrap; }
.amt.soft { font: 400 13px/22px var(--font); color: var(--label-2); }
.live { grid-column: 3 / 5; padding: 13px 14px 14px; border-radius: 20px; background: color-mix(in srgb, var(--p-orange) 13%, var(--card)); }
.live .t { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 16px var(--font); }
.live .t b { font: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .t span { font: 400 13px var(--font); color: var(--label-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.live .t span i { width: 8px; height: 8px; border-radius: 4px; background: var(--p-orange); }
.live .clock { font: 600 46px/1 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -1px; margin: 12px 0 6px; }
.live small { font: 400 13px var(--font); color: var(--label-2); }
.live .b { display: flex; gap: 8px; margin-top: 12px; }
.live .b span { flex: 1; height: 38px; border-radius: 19px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 14px var(--font); background: var(--fill); }
.live .b span.ink { flex: 1.3; background: var(--ink); color: var(--on-ink); }

/* 首屏下面的四条承诺 */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 8px; padding: 0; list-style: none; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.promises li { display: flex; align-items: center; gap: 14px; padding: 24px 22px; font: 600 16px/1.35 var(--font); }
.promises li + li { border-left: 1px solid var(--sep); }
.promises .ic { width: 42px; height: 42px; border-radius: 13px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 21px; color: #fff; background: color-mix(in srgb, var(--c) var(--deep), #000); }
.promises small { display: block; font: 400 13.5px/1.45 var(--font); color: var(--label-2); margin-top: 2px; }

/* ───────── 小节 ───────── */
section { padding: 120px 0 0; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--font); letter-spacing: .5px; color: var(--label-2); }
.kicker::before { content: ""; width: 7px; height: 18px; border-radius: 4px; background: color-mix(in srgb, var(--c, var(--label-3)) var(--deep), #000); }
h2 { font: 800 46px/1.18 var(--font); letter-spacing: -.8px; margin: 14px 0 0; }
:root[lang="en"] h2 { letter-spacing: -.6px; line-height: 1.12; }
.lead { color: var(--label-2); font-size: 18px; margin: 18px 0 0; max-width: 520px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; max-width: 640px; }

.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.feat.rev .copy { order: 2; }
.points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; max-width: 520px; }
.points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.points li .i { font-size: 20px; margin-top: 1px; color: color-mix(in srgb, var(--c, var(--label)) var(--deep), #000); }
:root[data-theme="dark"] .points li .i { color: var(--c, var(--label)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .points li .i { color: var(--c, var(--label)); } }

/* 手机画面：App 演示模式下的真截图，套一个外框；后面一块服务颜色的底 */
/* 配图块：定高的服务颜色底，手机从下面长出来、下沿被块裁齐；浮层都收在块里 */
.vis { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 24px; height: 600px; padding: 56px 24px 0; border-radius: 44px; overflow: hidden; background: color-mix(in srgb, var(--c) 16%, var(--page)); }
:root[data-theme="dark"] .vis { background: color-mix(in srgb, var(--c) 20%, var(--page)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vis { background: color-mix(in srgb, var(--c) 20%, var(--page)); } }
.vis > * { position: relative; }
.vis.snap { align-items: center; padding-top: 0; }
.vis .toast.float { left: 28px; top: 28px; }
.vis.timer { padding-top: 120px; }
.vis .island.float { top: 34px; left: 50%; transform: translateX(-50%); }
.phone { width: 300px; flex: none; padding: 9px; border-radius: 52px; background: #0d0c0b; box-shadow: inset 0 0 0 1.5px #3b3631, 0 40px 70px -24px rgba(40, 25, 10, .45), 0 10px 24px rgba(40, 25, 10, .12); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; border-radius: 44px; background: var(--bg); }
.phone.sm { width: 250px; margin-top: 70px; }
.vis .float { position: absolute; z-index: 2; }
.vis.two .phone { width: 262px; }
.vis.two .phone.sm { width: 222px; margin-top: 120px; }

/* 算钱的明细卡 */
.calc { background: var(--card); border-radius: 22px; padding: 18px 22px; box-shadow: var(--shadow-card); font-size: 14.5px; max-width: 460px; margin-top: 28px; }
.calc .ln { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; color: var(--label-2); }
.calc .ln b { color: var(--label); font-weight: 600; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc .sum { border-top: 1px solid var(--sep); margin-top: 6px; padding-top: 12px; color: var(--label); font-weight: 700; }
.calc .sum b { font-size: 22px; }
.calc .hd { display: flex; align-items: center; gap: 10px; font: 600 15px var(--font); color: var(--label); margin-bottom: 6px; }
.calc .hd .ic { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; background: color-mix(in srgb, var(--p-orange) var(--deep), #000); }

/* 拍照：一张带水印的照片和「已存草稿」 */
.photo { position: relative; width: 380px; aspect-ratio: 3 / 4; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-float); background: #2a1f2c; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wm { position: absolute; left: 18px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.wm .t { display: flex; align-items: center; gap: 8px; }
.wm .t b { font: 700 30px/1 var(--font-num); letter-spacing: .5px; }
.wm .t i { width: 1.5px; height: 26px; background: rgba(255, 255, 255, .75); }
.wm .t span { font: 600 11.5px/1.25 var(--font); }
.wm p { margin: 6px 0 0; font: 500 11px/1.5 var(--font); opacity: .95; text-wrap: balance; }
.wm img { width: 30px; height: 30px; flex: none; opacity: .92; transform: rotate(-5deg); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-float); font: 600 15px var(--font); white-space: nowrap; }
.toast .ic { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; background: color-mix(in srgb, var(--c) var(--deep), #000); }
.toast small { display: block; font: 400 13px var(--font); color: var(--label-2); }

/* 灵动岛 */
.island { display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 22px 0 11px; border-radius: 31px; background: #000; color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); white-space: nowrap; }
.island .ic { width: 40px; height: 40px; border-radius: 20px; background: #C4621A; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.island b { display: block; font: 600 14px/1.25 var(--font); }
.island small { display: block; font: 400 12px/1.3 var(--font); color: rgba(255, 255, 255, .62); }
.island .clock { margin-left: 14px; font: 600 25px var(--font-num); font-variant-numeric: tabular-nums; color: #FFB36B; }

/* 五种收法 */
.five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 44px; text-align: left; padding: 0; list-style: none; }
.five li { border-radius: 26px; padding: 20px 18px 22px; color: #fff; background: color-mix(in srgb, var(--c) var(--deep), #000); display: flex; flex-direction: column; }
.five .hd { display: flex; align-items: center; gap: 10px; font: 700 16px var(--font); }
.five .hd .ic { width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.five .hd small { display: block; font: 500 12.5px var(--font); opacity: .8; }
.five p { margin: 16px 0 0; font: 400 14px/1.55 var(--font); opacity: .9; flex: 1; }
.five .sum { margin-top: 14px; font: 800 30px/1 var(--font-num); letter-spacing: -.5px; }
.five-more { margin-top: 18px; color: var(--label-2); font-size: 15px; }

/* 适合谁 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 32px auto 0; padding: 0; list-style: none; max-width: 900px; }
.chips li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 14px; border-radius: 99px; background: var(--card); box-shadow: var(--shadow-card); font: 600 15.5px var(--font); }
.chips li::before { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--c); }
.chips li.more { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.chips li.more::before { display: none; }

/* 隐私 */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.card { background: var(--card); border-radius: 26px; padding: 26px 24px; box-shadow: var(--shadow-card); }
.card .ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) var(--deep), #000); color: #fff; font-size: 23px; }
.card h3 { font: 700 19px/1.35 var(--font); margin: 18px 0 6px; }
.card p { margin: 0; color: var(--label-2); font-size: 15px; line-height: 1.6; }
.card p a, .prose a { text-decoration: underline; text-underline-offset: 3px; }

/* 价格 */
.plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; margin-top: 40px; }
.plan { background: var(--card); border-radius: 32px; padding: 34px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.plan.pro { box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-card); }
.plan h3 { font: 800 24px var(--font); margin: 0; }
.plan .price { font: 800 50px/1 var(--font-num); margin: 18px 0 6px; letter-spacing: -1px; }
.plan .price small { font-size: 18px; font-weight: 600; color: var(--label-2); letter-spacing: 0; margin-left: 4px; }
.plan .muted { color: var(--label-2); font-size: 14.5px; }
.plan ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; font-size: 15.5px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.plan li .i { margin-top: 3px; font-size: 18px; color: var(--green); }
.plan.pro li .i { color: var(--label); }
.plan .corner { position: absolute; right: 28px; top: 28px; width: 46px; height: 46px; transform: rotate(-6deg); }
.plan .pens-mini { display: flex; gap: 5px; position: absolute; right: 30px; top: 30px; }
.team { margin-top: 18px; border-radius: 24px; padding: 20px 26px; background: var(--fill); display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 15.5px; }
.fine { margin-top: 16px; font-size: 13.5px; color: var(--label-3); max-width: 860px; }

/* 常见问题 */
.faq { max-width: 820px; margin: 34px auto 0; }
details { background: var(--card); border-radius: 20px; padding: 0 24px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
summary { list-style: none; cursor: pointer; padding: 20px 0; font: 600 17px/1.4 var(--font); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 24px/1 var(--font); color: var(--label-3); flex: none; }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 20px; color: var(--label-2); font-size: 15.5px; }
details p a { text-decoration: underline; text-underline-offset: 3px; }

/* 结尾 */
.end { text-align: center; padding: 130px 0 100px; }
.end .seal { width: 92px; height: 92px; transform: rotate(-4deg); }
.end h2 { font-size: 56px; margin-top: 26px; }
.end p { color: var(--label-2); font-size: 18px; margin: 14px 0 30px; }
.end .mail { margin-top: 22px; font-size: 15px; color: var(--label-2); }
.end .mail a { color: var(--label); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 页脚 */
footer { border-top: 1px solid var(--sep); padding: 36px 0 48px; font-size: 14px; color: var(--label-2); }
footer .wrap { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
footer .logo { height: 28px; }
footer .cols { display: flex; gap: 56px; flex-wrap: wrap; }
footer .cols div { display: grid; gap: 8px; align-content: start; }
footer .cols b { color: var(--label); font-weight: 600; }
footer a:hover { color: var(--label); }
footer .copy { width: 100%; color: var(--label-3); font-size: 13px; }

/* ───────── 内容页（支持、隐私） ───────── */
.page-hd { padding-top: 56px; padding-bottom: 8px; }
.page-hd h1 { font: 800 48px/1.15 var(--font); letter-spacing: -1px; margin: 14px 0 0; }
.page-hd .lead { max-width: 640px; }
.narrow { max-width: 780px; }
.contact { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 36px; }
.contact .card.mail { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.contact .card.mail p { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.contact .card.mail h3 { font: 700 24px/1.3 var(--font-num); word-break: break-all; }
.contact .card.mail .btn { background: var(--on-ink); color: var(--ink); margin-top: 20px; }
.help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.prose h2 { font: 700 26px/1.3 var(--font); letter-spacing: 0; margin: 0; }
.prose section { padding-top: 64px; }

/* 隐私政策：两种语言两段，脚本选好语言后只显示一种；没有脚本时两种都显示 */
.policy { padding-bottom: 90px; }
.policy article { padding: 48px 0 16px; scroll-margin-top: 100px; }
html:not([data-lang]) .policy article + article { border-top: 1px solid var(--sep); }
html[data-lang="zh"] .policy article[lang="en"], html[data-lang="en"] .policy article[lang="zh-Hans"] { display: none; }
.policy h1 { font: 800 40px/1.2 var(--font); letter-spacing: -.5px; margin: 0; }
.policy .meta { margin: 12px 0 0; font-size: 15px; color: var(--label-2); }
.policy section { margin-top: 36px; padding: 24px 0 0; border-top: 1px solid var(--sep); }
.policy section h2, :root[lang="en"] .policy section h2 { display: flex; align-items: center; gap: 10px; font: 700 20px/1.4 var(--font); letter-spacing: 0; margin: 0; }
.policy h2::before { content: ""; width: 7px; height: 20px; border-radius: 4px; flex: none; background: color-mix(in srgb, var(--c) var(--deep), #000); }
.policy section:nth-of-type(8n+1) { --c: var(--p-green); }
.policy section:nth-of-type(8n+2) { --c: var(--p-blue); }
.policy section:nth-of-type(8n+3) { --c: var(--p-orange); }
.policy section:nth-of-type(8n+4) { --c: var(--p-purple); }
.policy section:nth-of-type(8n+5) { --c: var(--p-teal); }
.policy section:nth-of-type(8n+6) { --c: var(--p-indigo); }
.policy section:nth-of-type(8n+7) { --c: var(--p-pink); }
.policy section:nth-of-type(8n+8) { --c: var(--p-yellow); }
.policy section p { margin: 10px 0 0; }
.policy ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.65; color: var(--label-2); }
.policy li { position: relative; padding-left: 16px; }
.policy li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--label-3); }
.policy a { text-decoration: underline; text-underline-offset: 3px; }
/* 待填的内容，部署前要换掉 */
.todo { color: var(--amber); font-weight: 600; }

@media (max-width: 1100px) {
  .hero > .wrap { grid-template-columns: 1fr; gap: 56px; }
  .stage { max-width: 500px; width: 100%; margin: 0 auto; }
  .feat { grid-template-columns: 1fr; gap: 44px; }
  .feat.rev .copy { order: 0; }
  .five { grid-template-columns: repeat(3, 1fr); }
  .cards4 { grid-template-columns: 1fr 1fr; }
  .promises { grid-template-columns: 1fr 1fr; }
  .promises li:nth-child(3) { border-left: 0; }
  .promises li:nth-child(n+3) { border-top: 1px solid var(--sep); }
}
@media (max-width: 900px) {
  .nav .links, .nav .btn { display: none; }
  .nav .wrap { justify-content: space-between; gap: 12px; height: 60px; }
  .plans, .contact, .help { grid-template-columns: 1fr; }
  .team { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .logo { height: 30px; }
  .hero { padding: 20px 0 64px; }
  .hero h1, :root[lang="en"] .hero h1 { font-size: 40px; letter-spacing: -1px; margin-top: 18px; }
  .hero .sub { font-size: 17px; }
  .ways li { height: 34px; font-size: 13.5px; padding-right: 12px; }
  .ways li .ic { width: 24px; height: 24px; font-size: 14px; }
  .btn.lg { height: 50px; padding: 0 20px; font-size: 16px; }
  .stage { padding-top: 92px; }
  .pens { left: 22px; right: 22px; }
  .pens span { width: 46px; }
  .day { padding: 18px 12px 14px; border-radius: 28px; }
  .row { grid-template-columns: 42px 32px 1fr auto; column-gap: 9px; }
  .cap { width: 32px; }
  .tl::before { left: 58px; }
  .live .clock { font-size: 38px; }
  .tx b { font-size: 15px; }
  .promises { grid-template-columns: 1fr; }
  .promises li { padding: 16px 4px; }
  .promises li + li { border-left: 0; border-top: 1px solid var(--sep); }
  section { padding-top: 84px; }
  h2, :root[lang="en"] h2 { font-size: 32px; letter-spacing: -.5px; }
  .lead { font-size: 16.5px; }
  .vis { height: 460px; padding: 36px 8px 0; gap: 12px; border-radius: 32px; }
  .vis.timer { padding-top: 92px; }
  .vis .island.float { top: 22px; }
  .vis .toast.float { left: 12px; top: 16px; }
  .phone { width: 230px; padding: 6px; border-radius: 38px; }
  .phone img { border-radius: 33px; }
  .phone.sm { width: 150px; margin-top: 44px; }
  .vis.two .phone { width: 170px; }
  .vis.two .phone.sm { width: 140px; }
  .calc { font-size: 13.5px; padding: 14px 16px; }
  .photo { width: 280px; border-radius: 24px; }
  .island { height: 54px; padding: 0 16px 0 9px; gap: 9px; }
  .island .ic { width: 34px; height: 34px; font-size: 18px; }
  .island .clock { font-size: 20px; margin-left: 6px; }
  .island small { display: none; }
  .five { grid-template-columns: 1fr 1fr; }
  .five li:last-child { grid-column: 1 / -1; }
  .cards4 { grid-template-columns: 1fr; }
  .plan { padding: 26px 22px; border-radius: 26px; }
  .plan .price { font-size: 42px; }
  .end { padding: 90px 0 70px; }
  .end h2 { font-size: 38px; }
  .page-hd h1 { font-size: 36px; }
  .policy h1 { font-size: 30px; }
  .policy article { padding-top: 32px; }
  .policy section { margin-top: 28px; padding-top: 20px; }
  footer .cols { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}