/* ============================================================
   铁亿福利 · 汽车特惠 H5
   移动端优先 · 浅色蓝白品牌调（#F4F9FD / #1E6FB8）
   ============================================================ */
:root {
  --bg: #F4F9FD;
  --bg-soft: #EAF3FC;
  --card: #FFFFFF;
  --primary: #1E6FB8;
  --primary-d: #0B457F;
  --primary-l: #E4EFFC;
  --primary-ll: #F2F8FE;
  --text: #17293B;
  --text-2: #536B82;
  --text-3: #8CA3B8;
  --accent: #F26430;
  --accent-l: #FFF1EA;
  --line: #E4EEF8;
  --radius: 18px;
  --radius-s: 12px;
  --shadow: 0 6px 22px rgba(30, 111, 184, .09);
  --shadow-s: 0 2px 10px rgba(30, 111, 184, .07);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: calc(76px + var(--safe-b));
  overflow-x: hidden;
}
body.no-callbar { padding-bottom: 24px; }

img { display: block; max-width: 100%; border: 0; }
a { text-decoration: none; color: inherit; }

.wrap { width: 100%; max-width: 660px; margin: 0 auto; padding: 0 14px; }

/* ---------------- 顶部栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.topbar.scrolled { border-bottom-color: var(--line); box-shadow: 0 2px 14px rgba(30,111,184,.06); }
.topbar-inner { display: flex; align-items: center; gap: 10px; height: 54px; }
.tb-back {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-l); color: var(--primary-d); font-size: 17px;
}
.tb-back:active { transform: scale(.94); }
.tb-title { font-size: 17px; font-weight: 700; color: var(--primary-d); letter-spacing: .5px; }
.tb-sub { font-size: 12px; color: var(--text-3); margin-top: -2px; }
.tb-brand {
  margin-left: auto; font-size: 12px; color: var(--primary);
  background: var(--primary-ll); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px; font-weight: 600;
}

/* ---------------- Hero（海报式：插画铺底 + 文字叠放） ---------------- */
/* 蓝白调横向轮播条幅：2.1:1 —— 390 视口下高 172px（常见移动端轮播图高度）
   构图左文右图，故文字区靠左、蒙版走横向白渐变 */
