/* ============================================================
   MeiTu Numbers — storefront
   暖纸、墨色、铜。编辑感而非装饰感。
   结构：入口（价格 → 两扇门）→ 套餐 → 区号 → 号码库 → 按州 → 流程 → FAQ
   ============================================================ */

:root {
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --header-h: 108px;      /* 顶栏 + 头部（给锚点留白用） */
  --sticky-h: 74px;       /* 只有真正吸顶的头部高度 */
  --gutter: clamp(18px, 4vw, 44px);
  --section-y: clamp(56px, 7vw, 104px);
}

/* ---------------------------------- 顶部条 ---------------------------------- */

.topline {
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1;
}
.topline-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 34px;
  justify-content: space-between;
}
.topline-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topline .ico { width: 13px; height: 13px; opacity: 0.7; }
/* 主色变浅后，深色底上的半透明文字要提亮才能守住 4.5:1（0.62 → 5.21:1） */
.topline-mid { color: rgba(242, 240, 231, 0.62); }
.topline-phone { color: rgba(242, 240, 231, 0.86); transition: color 0.2s; padding: 8px 0; }
.topline-phone:hover { color: #fff; }
.topline-short { display: none; }

/* ---------------------------------- 导航 ---------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242, 240, 231, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(242, 240, 231, 0.96);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: 74px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.brand-dot { color: var(--muted); }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-text b { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.1; }
.brand-text small { font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.16em; color: var(--muted); }

.main-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); margin-right: auto; }
.main-nav a {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0;
  transition: color 0.2s;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { transform: scaleX(1); }

.header-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.seg {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(251, 250, 245, 0.6);
  border-radius: var(--r-xs);
  padding: 2px;
  gap: 2px;
}
.seg-btn {
  height: 34px;
  min-width: 32px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  border-radius: 1px;
  transition: background 0.2s, color 0.2s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active { background: var(--ink); color: var(--paper); }
/* 34px 高的分段按钮在手机上偏小。不改外观，只用伪元素把纵向热区撑到 48px——
   横向不撑，否则相邻按钮的热区会互相抢点击。 */
.seg-btn { position: relative; }
.seg-btn::after { content: ''; position: absolute; inset: -7px 0; }
.header-admin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 8px 4px;
  transition: color 0.2s;
}
.header-admin .ico { width: 13px; height: 13px; }
.header-admin:hover { color: var(--ink); }
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--ink);
}

.mobile-menu {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 14px var(--gutter) 20px;
}
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav a {
  padding: 13px 2px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-tools { display: flex; gap: 10px; margin: 16px 0 14px; }
.mobile-tools .seg { flex: 1; }
.mobile-tools .seg-btn { flex: 1; height: 40px; }
/* 顶栏的管理员入口在 ≤900px 是隐藏的，菜单里这条是手机上唯一的入口 */
.mobile-admin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 11px 2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  align-self: flex-start;
}
.mobile-admin:hover { color: var(--ink); }

/* ---------------------------------- 入口 ---------------------------------- */

.entry {
  position: relative;
  padding: clamp(28px, 4vw, 52px) 0 clamp(44px, 5vw, 72px);
  overflow: hidden;
}
.entry::before {
  content: 'N°';
  position: absolute;
  top: -40px; right: -10px;
  font-family: var(--font-display);
  font-size: clamp(240px, 30vw, 460px);
  line-height: 1;
  color: rgba(20, 26, 22, 0.032);
  pointer-events: none;
  user-select: none;
}
.entry-head { position: relative; max-width: 760px; }
.entry-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}
.entry-title .accent { color: var(--ink); margin-left: -0.1em; }
.lede {
  margin-top: 16px;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* 价格条 */
.prices {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(26px, 3.4vw, 42px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.price-cell {
  padding: 22px 26px 24px 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
/* 三格价格卡整块可点，跳到号码库 / 套餐区；链接铺满卡片但不改变版式 */
.price-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.price-cell:has(.price-link) { cursor: pointer; transition: background 0.2s ease; }
.price-cell:has(.price-link):hover { background: rgba(20, 26, 22, 0.022); }
.price-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.price-cell + .price-cell { padding-left: 26px; border-left: 1px solid var(--line); }
.price-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: 0.16em;
  color: var(--muted);
}
.price-label {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}
.price-amount b {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.4vw, 60px);
  font-weight: 400;
  letter-spacing: -0.035em;
}
.price-unit {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.price-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
.price-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.price-foot i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-light); }
.price-foot b { color: var(--ink); font-weight: 500; }
.price-fx { display: none; color: var(--muted); }
html[data-currency="CNY"] .price-fx { display: inline; }

/* 两扇门 */
.doors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(30px, 4vw, 52px);
  align-items: stretch;
}
.door {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(251, 250, 245, 0.9), rgba(251, 250, 245, 0.55));
  min-width: 0;
}
.door-plans { background: linear-gradient(180deg, var(--paper-warm), rgba(236, 233, 221, 0.62)); }
.door-head { display: flex; flex-direction: column; gap: 6px; }
.door-no {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: 0.16em;
  color: var(--muted);
}
.door-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.door-sub { font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 44ch; overflow-wrap: break-word; }

.door-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 5px 5px 5px 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.door-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.door-search-ico {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--muted);
}
.door-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: 15px;
}
.door-search input::placeholder { color: var(--muted-light); }
.door-search-btn { height: 44px; padding: 0 18px; flex: none; }

