/* gigmio — 前台站点样式
 *
 * 设计稿来自 Claude Design 的 Gigmio.dc.html。原稿全部是内联样式（设计工具的产物），
 * 这里按同样的取值拆成类，改一处颜色不用全文替换。
 */

:root {
  --ink: #14120F;
  --paper: #F4F1EA;
  --card: #FFFDF7;
  --panel: #F9F6EF;
  --footer: #EDE9E0;
  --accent: #4B2EF0;
  --lime: #DDFF55;
  /* 「买」路线的强调色。刻意不用 Amazon 橙 #FF9900 —— 那是别人的品牌色，
     用它会让页面看起来像 Amazon 的官方物料，而这站的立场是独立评价。
     琥珀色够暖、够区分，和电光蓝（雇）与柠檬黄（DIY）三者互不打架。 */
  --amber: #FFB020;
  --amber-soft: #FFF0D6;
  --text-2: #3E3A33;
  --text-3: #6B655B;
  --line: #E0DBD0;
  --line-2: #D6D1C6;
  --dark-line: #332F28;
  --dark-text-2: #A9A49A;
  --dark-text-3: #C9C4BA;
  --good: #1F7A4D;
  --bad: #B03A1A;
  --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --wrap: 1240px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-weight: 800;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  text-align: left;
}

