/* 图片代做落地页 — 「冲印店柜台」：深色暗房底 + 酸绿营业信号 + 票根式价目条。
   与 App 品牌页 (styles.css) 同一个世界，但语气更朴实、价格更靠前。 */

:root {
  /* 中性色统一到品牌既有的暗紫基调 (hue 274)，chroma 极低但不为 0 —— 纯灰会死。 */
  --bg:        oklch(11.5% 0.016 274);
  --surface-1: oklch(16.5% 0.018 274);
  --surface-2: oklch(21%   0.020 274);
  --ink:       oklch(94%   0.006 274);
  --muted:     oklch(73%   0.014 274);  /* 对 --bg 远超 4.5:1 */
  --faint:     oklch(58%   0.016 274);  /* 仅用于 14px+ 的非关键标注 */
  --line:      oklch(27%   0.016 274);
  --line-soft: oklch(21%   0.014 274);

  /* 信号色：营业中的那盏灯。用量严格控制在 10%。 */
  --acid:      oklch(94%  0.205 118);
  --acid-dim:  oklch(72%  0.160 118);
  --on-acid:   oklch(19%  0.055 118);

  /* 4pt 间距，语义命名 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* 1.333 模块化比例；标题流体，正文固定 */
  --t-xs:    0.75rem;
  --t-sm:    0.875rem;
  --t-base:  1rem;
  --t-lg:    clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --t-xl:    clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  --t-2xl:   clamp(2.25rem, 1.35rem + 4.1vw, 4.5rem);
  --t-price: clamp(2.75rem, 2.1rem + 2.8vw, 3.75rem);

  --display: "Archivo", "Noto Sans SC", "PingFang SC", sans-serif;
  --body:    "Noto Sans SC", "Archivo", "PingFang SC", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: min(1180px, 100% - 40px);
}

*, *::before, *::after { box-sizing: border-box; }

/* 浏览器原生 [hidden]{display:none} 只是 UA 样式表，优先级和任何作者规则的单个
   类/ID选择器打平手时作者必胜——所以只要某元素自己的 class/id 规则里写了
   display（.btn、#sample 之类），hidden 属性会被悄悄吃掉，元素明明标了 hidden
   还是显示、还能点。这类 bug 会在每个新加的隐藏态元素上反复出现，
   一次性用 !important 兜底，不逐个组件单独补丁。 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  /* 浅色字在深底上视觉更轻，字重降一档、行高加 0.1 */
  font: 350 var(--t-base)/1.75 var(--body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--acid); }

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 9;
  padding: var(--s-3) var(--s-4); border-radius: 8px;
  background: var(--acid); color: var(--on-acid);
  font-weight: 700; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: var(--s-4); }

.shell { width: var(--shell); margin-inline: auto; }

/* ── 顶栏 ─────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; gap: var(--s-4);
  width: var(--shell); margin-inline: auto;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.bar-brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding-block: var(--s-2);  /* 撑到 44px 触控目标 */
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: -0.04em; text-decoration: none;
}
/* 品牌标记直接用 App 真图标（mobile/assets/branding/postpilot-app-icon-v1.png
   缩到 96px 的副本）。Flutter 端也是这么显示的——登录页 34px、信息流 32px，
   都是圆角裁切，这里保持一致。
   注意：不要改用 mobile/assets/branding/postpilot-lockup.svg，那个文件里的路径
   画出来是个螺旋，不是真 logo，而且把名字写成了「发步」。 */
.bar-mark { display: block; width: 28px; height: 28px; flex: none; border-radius: 9px; }
.bar-here { color: var(--muted); }
.bar-here::before { content: "/"; margin-right: var(--s-3); color: var(--line); }
.bar-support {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-left: auto;
  min-height: 44px;
  padding: var(--s-1) var(--s-4) var(--s-1) var(--s-2);
  border: 1px solid var(--line);
  border-radius: 30px;
  color: var(--ink); text-decoration: none; font-weight: 700;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.bar-support:hover { border-color: var(--acid-dim); background: var(--surface-1); }

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, 0.82fr);
  gap: clamp(var(--s-8), 5vw, var(--s-24));
  align-items: center;
  padding: clamp(var(--s-12), 7vw, var(--s-24)) 0 var(--s-16);
}

.kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-6);
  color: var(--acid);
  font-family: var(--display);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.kicker b { font-weight: 700; letter-spacing: 0.06em; }
.lamp {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acid); box-shadow: 0 0 12px var(--acid);
}

.hero h1 { font-size: var(--t-2xl); }
.hero h1 .turn { display: block; color: var(--acid); }

.lede {
  max-width: 34em;
  margin-top: var(--s-6);
  color: var(--muted);
  font-size: var(--t-lg);
  line-height: 1.7;
}

/* 价格锚点：数字用 Archivo 的等宽数字，和正文形成比例反差 */
.anchor {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-top: var(--s-8);
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}
.anchor-qty { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.03em; }
.anchor-unit { color: var(--muted); font-family: var(--body); font-size: var(--t-base); }
.anchor-sum {
  margin-left: var(--s-2);
  color: var(--acid);
  font-size: var(--t-price); font-weight: 800; letter-spacing: -0.05em;
}
.anchor-sum small { font-size: 0.42em; font-weight: 700; margin-right: 2px; vertical-align: 0.42em; }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-6);
  border: 1px solid transparent; border-radius: 9px;
  font: 700 var(--t-base)/1 var(--body);
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--acid); color: var(--on-acid); }
.btn-primary:hover { background: oklch(97% 0.19 118); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--muted); background: var(--surface-1); }
.btn-full { width: 100%; }
.btn .arrow { font-size: 1.1em; }

/* ── 首屏成品展示 ─────────────────────────────────────── */
.showcase {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  overflow: hidden;
}
.showcase img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.showcase figcaption {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  padding: var(--s-4);
  border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: var(--t-sm);
}
.showcase figcaption b { color: var(--ink); font-weight: 700; }

/* ── 区块标题 ─────────────────────────────────────────── */
.band { padding: clamp(var(--s-16), 8vw, var(--s-24)) 0; border-top: 1px solid var(--line-soft); }
.band-head { display: grid; gap: var(--s-4); max-width: 60ch; margin-bottom: var(--s-12); }
.band-head h2 { font-size: var(--t-xl); }
.band-head p { color: var(--muted); }
.band-num {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.18em; color: var(--faint); text-transform: uppercase;
}

/* ── 票根式价目条 ─────────────────────────────────────── */
.tickets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 恰好 3 张，不用 auto-fit：它会在宽屏多开一列留洞 */
  gap: var(--s-6);
  align-items: start;
}
.ticket {
  --stub: 78px;
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.ticket:hover { border-color: var(--muted); }
/* 撕口：两个与页底同色的圆，切在虚线撕裂线两端 */
.ticket::before, .ticket::after {
  content: "";
  position: absolute; bottom: calc(var(--stub) - 10px);
  width: 20px; height: 20px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  z-index: 1;
}
.ticket::before { left: -11px; }
.ticket::after  { right: -11px; }
.ticket-pick::before, .ticket-pick::after { border-color: var(--acid-dim); }

.ticket-body { padding: var(--s-6) var(--s-6) var(--s-8); }
.ticket-name {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--display); font-size: var(--t-lg); font-weight: 800;
  letter-spacing: -0.02em;
}
.ticket-for { margin-top: var(--s-1); color: var(--faint); font-size: var(--t-sm); }