.quick-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); }
.quick-links > span { margin-right: 2px; letter-spacing: 0.04em; }
.quick-links button {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.quick-links button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* 精选号码卡 */
.specimen-wrap { position: relative; }
.specimen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px 20px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.specimen:hover { transform: translateY(-1px); }
.specimen::after {
  content: 'M';
  position: absolute;
  right: -6px; bottom: -34px;
  font-family: var(--font-display);
  font-size: 130px;
  line-height: 1;
  color: rgba(242, 240, 231, 0.05);
  pointer-events: none;
}
.specimen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(242, 240, 231, 0.72);
}
.specimen-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242, 240, 231, 0.8); }
.specimen-status em { font-family: var(--font-sans); font-style: normal; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: rgba(242, 240, 231, 0.72); margin-left: 4px; }
.specimen-status i { width: 5px; height: 5px; border-radius: 50%; background: #8fae95; box-shadow: 0 0 0 3px rgba(143, 174, 149, 0.16); }
.specimen-number {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.specimen.is-swapping .specimen-number,
.specimen.is-swapping .specimen-loc { opacity: 0; transform: translateY(4px); }
.specimen-loc {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: 0.12em;
  color: rgba(242, 240, 231, 0.74);
  transition: opacity 0.25s var(--ease);
}
.specimen-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(242, 240, 231, 0.16);
  font-size: 12px;
  color: rgba(242, 240, 231, 0.78);
}
.specimen-foot strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--paper);
}
.specimen-next {
  position: absolute;
  top: 14px; right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border-radius: 100px;
  font-size: 11px;
  color: rgba(242, 240, 231, 0.72);
  background: rgba(242, 240, 231, 0.1);
  transition: background 0.2s, color 0.2s;
}
.specimen-next .ico { width: 12px; height: 12px; }
.specimen-next:hover { background: rgba(242, 240, 231, 0.2); color: #fff; }

.door-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.2s, gap 0.2s;
}
.door-cta .ico { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.door-subcta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xs);
  font-size: 12.5px;
  color: var(--ink-soft);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.door-subcta .ico { width: 14px; height: 14px; color: var(--ink-soft); flex: none; }
.door-subcta b { font-weight: 600; color: var(--ink); }
.door-subcta:hover { border-color: var(--line-strong); background: var(--paper-warm); color: var(--ink); }
.door-cta:hover { color: var(--ink-soft); }
.door-cta:hover .ico { transform: translateX(3px); }

/* 套餐周期切换 */
.door-terms { display: flex; gap: 4px; }
.door-term {
  flex: 1;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: rgba(251, 250, 245, 0.7);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.door-term:hover { color: var(--ink); border-color: var(--line-strong); }
.door-term.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.door-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mini-help { grid-column: span 2; }
.mini-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.mini-plan:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.mini-plan.is-popular { border-color: rgba(122, 100, 53, 0.5); box-shadow: inset 0 0 0 1px rgba(122, 100, 53, 0.16); }
.mini-plan-data {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.mini-plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mini-plan-price b { font-family: var(--font-display); font-size: 21px; font-weight: 400; letter-spacing: -0.02em; }
.mini-plan-price small { font-size: var(--fs-min); color: var(--muted); }
.mini-plan-note { font-size: var(--fs-min); line-height: 1.4; color: var(--muted); }
.mini-help { justify-content: center; gap: 3px; background: transparent; border-style: dashed; }
.mini-help .mini-plan-data { font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
.mini-help .mini-plan-note { font-size: 11px; }
.mini-help:hover { border-color: var(--line-strong); }
.mini-plan-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--ink);
  border-radius: 100px;
  padding: 2px 7px;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-skeleton {
  height: 84px;
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--paper-deep) 20%, #faf8f0 40%, var(--paper-deep) 60%);
  background-size: 240% 100%;
  animation: shimmer 1.4s infinite linear;
}
.door-note { font-size: 11.5px; line-height: 1.55; color: var(--muted); }

@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* --------------------------------- 跑马灯 --------------------------------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  background: rgba(231, 228, 215, 0.4);
}
.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee-track span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  padding-right: 8px;
  white-space: nowrap;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------- 套餐 ---------------------------------- */

.plans { padding: var(--section-y) 0; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.plan-skeleton {
  height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--paper-deep) 20%, #faf8f0 40%, var(--paper-deep) 60%);
  background-size: 240% 100%;
  animation: shimmer 1.4s infinite linear;
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.plan-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plan-card.is-popular {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.plan-card.is-highlight { animation: plan-flash 1.6s var(--ease); }
@keyframes plan-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 100, 53, 0); }
  22% { box-shadow: 0 0 0 4px rgba(122, 100, 53, 0.18); }
}
.plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 34px; }
.plan-data {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.plan-popular {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
}
.plan-tagline { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--muted); min-height: 40px; }
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.plan-price strong { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; }
.plan-price span { font-size: 11.5px; color: var(--muted); }
.plan-upfront { margin-top: 6px; font-size: 11.5px; color: var(--muted-light); }
.plan-terms { display: flex; gap: 4px; margin-top: 13px; }
.plan-term {
  flex: 1;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.plan-term:hover { color: var(--ink); border-color: var(--line-strong); }
.plan-term.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.plan-includes {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.plan-includes li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.plan-includes li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.52em;
  width: 6px; height: 6px;
  border-left: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  transform: rotate(-45deg);
}
.plan-includes { margin-bottom: 18px; }
.plan-add { margin-top: auto; }
.plan-add.is-added { background: var(--green-wash); border-color: rgba(47, 93, 80, 0.3); color: var(--green); }
.plan-add.is-added:hover { background: var(--green); border-color: var(--green); color: var(--paper); }

.plan-help { background: transparent; border-style: dashed; }
.plan-help .eyebrow { margin-bottom: 12px; }
.plan-help-title { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; }
.plan-help-desc { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: #4d534c; }
.plan-help .plan-add { margin-top: 20px; }

.plan-free {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
}
.plan-free-copy .eyebrow { color: rgba(242, 240, 231, 0.6); }
.plan-free-copy .eyebrow-rule { background: rgba(242, 240, 231, 0.4); }
.plan-free-copy h3 { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; margin: 8px 0 10px; }
.plan-free-copy p:last-child { font-size: 13.5px; line-height: 1.8; color: rgba(242, 240, 231, 0.7); max-width: 52ch; }
.plan-free-form { display: grid; grid-template-columns: 1fr 100px auto; gap: 10px; align-items: end; }
.plan-free-form .field > span { color: rgba(242, 240, 231, 0.62); }
.plan-free-form .field select,
.plan-free-form .field input {
  background: rgba(242, 240, 231, 0.08);
  border-color: rgba(242, 240, 231, 0.22);
  color: var(--paper);
}
.plan-free-form .field select option { color: var(--ink); }
.plan-free-form .field input::placeholder { color: rgba(242, 240, 231, 0.4); }
.plan-free-form .select-wrap .ico { color: rgba(242, 240, 231, 0.6); }
.plan-free-form .btn { height: 44px; background: var(--paper); color: var(--ink); border-color: var(--paper); white-space: nowrap; }
.plan-free-form .btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); }