.shell { min-height: 100vh; background: var(--paper); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.wrap-narrow { max-width: 900px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ── 顶部滚动条 ─────────────────────────────────────────────── */
.ticker {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.ticker__track { display: inline-block; animation: gm-marquee 28s linear infinite; }
@keyframes gm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* 占位内容提示条。真实评测落地后把 SITE_META.demoEditorial 改成 false，这条就没了。 */
.demo-note {
  background: var(--lime);
  border-bottom: 1px solid var(--ink);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 9px 24px;
  text-align: center;
}
.demo-note b { font-weight: 700; }

/* ── 头部 ───────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 234, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink);
}
.header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo { display: flex; align-items: baseline; gap: 2px; }
.logo__word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.05em;
}
.logo__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; }
.nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 15px; font-weight: 500; margin-left: auto; }
.nav button { padding: 4px 0; font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; }
.nav button:hover { border-bottom-color: var(--accent); }
.nav button[aria-current="page"] { border-bottom-color: var(--ink); }

/* ── 按钮 ───────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}
.btn--accent { background: var(--accent); color: #fff; padding: 11px 20px; font-size: 14px; letter-spacing: -0.01em; }
.btn--accent:hover { background: var(--ink); color: #fff; }
.btn--ink { background: var(--ink); color: var(--paper); padding: 16px 28px; font-size: 16px; }
.btn--ink:hover { background: var(--accent); color: #fff; }
.btn--outline { border: 1.5px solid var(--ink); padding: 16px 28px; font-size: 16px; }
.btn--outline:hover { background: var(--lime); }
.btn--link { font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.btn--cta { background: var(--accent); color: #fff; padding: 14px 20px; font-size: 15px; flex: 1; }
.btn--cta:hover { background: var(--ink); color: #fff; }
.btn--ghost { border: 1.5px solid var(--ink); padding: 14px 20px; font-size: 15px; }
.btn--ghost:hover { background: var(--lime); }
.btn--sm { background: var(--ink); color: var(--paper); padding: 9px 16px; font-size: 13px; }
.btn--sm:hover { background: var(--accent); color: #fff; }

/* ── 通用零件 ───────────────────────────────────────────────── */
.chip {
  border: 1px solid var(--ink);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-block;
}
.chip--lime { background: var(--lime); }
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.badge {
  background: var(--ink);
  color: var(--paper);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.badge--outline { background: none; color: var(--ink); border: 1px solid var(--ink); padding: 6px 13px; font-size: 11.5px; letter-spacing: 0.09em; }
.badge--solid { padding: 6px 13px; font-size: 11.5px; letter-spacing: 0.09em; }
.rank { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--accent); }
.crumbs { display: flex; gap: 8px; font-size: 13.5px; color: var(--text-3); flex-wrap: wrap; }
.crumbs button { font-size: 13.5px; color: var(--text-3); }
.crumbs button:hover { color: var(--accent); }
.crumbs__here { color: var(--ink); font-weight: 500; }

.grid { display: grid; gap: 18px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--cats { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--thirds { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid--halves { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.stat { background: var(--card); padding: 26px 22px; border: 1px solid var(--ink); border-radius: 18px; }
.stat__k { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.04em; }
.stat__v { font-size: 14px; color: var(--text-2); margin-top: 6px; }

.section { padding-top: 56px; padding-bottom: 20px; }
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

/* ── 首页 ───────────────────────────────────────────────────── */
.hero { padding-top: 72px; padding-bottom: 40px; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.hero h1 { font-size: clamp(44px, 8.2vw, 104px); max-width: 15ch; }
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 32px;
}
.hero__lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.45; max-width: 52ch; color: var(--text-2); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.col-card {
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}
.col-card:hover { transform: translateY(-4px); }
.col-card__top { height: 132px; display: flex; align-items: flex-end; padding: 16px; }
.col-card__count {
  font-family: var(--display);
  font-weight: 800;
  font-size: 52px;
  color: var(--ink);
  letter-spacing: -0.05em;
  opacity: 0.85;
}
.col-card__unit {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 8px;
  margin-bottom: 14px;
}
.col-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.col-card__body h3 { font-size: 23px; }
.col-card__blurb { font-size: 14.5px; color: var(--text-2); line-height: 1.45; }
.col-card__go { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; color: var(--accent); }

.dark-panel { background: var(--ink); color: var(--paper); border-radius: 26px; padding: clamp(28px, 4vw, 52px); }
.dark-panel h2 { color: var(--paper); }
.dark-panel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.dark-panel__eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lime); }
.dark-panel__title { font-size: clamp(28px, 4vw, 46px); margin-top: 12px; }
.dark-panel__note { font-size: 15px; color: var(--dark-text-2); max-width: 36ch; }

.toplist { display: flex; flex-direction: column; gap: 1px; background: var(--dark-line); border-radius: 16px; overflow: hidden; }
.toplist__row {
  background: var(--ink);
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
}
.toplist__n { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--lime); }
.toplist__name { color: var(--paper); font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.toplist__name:hover { color: var(--lime); }
.toplist__blurb { font-size: 14px; color: var(--dark-text-2); margin-top: 4px; }
.toplist__end { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.toplist__deal { font-size: 14px; font-weight: 700; color: var(--lime); }
.toplist__cta {
  background: var(--paper);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.toplist__cta:hover { background: var(--lime); color: var(--ink); }

.how { border: 1px solid var(--ink); border-radius: 20px; padding: 26px; background: var(--card); }
.how__step { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.how h3 { font-size: 22px; margin-top: 12px; }
.how p { font-size: 14.5px; color: var(--text-2); line-height: 1.5; margin-top: 8px; }

/* ── 分类页 ─────────────────────────────────────────────────── */
.cat-card { border: 1px solid var(--ink); border-radius: 22px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.cat-card__top { padding: 22px 24px; border-bottom: 1px solid var(--ink); }
.cat-card__top h2 { font-size: 27px; }
.cat-card__top p { font-size: 14px; margin-top: 6px; color: #241F19; }
.cat-card__list { padding: 8px 24px 20px; display: flex; flex-direction: column; }
.cat-card__row {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  width: 100%;
}
.cat-card__row:last-child { border-bottom: 0; }
.cat-card__row:hover { color: var(--accent); }
.cat-card__row--soon { color: var(--text-3); cursor: default; }
.cat-card__row--soon:hover { color: var(--text-3); }
.cat-card__name { font-size: 16px; font-weight: 500; }
.cat-card__meta { font-size: 13px; color: var(--text-3); white-space: nowrap; }

/* ── 榜单页 ─────────────────────────────────────────────────── */
.col-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: end; }
.col-head h1 { font-size: clamp(36px, 6vw, 68px); margin-top: 18px; }
.col-head__intro { font-size: 18px; color: var(--text-2); margin-top: 16px; max-width: 54ch; line-height: 1.5; }
.verdict-box { border: 1px solid var(--ink); border-radius: 20px; padding: 22px; background: var(--card); }
.verdict-box__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.verdict-box__row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.verdict-box__k {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  min-width: 104px;
}
.verdict-box__v { font-size: 15.5px; font-weight: 700; }
.verdict-box__v:hover { color: var(--accent); }
.verdict-box__foot { font-size: 12.5px; color: var(--text-3); margin-top: 14px; }

.sortbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 44px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.sortbar__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-right: 6px;
}
.sortbar button { border: 1px solid var(--ink); padding: 9px 17px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.sortbar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.picks { display: flex; flex-direction: column; gap: 16px; }
.pick {
  border: 1px solid var(--ink);
  border-radius: 24px;
  background: var(--card);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.pick__main { padding: 28px; border-right: 1px solid var(--line); }
.pick__id { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pick__mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  border: 1px solid var(--ink);
  flex: none;
}
.pick__tags { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pick__main h2 { font-size: 27px; margin-top: 6px; }
.pick__blurb { font-size: 15.5px; color: var(--text-2); line-height: 1.55; margin-top: 16px; }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.pros-cons__h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; }
.pros-cons__h--good { color: var(--good); }
.pros-cons__h--bad { color: var(--bad); }
.pros-cons__i { font-size: 14px; color: var(--text-2); margin-top: 7px; line-height: 1.35; }

.pick__side { padding: 28px; display: flex; flex-direction: column; gap: 18px; background: var(--panel); }
.rating { display: flex; align-items: baseline; gap: 8px; }
.rating__n { font-family: var(--display); font-weight: 800; font-size: 46px; letter-spacing: -0.04em; }
.rating__of { font-size: 15px; color: var(--text-3); }
.bars { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.bar { display: grid; grid-template-columns: 96px 1fr 34px; gap: 10px; align-items: center; }
.bar__label { font-size: 12.5px; color: var(--text-3); }
.bar__track { height: 7px; border-radius: 99px; background: var(--line); display: block; overflow: hidden; }
.bar__fill { display: block; height: 7px; background: var(--accent); }
.bar__val { font-size: 12.5px; font-weight: 700; text-align: right; }
.pick__buy { margin-top: auto; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price__n { font-family: var(--display); font-weight: 800; font-size: 26px; }
.price__note { font-size: 13.5px; color: var(--text-3); }
.price__deal { font-size: 13.5px; font-weight: 700; color: var(--bad); margin-top: 6px; }
.pick__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ── 单品页 ─────────────────────────────────────────────────── */
.prod-hero { border-bottom: 1px solid var(--ink); }
.prod-hero__inner { max-width: var(--wrap); margin: 0 auto; padding: 40px 24px 44px; }
.prod-hero .crumbs { color: #241F19; margin-bottom: 26px; }
.prod-hero .crumbs button { color: #241F19; }
.prod-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px; align-items: end; }
.prod-hero__tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.prod-hero h1 { font-size: clamp(40px, 7vw, 86px); }
.prod-hero__pitch { font-size: clamp(17px, 2vw, 21px); line-height: 1.45; margin-top: 18px; max-width: 48ch; color: #241F19; }
.buy-box { background: var(--card); border: 1px solid var(--ink); border-radius: 22px; padding: 26px; }
.buy-box__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.buy-box__n { font-family: var(--display); font-weight: 800; font-size: 36px; }
.buy-box__note { font-size: 14px; color: var(--text-3); }
.buy-box__deal { font-size: 14.5px; font-weight: 700; color: var(--bad); margin-top: 8px; }
.buy-box__cta { display: block; background: var(--accent); color: #fff; padding: 16px; border-radius: 999px; font-size: 16px; font-weight: 700; margin-top: 20px; text-align: center; }
.buy-box__cta:hover { background: var(--ink); color: #fff; }
.buy-box__fine { font-size: 12.5px; color: var(--text-3); margin-top: 12px; line-height: 1.45; }

.verdict-card { border: 1px solid var(--ink); border-radius: 22px; padding: 28px; background: var(--card); }
.verdict-card h2 { font-size: 26px; }
.verdict-card p { font-size: 16px; line-height: 1.6; color: var(--text-2); margin-top: 14px; }
.verdict-card .pros-cons { gap: 22px; margin-top: 26px; }
.verdict-card .pros-cons__i { font-size: 15px; margin-top: 9px; line-height: 1.4; }

.score-card { border: 1px solid var(--ink); border-radius: 22px; padding: 28px; background: var(--ink); color: var(--paper); }
.score-card__n { font-family: var(--display); font-weight: 800; font-size: 56px; color: var(--lime); letter-spacing: -0.04em; }
.score-card__of { font-size: 15px; color: var(--dark-text-2); }
.score-card__bars { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.score-card__row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.score-card__row span:first-child { color: var(--dark-text-2); }
.score-card__row span:last-child { font-weight: 700; }
.score-card .bar__track { height: 8px; background: var(--dark-line); }
.score-card .bar__fill { height: 8px; background: var(--lime); }

.fact { background: var(--card); padding: 24px 22px; border: 1px solid var(--ink); border-radius: 18px; }
.fact__k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.fact__v { font-family: var(--display); font-weight: 600; font-size: 19px; margin-top: 8px; letter-spacing: -0.02em; line-height: 1.2; }

.bestfor { border: 1px solid var(--ink); border-radius: 18px; padding: 22px; background: var(--card); }
.bestfor h3 { font-size: 19px; }
.bestfor p { font-size: 14.5px; color: var(--text-2); line-height: 1.5; margin-top: 8px; }

.alt { border: 1px solid var(--ink); border-radius: 20px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.alt__stripe { height: 8px; }
.alt__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.alt__rank { font-size: 12px; font-weight: 700; color: var(--accent); }
.alt__body h3 { font-size: 21px; }
.alt__blurb { font-size: 14px; color: var(--text-2); line-height: 1.45; }
.alt__foot { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 14px; }
.alt__price { font-size: 15px; font-weight: 700; }
.alt__foot .btn--sm { margin-left: auto; }

/* ── 关于页 ─────────────────────────────────────────────────── */
.about h1 { font-size: clamp(36px, 6vw, 68px); margin-top: 14px; }
.about__lede { font-size: 19px; line-height: 1.55; color: var(--text-2); margin-top: 20px; }
.disclosure { background: var(--ink); color: var(--paper); border-radius: 24px; padding: 32px; margin-top: 32px; }
.disclosure h2 { font-size: 28px; color: var(--paper); }
.disclosure p { font-size: 16px; line-height: 1.6; color: var(--dark-text-3); margin-top: 14px; }

/* ── 页脚 ───────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--ink); background: var(--footer); }
.footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.footer__logo { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.05em; }
.footer__logo span { color: var(--accent); }
.footer__tagline { font-size: 14px; color: var(--text-2); margin-top: 10px; max-width: 32ch; line-height: 1.5; }
.footer__h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.footer__links { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; align-items: flex-start; }
.footer__links button { font-size: 14.5px; }
.footer__links button:hover { color: var(--accent); }
.footer__legal { border-top: 1px solid var(--line-2); padding: 18px 24px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ══ 融合式内容：买 / 雇 / 自己做 ═══════════════════════════════ */

/* ── 路线徽章 ───────────────────────────────────────────────────
   routeLabel（Buy it / Hire it）是主信息，平台名是副信息 —— 读者要决定的是
   花哪种钱。两段用不同字重和字号拉开层级，不靠颜色区分（色盲可读）。 */
.rtag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 4px 4px 4px 11px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rtag__mkt {
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.rtag--buy { background: var(--amber); }
.rtag--hire { background: var(--accent); color: #fff; border-color: var(--accent); }
.rtag--hire .rtag__mkt { background: #fff; color: var(--accent); }
.rtag--diy { background: var(--lime); }
.rtag--diy { padding-right: 11px; }

/* ── 数据可信度标记 ─────────────────────────────────────────────
   Amazon 侧有公开数据可核对，Fiverr 与 DIY 侧目前没有。两者摆在同一个榜单里
   而不标出来，等于用真实数据给占位文案背书 —— 这是这个站最容易犯的不诚实。 */
.trust {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: help;
}
.trust--real { background: #E4F5EA; color: var(--good); border: 1px solid #B9E2C8; }
/* 「未测试」不是错误状态，是分类 —— 用中性灰而不是红色。红色会读成警告，
   而这些卡片的内容本身是可靠的成本分析，只是不该被当成评测。 */
.trust--analysis { background: var(--panel); color: var(--text-3); border: 1px solid var(--line-2); }

/* ── 商品图 ─────────────────────────────────────────────────────
   Amazon 图只许 hotlink，不许下载改图（IP License 无演绎权）。
   加载失败时 img 自删，容器退回色块 + 首字母，绝不塌成 0 高度。 */
.pimg {
  position: relative;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--amber-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pimg::before {
  content: attr(data-initials);
  position: absolute;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--text-3);
}
.pimg img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 商品图多半是白底。垫一层白让透明 PNG 也不糊在琥珀底上。 */
  background: #fff;
  display: block;
}
.pimg--sm { width: 66px; height: 66px; border-radius: 12px; }
.pimg--card { width: 96px; height: 96px; }
.pimg--lg { width: 100%; height: 220px; border-radius: 16px; margin-bottom: 18px; }

.mini-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--amber);
  border-radius: 5px;
  padding: 2px 6px;
  vertical-align: 2px;
}

/* ── 路线对比条 ─────────────────────────────────────────────────
   融合式 IA 的支点。三条路线的成本结构并排，故意不折算成同一个数字 ——
   $250 一次性、$180 一集、$24 一月本来就不可比，硬折算才是在骗人。 */
.rstrip {
  border: 1px solid var(--ink);
  border-radius: 24px;
  background: var(--card);
  padding: clamp(22px, 3vw, 34px);
  margin: 40px 0 8px;
}
.rstrip__head { max-width: 62ch; margin-bottom: 24px; }
.rstrip__warn { font-size: 15px; color: var(--text-2); line-height: 1.5; margin-top: 10px; }
.rstrip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.rstrip__cell { background: var(--card); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.rstrip__cell--buy { background: #FFFBF2; }
.rstrip__label { font-family: var(--display); font-weight: 800; font-size: 19px; margin-top: 10px; letter-spacing: -0.02em; }
.rstrip__cost { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.04em; }
.rstrip__shape { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.rstrip__note { font-size: 14px; color: var(--text-2); line-height: 1.45; margin-top: 8px; }
.rstrip__bottom, .rstrip__finding {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.rstrip__bottom-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.rstrip__finding .rstrip__bottom-k { color: var(--bad); }
.rstrip__bottom p, .rstrip__finding p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.rstrip__bottom p { font-weight: 500; color: var(--ink); }

/* ── 买入卡片 ───────────────────────────────────────────────────
   和雇人卡共用 .pick 骨架，差别在左栏：这边是图 + 证据行 + 选它的理由，
   没有 4 根评分条 —— 我们没测过这些商品，画评分条就是在编。 */
.pick--buy { border-color: var(--ink); }
.pick--buy .pick__side { background: #FFFBF2; }
/* Amazon 的商品标题是塞满关键词的长句，全量显示会盖过我们自己写的短标题。
   截到 2 行 —— 完整标题在详情页给全，这里只是辨认用。 */
.pick__title {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 买入卡右栏的小数据表。对位雇人卡那四根评分条，区别是这四行是真数据。 */
.minikv { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.minikv > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13px; }
.minikv dt { color: var(--text-3); }
.minikv dd { margin: 0; font-weight: 700; text-align: right; }
.pick__why { font-size: 14px; color: var(--text-2); line-height: 1.5; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }

.ev { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; align-items: center; }
.ev__i { font-size: 13.5px; color: var(--text-2); }
.ev__i b { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); }
.ev__flag {
  background: var(--amber);
  border: 1px solid var(--ink);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.btn--cta-buy { background: var(--ink); }
.btn--cta-buy:hover { background: var(--amber); color: var(--ink); }

/* ── 「还得买什么」──────────────────────────────────────────────
   实物路线的隐藏成本几乎都在配件上，不写出来就是在骗人。 */
.also { margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--ink); }
.also__card { border: 1px solid var(--ink); border-radius: 18px; background: var(--card); padding: 18px; display: flex; gap: 16px; }
.also__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.also__kw { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; text-transform: capitalize; }
.also__note { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.also__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.also__price { font-size: 14.5px; font-weight: 700; }
.also__foot .btn--sm { margin-left: auto; }

/* ── 跳转到纯外包榜单 ───────────────────────────────────────────
   融合榜单不复制 Fiverr 的档位卡，只给一句话 + 链过去。 */
.hirelink {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid var(--ink);
  border-radius: 22px;
  background: var(--panel);
  padding: 26px 28px;
  margin-top: 28px;
}
.hirelink:hover { background: var(--card); }
.hirelink h3 { font-size: 22px; margin-top: 12px; }
.hirelink p { font-size: 15px; color: var(--text-2); line-height: 1.5; margin-top: 8px; max-width: 56ch; }
.hirelink__go { font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ── 首页融合展位 ───────────────────────────────────────────────
   首页就该传达「这里有两个价格」，点进去才知道等于把差异化埋了一层。 */
.showcase { display: flex; flex-direction: column; gap: 1px; background: var(--dark-line); border-radius: 16px; overflow: hidden; }
.showcase__row { background: var(--ink); display: flex; gap: 18px; align-items: center; padding: 18px 20px; flex-wrap: wrap; }
.showcase__row:hover { background: #1D1A16; }
.showcase__row .pimg { border-color: var(--dark-line); }
.showcase__body { flex: 1; min-width: 180px; }
.showcase__name { color: var(--paper); font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.showcase__row:hover .showcase__name { color: var(--lime); }
.showcase__blurb { font-size: 14px; color: var(--dark-text-2); margin-top: 4px; }
.showcase__prices { display: flex; gap: 26px; flex-wrap: wrap; }
.showcase__p { display: flex; flex-direction: column; gap: 2px; }
.showcase__p b { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.showcase__p span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--dark-text-2); }
.showcase__p--buy b { color: var(--amber); }
.showcase__p--hire b { color: var(--lime); }

/* ── 买入详情页 ─────────────────────────────────────────────────*/
.prod-hero--buy { background: var(--amber-soft); }
.prod-hero__title { font-size: 15px; color: var(--text-2); line-height: 1.5; margin-top: 14px; max-width: 60ch; }
.prod-hero--buy .ev { margin-top: 20px; }
.buy-box__shape { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-top: 8px; }
.buy-box__cta--buy { background: var(--ink); }
.buy-box__cta--buy:hover { background: var(--amber); color: var(--ink); }

/* 规则全文。印出来，让读者能反对规则本身，而不是被迫相信我们的品味。 */
.method { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.method__h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.method__i { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-top: 12px; padding-left: 16px; border-left: 2px solid var(--line-2); }

.score-card--buy { display: flex; flex-direction: column; }
.score-card__lead { font-family: var(--display); font-weight: 800; font-size: 56px; color: var(--amber); letter-spacing: -0.04em; display: flex; align-items: baseline; gap: 10px; }
.score-card__lead span { font-family: var(--body); font-weight: 400; font-size: 15px; color: var(--dark-text-2); letter-spacing: 0; }
/* 外包路线详情页原本是个 8.2/10 的大分数。删了之后这个位置放「No score」——
   留白或者干脆不放都会让人以为分数没加载出来，明说更清楚。 */
.score-card__lead--muted { font-size: 40px; color: var(--dark-text-3); flex-wrap: wrap; }
.score-card__warn { font-size: 12.5px; color: #FFC9B0; margin-top: 10px; line-height: 1.45; }
.kv { margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--dark-line); padding-bottom: 10px; }
.kv > div:last-child { border-bottom: 0; }
.kv dt { font-size: 13px; color: var(--dark-text-2); }
.kv dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; }

.alt__top { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.alt__stripe--buy { background: var(--amber); }
.alt__stripe--hire { background: var(--accent); }
.alt__stripe--diy { background: var(--lime); }

.empty { border: 1px dashed var(--line-2); border-radius: 18px; padding: 32px; text-align: center; font-size: 16px; color: var(--text-2); }
.empty button { font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

.cat-card--wide { grid-column: 1 / -1; }
.col-head--solo { grid-template-columns: 1fr; }
.disclosure--light { background: var(--card); color: var(--ink); border: 1px solid var(--ink); }
.disclosure--light h2 { color: var(--ink); }
.disclosure--light p { color: var(--text-2); }

@media (max-width: 720px) {
  .rstrip__bottom, .rstrip__finding { grid-template-columns: 1fr; gap: 8px; }
  .pimg--card { width: 72px; height: 72px; }
  .showcase__prices { gap: 18px; }
}

@media (max-width: 620px) {
  /* 窄屏下 logo / 导航 / CTA 挤在一行会把导航压成两个字一行，拆成两行更好读。 */
  .header__inner { flex-wrap: wrap; gap: 12px 16px; }
  .nav { order: 3; width: 100%; gap: 16px; font-size: 14px; }
  .nav button, .nav a { font-size: 14px; }
  .btn--accent { margin-left: auto; }
}

@media (max-width: 720px) {
  .pros-cons { grid-template-columns: 1fr; }
  .pick__main { border-right: 0; border-bottom: 1px solid var(--line); }
  .toplist__row { grid-template-columns: 40px 1fr; }
  .toplist__end { grid-column: 1 / -1; justify-content: flex-start; }
  .bar { grid-template-columns: 84px 1fr 30px; }
}

/* ── 成本页（还没有排名的品类）───────────────────────────────────
   这类页面的主角是那句买家问句和它的答案，不是排名。 */
.cost-answer { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.45; margin-top: 20px; max-width: 46ch; }
.cost-answer b { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }

/* 品类卡封面放价格区间而不是路线数 —— 没有排名时路线数是 0，
   拿 0 当封面数字等于告诉读者这里没内容。 */
.col-card__top--price { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; }
.col-card__band {
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.col-card__top--price .col-card__unit { margin-left: 0; margin-bottom: 0; }

/* ── 下单清单（成本页）─────────────────────────────────────────
   这类页面唯一能立刻帮到读者的东西：价格区间告诉他要花多少，
   清单告诉他怎么避免花冤枉钱。 */
.checklist { border: 1px solid var(--ink); border-radius: 24px; background: var(--card); padding: clamp(24px, 3.4vw, 38px); margin-top: 32px; }
.checklist h2 { font-size: clamp(24px, 3.2vw, 34px); margin-top: 10px; }
.checklist__lede { font-size: 15.5px; color: var(--text-2); line-height: 1.55; margin-top: 12px; max-width: 66ch; }
.checklist__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px 32px; }
.checklist__list li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.checklist__n {
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  color: var(--ink); background: var(--lime);
}

/* ── 搜索词噪声 ───────────────────────────────────────────────
   数据来自选品管线的污染检测排除词，是真实数据不是编的。 */
.noise { border: 1px solid var(--line-2); border-radius: 24px; background: var(--panel); padding: clamp(24px, 3.4vw, 38px); margin-top: 24px; }
.noise h2 { font-size: clamp(22px, 2.8vw, 30px); margin-top: 10px; }
.noise__lede { font-size: 15px; color: var(--text-2); line-height: 1.55; margin-top: 12px; max-width: 66ch; }
.noise__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.noise__label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); }
.noise__words { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.noise__w { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--text-2); }
/* 归不进任何一类的 —— voip / canvas / hosting 这种品类特有的歧义，
   往往是整页最有意思的一块，所以给它一个不同的底色。 */
.noise__cell--odd .noise__label { color: var(--bad); }
.noise__cell--odd .noise__w { background: #FBE9E2; border-color: #EFC8B8; }