.ticket-sum {
  display: flex; align-items: baseline; gap: 1px;
  margin: var(--s-6) 0 var(--s-4);
  flex-wrap: nowrap;
  font-family: var(--display);
  font-size: var(--t-price); font-weight: 800;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.ticket-sum small { font-size: 0.4em; font-weight: 700; margin-right: 3px; }
.ticket-each {
  margin-left: auto;
  color: var(--faint);
  font-family: var(--display); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0; white-space: nowrap;
}

.ticket-spec { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ticket-spec li {
  display: grid; grid-template-columns: 16px 1fr; gap: var(--s-3);
  color: var(--muted); font-size: var(--t-sm); line-height: 1.6;
}
.ticket-spec li::before { content: "—"; color: var(--line); }

.ticket-stub {
  display: grid; align-content: center;
  min-height: var(--stub);
  box-sizing: border-box;
  padding: var(--s-4) var(--s-6);
  border-top: 1px dashed var(--line);
}

/* 推荐档：靠边框、标签、按钮实心三个维度同时加权，不靠放大 */
.ticket-pick { border-color: var(--acid-dim); background: var(--surface-2); }
.ticket-pick .ticket-sum { color: var(--acid); }
.ticket-flag {
  padding: 3px var(--s-2);
  border-radius: 4px;
  background: var(--acid); color: var(--on-acid);
  font-family: var(--display); font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.08em;
}
.ticket-note {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  color: var(--faint);
  font-size: var(--t-sm); line-height: 1.7;
}
.ticket-note b { color: var(--muted); font-weight: 700; }

/* ── 样例：刻意不等大，避免整齐划一的卡片墙 ─────────────── */
.plates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(170px, 17vw, 250px);
  gap: var(--s-4);
}
.plate {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  overflow: hidden;
}
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate { height: 100%; }
.plate-wide { grid-column: span 2; }
.plate-tall { grid-row: span 2; }
.plate-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-6) var(--s-3) var(--s-3);
  background: linear-gradient(to top, oklch(11.5% 0.016 274 / 0.88), transparent);
  font-size: var(--t-xs);
}
.plate-kind {
  padding: 3px 7px; border-radius: 4px;
  background: oklch(11.5% 0.016 274 / 0.7);
  color: var(--acid);
  font-family: var(--display); font-weight: 700; letter-spacing: 0.08em;
}
.plate-cap span:last-child { color: var(--ink); }

/* ── 流程：一条水平细线串起来，不用图标卡片 ─────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8) var(--s-6);
  border-top: 1px solid var(--line);
  padding-top: var(--s-8);
}
.step { display: grid; gap: var(--s-3); align-content: start; }
.step-n {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.18em; color: var(--acid);
}
.step b { font-size: var(--t-base); font-weight: 700; }
.step p { color: var(--muted); font-size: var(--t-sm); line-height: 1.7; }

/* ── 下单 ─────────────────────────────────────────────── */
.desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.85fr);
  gap: clamp(var(--s-8), 5vw, var(--s-16));
  align-items: start;
}
.desk-copy h2 { font-size: var(--t-xl); }
.desk-copy > p { margin-top: var(--s-4); color: var(--muted); max-width: 46ch; }

.truths { display: grid; gap: 0; margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.truths li {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.truths li:last-child { border-bottom: 1px solid var(--line-soft); }
.truths b { font-weight: 700; }
.truths span { color: var(--muted); line-height: 1.7; }

.slip {
  display: grid; gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.slip-head { display: grid; gap: var(--s-1); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-soft); }
.slip-head b { font-family: var(--display); font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.02em; }
.slip-head small { color: var(--faint); font-size: var(--t-sm); }

.slip label { display: grid; gap: var(--s-2); font-size: var(--t-sm); font-weight: 700; }
.slip select, .slip textarea {
  width: 100%; min-height: 46px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg); color: var(--ink);
  font: 400 var(--t-base)/1.6 var(--body);
}
.slip textarea { min-height: 92px; resize: vertical; }
.slip select:hover, .slip textarea:hover { border-color: var(--muted); }
.slip ::placeholder { color: var(--faint); opacity: 1; }
.slip-legal { color: var(--faint); font-size: var(--t-xs); line-height: 1.7; }
.slip-legal a { color: var(--muted); }

.live { min-height: 1.5em; margin-top: calc(var(--s-2) * -1); color: var(--acid); font-size: var(--t-sm); font-weight: 700; }
.live:empty { min-height: 0; }

.foot {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  width: var(--shell); margin: 0 auto;
  padding: var(--s-8) 0 var(--s-16);
  border-top: 1px solid var(--line-soft);
  color: var(--faint); font-size: var(--t-sm);
}
.foot a { padding-block: var(--s-3); color: var(--muted); }
.foot .foot-end { margin-left: auto; }

/* ── 响应式：重排，不是缩小 ───────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-12); padding-top: var(--s-12); }
  .tickets { grid-template-columns: 1fr; gap: var(--s-4); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .showcase img { aspect-ratio: 5 / 4; }
  .desk { grid-template-columns: 1fr; }
  /* 图就是卖点，窄屏反而要更大：首张样例吃满两列两行 */
  .plates { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 26vw, 215px); }
  .plate-wide { grid-column: span 2; }
  .plate-tall { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 32px); }
  .bar-here { display: none; }
  .hero { padding-bottom: var(--s-12); }
  .hero-cta .btn { flex: 1 1 100%; }
  .band { padding: var(--s-16) 0; }
  .steps { grid-template-columns: 1fr; gap: var(--s-6); }
  .band-head { margin-bottom: var(--s-8); }
  .plates { grid-auto-rows: clamp(145px, 36vw, 195px); }
  .truths li { grid-template-columns: 1fr; gap: var(--s-1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ── 满酸绿滚动条幅：信号色从点缀变成一整块，像冲印店门口的灯箱 ── */
.ticker {
  /* 父元素 <main> 本来就是满宽，不用 100vw —— 那会把滚动条宽度算进去，
     在经典滚动条的 Windows 上横向溢出。 */
  overflow: hidden;
  background: var(--acid);
  border-block: 1px solid oklch(80% 0.17 118);
}
.ticker-track {
  display: flex; align-items: center; gap: var(--s-6);
  width: max-content;
  padding: var(--s-3) 0;
  animation: ticker 32s linear infinite;
}
.ticker span {
  color: var(--on-acid);
  font-family: var(--display); font-size: var(--t-sm); font-weight: 800;
  letter-spacing: 0.04em; white-space: nowrap;
}
.ticker i { width: 5px; height: 5px; border-radius: 50%; background: var(--on-acid); opacity: .55; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-33.333%); } }