.plan-note { margin-top: 16px; font-size: 12px; line-height: 1.8; color: var(--muted); max-width: 900px; }

/* --------------------------------- 区号索引 --------------------------------- */

.codes {
  background: var(--ink);
  color: var(--paper);
  padding: var(--section-y) 0;
}
.codes .section-note { color: rgba(242, 240, 231, 0.66); }
.codes-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid rgba(242, 240, 231, 0.16);
}
.code-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px 18px;
  border-bottom: 1px solid rgba(242, 240, 231, 0.16);
  border-right: 1px solid rgba(242, 240, 231, 0.16);
  text-align: left;
  transition: background 0.25s var(--ease);
}
.code-card:nth-child(6n) { border-right: 0; }
.code-card:hover { background: rgba(242, 240, 231, 0.06); }
.code-number {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.code-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: rgba(242, 240, 231, 0.72); }
.code-meta b { color: rgba(242, 240, 231, 0.92); font-weight: 500; }
.code-card .ico { position: absolute; right: 14px; bottom: 16px; width: 14px; height: 14px; color: rgba(242, 240, 231, 0.3); transition: transform 0.2s, color 0.2s; }
.code-card:hover .ico { color: var(--paper); transform: translateX(2px); }

/* --------------------------------- 号码库 --------------------------------- */

.browse { padding: var(--section-y) 0; }
.filter-sentinel { height: 1px; }
.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.filter-bar.is-stuck {
  position: sticky;
  top: var(--sticky-h);
  z-index: 40;
  box-shadow: 0 18px 40px -24px rgba(20, 26, 22, 0.4);
  border-color: var(--line-strong);
}
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-field > label,
.filter-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.filter-field .select-wrap select,
.filter-field input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--paper);
  padding: 0 12px;
  font-size: 13.5px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.filter-field input::placeholder { color: var(--muted-light); }
.filter-field input:focus,
.filter-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.filter-field .select-wrap select { padding-right: 32px; }
.filter-field-tags { grid-column: 1 / -1; }
.tag-row { display: flex; align-items: center; gap: 10px; }
/* 标签行保持单行：窄屏折成三行会把筛选卡顶到 350px 高，号码卡被推到首屏之外。
   溢出时横向滚动，并在右侧用渐隐提示「还能滑」，滑到底自动收掉渐隐。 */
.chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row.is-scrollable { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.chip-row.is-at-end { mask-image: none; }
.chip {
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter-reset { flex: none; min-height: 40px; min-width: 44px; padding: 0 10px; font-size: 12px; color: var(--muted); }

.zip-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--card);
  font-size: 13px;
}
.zip-tag { font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.1em; color: var(--ink); }
.zip-value { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.zip-city { font-size: 12.5px; color: var(--muted); }
.zip-codes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zip-codes > span { font-size: 11.5px; color: var(--muted); }
.zip-code {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.zip-code:hover { border-color: var(--line-strong); }
.zip-code.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.zip-more { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.zip-more .ico { width: 13px; height: 13px; }
.zip-clear { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.zip-clear .ico { width: 13px; height: 13px; }
.zip-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px 0 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  font-size: 12px;
  color: var(--ink-soft);
}
.active-chip .ico { width: 11px; height: 11px; color: var(--muted); }
.active-chip:hover { border-color: var(--ink); color: var(--ink); }
.active-clear { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

.result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--muted);
}
.result-meta p { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.result-shown { color: var(--muted); }
.result-sync { color: var(--muted); }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(47, 93, 80, 0.14); flex: none; }
.sync-stamp { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }

.number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.num-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 18px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
  animation: card-in 0.4s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 18ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } }
.num-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.num-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.num-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.num-card-state { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.num-card-state b { font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }
.num-card-tag { font-size: var(--fs-min); color: var(--ink-soft); background: transparent; border: 1px solid var(--line-strong); border-radius: 100px; padding: 2px 8px; white-space: nowrap; }
.num-card-number {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.1vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.num-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.num-card-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-light); }
.num-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.num-card-price { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: -0.02em; }
.num-card-price small { font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.08em; color: var(--muted-light); text-transform: uppercase; margin-left: 3px; }
.num-card-view { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.num-card-view .ico { width: 13px; height: 13px; }
.card-hit { position: absolute; inset: 0; border-radius: inherit; cursor: pointer; }
.card-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num-card.is-unavailable { opacity: 0.55; }
.num-card.is-unavailable .num-card-number { text-decoration: line-through; text-decoration-thickness: 1px; }
.skeleton-card { min-height: 186px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.sk-line { height: 11px; border-radius: 3px; background: linear-gradient(100deg, var(--paper-deep) 20%, #faf8f0 40%, var(--paper-deep) 60%); background-size: 240% 100%; animation: shimmer 1.4s infinite linear; }
.sk-number { height: 24px; margin-top: 16px; }
.sk-w30 { width: 30%; } .sk-w45 { width: 45%; } .sk-w60 { width: 60%; } .sk-w75 { width: 75%; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 24px; text-align: center; }
.empty-mark { font-family: var(--font-display); font-size: 72px; line-height: 1; color: var(--line-strong); }
.empty-state h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; }
.empty-state p { max-width: 46ch; font-size: 14px; color: var(--muted); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.grid-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 28px; }
.load-more { min-width: 240px; }
.grid-foot p { font-size: 11.5px; color: var(--muted-light); }

/* --------------------------------- 按州浏览 --------------------------------- */

.states { padding: var(--section-y) 0; background: rgba(231, 228, 215, 0.36); }
.ledger-wrap { position: relative; }
.state-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 5vw, 76px);
  overflow: hidden;
  border-top: 1px solid var(--line-strong);
}
.state-ledger.is-collapsed {
  max-height: 432px;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.state-col { min-width: 0; }
.state-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 54px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background 0.2s, padding 0.2s;
}
.state-row:hover { background: rgba(251, 250, 245, 0.7); padding-left: 6px; }
.state-code { font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.08em; color: var(--muted); flex: none; width: 22px; }
.state-name { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; line-height: 1.25; min-width: 0; }
.state-name small { font-size: var(--fs-min); font-weight: 400; color: var(--muted); letter-spacing: 0.02em; }
.state-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.state-row .ico { width: 13px; height: 13px; color: var(--muted-light); flex: none; }
.ledger-toggle { margin-top: 18px; display: inline-flex; min-height: 44px; padding: 6px 0; }
.ledger-toggle .ico { transition: transform 0.25s var(--ease); }
.ledger-toggle.is-open .ico { transform: rotate(180deg); }

/* --------------------- 真实州界地图（albersUsa 投影） --------------------- */
.state-map-wrap { margin-top: clamp(22px, 3vw, 40px); }
/* 图例和提示紧挨着下面的州列表时，会被读成列表的表头，必须留出块间距 */
.state-map-wrap + .ledger-wrap { margin-top: 30px; }
.us-map-figure {
  margin: 0;
  padding: clamp(12px, 1.8vw, 24px) clamp(8px, 1.4vw, 18px) clamp(6px, 1vw, 12px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.us-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.us-map .st {
  stroke: var(--card);
  stroke-width: 0.75;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill-opacity 0.18s var(--ease), stroke 0.16s var(--ease), stroke-width 0.16s var(--ease);
}
/* 指针进入地图后，非悬停州轻微退后，让当前州浮出来（纯 CSS，不依赖 JS 状态） */
.us-map:hover .st:not(:hover):not(.is-active) { fill-opacity: 0.6; }
.us-map .st.is-active,
.us-map .st:hover,
.us-map .st:focus-visible {
  fill-opacity: 1;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.us-map .st.is-active { stroke-width: 2.25; }
.us-map .st:focus-visible { outline: none; }
.us-map .st-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}
/* 被挤到海面或邻州上方的极小州标签：文字描一圈纸色底，压在深色块上也读得清 */
.us-map .st-lbl--lead {
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
  font-weight: 500;
}
/* 引线：从州体中心指向标签，短、细、不抢戏 */
.us-map .st-lead {
  stroke: var(--muted-light);
  stroke-width: 1px;
  stroke-linecap: round;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  opacity: 0.75;
}
/* 连一个字都放不下的州（DC），用实心墨点标位置；纸色描边把它和湖泊/海湾区分开 */
.us-map .st-dot {
  fill: var(--ink);
  stroke: var(--card);
  stroke-width: 1.5px;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.state-map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.state-map-legend {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.legend-label { white-space: nowrap; }
.legend-scale {
  display: flex;
  gap: 2px;
  width: 108px;
}
.legend-scale i {
  flex: 1;
  height: 7px;
  border-radius: 1px;
}
.state-map-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--muted-light);
}
/* 手机上 51 个州挤成 340px 宽，州代码必然糊成一团：整块只留形状与手感，认州交给下面的州列表 */
@media (max-width: 900px) {
  .us-map .st-lbl { display: none; }
}
@media (max-width: 560px) {
  .us-map-figure { padding: 8px 4px 2px; }
  .state-map-meta { justify-content: flex-start; gap: 8px 14px; margin-top: 10px; }
  .state-map-hint { display: none; }
}

/* --------------------------------- 购买流程 --------------------------------- */

.how { background: var(--ink); color: var(--paper); padding: var(--section-y) 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(242, 240, 231, 0.18); }
.steps li { padding: 26px clamp(16px, 2.4vw, 32px) 8px 0; }
.steps li + li { border-left: 1px solid rgba(242, 240, 231, 0.18); padding-left: clamp(16px, 2.4vw, 32px); }
.step-no { font-family: var(--font-display); font-size: 34px; line-height: 1; color: rgba(242, 240, 231, 0.55); }
.steps h3 { margin-top: 14px; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.steps p { margin-top: 8px; font-size: 13.5px; line-height: 1.8; color: rgba(242, 240, 231, 0.66); }

.concierge {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(242, 240, 231, 0.18);
}
.concierge h3 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 36px); font-weight: 400; margin: 10px 0 10px; }
.concierge p { font-size: 13.5px; line-height: 1.8; color: rgba(242, 240, 231, 0.66); max-width: 46ch; }
.concierge-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; }
.contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border: 1px solid rgba(242, 240, 231, 0.2);
  border-radius: var(--r-xs);
  text-align: left;
  transition: background 0.22s, border-color 0.22s;
}
.contact-line:hover { background: rgba(242, 240, 231, 0.07); border-color: rgba(242, 240, 231, 0.4); }
.contact-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(242, 240, 231, 0.1); flex: none; }
.contact-ico .ico { width: 15px; height: 15px; }
.contact-line small { display: block; font-size: var(--fs-min); letter-spacing: 0.04em; color: rgba(242, 240, 231, 0.58); }
.contact-line b { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; word-break: break-all; }
.contact-copy { width: 14px; height: 14px; margin-left: auto; color: rgba(242, 240, 231, 0.4); flex: none; }

/* ---------------------------------- FAQ ---------------------------------- */