.hero {
  position: relative; overflow: hidden; line-height: 0;
  margin: 13px 0 0; border-radius: var(--radius);
  background: linear-gradient(150deg, #E9F3FD, #F8FCFF);
  border: 1px solid #D7E8F8;
  box-shadow: var(--shadow);
}
.hero-bg { display: block; width: 100%; height: auto; }
/* 左侧留白蒙版：提亮文字区，保证深蓝标题在浅蓝天空上清晰 */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.46) 30%,
    rgba(255,255,255,.12) 54%, rgba(255,255,255,0) 72%);
}
.hero-inner {
  position: absolute; inset: 0; line-height: 1.5;
  display: flex; flex-direction: column; justify-content: center;
  padding: 12px 16px;
}
.hero-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--primary-d);
  background: rgba(255,255,255,.94); border: 1px solid rgba(30,111,184,.16);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
  box-shadow: 0 3px 10px rgba(30, 111, 184, .16);
}
.hero h1 {
  font-size: 21px; line-height: 1.28; font-weight: 800;
  color: #0B457F; letter-spacing: .2px; max-width: 66%;
  text-shadow: 0 2px 14px rgba(255,255,255,.96), 0 1px 3px rgba(255,255,255,.94);
}
.hero h1 em { font-style: normal; color: #1E7FD6; }
.hero p {
  font-size: 11.5px; font-weight: 600; color: #3E5C7A; margin-top: 5px; max-width: 68%;
  text-shadow: 0 1px 10px rgba(255,255,255,.96), 0 1px 2px rgba(255,255,255,.96);
}

/* 协议汽车厂商 */
.brand-strip { margin: 15px 2px 0; }
.brand-strip img { height: 24px; width: auto; }

/* 数据条 .stat-row / .stat 已移除（首页不再展示三个数据胶囊） */

/* ---------------- 通用区块 ---------------- */
.sec-head { display: flex; align-items: center; gap: 9px; margin: 26px 2px 12px; }
.sec-head .bar { width: 4px; height: 17px; border-radius: 3px; background: linear-gradient(180deg, var(--primary), #5AA0DE); flex: none; }
.sec-head h2 { font-size: 18px; font-weight: 800; color: var(--primary-d); letter-spacing: .3px; }
.sec-head .note { margin-left: auto; font-size: 12px; color: var(--text-3); }

/* ---------------- 品牌分组卡片 ---------------- */
.group {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid #EDF4FB;
  padding: 16px 15px 15px; margin-bottom: 14px;
}
.group-head { display: flex; align-items: center; gap: 11px; }
.g-logo {
  width: 46px; height: 46px; flex: none; border-radius: 14px;
  background: var(--primary-ll); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; padding: 7px;
}
.g-logo img { width: 100%; height: 100%; object-fit: contain; }
.g-name { font-size: 17px; font-weight: 800; color: var(--text); }
.g-en { font-size: 11px; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; }
.g-badge {
  margin-left: auto; flex: none; white-space: nowrap;
  background: var(--accent-l); color: var(--accent);
  border: 1px solid #FFDCCB; border-radius: 10px;
  padding: 5px 8px; font-size: 10.5px; font-weight: 700; line-height: 1.25;
}
.g-badge b { font-size: 13px; font-weight: 800; margin-right: 2px; }

/* 品牌筛选条 */
.filterbar {
  position: sticky; top: 54px; z-index: 40;
  background: rgba(244, 249, 253, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  margin: 18px -14px 0; padding: 10px 0;
}
.filter-inner { padding: 0 14px; }
.filter-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px 0 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--text-2);
  font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all .18s; box-shadow: var(--shadow-s);
}
.chip:active { transform: scale(.96); }
.chip .c-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 6px; }
.chip .c-all {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-l); color: var(--primary-d); font-size: 12px; font-weight: 800;
}
.chip.active {
  background: linear-gradient(135deg, var(--primary), #2A85D6);
  color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(30, 111, 184, .28);
}
.chip.active .c-all { background: rgba(255, 255, 255, .25); color: #fff; }
.chip.active .c-logo { background: #fff; padding: 2px; }

/* 品牌卡片内的优惠力度 + 热门车型 */
.group.is-hidden { display: none; }
.g-meta { min-width: 0; flex: 1; }
.g-offer {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 12px;
  padding: 8px 11px; border-radius: 10px;
  background: var(--accent-l); border: 1px solid #FFDCCB;
  font-size: 13px; font-weight: 700; color: var(--accent); line-height: 1.45;
}
.g-offer .go-tag {
  flex: none; font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #F2864F, var(--accent));
  padding: 2px 8px; border-radius: 999px; letter-spacing: .3px; margin-top: 2px;
}
.hot-head { display: flex; align-items: baseline; gap: 8px; margin: 15px 2px 11px; }
.hot-head > span:first-child { font-size: 15px; font-weight: 800; color: var(--primary-d); }
.hot-head .note { margin-left: auto; font-size: 12px; color: var(--text-3); }
.group .model-grid { gap: 9px; }
.group .model { background: #fff; border-color: var(--line); }
.group .model .m-imgwrap { background: linear-gradient(135deg, #EAF3FC, #D2E4F4); }
.group .btn-ghost { margin-top: 13px; }

/* 次级按钮 */
.btn-ghost {
  background: var(--primary-ll); color: var(--primary-d);
  border: 1px solid #D5E7F8; box-shadow: none;
}
.btn-ghost:active { transform: translateY(1px); background: var(--primary-l); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; border-radius: 999px; font-size: 15.5px; font-weight: 700;
  cursor: pointer; border: 0; width: 100%;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), #2A85D6);
  color: #fff; box-shadow: 0 6px 16px rgba(30,111,184,.28);
}
.btn-primary:active { transform: translateY(1px); opacity: .92; }
.group .btn { margin-top: 13px; }

/* ---------------- 详情页 Hero ---------------- */
.d-hero {
  margin-top: 14px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(150deg, #0B457F 0%, #1E6FB8 60%, #2E86D4 100%);
  color: #fff; padding: 22px 20px 24px; position: relative;
  box-shadow: 0 10px 26px rgba(11,69,127,.22);
}
.d-hero::after {
  content: ""; position: absolute; right: -40px; bottom: -60px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
}
.d-name { font-size: 24px; font-weight: 800; letter-spacing: .5px; position: relative; z-index: 1; }
.d-en { font-size: 12px; letter-spacing: 2px; opacity: .75; text-transform: uppercase; margin-top: 2px; }
.d-offer {
  display: inline-block; margin-top: 14px; position: relative; z-index: 1;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px; padding: 9px 13px; font-size: 15px; font-weight: 700;
}
.d-offer b { color: #FFD79A; font-size: 18px; }
.d-hero p { font-size: 13px; opacity: .88; margin-top: 11px; position: relative; z-index: 1; }
/* 活动时间：直接叠在轮播图里，用一条细分割线与上文隔开 */
.d-hero .d-time {
  position: relative; z-index: 1; margin-top: 13px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 12.5px; line-height: 1.5; opacity: .95;
}
.d-hero .d-time .dt-k {
  display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 6px;
  background: rgba(255,255,255,.18); font-size: 11.5px; letter-spacing: .3px;
}

/* ---------------- 卡片 & 列表 ---------------- */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid #EDF4FB;
  padding: 16px 15px; margin-bottom: 14px;
}
/* .kv 活动信息卡片样式已移除：活动时间改放轮播图，覆盖品牌等说明性文字不再展示 */

.offer { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.offer:last-child { border-bottom: 0; padding-bottom: 0; }
.offer:first-child { padding-top: 2px; }
.offer .dot {
  flex: none; margin-top: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px var(--primary-l);
}
.offer .o-brand { font-size: 14.5px; font-weight: 800; color: var(--primary-d); }
.offer .o-txt { font-size: 13.5px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.offer .o-txt b { color: var(--accent); font-weight: 800; }
/* 政策脚注（适用/排除范围），比正文更小更淡 */
.offer .o-fn { display: block; margin-top: 3px; font-size: 12px; color: var(--text-3); line-height: 1.45; }

/* 专属政策 + 对应车型：按子品牌穿插 */
/* 每个子品牌一张卡片，政策在上、该子品牌车型网格在下，视觉上成一体 */
.offer-block { padding-bottom: 14px; }
.offer-block .o-models {
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed #D6E6F5;
}
.offer-block .o-mtitle {
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
  margin-bottom: 9px; letter-spacing: .2px;
}

/* 车型卡片 */
/* 列数写死而不是用 minmax(160px,1fr) 自适应：
   2×160 + 间距 = 约 330px 是临界值，而 360px 机型减掉 .wrap(14px×2)
   只剩 332px，详情页的 .card 再吃掉 15px×2 只剩 302px —— 于是直接掉成 1 列。
   改成固定列数后，320 的老机型也稳定是 2 列。 */
.model-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 520px) { .model-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .model-grid { grid-template-columns: repeat(4, 1fr); } }
.model {
  background: var(--primary-ll); border: 1px solid #E3EFFB; border-radius: var(--radius-s);
  padding: 0 0 11px; overflow: hidden;
  cursor: pointer;   /* 整卡可点 → 弹出购车咨询拨号面板 */
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-width: 0;      /* 防止长车型名（如 SU7Ultra / 第5代瑞虎8）把网格列撑宽 */
}
.model:active { transform: scale(.975); border-color: var(--primary); box-shadow: var(--shadow-s); }
/* 右上角电话角标：.m-imgwrap 是 line-height:0，这里必须重设行高才能居中 */
.model .m-call {
  position: absolute; right: 7px; top: 7px; display: block;
  width: 25px; height: 25px; line-height: 25px; text-align: center;
  border-radius: 50%; font-size: 13px; color: #fff;
  background: rgba(30, 111, 184, .92);
  box-shadow: 0 2px 7px rgba(20, 50, 90, .3);
}
.model .m-imgwrap { position: relative; margin: 0; line-height: 0; background: linear-gradient(135deg,#DCEBF8,#BFD9F1); }
.model .m-img { width: 100%; height: 104px; object-fit: cover; display: block; }
.model .m-img-ph {
  height: 104px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #9CC0E0; letter-spacing: 1px;
}
.model .m-name {
  font-size: 14.5px; font-weight: 800; color: var(--text); padding: 9px 12px 0;
  overflow-wrap: break-word; word-wrap: break-word;
}
.model .m-tag { font-size: 11.5px; color: var(--text-3); margin-top: 1px; min-height: 16px; padding: 0 12px; }
/* 配置范围备注（如「不含PHEV」「不含时尚版」）：比卖点标签更小更淡，紧贴其下 */
.model .m-note { font-size: 10.5px; color: var(--text-3); opacity: .82; margin-top: 3px; padding: 0 12px; line-height: 1.35; }
.model .m-price { font-size: 15px; font-weight: 800; color: var(--accent); margin-top: 5px; padding: 0 12px; }
.model .m-price small { font-size: 11px; font-weight: 600; color: var(--text-3); }

/* ---------------- 购车咨询 · 底部拨号弹层 ---------------- */
.dial-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;   /* inset 在老内核不支持，必须四边都写 */
  background: rgba(12, 26, 44, .45); z-index: 90; display: none;
}
.dial-mask.show { display: block; }
.dial-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 6px 18px 16px;                       /* 兜底，老内核不支持 calc+env 时用它 */
  padding-bottom: calc(16px + var(--safe-b));
  box-shadow: 0 -6px 26px rgba(12, 30, 55, .18);
  animation: dialUp .22s ease;
}
@keyframes dialUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.dial-grab { width: 36px; height: 4px; border-radius: 2px; background: #DCE7F2; margin: 0 auto 14px; }
.dial-head { text-align: center; margin-bottom: 14px; }
.dial-title { font-size: 16.5px; font-weight: 800; color: var(--text); }
.dial-model { font-size: 13px; color: var(--primary); font-weight: 700; margin-top: 4px; }
.dial-person {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft); border-radius: var(--radius-s);
  padding: 13px 14px; margin-bottom: 14px;
}
.dial-person .dp-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.dial-person .dp-name { font-size: 16px; font-weight: 800; color: var(--text); }
.dial-person .dp-role { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.dial-person .dp-tel { font-size: 19px; font-weight: 800; color: var(--primary); margin-top: 3px; letter-spacing: .5px; }
.dial-sheet .dial-go { display: block; width: 100%; text-align: center; font-size: 16px; padding: 13px 0; }
.dial-copy, .dial-cancel {
  display: block; width: 100%; background: none; border: none; font-family: var(--font);
  font-size: 14px; color: var(--text-2); padding: 12px 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dial-cancel { color: var(--text-3); border-top: 1px solid var(--line); margin-top: 2px; }

/* 步骤 */
.steps { counter-reset: s; }
.step { display: flex; gap: 11px; padding: 8px 0; position: relative; }
.step .n {
  flex: none; width: 24px; height: 24px; border-radius: 50%; counter-increment: s;
  background: var(--primary-l); color: var(--primary-d); font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.step .n::before { content: counter(s); }
.step .t { font-size: 14px; color: var(--text-2); padding-top: 1px; }
.step .t b { color: var(--text); }

/* 流程里附带的二维码（如奇瑞「领取优惠券流程」：扫码进「瑞行优选」小程序） */
.qr-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #DCEBF8; text-align: center; }
.qr-img {
  display: block; width: 200px; max-width: 76%; height: auto; margin: 0 auto;
  border-radius: 12px; border: 1px solid #E3EFFB; box-shadow: var(--shadow-s);
}
.qr-cap { font-size: 12px; color: var(--text-3); margin-top: 9px; line-height: 1.6; }
.qr-cap b { color: var(--primary-d); }

/* 联系方式 */
.contact {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: #FBFDFF; margin-bottom: 9px;
}
.contact:last-child { margin-bottom: 0; }
.contact:active { background: var(--primary-ll); }
.c-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--primary-l); color: var(--primary-d);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.c-body { flex: 1; min-width: 0; }
.c-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.c-role { font-size: 11.5px; color: var(--text-3); }
.c-tel { font-size: 16px; font-weight: 800; color: var(--primary); letter-spacing: .3px; }
.c-go {
  flex: none; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), #2A85D6);
  padding: 7px 13px; border-radius: 999px;
}

/* 原版海报折叠 */
.poster { background: var(--card); border-radius: var(--radius); border: 1px solid #EDF4FB; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px; }
.poster > summary {
  list-style: none; cursor: pointer; padding: 15px 15px;
  display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: var(--primary-d);
}
.poster > summary::-webkit-details-marker { display: none; }
.poster > summary .ico { width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--primary), #5AA0DE); }
.poster > summary .arrow { margin-left: auto; color: var(--text-3); transition: transform .25s; font-size: 12px; }
.poster[open] > summary .arrow { transform: rotate(90deg); }
.poster[open] > summary { border-bottom: 1px solid var(--line); }
.poster-imgs { background: #F0F5FA; }
.poster-imgs img { width: 100%; height: auto; }

/* ---------------- 底部拨号栏 ---------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + var(--safe-b));
  box-shadow: 0 -6px 20px rgba(30,111,184,.08);
}
.callbar-inner { max-width: 660px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.callbar .cb-text { flex: 1; min-width: 0; }
.callbar .cb-text .l1 { font-size: 11.5px; color: var(--text-3); }
.callbar .cb-text .l2 { font-size: 15px; font-weight: 800; color: var(--primary-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.callbar .btn { width: auto; padding: 0 22px; height: 46px; flex: none; }

/* ---------------- 页脚 ---------------- */
.foot { text-align: center; padding: 22px 16px 8px; }
.foot .f-logo { font-size: 13px; font-weight: 800; color: var(--primary); letter-spacing: .5px; }
.foot p { font-size: 11.5px; color: var(--text-3); margin-top: 7px; line-height: 1.7; }

/* 返回顶部 */
.to-top {
  position: fixed; right: 16px; bottom: calc(88px + var(--safe-b)); z-index: 55;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.95); color: var(--primary); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-s); opacity: 0; pointer-events: none; transition: opacity .25s;
}
.to-top.show { opacity: 1; pointer-events: auto; }

.notice { background: var(--primary-ll); border: 1px solid #E3EFFB; border-radius: var(--radius-s); padding: 12px 13px; font-size: 12.5px; color: var(--text-2); line-height: 1.7; }
.notice b { color: var(--primary-d); }

@media (min-width: 700px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 13px; }
  .hero-inner { padding: 14px 20px; }
}

/* 窄屏（≤374，如 360 机型）：优惠胶囊要与品牌名同处一行，徽章与间距略缩，
   否则单行胶囊变宽会把品牌名挤成两行。注意：媒体查询按「由宽到窄」排列，
   本块必须放在下面的 ≤359 块之前，窄屏块才能覆盖它 */
@media (max-width: 374px) {
  .group-head { gap: 8px; }
  .g-badge { font-size: 10px; padding: 5px 7px; }
  .g-badge b { font-size: 12px; margin-right: 1px; }
}

/* 窄屏（≤360，如 320 老机型）：条幅只有约 139px 高，叠字必须同步缩 */
@media (max-width: 359px) {
  .hero h1 { font-size: 19px; }
  .hero p { font-size: 10.5px; }
  .hero-tag { font-size: 10.5px; padding: 2px 9px; margin-bottom: 6px; }
  .hero-inner { padding: 10px 13px; }
  /* 320 机型下强制 2 列后单卡只有约 126px，图高与字号要同步缩，否则车型名会挤成 3 行 */
  .model-grid { gap: 8px; }
  .model .m-img, .model .m-img-ph { height: 88px; }
  .model .m-img-ph { font-size: 18px; }
  .model .m-name { font-size: 12.5px; padding: 8px 9px 0; }
  /* 320 下标签常折成 2 行，给它留固定 2 行高度，同一行两张卡的价格才不会错位 */
  .model .m-tag { font-size: 10.5px; padding: 0 9px; line-height: 1.4; min-height: 30px; }
  .model .m-note { font-size: 9.5px; padding: 0 9px; margin-top: 2px; }
  .model .m-price { font-size: 13px; margin-top: 4px; padding: 0 9px; }
  .model .m-call { width: 22px; height: 22px; line-height: 22px; font-size: 11px; right: 5px; top: 5px; }
  /* 320 下品牌卡更挤：logo/胶囊/品牌名一起缩，保证优惠胶囊单行时品牌名不被挤折 */
  .group-head { gap: 7px; }
  .g-logo { width: 38px; height: 38px; border-radius: 12px; padding: 6px; }
  .g-name { font-size: 15px; }
  .g-en { font-size: 10px; letter-spacing: .5px; }
  .g-badge { font-size: 9px; padding: 4px 5px; }
  .g-badge b { font-size: 11px; margin-right: 1px; }
}