/* ── 滚动渐显：一次有节奏的入场，不是到处乱动 ── */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── 图片有呼吸：样例是商品本身，值得被摸一下 ── */
.plate img { transition: transform .55s var(--ease); }
.plate:hover img { transform: scale(1.055); }
.plate-cap { transition: padding-bottom .35s var(--ease); }
.plate:hover .plate-cap { padding-bottom: var(--s-4); }
.showcase img { transition: transform .8s var(--ease); }
.showcase:hover img { transform: scale(1.03); }

/* ── 手机首屏：把图顶进第一屏，这页卖的就是图 ── */
@media (max-width: 560px) {
  .hero { padding-top: var(--s-8); gap: var(--s-8); }
  .kicker { margin-bottom: var(--s-4); }
  .lede { margin-top: var(--s-4); font-size: 1rem; line-height: 1.65; }
  .anchor { margin-top: var(--s-6); }
  .hero-cta { margin-top: var(--s-6); }
  .hero-cta .btn { flex: 1 1 auto; padding: 0 var(--s-4); }
  .ticker-track { animation-duration: 24s; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .plate img, .showcase img { transition: none; }
}


/* ── 客服：小商家花钱前最想先问一句，别把这个藏在小字里 ── */
.slip-ask {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--acid-dim);
  border-radius: 10px;
  background: oklch(94% 0.205 118 / 0.07);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.slip-ask .bee { grid-row: 1 / 3; }
.slip-ask b { font-size: var(--t-base); font-weight: 700; }
.slip-ask span:last-child {
  color: var(--acid);
  font-family: var(--display); font-size: var(--t-sm); font-weight: 600;
}
.slip-ask:hover { background: oklch(94% 0.205 118 / 0.13); }

.foot-mail { color: var(--ink); font-weight: 700; }


/* ── 客服小蜜蜂 ──────────────────────────────────────── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.bee { width: 44px; height: 44px; flex: none; }
.bee-sm { width: 26px; height: 26px; }
.bee-wing-l { transform-origin: 26px 26px; }
.bee-wing-r { transform-origin: 38px 26px; }
.slip-ask:hover .bee-wing-l, .slip-ask:focus-visible .bee-wing-l,
.bar-support:hover .bee-wing-l, .bar-support:focus-visible .bee-wing-l { animation: bee-flap .32s ease-in-out 3; }
.slip-ask:hover .bee-wing-r, .slip-ask:focus-visible .bee-wing-r,
.bar-support:hover .bee-wing-r, .bar-support:focus-visible .bee-wing-r { animation: bee-flap-r .32s ease-in-out 3; }
@keyframes bee-flap   { 50% { transform: rotate(-20deg); } }
@keyframes bee-flap-r { 50% { transform: rotate(20deg); } }

@media (prefers-reduced-motion: reduce) {
  .bee-wing-l, .bee-wing-r { animation: none !important; }
}