.faq { padding: var(--section-y) 0; }
.faq-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-intro { position: sticky; top: calc(var(--header-h) + 36px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.faq-intro h2 { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.faq-intro .btn { margin-top: 4px; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .ico { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform 0.25s var(--ease); }
.faq-list details[open] summary .ico { transform: rotate(180deg); }
.faq-list details[open] summary { color: var(--ink); }
.faq-list details p { padding: 0 0 22px; max-width: 68ch; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); text-wrap: pretty; }

/* ---------------------------------- 页脚 ---------------------------------- */

.site-footer { background: var(--ink); color: var(--paper); padding: 60px 0 26px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr; gap: clamp(24px, 4vw, 56px); padding-bottom: 44px; border-bottom: 1px solid rgba(242, 240, 231, 0.16); }
.brand-invert .brand-mark { border-color: rgba(242, 240, 231, 0.5); }
.brand-invert .brand-text b { color: var(--paper); }
.brand-invert .brand-text small { color: rgba(242, 240, 231, 0.62); }
.brand-invert .brand-dot { color: rgba(242, 240, 231, 0.6); }
.footer-brand p { margin-top: 18px; font-size: 13.5px; line-height: 1.85; color: rgba(242, 240, 231, 0.75); max-width: 34ch; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h4 { font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242, 240, 231, 0.62); margin-bottom: 5px; }
.footer-col a, .footer-col button { padding: 5px 0; font-size: 13px; color: rgba(242, 240, 231, 0.8); text-align: left; transition: color 0.2s; }
.footer-col a:hover, .footer-col button:hover { color: #fff; }
.footer-col p { font-size: 12px; line-height: 1.8; color: rgba(242, 240, 231, 0.62); }
.footer-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-top: 22px; }
.footer-bottom p { font-size: 11.5px; letter-spacing: 0.02em; color: rgba(242, 240, 231, 0.62); }
.footer-bottom strong { font-weight: 600; color: rgba(242, 240, 231, 0.86); }
.footer-meta p { max-width: 52ch; text-align: right; font-size: var(--fs-min); line-height: 1.7; color: rgba(242, 240, 231, 0.66); }

/* --------------------------------- 详情抽屉 --------------------------------- */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(560px, 100%);
  max-width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: visible;
}
.drawer[open] { animation: drawer-in 0.32s var(--ease); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0.4; } }
.drawer::backdrop { background: rgba(20, 26, 22, 0.5); backdrop-filter: blur(4px); }
.drawer-inner { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(20px, 3vw, 34px) 44px; }
.drawer-top {
  position: sticky;
  top: -22px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  margin-top: -22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.drawer-body { padding-top: 26px; }

/* --------------------------------- 通用弹层 --------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(960px, calc(100vw - 40px));
  max-height: calc(100dvh - 48px);
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-md);
  overflow: visible;
}
/* dialog 的高度被 max-height 卡住，里面那层再设 max-height:inherit 会比容器还高，
   超出部分被裁掉、滚不到底（手机上「微信」按钮就永远够不着）。改成 flex 让面板吃满剩余高度。 */
.modal[open] { animation: modal-in 0.28s var(--ease); display: flex; flex-direction: column; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } }
.modal::backdrop { background: rgba(20, 26, 22, 0.5); backdrop-filter: blur(4px); }
.modal-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(18px, 3vw, 32px) 28px; }
.modal-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); position: sticky; top: -22px; background: var(--paper); z-index: 2; }
.modal-body { padding-top: 22px; }
.modal-heading h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 400; line-height: 1.15; }
.modal-heading p { margin-top: 8px; font-size: 13.5px; line-height: 1.75; color: var(--muted); max-width: 62ch; }
.modal-foot { margin-top: 22px; font-size: 11.5px; line-height: 1.8; color: var(--muted-light); }

.selected-number { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-left: 2px solid var(--line-strong); border-radius: var(--r-xs); background: var(--card); }
.selected-number span { font-size: var(--fs-min); letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.selected-number strong { font-family: var(--font-display); font-size: 24px; font-weight: 400; }

.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 20px; align-items: start; }
.contact-col { display: flex; flex-direction: column; gap: 12px; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--card);
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.contact-card:hover { border-color: var(--line-strong); background: var(--card); }
.contact-card-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-deep); flex: none; }
.contact-card-ico .ico { width: 15px; height: 15px; }
.contact-card-text small { display: block; font-size: var(--fs-min); color: var(--muted); }
.contact-card-text b { display: block; margin-top: 1px; font-size: 13.5px; font-weight: 600; word-break: break-all; }
.ico-copy { width: 14px; height: 14px; margin-left: auto; color: var(--muted-light); flex: none; }
.payment-line { font-size: 11.5px; line-height: 1.7; color: var(--muted); }
.copy-all { align-self: flex-start; }

.reserve { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); padding: 18px; }
.reserve-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reserve-head h3 { font-size: 16px; font-weight: 700; }
.reserve-head p { margin-top: 4px; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.reserve-badge { flex: none; font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.08em; color: var(--green); background: var(--green-wash); border-radius: 100px; padding: 4px 9px; }
.reserve-form { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form-note { font-size: 11px; color: var(--muted-light); }
.form-error { font-size: 12px; color: var(--danger); }
.reserve-success { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 4px; }
.success-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green-wash); color: var(--green); }
.success-mark .ico { width: 19px; height: 19px; }
.reserve-success h3 { font-size: 16px; font-weight: 700; }
.reserve-success p { font-size: 13px; line-height: 1.7; color: var(--muted); }
.success-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* --------------------------------- 选号清单 --------------------------------- */

.cart-panel { min-height: 0; }
.cart-modal { width: min(760px, calc(100vw - 32px)); }
.cart-body { display: flex; flex-direction: column; }
.cart-items { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.cart-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--card);
}
.cart-item-kind { font-family: var(--font-mono); font-size: var(--fs-min); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); flex: none; }
.cart-item-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-item-main b { font-size: 13.5px; font-weight: 600; }
.cart-item-sub { font-size: 11.5px; color: var(--muted); }
.cart-item-term { display: inline-flex; }
.cart-item-term select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--paper);
  font-size: 11.5px;
  padding: 0 24px 0 8px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f665e' stroke-width='1.6'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.cart-item-price { font-family: var(--font-display); font-size: 20px; line-height: 1; }
