/* =========================================================================
   X-COCO / 自然甜  设计系统 v2 · 清新热带 × 靠谱企业
   —— 换品牌 VI 时,优先只改下面这块 :root 设计令牌即可统一替换 ——
   颜色 / 字体 / 渐变 / 间距 / 圆角 全部走 CSS 变量。
   所有插画与图标为内联 SVG,无任何外部依赖,纯静态、长期稳定。
   ========================================================================= */
:root {
  /* —— 品牌 —— */
  --brand-name: "X-COCO";
  --logo-size: 19px;

  /* —— 颜色 —— */
  --color-bg: #f7faf6;
  --color-surface: #ffffff;
  --color-surface-tint: #eef6ef;
  --color-text: #15241c;
  --color-text-muted: #5b6b60;
  --color-border: #e2ebe0;

  --color-brand: #178a55;          /* 主绿(更清新) */
  --color-brand-strong: #0f6e43;   /* hover/加深 */
  --color-brand-deep: #0c3b27;     /* 深绿:标题 / 深色区块 / 页脚 */
  --color-brand-soft: #e3f3ea;     /* 浅绿底 */
  --color-brand-line: #bfe0cc;

  --color-aqua: #29b29a;           /* 清新水绿(点缀“鲜”) */
  --color-aqua-soft: #d8f1ec;

  --color-accent: #d6a23e;         /* 椰壳暖金 */
  --color-accent-soft: #f7edd6;
  --color-accent-line: #ebd6a6;
  --color-gold-light: #ecc878;

  --color-ok: #1f9d57;             /* 合格 / 通过 */
  --color-danger: #b23b3b;

  --grad-hero: linear-gradient(168deg, #dff3e7 0%, #eef8ef 46%, #f7faf6 100%);
  --grad-brand: linear-gradient(135deg, #178a55 0%, #29b29a 100%);

  /* —— 字体:系统字体栈,无外部字体依赖 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* 衬线:用于“文科/自述信”版式标题,纯系统宋体系字体,无外部依赖 */
  --font-serif: Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC",
                "SimSun", serif;

  /* —— 间距 / 圆角 / 阴影 / 容器 —— */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(12, 59, 39, .05);
  --shadow: 0 4px 16px rgba(12, 59, 39, .07), 0 1px 3px rgba(12, 59, 39, .05);
  --shadow-lg: 0 14px 36px rgba(12, 59, 39, .12);
  --maxw: 720px;
  --maxw-read: 600px;   /* 文科版式更窄的阅读栏宽 */
}

/* =========================================================================
   基础
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.has-mobile-cta { padding-bottom: 84px; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
strong { font-weight: 700; color: var(--color-brand-deep); }
a { color: var(--color-brand); }
img, svg { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
.muted { color: var(--color-text-muted); }
.small { font-size: 13px; }
.center { text-align: center; }

/* —— 区块带(交替背景,制造层次)—— */
.band { padding: var(--s7) 0; }
.band--tint { background: var(--color-surface-tint); }
.band--deep { background: var(--color-brand-deep); color: #dcebe0; }
.band--deep h2 { color: #fff; }
.band--cta { background: var(--grad-brand); color: #fff; }
.band > .container > * + * { margin-top: var(--s4); }

/* —— 眉标 eyebrow —— */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--color-brand);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--color-accent); }
.band--deep .eyebrow, .band--cta .eyebrow { color: var(--color-gold-light); }
.band--cta .eyebrow::before { background: #fff; }
.eyebrow--center { justify-content: center; }

.band__title { font-size: 21px; line-height: 1.35; font-weight: 800; color: var(--color-brand-deep); }
.band--deep .band__title, .band--cta .band__title { color: #fff; }
.band__lead { color: var(--color-text-muted); }
.band--deep .band__lead, .band--cta .band__lead { color: rgba(255,255,255,.85); }

/* =========================================================================
   图标 / 插画上色(全部跟随主题变量)
   ========================================================================= */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }
.ico-brand { fill: var(--color-brand); }
.ico-deep  { fill: var(--color-brand-deep); }
.ico-aqua  { fill: var(--color-aqua); }
.ico-gold  { fill: var(--color-accent); }
.ico-soft  { fill: var(--color-brand-soft); }
.ico-cream { fill: #fbf7ef; }
.ico-shade { fill: #000; opacity: .08; }
.ico-light { fill: #fff; opacity: .16; }

/* =========================================================================
   顶栏
   ========================================================================= */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header .container {
  display: flex; align-items: center; gap: var(--s3);
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.brand { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; }
.brand__mark { width: 26px; height: 26px; }
.brand__name {
  font: 800 var(--logo-size)/1 var(--font-sans);
  letter-spacing: .06em; color: var(--color-brand-deep); white-space: nowrap;
}
.brand__company { margin-left: auto; font-size: 12.5px; color: var(--color-text-muted); text-align: right; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero { position: relative; overflow: hidden; background: var(--grad-hero); padding: var(--s7) 0 var(--s8); }
.hero__decor { position: absolute; inset: 0; pointer-events: none; }
.hero__decor .leaf { position: absolute; width: 220px; height: 220px; color: var(--color-brand); opacity: .10; }
.leaf--tr { top: -66px; right: -56px; transform: rotate(24deg); }
.leaf--bl { bottom: 6px; left: -86px; transform: rotate(-150deg); }
.hero__inner { position: relative; text-align: center; }
.hero__title { margin-top: var(--s3); font-size: clamp(28px, 8.5vw, 40px); line-height: 1.22; font-weight: 800; color: var(--color-brand-deep); letter-spacing: .01em; }
.hl { background-image: linear-gradient(transparent 58%, var(--color-accent-soft) 58%); padding: 0 .08em; }
.hero__sub { margin-top: var(--s3); color: var(--color-text-muted); font-size: 15.5px; }
.hero__art { margin: var(--s5) auto var(--s2); width: clamp(170px, 52vw, 240px); }
.hero__art .coco { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(12,59,39,.16)); }
.guarantees { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero .btn { margin-top: var(--s5); }
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.hero__wave svg { width: 100%; height: 46px; }

/* =========================================================================
   Chip / 徽标
   ========================================================================= */
.chip {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  font-size: 13px; font-weight: 700; padding: 8px 13px; border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap; flex: none;
}
.chip .icon { width: 15px; height: 15px; stroke-width: 2; }
.chip--brand { color: var(--color-brand-strong); background: var(--color-brand-soft); border-color: var(--color-brand-line); }
.chip--gold  { color: #9a6f1e; background: var(--color-accent-soft); border-color: var(--color-accent-line); }
.chip--ok    { color: #fff; background: var(--color-ok); }
.chip--muted { color: var(--color-text-muted); background: var(--color-surface-tint); border-color: var(--color-border); }

/* =========================================================================
   按钮
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-size: 15px; font-weight: 700; line-height: 1;
  padding: 14px 20px; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn .icon { width: 18px; height: 18px; stroke-width: 2; }
.btn--primary { color: #fff; background: var(--grad-brand); box-shadow: var(--shadow); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn--gold { color: var(--color-brand-deep); background: var(--color-gold-light); }
.btn--gold:hover { transform: translateY(-1px); background: #f0d28c; }
.btn--ghost { color: var(--color-brand-strong); background: var(--color-surface); border-color: var(--color-brand-line); }
.btn--ghost:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
.btn--lg { padding: 16px 26px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

/* =========================================================================
   卡片
   ========================================================================= */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-sm); }

/* —— 事实卡(图标 + 文案)—— */
.features { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.feature { display: flex; gap: var(--s3); align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow-sm); }
.feature__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--color-brand-soft); color: var(--color-brand-strong); }
.feature__icon .icon { width: 22px; height: 22px; }
.feature h3 { font-size: 15px; font-weight: 700; color: var(--color-brand-deep); }
.feature p { margin-top: 2px; font-size: 14px; color: var(--color-text-muted); }

/* —— 检测 / 标准 信任条 —— */
.trust { margin-top: var(--s5); text-align: center; }
.trust__label { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--color-text-muted); }
.trust__items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s3); }
.logo-chip { font-weight: 800; letter-spacing: .03em; color: var(--color-brand-deep); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 9px 14px; font-size: 14px; box-shadow: var(--shadow-sm); }

/* =========================================================================
   配比 80 / 20
   ========================================================================= */
.ratio { margin-top: var(--s4); }
.ratio__bar { display: flex; height: 40px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.ratio__seg { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }
.ratio__seg--main { background: var(--color-brand); }
.ratio__seg--alt { background: var(--color-aqua); }
.ratio__legend { display: flex; gap: var(--s4); margin-top: var(--s3); font-size: 13.5px; color: var(--color-text-muted); }
.ratio__legend span { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dot--main { background: var(--color-brand); }
.dot--alt { background: var(--color-aqua); }

/* =========================================================================
   可追溯链路
   ========================================================================= */
.chain { list-style: none; padding: 0; margin-top: var(--s2); }
.chain li { position: relative; display: flex; gap: var(--s4); padding-bottom: var(--s5); }
.chain li:last-child { padding-bottom: 0; }
.chain__node { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--color-brand-soft); color: var(--color-brand-strong); z-index: 1; }
.chain li:not(:last-child) .chain__node::after { content: ""; position: absolute; top: 44px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% + var(--s5) - 44px); background: var(--color-brand-line); }
.chain__body { padding-top: 6px; }
.chain__step { display: block; font-weight: 700; color: var(--color-brand-deep); }
.chain__detail { display: block; margin-top: 2px; font-size: 14px; color: var(--color-text-muted); }

/* =========================================================================
   键值摘要 kv
   ========================================================================= */
.kv { display: grid; }
.kv__row { display: grid; grid-template-columns: 40% 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--color-border); }
.kv__row:first-child { border-top: 0; }
.kv dt { font-size: 14px; color: var(--color-text-muted); }
.kv dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); }
.kv__ok { display: inline-flex; align-items: center; gap: 5px; color: var(--color-ok); }
.kv__ok .icon { width: 15px; height: 15px; stroke-width: 2.4; }

