/* pearnly.com：暖白底 + 点阵，黑白为主（不用品牌紫），衬线只用于字标与少量点缀。 */
:root {
  --bg: #f8f8f6;
  --paper: #ffffff;
  --ink: #141413;
  --text: #1f1e1b;
  --muted: #5f5e5a;
  --faint: #8f8d87;
  --line: #e7e5df;
  --line-strong: #d6d3ca;
  --soft: #f2f1ed;
  --green: #1d7f47;
  --line-green: #06c755;
  --marker: rgba(255, 210, 0, .38);
  --shadow-sm: 0 1px 2px rgba(20, 20, 19, .06);
  --shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 8px 24px -10px rgba(20, 20, 19, .12);
  --shadow-lg: 0 1px 2px rgba(20, 20, 19, .04), 0 16px 40px -12px rgba(20, 20, 19, .14), 0 48px 96px -32px rgba(20, 20, 19, .16);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16.5px/1.7 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:lang(zh-Hans) body, body:lang(zh-Hans) { font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", var(--sans); }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--ink); }
p { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
.icon { width: 18px; height: 18px; flex: none; }
.icon.sm { width: 16px; height: 16px; }

canvas.dots { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.topbar, main, .footer { position: relative; z-index: 1; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap.wide { max-width: 1180px; }
.wrap.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.serif { font-family: var(--serif); }
.skip { position: absolute; left: -999px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 12px; border-radius: 8px; }
.display { font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
:lang(en) .display { letter-spacing: -.035em; line-height: 1.08; }
h2.display { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 44px; }
.section { padding-top: 88px; padding-bottom: 8px; }

/* ---------- 顶栏：页顶是透明全宽条，往下滑后收成悬浮玻璃胶囊（site.js 加 .scrolled） ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none;
  padding-top: 10px; transition: padding-top .5s var(--ease); }
.pill {
  pointer-events: auto; width: calc(100% - 32px); max-width: 1320px; display: flex; align-items: center; gap: 8px;
  padding: 8px 6px 8px 10px; border-radius: 999px; border: 1px solid transparent; background: transparent;
  transition: max-width .55s var(--ease), padding .55s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.topbar.scrolled { padding-top: 14px; }
/* 液态玻璃：高透明 + 强模糊提饱和，边缘细高光，顶部一道弧形反光（::before），不挡点击 */
.pill { position: relative; isolation: isolate; }
.pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, 0) 55%),
              radial-gradient(120% 140% at 50% -40%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%);
  transition: opacity .4s var(--ease);
}
/* 纯透明液态玻璃（用户 2026-10-05）：几乎不着色、轻模糊，靠亮边和内侧折射光勾出形状 */
.topbar.scrolled .pill {
  max-width: 1080px; padding: 6px 6px 6px 22px; border-color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(2.5px) saturate(1.7); backdrop-filter: blur(2.5px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .45),
              inset 1px 0 0 rgba(255, 255, 255, .45), inset -1px 0 0 rgba(255, 255, 255, .45),
              inset 0 0 12px rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(20, 20, 19, .05),
              0 8px 26px -12px rgba(20, 20, 19, .2), 0 1px 4px -1px rgba(20, 20, 19, .06);
}
.topbar.scrolled .pill::before { opacity: 1; }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 23px; letter-spacing: -.01em; color: var(--ink); margin-right: 14px; line-height: 1; }
.nav { flex: 1; display: flex; gap: 2px; }
.nav a { padding: 7px 14px; border-radius: 999px; font-size: 15px; color: var(--muted); transition: background .2s, color .2s; }
.nav a, .langs a { white-space: nowrap; }
/* 平板和小屏笔记本：顶栏还是一行，收紧间距，别把“免费工具”和语言按钮挤成两行 */
@media (min-width: 901px) and (max-width: 1080px) {
  .nav a { padding: 7px 8px; font-size: 14px; }
  .langs a { padding: 4px 8px; }
  .wordmark { margin-right: 6px; }
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.langs { display: flex; border-radius: 999px; padding: 3px; }
.langs a { padding: 4px 11px; border-radius: 999px; font-size: 13px; color: var(--faint); transition: all .2s; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { color: var(--ink); }
/* 平板以下：导航换到第二行、可横向滑动 */
@media (max-width: 900px) {
  .pill, .topbar.scrolled .pill { flex-wrap: wrap; border-radius: 22px; padding: 8px 8px 6px 16px; row-gap: 4px; }
  .pill { background: rgba(248, 248, 246, .92); }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -8px 0 -10px; }
  .nav a { white-space: nowrap; font-size: 14px; padding: 6px 11px; }
  .langs { margin-left: auto; }
  .wordmark { font-size: 21px; }
  .pill > .btn { width: 36px; padding: 0; }
  .pill > .btn span { display: none; }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px;
  border-radius: 999px; font-size: 15.5px; font-weight: 500; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn.dark { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(20, 20, 19, .2), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn.dark:hover { background: #2a2925; }
.btn.light { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn.light:hover { border-color: var(--line-strong); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.center .actions { justify-content: center; }

/* ---------- 首屏 ---------- */
.hero { padding-top: 168px; }
.hero.sub { padding-top: 148px; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px; border-radius: 999px; font-size: 13.5px; color: var(--muted);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.hero h1 { font-size: clamp(38px, 6.2vw, 74px); margin: 26px auto 22px; max-width: 980px; }
.hero.sub h1 { font-size: clamp(34px, 5vw, 60px); }
.lead { font-size: 19px; color: var(--muted); max-width: 660px; line-height: 1.75; }
.center .lead { margin: 0 auto; }
.lead.center { margin: -26px auto 0; }
.hero .wide { margin-top: 72px; }
.crumbs { font-size: 13.5px; color: var(--faint); margin-bottom: 22px; }
.crumbs a:hover { color: var(--ink); }

/* ---------- 窗口框 ---------- */
.window { position: relative; background: var(--paper); border-radius: 18px; border: 1px solid rgba(20, 20, 19, .08); box-shadow: var(--shadow-lg); overflow: hidden; }
.winbar { position: relative; height: 46px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fbfbfa; }
.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #e2e0d9; }
.wintitle { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--faint); white-space: nowrap; }
.seg { position: absolute; left: 50%; transform: translateX(-50%); display: flex; border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; padding: 4px 16px; border-radius: 999px; font-size: 13.5px; color: var(--muted); cursor: pointer; transition: all .25s var(--ease); }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { color: var(--ink); }

/* ---------- 首页演示：左"现实"、右"系统"，元素按 site.js 的时间轴加类 ---------- */
.demo-body { position: relative; }
.scene { display: none; position: relative; }
.scene.active { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; animation: fade .5s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sc-real, .sc-sys { position: relative; padding: 46px 34px 30px; display: flex; flex-direction: column; gap: 16px; }
.sc-real { background: var(--soft); border-right: 1px solid var(--line); align-items: center; justify-content: center; }
.sc-tag { position: absolute; left: 18px; top: 14px; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.scene h5 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.scene h5 small { font-weight: 500; color: var(--faint); }
.scene .ok { font-style: normal; color: var(--green); font-weight: 700; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.sc-mascot { position: absolute; left: 18px; bottom: 8px; width: 84px; }
.sc-mascot .mascot { width: 100%; height: auto; }
.sc-mascot.hop { animation: hop .6s var(--ease); }
.fly { position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; pointer-events: none; white-space: nowrap; padding: 5px 11px; border-radius: 9px;
  background: var(--ink); color: #fff; font: 600 12.5px/1.2 var(--mono); box-shadow: 0 10px 22px -8px rgba(20, 20, 19, .55); }
.threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.thread { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; transition: stroke-dashoffset .7s var(--ease); }
.thread.on { stroke-dashoffset: 0; }
.fly.doc { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); }
/* 演示里的完成提示（别叫 .pill：那是顶栏胶囊） */
.sc-done { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 12px; background: rgba(29, 127, 71, .08); color: var(--green); font-size: 13.5px; font-weight: 500;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); margin-top: auto; }
.sc-done.on { opacity: 1; transform: none; }
.flash { position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; transition: opacity .35s; }
.flash.on { opacity: .9; transition: none; }

/* Cowork：流水与发票配对 → 一起推进 ERP → 回读 */
.stmt { width: 100%; max-width: 360px; background: #fff; border-radius: 8px; padding: 18px 18px 10px; box-shadow: var(--shadow); transform: rotate(-1deg); }
.st-row { display: grid; grid-template-columns: 40px 1fr auto 16px; gap: 8px; align-items: center; padding: 8px 6px; margin: 0 -6px; border-top: 1px dashed #e6e3db;
  font: 12px/1.3 var(--mono); color: #4a4944; border-radius: 6px; transition: background .4s; }
.st-row b { font-weight: 600; color: var(--ink); }
.st-row.on { background: var(--marker); }
.st-row.on .ok, .inv.on .ok, .erpbox.read .ok { opacity: 1; transform: none; }
.inv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inv { position: relative; padding: 11px 11px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--faint); transition: transform .45s var(--ease), box-shadow .45s, opacity .5s, border-color .4s; }
.inv b { font-size: 12px; color: var(--ink); line-height: 1.3; }
.inv em { font: 600 13px var(--mono); font-style: normal; color: var(--ink); margin-top: 4px; }
.inv .ok { position: absolute; right: 9px; top: 7px; }
.inv.pick { transform: translateY(-8px) rotate(-2deg); box-shadow: var(--shadow-lg); border-color: var(--ink); }
.inv.on { border-color: rgba(29, 127, 71, .45); }
.inv.sent { opacity: .25; transform: scale(.94); }
.dots { display: inline-flex; gap: 5px; margin-left: auto; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background .3s, border-color .3s; }
.dots i.on { background: var(--green); border-color: var(--green); }
.erpbox { border-radius: 12px; border: 1px solid var(--line); padding: 14px 14px 8px; background: #fbfbfa; min-height: 150px; }
.erpbox .rb { margin-left: auto; font: 600 10.5px var(--mono); letter-spacing: .08em; color: var(--faint); opacity: 0; transition: opacity .3s; }
.erpbox.read .rb { opacity: 1; color: var(--green); }
.erp-row { display: grid; grid-template-columns: 40px 1fr auto 16px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px;
  opacity: 0; transform: translateX(-10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.erp-row.on { opacity: 1; transform: none; }
.erp-row span:first-child { font-family: var(--mono); color: var(--faint); }
.erp-row b { font: 600 12px var(--mono); }

/* DMS：LINE 里拍身份证 → 逐项打进 DMS → 查重 → 订车单打印出来 → LINE 回执 */
.phone { width: 100%; max-width: 300px; border-radius: 26px; background: #dfe3e8; padding: 12px 12px 16px; border: 6px solid var(--ink); display: flex; flex-direction: column; gap: 9px; min-height: 360px; }
.ph-bar { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid rgba(20, 20, 19, .1); }
.bub { opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .4s var(--ease), transform .4s var(--ease); max-width: 88%; }
.bub.on { opacity: 1; transform: none; }
.bub.me { align-self: flex-end; }
.bub.txt { padding: 7px 12px; border-radius: 16px; font-size: 12.5px; }
.bub.me.txt { background: var(--line-green); color: #fff; border-bottom-right-radius: 5px; font-family: var(--mono); }
.bub.bot { align-self: flex-start; }
.bub.bot.txt { background: #fff; color: var(--ink); border-bottom-left-radius: 5px; }
.bub.typing { display: none; gap: 4px; padding: 10px 12px; background: #fff; border-radius: 16px; }
.bub.typing.on { display: flex; }
.bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: blink-dot 1s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.idmini { position: relative; width: 210px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #f3f7fb, #e2ebf5); border: 1px solid #cfdbe8;
  display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; color: #3b4a5c; }
.idmini b { font-size: 12px; color: var(--ink); }
.idh { font-weight: 600; color: #2d4f73; margin-bottom: 3px; font-size: 10px; }
.idph { position: absolute; right: 10px; top: 24px; width: 38px; height: 46px; border-radius: 5px; background: linear-gradient(#d0dae5, #b9c8d8); }
.corners { position: absolute; inset: -7px; pointer-events: none; opacity: 0; transform: scale(1.15); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1);
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 16px 3px, linear-gradient(var(--ink), var(--ink)) 0 0 / 3px 16px,
              linear-gradient(var(--ink), var(--ink)) 100% 0 / 16px 3px, linear-gradient(var(--ink), var(--ink)) 100% 0 / 3px 16px,
              linear-gradient(var(--ink), var(--ink)) 0 100% / 16px 3px, linear-gradient(var(--ink), var(--ink)) 0 100% / 3px 16px,
              linear-gradient(var(--ink), var(--ink)) 100% 100% / 16px 3px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 3px 16px; background-repeat: no-repeat; }
.corners.on { opacity: 1; transform: none; }
.dform { border-radius: 12px; border: 1px solid var(--line); padding: 14px 14px 6px; }
.fr { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; min-height: 33px; }
.fr span { color: var(--muted); }
.fr b { font-weight: 500; color: var(--ink); border-right: 2px solid transparent; }
.fr b.on:not(:empty) { animation: caret .5s steps(1) 2; }
@keyframes caret { 50% { border-color: var(--ink); } }
.dup { position: relative; border-radius: 12px; background: #fbfbfa; border: 1px solid var(--line); padding: 10px 14px; overflow: hidden;
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.dup.on { opacity: 1; transform: none; }
.dup h6 { margin: 0 0 4px; font-size: 11.5px; color: var(--faint); font-weight: 600; }
.dup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.lens { position: absolute; top: 26px; left: -40px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink); background: rgba(255, 255, 255, .4); }
.lens::after { content: ""; position: absolute; right: -9px; bottom: -7px; width: 11px; height: 3px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.dup.on .lens { animation: sweep 1s var(--ease) forwards; }
@keyframes sweep { to { left: calc(100% + 20px); } }
.nodup { position: absolute; right: 12px; top: 9px; font-size: 11.5px; font-weight: 600; color: var(--green); background: rgba(29, 127, 71, .1); padding: 2px 9px; border-radius: 999px;
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.nodup.on { opacity: 1; transform: none; }
.slip { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 4px; background: #fff; border: 1px dashed var(--line-strong); font-size: 12px; color: var(--muted);
  clip-path: inset(0 0 100% 0); transition: clip-path 1s steps(8); box-shadow: var(--shadow-sm); }
.slip.on { clip-path: inset(0 0 0 0); }
.slip b { color: var(--ink); font: 600 13px var(--mono); }

/* ERP：收银台扫码 → 库存同步扣 → 低库存变黄 → 拍采购单 → 补回来 */
.pos { width: 100%; max-width: 360px; transition: opacity .5s, filter .5s; }
.pos.dim { opacity: .35; filter: grayscale(1); }
.belt { position: relative; height: 92px; border-radius: 14px; background: #fff; border: 1px solid var(--line); overflow: hidden;
  background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(20, 20, 19, .05) 22px 24px); }
.prod { position: absolute; top: 14px; left: 50%; width: 112px; margin-left: -56px; height: 64px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--ink);
  transform: translateX(-260px); transition: transform .6s cubic-bezier(.3, 1.2, .5, 1); }
.prod.on { transform: none; }
.prod.gone { transform: translateX(260px); transition: transform .5s ease-in; }
.prod .icon { width: 22px; height: 22px; }
.beam { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 3px; margin-left: -1.5px; background: #e5484d; opacity: .15; box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); transition: opacity .2s, box-shadow .2s; }
.pos.beep .beam { opacity: 1; box-shadow: 0 0 18px 6px rgba(229, 72, 77, .45); }
.beep { position: absolute; right: 12px; top: 8px; font-size: 12px; font-weight: 700; color: #fff; background: var(--ink); border-radius: 999px; padding: 2px 9px;
  opacity: 0; transform: scale(.5) rotate(-8deg); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.pos.beep .beep { opacity: 1; transform: rotate(-8deg); }
.rcpt { position: relative; margin: 12px auto 0; width: 82%; background: #fff; padding: 12px 14px 14px; font: 11.5px/1.5 var(--mono); color: #4a4944; box-shadow: var(--shadow-sm);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 0, transparent 5px, #000 5.5px) bottom / 10px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 0, transparent 5px, #000 5.5px) bottom / 10px 8px repeat-x; }
.rcpt h6 { margin: 0 0 4px; text-align: center; font-size: 11px; letter-spacing: .14em; color: var(--faint); }
.rl { display: flex; justify-content: space-between; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s, opacity .35s; }
.rl.on { max-height: 20px; opacity: 1; }
.rl.tot { border-top: 1px dashed var(--line-strong); margin-top: 4px; padding-top: 2px; color: var(--ink); font-weight: 700; }
.rl.tot.on { max-height: 26px; }
.paid { position: absolute; right: 10px; top: 8px; font: 700 12px var(--sans); color: var(--green); border: 2px solid var(--green); border-radius: 6px; padding: 0 6px;
  opacity: 0; transform: rotate(-12deg) scale(1.8); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.paid.on { opacity: .9; transform: rotate(-12deg); }
.bill { position: absolute; left: 50%; top: 50%; width: 200px; margin: -80px 0 0 -100px; padding: 14px 16px; border-radius: 6px; background: #fff; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); opacity: 0; transform: translateY(-40px) rotate(-8deg);
  transition: opacity .4s, transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.bill.on { opacity: 1; transform: rotate(-3deg); }
.bill b { color: var(--ink); font-size: 13px; }
.bill em { font: 700 18px var(--mono); font-style: normal; color: var(--green); margin-top: 4px; }
.stock { border-radius: 12px; border: 1px solid var(--line); padding: 14px 14px 10px; position: relative; }
.sk { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.sk b { font: 600 14px var(--mono); }
.sk .bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.sk .bar i { display: block; height: 100%; width: var(--w0); background: var(--ink); border-radius: 4px; transition: width .7s var(--ease), background .4s; }
.sk.on .bar i { width: var(--w1); }
.sk.refill .bar i { width: var(--w2); background: var(--green); }
.low { grid-column: 1 / -1; justify-self: start; font-style: normal; font-size: 11px; font-weight: 600; color: #8a6500; background: #ffe58f; padding: 1px 8px; border-radius: 999px;
  display: none; }
.low.on { display: inline-block; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.sk:has(.low.on) .bar i { background: #e0ad00; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.restock { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--green); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.restock.on { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .scene.active { grid-template-columns: 1fr; min-height: 0; }
  .sc-real { border-right: 0; border-bottom: 1px solid var(--line); padding: 40px 18px 24px; }
  .sc-sys { padding: 40px 18px 22px; }
  .sc-mascot { display: none; }
  .inv-row { gap: 6px; }
  .inv { padding: 9px 8px; }
  .fr { grid-template-columns: 78px 1fr; }
  .seg button { padding: 4px 11px; }
  .lights { display: none; }
}

/* ---------- 集成名 ---------- */
.logos { text-align: center; padding-top: 96px; }
.logos .serif { font-size: 20px; color: var(--text); }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 56px; margin-top: 24px; }
.logo-row span { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #9c9a93; transition: color .3s; }
.logo-row span:hover { color: var(--ink); }

/* ---------- 面板 / 产品 ---------- */
.panel { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(20, 20, 19, .07); border-radius: 28px; box-shadow: var(--shadow); }
.stack { display: grid; gap: 24px; }
.product { display: grid; grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: center; padding: 52px; }
.product.flip .product-text { order: 2; }
.eyebrow { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--faint); letter-spacing: .01em; }
.product h3.display { font-size: clamp(28px, 3vw, 38px); margin: 10px 0 12px; }
.points { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px; }
.points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.points .icon { color: var(--green); margin-top: 5px; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--ink); }
.more .icon { transition: transform .25s var(--ease); }
.more:hover .icon, .tile:hover .more .icon { transform: translateX(4px); }
.poster { display: block; }
.poster .window { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.poster:hover .window { transform: translateY(-4px); }
.poster img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.playbtn { position: absolute; left: 0; right: 0; bottom: 0; top: 46px; display: grid; place-items: center; border: 0; padding: 0; background: linear-gradient(rgba(20, 20, 19, 0), rgba(20, 20, 19, .06)); cursor: pointer; }
.circle { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px -6px rgba(20, 20, 19, .3); transition: transform .3s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.circle .icon { width: 26px; height: 26px; margin-left: 3px; }
.poster:hover .circle, .playbtn:hover .circle { transform: scale(1.07); }
@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .product.flip .product-text { order: 0; }
}

/* ---------- 视频 ---------- */
.player { position: relative; background: #111; }
.player video { width: 100%; aspect-ratio: 16 / 9; background: #111; }
.player .playbtn { top: 0; }
.player.playing .playbtn { display: none; }

/* ---------- 步骤 ---------- */

/* ---------- 卡片 / 小块 ---------- */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 40px; }
.tiles.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 0; }
.tiles.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 0; }
/* 首页快捷工具固定 8 个：宽屏 4×2，平板 2×4，手机一列，每行都排满 */
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles.four { grid-auto-rows: 1fr; }
@media (max-width: 560px) { .tiles.four { grid-template-columns: 1fr; grid-auto-rows: auto; } }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: 20px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.tile h3 { font-size: 18px; }
.tile p { color: var(--muted); font-size: 15px; }
.tile code { margin-top: auto; padding-top: 0; display: block; font: 12.5px/1.5 var(--mono); background: var(--soft); border-radius: 10px; padding: 9px 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 示例条贴卡片底边：同一排卡片一样高时，黄条也在同一条线上 */
.tile p + code { margin-top: auto; }
.tile p:has(+ code) { margin-bottom: 8px; }
.tile .more { margin-top: 10px; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.card { padding: 28px; border-radius: 20px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line); }
.card > .icon { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); margin-bottom: 18px; }
.card h3 { font-size: 18px; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 15px; }

/* ---------- 联系 ---------- */
.cta { text-align: center; padding: 72px 32px; }
.cta h2.display { margin-bottom: 14px; }
.cta .lead { margin: 0 auto; }
.cta .actions { justify-content: center; }

/* ---------- 工具 ---------- */
.toolpanel { padding: 34px; margin-top: 44px; }
.tool { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field > legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 8px; }
.tool input:not([type=radio]):not([type=checkbox]), .tool select {
  font: inherit; font-size: 17px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px; width: 100%; background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.tool select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.tool input.short { max-width: 150px; }
.tool input:focus, .tool select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(20, 20, 19, .07); }
.segmented { display: inline-flex; flex-wrap: wrap; border-radius: 999px; padding: 4px; justify-self: start; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 7px 18px; border-radius: 999px; font-size: 14.5px; color: var(--muted); cursor: pointer; transition: all .2s var(--ease); }
.segmented input:checked + span { color: var(--ink); }
.segmented input:focus-visible + span { outline: 2px solid var(--ink); }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.output { background: var(--soft); border-radius: 16px; padding: 20px 22px; }
.output .label { font-size: 13.5px; color: var(--faint); }
.big { font-size: 23px; font-weight: 600; color: var(--ink); margin: 4px 0 14px; word-break: break-word; line-height: 1.5; }
.result { margin: 0; display: grid; gap: 10px; }
.result div { display: flex; justify-content: space-between; gap: 16px; }
.result dt { color: var(--muted); }
.result dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.result div:last-child { border-top: 1px solid var(--line-strong); padding-top: 12px; }
.result div:last-child dd { font-size: 22px; }
.ok { color: var(--green); font-weight: 600; }
.warn { color: #b42318; }
/* 文件类工具（图片转 PDF、合并 / 拆分 PDF）：虚线拖放区、可调顺序的文件列表 */
.drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 30px 18px; border: 1.5px dashed var(--line-strong); border-radius: 16px;
  background: var(--soft); text-align: center; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.drop:hover, .drop.over { border-color: var(--ink); background: #fff; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.drop-title { font-weight: 600; color: var(--ink); }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.files li { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.files .thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--soft); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.files .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.files .file-meta { font-size: 13px; color: var(--faint); white-space: nowrap; }
.row-actions { display: flex; gap: 4px; }
.row-actions button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; }
.row-actions button:hover:not(:disabled) { border-color: var(--ink); }
.row-actions button:disabled { opacity: .35; cursor: default; }
.tool .btn.dark:disabled { opacity: .4; cursor: default; }
.tool > .btn { justify-self: start; }
@media (max-width: 560px) { .files li { grid-template-columns: 40px 1fr auto; } .files .file-meta { display: none; } }
/* PromptPay：二维码居中，下面一行账号和金额 */
.qr-out { display: grid; justify-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); }
.qr-out canvas { width: min(280px, 100%); height: auto; image-rendering: pixelated; }
.qr-who { margin: 0; font-variant-numeric: tabular-nums; color: var(--muted); }
.qr-who b { color: var(--ink); }
/* 年份换算：每种写法一行，右边一个复制按钮 */
[data-date] .result div { align-items: center; }
/* 表格类工具（PDF 转 Excel、Excel 转 PDF）：选中的文件名、可横向滚动的预览 */
.sheet-tools { display: grid; gap: 22px; }
.sheet-tools > [data-sheet-pane] { display: grid; gap: 18px; }
.sheet-tools > [data-sheet-pane][hidden] { display: none; }
.file-name { margin: -8px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sheet-preview { display: grid; gap: 8px; min-width: 0; }
.sheet-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sheet-grid { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sheet-grid td { border: 1px solid var(--line); padding: 4px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.sheet-grid td.num { text-align: right; }
.sheet-scroll.paper { padding: 12px; background: #fafaf8; }
/* Excel 转 PDF 的排版（预览和打印共用）：像 Excel 打印出来一样——没有网格线，只有单元格自己的边框 */
.sheet-page table { border-collapse: collapse; table-layout: fixed; background: #fff;
  font: 11pt/1.25 Calibri, "Sarabun", "TH Sarabun New", "Leelawadee UI", "Noto Sans Thai", "Tahoma", sans-serif; color: #000; }
.sheet-page td { padding: 1px 4px; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
.sheet-page td.spill { overflow: visible; position: relative; z-index: 1; }
.sheet-scroll.paper .sheet-page + .sheet-page { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
#sheet-print { display: none; }
@media print {
  body.printing-sheet > :not(#sheet-print) { display: none !important; }
  body.printing-sheet { background: #fff; }
  body.printing-sheet #sheet-print { display: block; }
  #sheet-print .sheet-page + .sheet-page { break-before: page; }
  #sheet-print tr { break-inside: avoid; }
  #sheet-print td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* 税号查公司：一行一项，名称和地址右边可复制；地址可能很长，左对齐换行 */
.company .result div { align-items: center; }
.company .result div:last-child { border-top: 0; padding-top: 0; }
.company .result div:last-child dd { font-size: inherit; }
.company .result dt { flex: none; width: 170px; }
.company .result dd { flex: 1; text-align: right; overflow-wrap: anywhere; }
.company .result dd[data-out="address"] { text-align: left; font-weight: 500; }
@media (max-width: 560px) { .company .result div { flex-wrap: wrap; } .company .result dt { width: 100%; } .company .result dd { text-align: left; } }
[data-date] .result div:last-child { border-top: 0; padding-top: 0; }
[data-date] .result div:last-child dd { font-size: inherit; }
[data-date] .result dd { margin-left: auto; }
.note { font-size: 14px; color: var(--muted); margin-top: 22px; }
.toolpanel > .muted { margin-top: 10px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--faint); font-size: 20px; line-height: 1; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin-top: 10px; }
.narrow h2.display { font-size: 28px; margin-bottom: 12px; }
.pitch { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; border-radius: 20px; background: var(--ink); color: #fff; margin-bottom: 72px; font-size: 16px; transition: transform .3s var(--ease); }
.pitch:hover { transform: translateY(-2px); }
.pitch .icon { width: 22px; height: 22px; }

/* ---------- 页脚 ---------- */
.footer { margin-top: 96px; border-top: 1px solid var(--line); background: rgba(248, 248, 246, .9); padding: 56px 0 28px; }
.footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.brandcol p { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 280px; }
.footer h2 { font-size: 12.5px; font-weight: 600; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: 4px 0; }
.footer li a { color: var(--muted); font-size: 14.5px; transition: color .2s; }
.footer li a:hover { color: var(--ink); }
.legal { margin-top: 44px; font-size: 13px; color: var(--faint); display: grid; gap: 2px; }
@media (max-width: 760px) { .footer .cols { grid-template-columns: 1fr 1fr; } .brandcol { grid-column: 1 / -1; } }

/* ---------- 渐入 ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 教程文章 ---------- */
.meta { margin-top: 18px; font-size: 14px; color: var(--faint); }
.toc { margin-top: 44px; padding: 22px 26px; border-radius: 20px; }
.toc > span { font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: .02em; }
.toc ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.toc a { color: var(--text); font-size: 15px; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.prose { margin-top: 40px; font-size: 17px; line-height: 1.85; color: var(--text); }
.prose h2 { font-size: 26px; font-weight: 600; letter-spacing: -.015em; margin: 52px 0 16px; scroll-margin-top: 96px; }
.prose h3 { font-size: 19px; margin: 32px 0 10px; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li strong { color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: table; }
.prose th { text-align: left; font-weight: 600; color: var(--ink); background: var(--soft); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose table.sum td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose table.sum tr.total td { font-weight: 600; color: var(--ink); background: var(--soft); }
.prose code { font: 14px var(--mono); background: var(--soft); padding: 2px 6px; border-radius: 6px; }
.prose .note { padding: 14px 18px; border-radius: 14px; background: rgba(255, 210, 0, .12); border: 1px solid rgba(201, 160, 0, .25); font-size: 15.5px; }
.prose ul.checklist { list-style: none; padding-left: 0; }
.prose ul.checklist li { position: relative; padding-left: 30px; }
.prose ul.checklist li::before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--green); font-weight: 700; }
.disclaimer { margin-top: 44px !important; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--faint); line-height: 1.7; }
.plain-links { list-style: none; padding: 0; margin: 0; }
.plain-links li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.plain-links a { color: var(--ink); font-weight: 500; }
.plain-links a:hover { text-decoration: underline; }
.more-link { margin-top: 28px; }
@media (max-width: 760px) {
  .prose { font-size: 16.5px; }
  .prose table { display: block; overflow-x: auto; }
}
.tiles.pair { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
@media (max-width: 760px) { .tiles.pair { grid-template-columns: 1fr; } }


/* ---------- 品牌形象 น้องใบ（website/mascot.py）：眨眼、挥手、跳一下；眼睛跟随指针由 site.js 改 .m-look ---------- */
.mascot { display: block; overflow: visible; }
.mascot .m-blink { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
.mascot .m-wave { transform-box: view-box; animation: wave 3.2s var(--ease) infinite; }
@keyframes wave { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-16deg); } 75% { transform: rotate(9deg); } 85% { transform: rotate(-11deg); } }
.mascot .m-stamp { transform-box: view-box; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-16px) rotate(-3deg); } 60% { transform: translateY(0) scaleY(.94); } }
.hop { animation: hop .6s var(--ease); }

.hero-stage { position: relative; }
.hero-mascot { position: absolute; z-index: 2; right: 72px; top: -103px; height: 110px; width: auto; cursor: pointer; }
.product .poster { position: relative; }
.poster-mascot { position: absolute; z-index: 2; right: 30px; top: -94px; height: 100px; width: auto; pointer-events: none; }
.product:hover .poster-mascot { animation: hop .6s var(--ease); }
@keyframes stamp { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nf-mascot { height: 150px; width: auto; margin: 0 auto 10px; }
@media (max-width: 760px) {
  .hero-mascot { right: 22px; top: -75px; height: 80px; }
  .poster-mascot { right: 18px; top: -66px; height: 70px; }
}

/* ---------- MR.ERP 专业版：浅蓝面板（MR.ERP 蓝），一排 Pearnly 小单走向大账本 ---------- */
.pro { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: 52px;
  background: linear-gradient(160deg, #f3f7fb, #e4edf6); border-color: #d5e0ec; }
.pro .eyebrow { color: #2f5d8a; }
.pro h2.display { font-size: clamp(28px, 3.2vw, 40px); margin: 10px 0 14px; }
.pro p { color: var(--muted); }
.pro-cards { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px; }
.pro-cards li { display: flex; flex-direction: column; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .75); border: 1px solid #d5e0ec; }
.pro-cards b { color: var(--ink); font-size: 16px; }
.pro-cards span { color: var(--muted); font-size: 14.5px; }
.walk { position: relative; height: 320px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.walk-line { position: absolute; left: 0; right: 90px; bottom: 6px; border-top: 3px dashed #b9c9d9; }
.walker { position: relative; display: block; height: 116px; }
.walker svg { height: 100%; width: auto; }
.walker.big { height: 300px; margin-left: 8px; }
.walk .walker.w0 svg, .walk .walker.w1 svg, .walk .walker.w2 svg { animation: hop 1.8s var(--ease) infinite; }
.walk .walker.w1 svg { animation-delay: .25s; }
.walk .walker.w2 svg { animation-delay: .5s; }
.pro-band { display: flex; align-items: center; gap: 22px; padding: 18px 28px; border-radius: 22px; color: var(--ink);
  background: linear-gradient(160deg, #f3f7fb, #e4edf6); border: 1px solid #d5e0ec; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pro-band:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.band-mascot { height: 104px; width: auto; flex: none; }
.pro-band > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pro-band b { font-size: 18px; }
.pro-band span span { color: var(--muted); font-size: 15px; }
.pro-band > .icon { width: 22px; height: 22px; }
.flow { padding: 52px 40px 40px; }
.flow h2.display { margin-bottom: 14px; }
.flow .lead.center { margin-top: 0; }
.flow-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 24px; align-items: end; margin-top: 40px; }
.flow-grid .walk { height: 230px; }
.flow-grid .walker { height: 78px; }
.flow-grid .walker.big { height: 210px; }
.flow-col { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.flow-col b { display: block; font-family: var(--serif); font-size: 26px; color: var(--ink); }
.flow-col > span { color: var(--muted); font-size: 14px; }
.flow-col ul { padding-left: 18px; margin: 12px 0 0; font-size: 15px; }
.flow-col.full { background: #f3f7fb; border-color: #c9dcee; }
.cards.modules { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.modules .card h3 { font-size: 16.5px; margin: 0; }
.chips { text-align: center; margin-top: 40px; }
.chips p { color: var(--muted); margin-bottom: 14px; }
.chips div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips span { padding: 6px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; }
.duo { display: flex; align-items: flex-end; justify-content: center; gap: 16px; }
.duo svg { height: 170px; width: auto; }
.duo .m-prodms { height: 270px; }
.duo-arrow { align-self: center; color: var(--faint); }
.duo-arrow .icon { width: 28px; height: 28px; }
.compare { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 14px; color: var(--faint); font-weight: 600; }
.compare tbody th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare td:last-child, .compare thead th:last-child { background: #f3f7fb; }
.compare .price a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.compare .price td:last-child a { color: #2f5d8a; }
@media (max-width: 860px) {
  .pro { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
  .pro > *, .flow-grid > * { min-width: 0; }
  .walk, .flow-grid .walk { height: 170px; }
  .walker, .flow-grid .walker { height: 40px; }
  .walker.big, .flow-grid .walker.big { height: 130px; }
  .flow { padding: 32px 20px 24px; }
  .flow-grid { grid-template-columns: 1fr; }
  .duo svg { height: 120px; }
  .duo .m-prodms { height: 190px; }
  .pro-band { padding: 16px 18px; gap: 14px; }
  .band-mascot { height: 76px; }
}

/* ---------- 选中态统一液态玻璃（用户 2026-10-05）：轨道是一层浅玻璃槽，选中项是一颗透明玻璃珠，靠亮边、内侧折射光和投影立起来 ---------- */
.langs, .seg, .segmented {
  background: rgba(20, 20, 19, .035);
  box-shadow: inset 0 1px 2px rgba(20, 20, 19, .07), inset 0 -1px 0 rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(6px) saturate(1.6); backdrop-filter: blur(6px) saturate(1.6);
}
.nav a, .langs a, .seg button, .segmented span { transition: color .25s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.nav a:hover, .nav a[aria-current], .langs a[aria-current], .seg button[aria-selected="true"], .segmented input:checked + span {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, .3) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.8); backdrop-filter: blur(4px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .55), inset 0 0 0 .5px rgba(20, 20, 19, .09),
              inset 0 0 8px rgba(255, 255, 255, .35), 0 4px 12px -6px rgba(20, 20, 19, .28), 0 1px 2px rgba(20, 20, 19, .06);
}
.nav a:hover:not([aria-current]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 .5px rgba(20, 20, 19, .06), 0 3px 10px -6px rgba(20, 20, 19, .2); }
/* 透明顶栏压在深色内容上也要看得清：字加深、带一圈柔白光晕（玻璃本身仍是透明的） */
.topbar.scrolled .nav a, .topbar.scrolled .langs a, .topbar.scrolled .wordmark { color: var(--ink); text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9); }

/* ---------- 关于我们 / 隐私政策 ---------- */
.legal-links { display: flex; gap: 18px; margin-top: 6px; }
.legal-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.legal-links a:hover { color: var(--ink); }
.about-story p { font-size: 17px; margin: 0 0 16px; color: var(--text); }
a.flow-col { display: block; color: var(--text); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
a.flow-col:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.compare tbody th { width: 34%; }

/* 主视觉下面的演示窗：给挥手的小单留出位置，别压到主视觉上 */
.demo-band { padding-top: 72px; }
@media (max-width: 760px) { .demo-band { padding-top: 56px; } }

/* ---------- 首页主视觉（website/story.py）：和下面产品演示一样的窗口外框，顶栏里逐字写出手写字幕 ---------- */
.hero-doodle { position: absolute; z-index: 2; width: 128px; height: auto; right: 7%; top: -128px; }
/* 标题里一个词下面的荧光笔，和相片里便利贴、荧光笔是同一种黄 */
.hero h1 { isolation: isolate; }
.hl { position: relative; white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; bottom: .04em; height: .4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C40 7 92 10 196 6 L197 17 C130 19 64 22 3 21 Z' fill='%23ffd84d' opacity='.85'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transform-origin: left center; animation: hl-draw .9s .45s var(--ease) both;
}
/* 泰文、英文行高里字下面留白不同，荧光笔要分别抬高才贴着字 */
:lang(th) .hl::after { bottom: .24em; height: .36em; }
:lang(en) .hl::after { bottom: .36em; height: .3em; }
@keyframes hl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hl::after { animation: none; } }
@media (max-width: 760px) { .hero-doodle { display: none; } }

.st-wrap { position: relative; }
.st-card { margin: 0; }
/* 画面一直铺到左、右、下三条边：不要窗口描边，窗口底色用画里的墙色/地板色，缩放差零点几像素时边上也不会透出白底 */
.st-win { border: 0; background: linear-gradient(#f6ecd8, #f6ecd8) 0 0 / 100% 55% no-repeat, #e4cfa8; }
.st-win .winbar { gap: 16px; }
.st { display: block; width: 100%; height: auto; }
.st text { user-select: none; }
.st-cap { flex: 1; min-width: 0; text-align: center; padding-right: 47px; font: 400 clamp(15px, 1.7vw, 20px)/1.3 Sriracha, "Long Cang", cursive; color: #2d2b27;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cap { display: grid; }
.st-cap > span { grid-area: 1 / 1; }
.st-cap-size { visibility: hidden; }
@media (max-width: 760px) {
  .st-win .winbar { height: auto; min-height: 46px; padding: 8px 12px; }
  .st-cap { padding-right: 0; white-space: normal; }
}

/* ---------- 首页演示 · 手绘版（website/scenes.py）：左右两张内联 SVG，元素按 site.js demo() 的时间轴加类 ---------- */
.hd-defs { position: absolute; width: 0; height: 0; }
.scene.hd-scene.active { min-height: 0; }
.hd-scene .sc-real, .hd-scene .sc-sys { padding: 0; display: block; }
.hd-scene .sc-real { background: #f6efdf; }
.hd-scene .sc-sys { background: #fffdf8; }
.hd { display: block; width: 100%; height: auto; overflow: visible; }
.hd text { user-select: none; }
.hd .pop, .hd-inv, .hd-stamp, .hd-chip, .hd-dot, .hm-hop { transform-box: fill-box; transform-origin: center; }
/* 一笔画出来：荧光笔、对勾 */
/* 圆头线帽在长度为 0 时也会画出一个点，所以没画之前连透明度一起藏起来 */
.hd-hl, .hd-tick { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .45s var(--ease), opacity .1s; }
.hd-hl.on, .hd-tick.on, .hd-inv.read .hd-cardtick { stroke-dashoffset: 0; opacity: 1; }
.hd-hl.on { opacity: .85; }
/* 读出来的税票：弹出来，扫描条从上扫到下；推进 ERP 后淡一点 */
.hd-inv { opacity: 0; transform: scale(.6) rotate(-6deg); transition: opacity .35s var(--ease), transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.hd-inv.on { opacity: 1; transform: none; }
.hd-inv.hd-sent { opacity: .45; }
.hd-scan { opacity: 0; }
.hd-inv.scan .hd-scan { animation: hd-scan .9s ease-in-out; }
@keyframes hd-scan { 0% { opacity: .5; transform: translateY(0); } 90% { opacity: .5; transform: translateY(100px); } 100% { opacity: 0; transform: translateY(100px); } }
.hd-dot { transition: fill .3s; }
.hd-dot.on { fill: #43b36f; animation: hd-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hd-pop { from { transform: scale(.3); } }
.hd-chip, .hd-stamp { opacity: 0; }
.hd-chip.on { opacity: 1; animation: hd-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.hd-stamp.on { opacity: 1; animation: hd-stamp .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes hd-stamp { from { opacity: 0; transform: scale(2.2) rotate(8deg); } }
/* 放大镜沿着日记账三行扫一遍（回读） */
.hd-lens { opacity: 0; transform: translate(70px, 330px); }
.hd-lens.on { animation: hd-lens 1.3s ease-in-out forwards; }
@keyframes hd-lens { 0% { opacity: 0; transform: translate(70px, 330px); } 12% { opacity: 1; } 35% { transform: translate(380px, 342px); }
  65% { transform: translate(90px, 376px); } 88% { opacity: 1; transform: translate(380px, 412px); } 100% { opacity: 0; transform: translate(400px, 412px); } }
/* 小单：抬笔打勾、跳一下、最后挥手（类名都带 hm- 前缀，别撞上全站的 .hop / .ok） */
.hm-arm, .hm-wave, .hm-leg { transition: transform .35s var(--ease); }
.hm.hm-jot .hm-arm { animation: hm-jot .55s var(--ease); }
@keyframes hm-jot { 40% { transform: rotate(-58deg); } 70% { transform: rotate(-40deg); } }
.hm.hm-hopping .hm-hop { animation: hm-hop .6s var(--ease); }
@keyframes hm-hop { 35% { transform: translateY(-22px); } 60% { transform: translateY(0) scaleY(.94); } }
.hm.hm-cheer .hm-wave { animation: hm-wave 1s var(--ease) 2; }
@keyframes hm-wave { 30%, 70% { transform: rotate(130deg); } 50% { transform: rotate(105deg); } }
.hm-mouth { transform-box: fill-box; transform-origin: center top; transition: transform .3s var(--ease); }
.hm.hm-cheer .hm-mouth { transform: scale(1.3, 1.5); }
.hm .hm-eyes { animation: hm-blink 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hm-blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.1); } }
/* 两边之间飞的东西：手写字的小纸条；配对线是铅笔虚线 */
.fly.hd-fly { background: #fffdf6; color: #2d2b27; border: 2px solid #3d362c; border-radius: 6px; font: 400 15px/1.2 Sriracha, "Long Cang", cursive;
  padding: 3px 10px; box-shadow: 4px 5px 0 rgba(58, 42, 20, .14); }
.fly.hd-fly.doc { background: #fff8e1; }
.hd-thread { stroke: #3d362c; stroke-width: 2; stroke-linecap: round; opacity: .7; }
/* 压在画底下的连线：两栏的画抬到它上面，线只在空白处露出来 */
.hd-scene .sc-real > .hd, .hd-scene .sc-sys > .hd { position: relative; z-index: 1; }
.threads.hd-under { z-index: 0; }
.hd-pop, .hd-flash, .hd-typing circle { transform-box: fill-box; transform-origin: center; }
/* 通用：弹出来（气泡、取景框、提示、订车单） */
.hd-pop { opacity: 0; transform: scale(.7); transition: opacity .3s var(--ease), transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.hd-pop.on { opacity: 1; transform: none; }
.hd-flash { opacity: 0; }
.hd-flash.on { animation: hd-flash .4s ease-out; }
@keyframes hd-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.hd-typing.on circle { animation: hd-dots .9s ease-in-out infinite; }
.hd-typing .d1 { animation-delay: .15s !important; } .hd-typing .d2 { animation-delay: .3s !important; }
@keyframes hd-dots { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
/* 放大镜扫过三张老客户卡片 */
.hd-lens2 { opacity: 0; transform: translate(110px, 386px); }
.hd-lens2.on { animation: hd-lens2 1.2s ease-in-out forwards; }
@keyframes hd-lens2 { 0% { opacity: 0; transform: translate(110px, 386px); } 15% { opacity: 1; } 50% { transform: translate(260px, 390px); }
  85% { opacity: 1; transform: translate(410px, 386px); } 100% { opacity: 0; transform: translate(430px, 386px); } }
/* 小单拿相机拍一下：相机抬起，闪光线条闪一下 */
.hm-flash { opacity: 0; }
.hm.hm-snap .hm-flash { animation: hd-flash .5s .2s ease-out both; }
.hd-good, .hd-sk .hd-bar { transform-box: fill-box; }
/* ERP：货出现在柜台上 → 滑到小单的篮子边 → 跳进篮子 */
.hd-good { opacity: 0; transform-origin: center bottom; transform: scale(.5); transition: opacity .3s, transform .5s var(--ease); }
.hd-good.on { opacity: 1; transform: none; }
.hd-good.go { transform: translateX(62px); }
.hd-good.in { opacity: 0; transform: translate(84px, -40px) scale(.35); transition: opacity .35s .1s, transform .4s var(--ease); }
/* 库存条：卖了缩一截，补货再拉回来（--w0/--w1/--w2 写在每一行上） */
.hd-sk .hd-bar { transform-origin: left center; transform: scaleX(var(--w0)); transition: transform .65s var(--ease), fill .3s; }
.hd-sk.on .hd-bar { transform: scaleX(var(--w1)); }
.hd-sk.refill .hd-bar { transform: scaleX(var(--w2)); }
.hd-sk:has(.hd-low.on) .hd-bar { fill: #f0b400; }
/* 小单身上的条码扫描线：平时淡，“嘀”一下时亮起来 */
.hm-laser { opacity: .35; transition: opacity .15s; }
.hm.hm-beep .hm-laser { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hm .hm-eyes { animation: none; } }

/* 演示窗上的三个产品按钮：手写字 + 手绘的框（选中是一圈铅笔线 + 黄色荧光，悬停时下面一道铅笔线） */
.demo .seg { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 6px; padding: 0; }
.demo .seg button {
  position: relative; padding: 4px 18px 6px; border-radius: 0; font: 400 17px/1.3 Sriracha, "Long Cang", var(--sans); color: #6b6356;
  background: none no-repeat center / 100% 100%; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.demo .seg button:hover { color: #2d2b27; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M12 34 Q50 30 88 35' stroke='%233d362c' stroke-width='2' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.5'/%3E%3C/svg%3E"); }
.demo .seg button[aria-selected="true"] {
  color: #2d2b27; box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M9 6 Q50 2 92 5 Q99 6 98 19 Q98 33 90 35 Q50 39 9 36 Q2 35 2 21 Q2 7 9 6 Z' fill='%23ffe066' fill-opacity='.75' stroke='%233d362c' stroke-width='2.2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 4 Q60 0 95 8' stroke='%233d362c' stroke-width='1.4' fill='none' opacity='.45' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.demo .seg button:focus-visible { outline: 2px dashed #3d362c; outline-offset: 2px; }
/* 四个页签在窄屏也排一行：不折行，收紧左右留白和字号 */
.demo .seg button { white-space: nowrap; }
@media (max-width: 560px) { .demo .seg { gap: 0; } .demo .seg button { padding: 4px 8px 6px; font-size: 14.5px; } }

/* ---------- 首页手绘（试验，build.py 首页外面包一层 .sketch）：正文、按钮仍是印刷体；边框、标题下划线、对勾、标签换成铅笔手绘 ----------
   铅笔框：一张拉伸的 SVG（描边不随拉伸变粗），外加一块平涂的投影，和主视觉、演示里的纸一样。 */
.sketch { --sk-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M6 2.5 Q200 0.5 394 2 Q398.5 2.5 398 8 Q399.5 100 398 192 Q397.5 197.5 392 197.5 Q200 199.5 8 198 Q2 197.5 2 192 Q0.5 100 2 8 Q2 3 6 2.5 Z' fill='none' stroke='%233d362c' stroke-width='2.2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M30 3 Q200 -1 360 4' fill='none' stroke='%233d362c' stroke-width='1.2' opacity='.35' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --sk-swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C40 7 92 10 196 6 L197 17 C130 19 64 22 3 21 Z' fill='%23ffd84d' opacity='.85'/%3E%3C/svg%3E");
  --sk-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12 q3 3 6 8 q5 -11 11 -16' fill='none' stroke='%232e8a55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sk-hand: Sriracha, "Long Cang", var(--sans);
}
.sketch .panel, .sketch .tile, .sketch .poster .window, .sketch .pro-cards li {
  position: relative; border: 0; border-radius: 12px; background-color: #fffdf8; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 7px 8px 0 rgba(58, 42, 20, .09);
}
.sketch .panel::before, .sketch .tile::before, .sketch .poster .window::after, .sketch .pro-cards li::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: var(--sk-frame) no-repeat 0 0 / 100% 100%;
}
.sketch .tile { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sketch .tile:hover { transform: translate(-2px, -3px) rotate(-.4deg); box-shadow: 10px 12px 0 rgba(58, 42, 20, .12); }
.sketch .product:nth-child(odd) { transform: rotate(-.35deg); }
.sketch .product:nth-child(even) { transform: rotate(.3deg); }
/* 分区大标题下面一道黄色荧光笔 */
.sketch h2.display { position: relative; }
.sketch h2.display::after { content: ""; display: block; width: min(220px, 50%); height: 12px; margin: 8px auto 0; background: var(--sk-swoosh) no-repeat 0 0 / 100% 100%; }
.sketch .pro h2.display::after, .sketch .product-text h3::after { margin-left: 0; }
/* 标签、小字、链接换手写 */
.sketch .eyebrow, .sketch .logos .serif, .sketch .more { font-family: var(--sk-hand); font-weight: 400; letter-spacing: 0; }
.sketch .eyebrow { font-size: 16px; color: #8a8170; }
:lang(zh-Hans) .sketch .eyebrow { font-size: 19px; }
.sketch .more { font-size: 17px; background: var(--sk-swoosh) no-repeat 0 100% / 100% 7px; padding-bottom: 2px; }
.sketch .logos .serif { font-size: 22px; color: #6b6356; }
.sketch .logo-row span { font-family: var(--sk-hand); font-weight: 400; font-size: 25px; letter-spacing: 0; color: #8a8170; }
.sketch .logo-row span:hover { color: #2d2b27; }
/* 功能点前的对勾换成手画的 */
.sketch .points .icon { visibility: hidden; }
.sketch .points li { position: relative; }
.sketch .points li::before { content: ""; position: absolute; left: -1px; top: 4px; width: 20px; height: 20px; background: var(--sk-tick) no-repeat center / contain; }
/* 免费工具小块：示例像荧光笔划过的一行字 */
.sketch .tile code { background: rgba(255, 216, 77, .35); border-radius: 3px; font-family: var(--sk-hand); font-size: 14px; }
/* MR.ERP 完整版的小卡片 */
.sketch .pro-cards li { background-color: #fffdf8; }
/* 页脚：顶上一道手画的波浪线 */
.footer.sketch { border-top: 0; position: relative; }
.footer.sketch::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q30 1 60 6 T120 6 T180 6 T240 6' fill='none' stroke='%233d362c' stroke-width='1.6' opacity='.45' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 12px; }
/* 卡片角上的手绘小单 */
.hd-badge { overflow: visible; }
.hd-badge .hm-shadow { display: none; }
/* 产品卡片上沿的小单：脚底（SVG 底边）正好踩在铅笔框的上沿线上，站在视频那一栏的正上方 */
.card-mascot { position: absolute; z-index: 4; bottom: calc(100% - 3px); right: 13%; height: 150px; width: auto; pointer-events: none; }
/* 小单站在每张卡片上沿，卡片之间要留出它的个子 */
.sketch #products .stack { gap: 150px; }
.sketch #products h2.display { margin-bottom: 150px; }
.product.flip .card-mascot { right: auto; left: 13%; }
.product:hover .card-mascot { animation: hop .6s var(--ease); }
@media (max-width: 860px) { .card-mascot { height: 108px; right: 28px; } .product.flip .card-mascot { left: auto; right: 28px; }
  .sketch #products .stack { gap: 112px; } .sketch #products h2.display { margin-bottom: 112px; } }
/* 三只小单走在虚线上方一点、不踩线：虚线离底 6px、粗 3px，脚底（SVG 底边）再往上留 8px（手机 6px）；个子保持原来那么高 */
.sketch .walk .walker:not(.big) { height: 95px; padding-bottom: 17px; box-sizing: border-box; }
.sketch .walk .walker:not(.big) .hd-badge { width: auto; height: 100%; }
@media (max-width: 860px) { .sketch .walk .walker:not(.big) { height: 60px; padding-bottom: 15px; } }
.hd-badge .hm-hop { stroke-width: 3; }
@media (max-width: 760px) { .sketch .product:nth-child(n) { transform: none; } }
/* 视频框：铅笔线往里抖了几像素，视频本身要缩进线里，别让画面的边角冒出线外 */
.sketch .poster .window { padding: 7px; background-color: #fffdf8; overflow: visible; }
.sketch .poster .window .winbar { border-radius: 6px 6px 0 0; }
.sketch .poster .window img { border-radius: 0 0 6px 6px; }
.sketch .poster .window .playbtn { left: 7px; right: 7px; bottom: 7px; top: 53px; border-radius: 0 0 6px 6px; }