.cart-item-price.is-free { font-size: 14px; color: var(--green); }
.cart-item-remove { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 15px; line-height: 1; flex: none; }
.cart-item-remove:hover { border-color: var(--danger); color: var(--danger); }
.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; padding: 28px 18px; text-align: center; font-size: 13.5px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.cart-empty-actions { display: flex; gap: 8px; }
.cart-tip { font-size: 13px; color: var(--warn); }
.cart-summary { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cart-fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.cart-fee b { flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; }
.cart-total span { font-size: 13px; color: var(--muted); }
.cart-total strong { font-family: var(--font-display); font-size: 34px; font-weight: 400; line-height: 1; }
.cart-total-note { margin-top: 6px; font-size: 11.5px; color: var(--muted-light); }
.cart-actions { display: flex; gap: 10px; margin-top: 16px; }
.cart-actions .btn { flex: 1; }
.cart-hint { margin-top: 8px; font-size: 11.5px; color: var(--muted-light); text-align: center; }
.cart-form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.cart-success { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 0; }
.cart-success h3 { font-size: 17px; font-weight: 700; }
.cart-success p { font-size: 13px; color: var(--muted); }
.cart-success-total { font-family: var(--font-display); font-size: 24px !important; color: var(--ink) !important; }
.cart-success-note { line-height: 1.7; }
.cart-wechat { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.cart-wechat p { font-size: 11.5px; color: var(--muted); }
.cart-wechat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cart-wechat-row button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}
.cart-wechat-row button:hover { border-color: var(--line-strong); }
.cart-wechat-btn small { font-size: var(--fs-min); letter-spacing: 0.02em; color: var(--muted); }

/* --------------------------------- 悬浮清单 --------------------------------- */

.cart-fab {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 16px 34px -14px rgba(20, 26, 22, 0.6);
  transition: transform 0.25s var(--ease), background 0.25s, opacity 0.25s var(--ease);
}
.cart-fab:hover { background: var(--ink-soft); transform: translateY(-2px); }
.cart-fab.is-tucked {
  transform: translateY(calc(100% + 30px));
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
/* 清单为空时不显示悬浮按钮，避免压住首屏右侧的套餐小卡 */
.cart-fab.is-empty {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(100% + 30px));
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0.25s;
}
.cart-fab.bump { animation: fab-bump 0.5s var(--ease); }
@keyframes fab-bump {
  0% { box-shadow: 0 0 0 0 rgba(122, 100, 53, 0.5); }
  100% { box-shadow: 0 0 0 14px rgba(122, 100, 53, 0); }
}
.cart-fab .ico { width: 17px; height: 17px; }
.cart-fab-count {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-min);
}

/* --------------------------------- 详情内容 --------------------------------- */

.detail-loc { font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); }
.detail-number { margin-top: 6px; font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px); font-weight: 400; line-height: 1.1; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.detail-tag { font-size: var(--fs-min); padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 100px; color: var(--ink-soft); background: transparent; }
.detail-tag-muted { border-color: var(--line); color: var(--muted); background: transparent; }
.detail-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-price { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-size: 38px; line-height: 1; }
.detail-price small { font-family: var(--font-sans); font-size: 11px; color: var(--muted); }
.detail-price-alt { font-size: 12px; color: var(--muted); text-align: right; }

.stock-line { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.stock-line.is-sold { color: var(--danger); }
.stock-time { margin-left: auto; font-size: var(--fs-min); color: var(--muted-light); }
.detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 18px; }
.detail-fact dt { font-size: var(--fs-min); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-light); }
.detail-fact dd { font-size: 14px; font-weight: 600; margin-top: 2px; }
.detail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.detail-note { font-size: 11.5px; line-height: 1.7; color: var(--muted-light); }
.detail-similar { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.detail-similar h4 { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.similar-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.similar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--card); text-align: left; }
.similar-item b { font-family: var(--font-display); font-size: 18px; font-weight: 400; }
.similar-item span { font-size: 11.5px; color: var(--muted); }
.similar-item .ico { margin-left: auto; width: 13px; height: 13px; color: var(--muted-light); }
.detail-loading, .detail-error { font-size: 13px; color: var(--muted); }

/* --------------------------------- 响应式 --------------------------------- */

@media (max-width: 1180px) {
  .faq-grid { grid-template-columns: 0.9fr 1.1fr; gap: 40px; }
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .codes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .code-card:nth-child(6n) { border-right: 1px solid rgba(242, 240, 231, 0.16); }
  .code-card:nth-child(4n) { border-right: 0; }
}