/* =========================================================================
   批次检测报告
   ========================================================================= */
.batches { display: grid; gap: var(--s4); margin-top: var(--s4); }
.batch__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.batch__no { font-size: 16px; font-weight: 800; color: var(--color-brand-deep); }
.batch__date { margin-top: 2px; font-size: 13.5px; color: var(--color-text-muted); }
.batch__origin { margin-top: var(--s3); font-size: 14px; }
.batch__label { color: var(--color-text-muted); }
.batch .kv { margin-top: var(--s3); }
.batch__report { margin-top: var(--s4); width: 100%; }
.batch__meta { margin-top: var(--s3); font-size: 13px; color: var(--color-text-muted); }
.state { padding: var(--s6) 0; text-align: center; color: var(--color-text-muted); }
.state--error { color: var(--color-danger); }

/* =========================================================================
   CTA 内容 / 页脚
   ========================================================================= */
.cta { text-align: center; }
.cta .btn { margin-top: var(--s5); }

.site-footer { background: var(--color-brand-deep); color: #bcd3c3; padding: var(--s6) 0 var(--s7); font-size: 14px; }
.site-footer .brand__name { color: #fff; }
.site-footer .company-name { margin-top: var(--s4); font-weight: 700; color: #fff; }
.site-footer p { margin-top: var(--s1); color: #a9c4b4; }
.site-footer a { color: #cfe3d6; }
.legal { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 12.5px; color: #8fae9e; }
.legal a { color: #8fae9e; }

/* =========================================================================
   移动端固定底部 CTA(仅企业页)
   ========================================================================= */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
}
.mobile-cta .btn { width: 100%; }

/* =========================================================================
   桌面增强(mobile-first;宽屏轻量适配)
   ========================================================================= */
@media (min-width: 600px) {
  .features { grid-template-columns: 1fr 1fr; }
  .hero { padding-top: var(--s8); }
  .mobile-cta { display: none; }
  body.has-mobile-cta { padding-bottom: 0; }
}
@media (hover: hover) {
  .feature, .card { transition: transform .12s ease, box-shadow .15s ease; }
  .feature:hover, .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* =========================================================================
   文科 / editorial 版式(溯源页“自述信”)
   叙事长文:衬线大字标题、留白阅读节奏、克制的信息块。
   ========================================================================= */
.container--narrow { max-width: var(--maxw-read); }

.rule { display: block; width: 30px; height: 3px; border-radius: 3px; background: var(--color-accent); margin-bottom: var(--s3); }

.headline { font-family: var(--font-serif); color: var(--color-brand-deep); font-weight: 700; letter-spacing: .01em; }
.headline--hero { font-size: clamp(26px, 7.4vw, 38px); line-height: 1.55; }
.headline--section { font-size: clamp(21px, 5.6vw, 27px); line-height: 1.5; }
.headline--ending { font-weight: 600; font-size: clamp(20px, 5.6vw, 26px); line-height: 1.78; }

.lede { margin-top: var(--s4); font-size: 16px; line-height: 1.85; color: var(--color-text-muted); }

.prose p { font-size: 16px; line-height: 1.9; color: var(--color-text); }
.prose p + p { margin-top: var(--s3); }
.prose .pullquote { margin-top: var(--s5); }
.pullquote { font-family: var(--font-serif); font-weight: 600; font-size: clamp(18px, 4.8vw, 22px); line-height: 1.75; color: var(--color-brand-strong); }

/* —— 配方 80 / 20 —— */
.formula { display: grid; gap: var(--s4); }
.formula__item { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-sm); }
.formula__pct { font-family: var(--font-serif); font-weight: 700; font-size: clamp(36px, 13vw, 54px); line-height: 1; color: var(--color-brand); }
.formula__item--alt .formula__pct { color: var(--color-aqua); }
.formula__name { margin-top: var(--s2); font-size: 16px; font-weight: 700; color: var(--color-brand-deep); }
.formula__en { font-size: 13px; font-weight: 600; color: var(--color-text-muted); letter-spacing: .04em; }
.formula__desc { margin-top: var(--s2); font-size: 14.5px; line-height: 1.8; color: var(--color-text-muted); }
.formula__tag { display: inline-block; margin-top: var(--s3); font-size: 12.5px; font-weight: 700; color: var(--color-brand-strong); background: var(--color-brand-soft); border-radius: var(--radius-pill); padding: 6px 12px; }
.formula__item--alt .formula__tag { color: #1c8a78; background: var(--color-aqua-soft); }

/* —— 图片占位(可一键替换为真实照片)—— */
.figure { margin: 0; }
.figure__ph { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; text-align: center; border: 1px dashed var(--color-brand-line); background: linear-gradient(150deg, var(--color-brand-soft), var(--color-aqua-soft)); color: var(--color-brand-strong); }
.figure__ph svg { position: absolute; width: 56%; max-width: 220px; opacity: .16; color: var(--color-brand); }
.figure__label { position: relative; font-size: 13px; font-weight: 700; line-height: 1.6; padding: 0 var(--s4); }
.figure figcaption { margin-top: var(--s2); text-align: center; font-size: 13px; color: var(--color-text-muted); }

/* —— 溯源信息 facts —— */
.facts { border-top: 1px solid var(--color-border); }
.facts__row { display: grid; grid-template-columns: 84px 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--color-border); }
.facts dt { font-size: 13.5px; color: var(--color-text-muted); }
.facts dd { margin: 0; font-size: 15px; line-height: 1.6; }

.report-note { margin-top: var(--s3); }

/* —— 结尾(首尾呼应)—— */
.ending { text-align: center; }
.ending > .container > * + * { margin-top: var(--s5); }
.ending__mark { width: 42px; height: 42px; margin: 0 auto; }
.signature { font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--color-brand-deep); }

/* —— 溯源页浅色页脚(配合文科的轻盈收束)—— */
.site-footer--light { background: var(--color-surface); color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.site-footer--light .brand__name, .site-footer--light .company-name { color: var(--color-brand-deep); }
.site-footer--light p { color: var(--color-text-muted); }
.site-footer--light a { color: var(--color-brand-strong); }
.site-footer--light .legal { border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.site-footer--light .legal a { color: var(--color-text-muted); }

@media (min-width: 600px) {
  .formula { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   溯源页扩展板块:从椰子到瓶 / 看得见的报告 / 配料表 / FAQ / 关注购买
   ========================================================================= */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* 从椰子到瓶 图文流程 */
.flow { display: grid; gap: var(--s5); }
.flow__step { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-weight: 700; color: var(--color-brand-deep); }
.flow__num { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--color-brand); color: #fff; display: grid; place-items: center; font-size: 13px; font-family: var(--font-serif); }
.flow__caption { margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }

/* 看得见的检测报告(文档比例占位)*/
.reports { display: grid; gap: var(--s3); }
.figure--doc .figure__ph { aspect-ratio: 3 / 4; }

/* 配料表 / 干净标签 */
.clean__ingredients { font-family: var(--font-serif); font-weight: 700; font-size: clamp(19px, 5vw, 24px); line-height: 1.5; color: var(--color-brand-deep); }
.clean .chips { margin-top: var(--s3); }
.clean__note { margin-top: var(--s3); font-size: 13.5px; color: var(--color-text-muted); }

/* FAQ(原生 <details>,零 JS)*/
.faq { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item > summary { list-style: none; cursor: pointer; position: relative; padding: var(--s4) 30px var(--s4) 0; font-weight: 700; color: var(--color-brand-deep); }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; line-height: 1; color: var(--color-brand); }
.faq__item[open] > summary::after { content: "\2013"; }
.faq__item > p { margin: -4px 0 var(--s4); font-size: 15px; line-height: 1.85; color: var(--color-text-muted); }

/* 关注 / 购买(页脚扩展)*/
.foot-cta { padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--color-border); }
.foot-cta__title { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--color-brand-deep); }
.shop { display: grid; gap: var(--s3); margin-top: var(--s4); }
.qrs { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); }
.qr { width: 92px; }
.qr__ph { aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px dashed var(--color-brand-line); background: var(--color-brand-soft); display: grid; place-items: center; padding: 6px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--color-brand-strong); }
.qr__label { margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--color-text-muted); }

@media (min-width: 600px) {
  .flow { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
  .reports { grid-template-columns: 1fr 1fr; }
  .shop { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   科普 / 差异化:小知识框 · NFC×浓缩还原双栏 · 对比表
   ========================================================================= */
/* 小知识 callout */
.kb { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-aqua); border-radius: var(--radius-sm); padding: var(--s4); }
.kb__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: #1c8a78; }
.kb p { margin-top: var(--s2); font-size: 14.5px; line-height: 1.8; color: var(--color-text); }

/* NFC vs 浓缩还原 双栏 */
.duo { display: grid; gap: var(--s3); }
.duo__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-sm); }
.duo__item--alt { background: var(--color-surface-tint); box-shadow: none; }
.duo__tag { display: inline-block; margin-bottom: var(--s2); font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-pill); color: var(--color-brand-strong); background: var(--color-brand-soft); }
.duo__item--alt .duo__tag { color: var(--color-text-muted); background: #e7eae4; }
.duo__name { font-weight: 700; font-size: 15px; color: var(--color-brand-deep); }
.duo__item--alt .duo__name { color: var(--color-text); }
.duo p { margin-top: var(--s2); font-size: 14px; line-height: 1.8; color: var(--color-text-muted); }

/* 对比表 */
.compare { width: 100%; border-collapse: collapse; margin-top: var(--s4); table-layout: fixed; }
.compare th, .compare td { padding: 10px 8px; text-align: left; vertical-align: top; font-size: 13px; line-height: 1.5; border-bottom: 1px solid var(--color-border); }
.compare thead th { font-size: 12px; font-weight: 800; color: var(--color-text-muted); border-bottom: 0; }
.compare thead th:first-child { width: 22%; }
.compare thead th:nth-child(2), .compare thead th:nth-child(3) { width: 39%; }
.compare th[scope="row"] { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.compare .col-x { background: var(--color-brand-soft); color: var(--color-brand-deep); font-weight: 600; }
.compare thead .col-x { background: var(--color-brand); color: #fff; }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare__note { margin-top: var(--s2); font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }

@media (min-width: 600px) {
  .duo { grid-template-columns: 1fr 1fr; }
}

/* hero slogan tagline */
.hero .tagline { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--color-brand); }