@media (max-width: 1079.98px) {
  .main-nav { display: none; }
  .menu-btn { display: grid; }
  .header-contact { display: none; }
  .site-header { position: sticky; }
  .mobile-menu[hidden] { display: none; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .door-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-free { grid-template-columns: 1fr; }
  .concierge { grid-template-columns: 1fr; }
  .number-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-intro { position: static; }
  .contact-layout { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps li + li { border-left: 0; border-top: 1px solid rgba(242, 240, 231, 0.18); padding-left: 0; }
}

@media (max-width: 900px) {
  :root { --header-h: 96px; --sticky-h: 64px; }
  /* 手机上筛选栏吸顶会占掉 257px（约 41% 视口），只剩两张卡可看 */
  .filter-bar.is-stuck {
    position: static;
    box-shadow: none;
  }
  .topline-inner { height: 30px; }
  .topline-long { display: none; }
  .topline-short { display: inline; }
  .topline-mid { display: none; }
  .header-inner { height: 64px; gap: 12px; }
  .brand-mark { width: 32px; height: 32px; font-size: 17px; }
  .brand-text b { font-size: 14px; }
  .header-admin { display: none; }
  .entry::before { font-size: 240px; top: -10px; right: -40px; }
  .price-cell { padding: 18px 18px 18px 0; }
  .price-cell + .price-cell { padding-left: 18px; }

  .door-search { height: 56px; }
  .door-search-btn { height: 46px; padding: 0 16px; }
}

@media (max-width: 760px) {
  .entry { padding-top: 22px; }
  /* 号码库标题下那段「怎么搜」在手机上要占 86px，而搜索框占位文字已经说了同一件事。
     删掉它，首屏才能露出一张完整号码卡（否则顶部筛选器把卡片全挤到折线以下）。 */
  .browse .section-note { display: none; }
  .entry-title { font-size: clamp(34px, 9vw, 46px); }
  .lede { font-size: 15.5px; }
  .prices { grid-template-columns: 1fr; border-bottom: 0; }
  .price-cell {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2px 12px;
    padding: 16px 2px;
    border-bottom: 1px solid var(--line);
  }
  .price-cell + .price-cell { padding-left: 2px; border-left: 0; }
  .price-kicker { grid-column: 1; grid-row: 1; }
  .price-label { grid-column: 1; grid-row: 2; margin-top: 2px; }
  /* 单列时金额靠右成一条竖线，数字错落但右边缘齐整，比左对齐更像价目表 */
  .price-amount {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    align-self: end;
    justify-content: flex-end;
    text-align: right;
  }
  .price-unit { text-align: right; }
  .price-amount b { font-size: 40px; }
  .price-note { grid-column: 1 / -1; margin-top: 8px; font-size: 12.5px; }
  .price-foot { font-size: var(--fs-min); gap: 6px 10px; }
  .door-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-help { grid-column: span 2; }
  .plan-grid { gap: 10px; }
  .plan-card { padding: 18px 16px 16px; }
  .plan-data { font-size: 30px; }
  .plan-price strong { font-size: 34px; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 14px 16px; }
  .filter-field-tags { grid-column: 1 / -1; }
  /* 结果计数与更新时间在手机上换行会碎成一列两三个字，改为上下两行 */
  .result-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .codes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .code-card:nth-child(4n) { border-right: 1px solid rgba(242, 240, 231, 0.16); }
  .code-card:nth-child(3n) { border-right: 0; }
  .code-number { font-size: 26px; }
  .state-ledger { grid-template-columns: 1fr; }
  .state-ledger.is-collapsed { max-height: 434px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .footer-meta p { text-align: left; }
  .concierge-contacts { grid-template-columns: 1fr; }
  .modal { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  .drawer { width: 100%; }
  .cart-item { grid-template-columns: auto 1fr auto; }
  .cart-item-term { grid-column: 2; grid-row: 2; }
  .cart-item-price { grid-row: 1; grid-column: 3; }
  .cart-item-remove { grid-row: 1; grid-column: 4; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* ---- 首屏折叠：三张价格卡改回 3 列横排 ----
     760px 那套单列「左标签 + 右金额」共 292.7px，把搜索框整个挤出 390×844 首屏
     （实测 #heroQuery bottom 885.8 / 视口 844）。改 3 列横排后高度降到 ~226px，
     省下的空间全部让给「左门标题 + 搜索框」。单格内部退回纵向 flex，
     不再继承 760px 的 1fr auto 两列栅格。 */
  .prices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }
  .price-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 10px 12px 0;
    border-bottom: 0;
  }
  .price-cell:last-child { padding-right: 0; }
  .price-cell + .price-cell {
    padding-left: 10px;
    border-left: 1px solid var(--line);
  }
  /* 三列下每格可用宽只有 ~100px，字号一律压到 11px 下限，靠字距与留白分层，
     不再靠 9.5/10px 的不可读小字（全站正文级文字下限 11px）。 */
  .price-kicker { grid-column: auto; grid-row: auto; font-size: var(--fs-min); letter-spacing: 0.08em; }
  .price-label { grid-column: auto; grid-row: auto; margin-top: 3px; font-size: var(--fs-min); letter-spacing: 0; }
  .price-amount {
    grid-column: auto;
    grid-row: auto;
    margin-top: 7px;
    align-self: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 3px;
  }
  .price-amount b { font-size: clamp(17px, 6vw, 22px); letter-spacing: -0.02em; }
  .price-unit { font-size: var(--fs-min); text-align: left; }
  /* 说明文字保留但截断到 3 行：不能 display:none，藏了价格就成了没有说明的裸数字 */
  .price-note {
    grid-column: auto;
    margin-top: 4px;
    font-size: var(--fs-min);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .price-foot { margin-top: 10px; font-size: var(--fs-min); gap: 4px 8px; }

  .door-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mini-plan { padding: 9px 9px 10px; }
  .mini-plan-data { font-size: 17px; }
  .mini-plan-price b { font-size: 19px; }
  /* 「共 $156 · 12 个月」这行不能藏：藏了价格就成了没有周期的裸月费（12 个月价被当成 1 个月） */
  .mini-plan-note { display: block; font-size: var(--fs-min); line-height: 1.3; margin-top: 2px; }
  .mini-plan-badge { position: static; align-self: flex-start; margin-bottom: 3px; font-size: var(--fs-min); padding: 2px 6px; max-width: 100%; }
  /* 手机端搜索改成输入、按钮两行：一行时输入框只剩 128px，占位文字被裁掉 */
  .door-search {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }
  .door-search-ico { display: none; }
  /* 竖排后 flex:1 的 basis 变成 0，会盖掉 height；先关掉 flex 才能把输入框撑到 44 */
  .door-search input { flex: none; height: 44px; padding: 0 4px; }
  .door-search-btn { width: 100%; height: 46px; }
  .number-grid { grid-template-columns: 1fr; }
  .plans .plan-grid { grid-template-columns: 1fr; }
  .plan-tagline { min-height: 0; }
  .plan-includes { gap: 6px; }
  .codes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .code-card:nth-child(3n) { border-right: 1px solid rgba(242, 240, 231, 0.16); }
  .code-card:nth-child(2n) { border-right: 0; }
  .seg[aria-label="Language"] { display: none; }
  .mobile-tools .seg[aria-label="Language"] { display: inline-flex; }
  .cart-fab { width: 50px; height: 50px; padding: 0; justify-content: center; border-radius: 50%; }
  .cart-fab-text { display: none; }
  .cart-fab-count { position: absolute; top: -3px; right: -3px; }
  .plan-free-form { grid-template-columns: 1fr 92px; }
  .plan-free-form .btn { grid-column: 1 / -1; }
  .detail-facts { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .entry-title { font-size: 31px; }
  /* 360 宽时「替你被记住。」会被拆成「替你被 / 记住」，整句换行更稳 */
  .entry-title .accent { display: block; margin-left: 0; }
  .price-amount b { font-size: 34px; }
  .price-cell { padding: 12px 2px; }
  .price-note { margin-top: 6px; font-size: 12px; }
  .entry-head { margin-bottom: 2px; }
  .door { padding: 16px 14px; }

  /* ---- 360×780 也要让搜索框进首屏 ----
     390×844 靠 3 列价格卡已经够（817 < 844），360×780 还差 37px，
     这里只做「不丢内容」的收边：字号一档都不降，压的是行距与留白。 */
  .entry { padding-top: 14px; }
  .lede { line-height: 1.6; }
  .price-cell { padding: 10px 2px; }
  .price-amount { margin-top: 5px; }
  .price-foot { margin-top: 6px; line-height: 1.3; }
  .doors { margin-top: 16px; }
}

/* 触屏设备（含 iPad Pro 1024/1366）的输入框一律 16px，避免 iOS 聚焦放大页面；
   只按宽度判断会漏掉所有 900px 以上的平板 */
@media (pointer: coarse) {
  .door-search input,
  .filter-field input,
  .filter-field .select-wrap select,
  .field input,
  .field select,
  .field textarea { font-size: 16px; }
}

@media (hover: none) {
  .num-card:hover, .plan-card:hover { transform: none; box-shadow: none; }
  .mini-plan:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .num-card { animation: none; }
  .plan-skeleton, .mini-skeleton, .sk-line { animation: none; }
}

/* iPad 横放 1024-1079 掉到两列（465px 卡宽），三列更合适；1181 起才是四列。
   放在最后以覆盖上面 1079.98 的两列规则。 */
@media (min-width: 1024px) and (max-width: 1079.98px) {
  .plans .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 价目条 v2（仅桌面；手机沿用上面的单列堆叠）
   三个数原来没在同一条基线上：现在标签单行 / 数字固定 65 行高 / 约束钉在底部，
   三格的脚落在同一个 y 上，读起来是一张价目单，而不是三张各自为政的卡。 */
@media (min-width: 761px) {
  .price-cell {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 65px 1fr;
    row-gap: 0;
    padding: 20px 26px 22px 0;
    align-items: start;
  }
  .price-cell + .price-cell { padding-left: 26px; }
  .price-kicker { display: flex; align-items: center; gap: 7px; grid-row: 1; font-size: var(--fs-min); line-height: 1.4; }
  .price-kicker::before { content: ''; width: 10px; height: 1px; flex: none; background: var(--line-strong); }
  .price-label { grid-row: 2; margin-top: 7px; font-size: 14px; line-height: 1.5; white-space: nowrap; }
  .price-amount { grid-row: 3; align-items: flex-start; gap: 6px; margin-top: 0; line-height: 1; }
  .price-amount b { font-size: clamp(40px, 3.8vw, 52px); line-height: 65px; letter-spacing: -0.03em; }
  .price-unit { align-self: flex-end; padding-bottom: 9px; font-size: 12px; font-weight: 400; }
  .price-note {
    grid-row: 4;
    /* 必须 start：end 会把三格小字按各自高度贴底，761–900 宽下小字换行数不同，
       三格的点线就会差 20px，价目单立刻散掉 */
    align-self: start;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px dotted rgba(20, 26, 22, 0.24);
    font-size: 12.5px;
    line-height: 1.6;
  }
}


/* ===========================================================================
   手机筛选区：常驻 → 「筛选 · N」开关 + 展开面板
   现状 #filterBar 在 ≤560 高 260.9px（占 390×844 视口 30.9%、360×640 的 40.8%），
   收起后只剩 44px，省下约 217px 全部让给号码列表。
   桌面 ≥561px 时 .filter-toggle 为 display:none，版式与改版前完全一致。
   =========================================================================== */
.filter-toggle { display: none; }

@media (max-width: 560px) {
  /* 收起态：整条只留开关本身，不留外框，避免「一个框里只有一个按钮」的空洞感 */
  .filter-bar {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  /* :not(.is-open) 用子选择器把其余字段藏起来；展开时它们各自恢复原本的 display，
     所以这里绝不能写 display: revert（那会退回 UA 的 block，把 .filter-field 的
     flex 竖排打掉）。 */
  .filter-bar:not(.is-open) > *:not(.filter-toggle) { display: none; }

  .filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--card);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
  }
  .filter-toggle-label { flex: none; }
  .filter-toggle-count {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: -2px;
    border-radius: 100px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--fs-min);
    font-weight: 500;
  }
  /* 展开箭头是方向指示不是强调，用中性灰；展开时翻转 180° */
  .filter-toggle-ico {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--muted);
    transition: transform 0.2s var(--ease);
  }
  .filter-bar.is-open .filter-toggle-ico { transform: rotate(180deg); }

  /* 展开态：回到 2 列栅格，与外框一致 */
  .filter-bar.is-open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
  }
  .filter-bar.is-open .filter-toggle { grid-column: 1 / -1; }
  .filter-bar.is-open .filter-field-tags { grid-column: 1 / -1; }
}

/* 移动端菜单展开时锁住背景滚动（只在小屏生效：≥901px 菜单本身不可见） */
@media (max-width: 900px) {
  body.menu-open { overflow: hidden; }
}

/* ------------- 宽屏矮视口：把搜索框压回首屏（1280×800 / 1366×768） -------------
   只在「宽 ≥900 且高 ≤870」时生效，1440×900 及以上不受影响。
   纯垂直收边，不改字号与色板；整块删除即可完整回退。
   省下 1024×768 约 61px、1280×800 约 89px。                                  */
@media (min-width: 900px) and (max-height: 870px) {
  .entry { padding-top: 24px; }
  .prices { margin-top: 22px; }
  .price-cell { padding-top: 16px; padding-bottom: 18px; }
  .price-foot { margin-top: 10px; }
  .doors { margin-top: 26px; }
}