/* 鹿修优达 v3 设计系统 — 依据 开发交接规格.md (B站橙色风格) */
:root{
  --brand:#EC5A24; --brand-deep:#C6491A;
  --ink:#1F2A36; --ink-2:#3a4654; --dark:#2C3947; --dark-2:#232E3C;
  --gray:#6b7884; --gray-2:#9aa3ad; --warm:#9b8c7e; --warm-2:#a99a8c;
  --bg-warm:#FBF6F1; --bg-chip:#FDEEE4;
  --line:#EDE4DB; --line-2:#F0ECE8; --line-3:#F6F0E8;
  --green:#1E9E5A; --green-bg:#EAF6EF; --blue:#2A6FDB; --purple:#7A4FC2;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','HarmonyOS Sans SC','Source Han Sans SC','Noto Sans SC','Microsoft YaHei','Hiragino Sans GB',sans-serif;
  -webkit-font-smoothing:antialiased;font-size:14.5px;line-height:1.7}
a{text-decoration:none;color:inherit}
/* 正文里自家号码自动转的 tel: 链接(tpl.py tel_autolink): 全局 a 是 inherit, 不高亮就看不出可点 */
a.tel-auto{color:var(--brand);font-weight:700}
/* 数字等宽: 电话/价格/统计数逐位对齐, 不等宽时同列数字会左右跳 */
.topbar b.tel,a.tel-auto,.price,.price-table td.p,.hero-stats .v,.statwall .num,.site-footer .tel{font-variant-numeric:tabular-nums}
/* 键盘焦点态(原来整站没有, Tab 走一遍看不出光标在哪) */
a:focus-visible,button:focus-visible,.cat-tab:focus-visible,.cph-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ===== 顶条 ===== */
.topbar{background:var(--dark);color:#cdd6df;font-size:13.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.topbar .hotline{flex:none;white-space:nowrap}   /* 400号码断行最难看, 宁可挤左边标语 */
.topbar .slogan{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3fc77a;margin-right:7px;vertical-align:1px}
.topbar b.tel{font-size:19px;font-weight:700;color:#F26A2C;letter-spacing:.02em}

/* ===== Header ===== */
.site-header{background:#fff;border-bottom:1px solid var(--line-2)}
.site-header .wrap{display:flex;align-items:center;gap:24px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo .mark{width:44px;height:44px;border-radius:11px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;line-height:1}
.logo .word{font-size:23px;font-weight:700;color:var(--ink);letter-spacing:.03em}
.main-nav{flex:1;display:flex;justify-content:center;align-items:center;gap:10px;font-size:16px}
/* 0918 当前页从橙色下划线改底色块: 中文有下伸笔画(贝/维/服), 下划线会压到字。
   gap 36→10 是因为每项自带 13px 左右内边距, 视觉间距仍是 36。 */
.main-nav a{color:var(--ink-2);padding:8px 13px;border-radius:7px;line-height:1}
.main-nav a:hover{background:var(--bg-chip);color:var(--brand-deep)}
.main-nav a.on{background:var(--bg-chip);color:var(--brand-deep);font-weight:700}
.city-pick{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 15px;border:1px solid #E2E2E2;border-radius:8px;color:var(--ink-2);font-size:14.5px}
.nav-toggle{display:none;flex:none;width:40px;height:40px;border:1px solid #E2E2E2;border-radius:8px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink-2);border-radius:2px;transition:.2s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 城市识别条(设计稿橙底, JS注入) */
.geobar{background:var(--brand);color:#fff}
.geobar .wrap{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:12px;padding-bottom:12px;font-size:14.5px;flex-wrap:wrap}
.geobar .go{display:inline-flex;align-items:center;height:32px;padding:0 18px;background:#fff;color:#D44E1C;border-radius:6px;font-size:14px;font-weight:700}
.geobar .sw{color:#fff;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.geobar .x{background:none;border:0;color:rgba(255,255,255,.8);font-size:18px;cursor:pointer;padding:0 4px}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:700;cursor:pointer;border:0}
.btn-primary{background:var(--brand);color:#fff;height:50px;padding:0 28px;font-size:16.5px;box-shadow:0 8px 18px rgba(236,90,36,.26)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);height:50px;padding:0 26px;font-size:16.5px;font-weight:500}
.btn-ghost:hover{border-color:var(--ink)}
.btn-outline{background:#fff;color:var(--brand);border:1.5px solid var(--brand);height:46px;padding:0 26px;font-size:15.5px}
.btn-dark-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.38);height:54px;padding:0 28px;font-size:16.5px;font-weight:600}

/* ===== 通用板块 ===== */
.section{padding:60px 0}
.section.warm{background:var(--bg-warm);border-top:1px solid #F2EAE2}
.sec-head{margin-bottom:32px}
.sec-head.center{text-align:center}
.sec-head h2{margin:0 0 10px;font-size:30px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.sec-head p{margin:0;font-size:15px;color:var(--gray-2)}
.sec-head .more{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--brand-deep);font-weight:700}
.sec-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.g8{grid-template-columns:repeat(8,1fr)}

/* 主栏+侧栏双栏(M端并为单栏, 侧栏排后) */
.with-side{display:grid;grid-template-columns:1fr 300px;gap:28px;padding:24px 0 50px}
.with-side.w340{grid-template-columns:1fr 340px;gap:32px}

.card{background:#fff;border:1px solid #ECE3DA;border-radius:16px;padding:24px;display:flex;flex-direction:column}
.card .icon{width:50px;height:50px;border-radius:13px;background:var(--bg-chip);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .t{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:7px}
.card .d{font-size:13.5px;line-height:1.7;color:#7a8896}
.card.warm-bg{background:var(--bg-warm);border-color:#F2EAE2;border-radius:14px}
/* 服务项小卡(图+名+价 一行) */
.card.sku-mini{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
.card.sku-mini img{width:52px;height:52px;object-fit:cover;border-radius:10px;border:1px solid #F2EAE2;flex:none}
.card.sku-mini .nm{font-size:14.5px;font-weight:600;flex:1;min-width:0}
.card.sku-mini .price{flex:none;white-space:nowrap}

/* 0918 标签提深: 原 #7a8896 在 --bg-warm 底上只有 3.38:1, 小字 AA 需 4.5:1,
   看着像"不可点的禁用态"; 换 --ink-2 是 8.95:1, 且不新增色值。
   字号 12.5→13: 12.5px 本身也是"显得灰"的一半原因。*/
.chip{display:inline-block;font-size:13px;color:var(--ink-2);background:var(--bg-warm);border:1px solid var(--line);padding:5px 11px;border-radius:7px}
a.chip:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--paper,#fff)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.tag-green{display:inline-block;font-size:11px;font-weight:700;color:var(--green);background:#E7F4EC;padding:3px 9px;border-radius:6px}
.tag-orange{display:inline-block;font-size:11px;font-weight:700;color:var(--brand-deep);background:var(--bg-chip);padding:3px 9px;border-radius:6px}
.price{font-weight:700;color:var(--brand-deep)}
.price .qi{font-size:11px;color:var(--gray-2);font-weight:400}

/* ===== 面包屑(定位感: 频道徽标+可点路径+当前页加粗) ===== */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-size:13.5px;color:var(--gray-2);padding:14px 0 10px}
.crumbs a{color:var(--gray);padding:2px 4px;border-radius:5px}
.crumbs a:hover{color:var(--brand-deep);background:var(--bg-warm)}
.crumbs .sep{margin:0 4px;color:#c9c2ba}
.crumbs .here{color:var(--ink);font-weight:700}
.chan{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;margin-right:10px;flex:none}
.chan-fuwu{background:var(--bg-chip);color:var(--brand-deep)}
.chan-baike{background:#F3EBFF;color:var(--purple)}
.chan-wenda{background:#E8F0FE;color:var(--blue)}
.chan-city{background:var(--green-bg);color:var(--green)}
.back-up{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--gray);margin-top:8px}
.back-up:hover{color:var(--brand-deep)}

/* ===== 一句话回答卡(speakable) ===== */
.answer-card{background:linear-gradient(135deg,#FBEEE2,#FFF6EE);border:1px solid #F3DDC9;border-left:4px solid var(--brand);border-radius:12px;padding:20px 22px;margin:18px 0}
.answer-card .badge{display:inline-block;font-size:11.5px;font-weight:700;color:#fff;background:var(--brand);padding:3px 10px;border-radius:999px;margin-bottom:10px}
.answer-card p{margin:0 0 12px;font-size:15px;line-height:1.8;color:var(--ink-2)}
.answer-card p b{color:var(--brand-deep);font-weight:700}
.answer-card .tel-cta{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 18px;background:var(--brand);color:#fff;border-radius:8px;font-size:14px;font-weight:700}

/* ===== 权威信号条 ===== */
.authority{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--bg-warm);border:1px solid #F2EAE2;border-radius:10px;font-size:12.5px;color:var(--gray);flex-wrap:wrap}
.authority .avatar{width:34px;height:34px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.authority b{color:var(--ink)}

/* ===== 价目表 ===== */
.price-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0}
.price-table th{background:var(--bg-warm);color:var(--ink-2);font-weight:700;text-align:left;padding:11px 14px;border:1px solid var(--line)}
.price-table td{padding:11px 14px;border:1px solid var(--line);color:var(--ink-2)}
.price-table td.p{font-weight:700;color:var(--brand-deep)}

/* ===== FAQ ===== */
.faq-item{border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:12px;background:#fff}
.faq-item h3{margin:0 0 8px;font-size:15.5px;font-weight:700;color:var(--ink)}
.faq-item p{margin:0;font-size:13.5px;line-height:1.75;color:var(--gray)}

/* ===== 列表行(hero侧卡/服务列表) ===== */
.svc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid #F4EDE6}
.svc-row:last-child{border-bottom:0}
.svc-row .n{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px}
.svc-row .d{font-size:12.5px;color:var(--gray-2)}
.svc-row .r{text-align:right;flex:none}

/* ===== 内链模块 ===== */
.linkbox{margin-top:28px}
.linkbox h2{font-size:19px;margin:0 0 14px}
.link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.link-grid.lg-3{grid-template-columns:repeat(3,1fr)}
.link-grid.lg-5{grid-template-columns:repeat(5,1fr)}
.link-grid.lg-6{grid-template-columns:repeat(6,1fr)}
.link-grid.lg-8{grid-template-columns:repeat(8,1fr)}
.link-grid a{display:block;text-align:center;padding:11px 6px;background:#fff;border:1px solid #F0E8E0;border-radius:8px;font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-grid a:hover{color:var(--brand-deep);border-color:#F3DDC9}

/* ===== 数据墙(只放真实聚合) ===== */
.statwall{display:flex;justify-content:center;align-items:flex-start;gap:56px;flex-wrap:wrap}
.statwall .item{text-align:center}
.statwall .num{font-size:36px;font-weight:700;color:var(--ink);line-height:1}
.statwall .num em{font-style:normal;font-size:19px;color:var(--brand)}
.statwall .lbl{font-size:14px;color:#7a8896;margin-top:8px}

/* ===== 表单 ===== */
.lead-form{background:#fff;border:1px solid #EFE3D8;border-radius:16px;padding:22px}
.lead-form .row{margin-bottom:14px}
.lead-form label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;height:44px;padding:0 13px;border:1px solid #E2D6CB;border-radius:9px;font-size:14.5px;color:var(--ink);background:#fff;font-family:inherit}
.lead-form textarea{height:88px;padding:10px 13px;resize:vertical}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--brand)}
/* 省市区三级 + 自动定位 */
.lead-form .geo-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.lead-form .geo-3 select{padding:0 8px;font-size:14px;min-width:0}
.lead-form .geo-3 select:disabled{color:#9aa3ad;background:#FAF7F4}
.lead-form .geo-locate{display:inline-flex;align-items:center;gap:4px;height:22px;margin-left:8px;padding:0 8px;border:1px solid #E2D6CB;border-radius:11px;background:#fff;color:var(--brand);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;vertical-align:middle}
.lead-form .geo-locate:hover{border-color:var(--brand);background:#FFF6F1}
.lead-form .geo-tip{margin-left:8px;font-size:12px;font-weight:400;color:#9aa3ad}
.lead-form .geo-tip.ok{color:#1E9E5A}
@media (max-width:420px){.lead-form .geo-3{grid-template-columns:1fr;gap:10px}}
/* 手机窄屏: 标语再减一段, 省得被截成"修..."这种半截话 */
@media (max-width:480px){.topbar .slogan .s2{display:none}}
/* 320 这种极窄屏连"全国服务热线"六个字都挤: 摘掉标签, 橙色大号码本身就说明是热线 */
@media (max-width:380px){.topbar .hotline .lb{display:none}}

/* ===== 文章正文 ===== */
.art-body{font-size:15px;line-height:1.9;color:#3a4654}
.art-body h2{font-size:20px;font-weight:700;color:var(--ink);margin:30px 0 12px}
.art-body h3{font-size:16.5px;font-weight:700;color:var(--ink);margin:22px 0 8px}
.art-body p{margin:0 0 14px}
/* 不要默认的黑圆点: 条目本身"清理灰尘:""放电:"这种加粗小标题已经在分段了,
   再顶个 disc 反而像机器吐的清单 */
.art-body ul,.art-body ol{list-style:none;margin:0 0 14px;padding:0}
.art-body li{position:relative;margin-bottom:9px;padding-left:15px}
.art-body li:before{content:'';position:absolute;left:0;top:14px;width:6px;height:1.5px;background:#D8C9BB}
.art-body li strong,.art-body li b{color:var(--ink)}
.art-body img{max-width:100%;height:auto;border-radius:10px}
.art-body table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.art-body th,.art-body td{border:1px solid #EFE3D8;padding:9px 12px;text-align:left}
.art-body th{background:var(--bg-warm);font-weight:700}

/* ===== 底部CTA带 ===== */
.cta-band{background:var(--dark);text-align:center;padding:50px 0}
.cta-band h2{margin:0 0 10px;font-size:30px;font-weight:700;color:#fff}
.cta-band p{margin:0 0 26px;font-size:15.5px;color:#a7b3bf}
.cta-band .btns{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.cta-band .tel-big{display:inline-flex;align-items:center;gap:9px;height:54px;padding:0 32px;background:var(--brand);color:#fff;border-radius:10px;font-size:18px;font-weight:700}

/* ===== 页脚 ===== */
.site-footer{background:var(--ink);color:#8b97a4}
.site-footer .cols{display:flex;gap:48px;flex-wrap:wrap;padding:44px 0 26px}
.site-footer .brand-col{flex:1;min-width:240px}
.site-footer .col{min-width:130px}
.site-footer .col .h{font-size:14px;font-weight:700;color:#d2dae2;margin-bottom:12px}
.site-footer .col a{display:block;color:#8b97a4;font-size:13.5px;margin-bottom:9px}
.site-footer .col.cities{flex:1;min-width:200px}
.site-footer .col.cities .links{display:flex;flex-wrap:wrap;gap:9px 16px}
.site-footer .col.cities a{display:inline;margin:0}
.site-footer .tel{font-size:22px;font-weight:700;color:#fff;margin-top:2px}
.site-footer .legal{border-top:1px solid #2c3845;padding:15px 0;font-size:12px;color:#647281;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ===== M端底部固定双按钮 ===== */
.m-bottom{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:10px}
.m-bottom a{flex:1;height:50px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;font-size:16px;font-weight:700}
.m-bottom .book{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.m-bottom .call{background:var(--brand);color:#fff;box-shadow:0 8px 18px rgba(236,90,36,.26)}

/* ===== HERO ===== */
.hero{background:linear-gradient(180deg,#FBF1E7 0%,#fff 70%);border-bottom:1px solid #F3EBE2}
.hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center;padding-top:52px;padding-bottom:56px}
.hero h1{margin:0 0 16px;font-size:44px;line-height:1.22;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.hero h1 .hl{color:var(--brand)}
/* H1 只留主标题(体检报 H1 过长); 副标题行 0918 降级: 原来跟 h1 同为 44px/800 还满行橙色, 两句话互抢主标题位 */
.hero .hl-line{margin:0 0 18px;font-size:26px;line-height:1.5;font-weight:600;color:var(--ink)}
.hero .sub{margin:0 0 28px;font-size:16.5px;line-height:1.7;color:#7a8896;max-width:500px}
.hero .pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #F0DBC8;border-radius:999px;padding:7px 14px;margin-bottom:20px;font-size:13px;font-weight:600;color:#7a6a5c}
.hero .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hero-stats{display:flex;align-items:flex-start}
.hero-stats .s{padding:0 22px}
.hero-stats .s:first-child{padding-left:0}
.hero-stats .s:last-child{padding-right:0}
.hero-stats .v{font-size:26px;font-weight:700;color:var(--ink);line-height:1;white-space:nowrap}
.hero-stats .v em{font-style:normal;font-size:15px;color:var(--brand)}
.hero-stats .k{font-size:12.5px;color:var(--gray-2);margin-top:6px;white-space:nowrap}
.hero-stats .div{width:1px;height:30px;background:#EADFD3;margin-top:4px}
.hero-side{background:#fff;border:1px solid #EFE3D8;border-radius:18px;box-shadow:0 24px 60px rgba(31,42,54,.1);padding:22px 22px 16px}

/* 页头(内页) */
.page-head{padding:34px 0 26px}
.page-head h1{margin:0 0 10px;font-size:34px;font-weight:700;color:var(--ink);line-height:1.3}
.page-head .sub{margin:0;font-size:15px;color:var(--gray)}
/* 服务详情头图: 源图统一 1200x800(3:2), 按 3:2 铺满不裁切 */
.sku-head{padding-top:10px;display:flex;align-items:center;gap:22px}
.sku-head .pic{width:210px;aspect-ratio:3/2;flex:none;object-fit:cover;border-radius:16px;border:1px solid #ECE3DA;background:var(--bg-warm)}
.sku-head > div{min-width:0}
.sku-head > h1{margin-bottom:0}   /* 直接子级=没副标题那版, 去掉底边距免得竖向偏心 */

/* 步骤条 */
.steps{display:flex}
.steps .st{flex:1;text-align:center;position:relative}
.steps .no{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid #EADFD5;color:#b6826a;font-size:21px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.steps .st.on .no{background:var(--brand);border-color:var(--brand);color:#fff}
.steps .t{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:5px}
.steps .d{font-size:13px;color:#7a8896}
.steps .st:not(:last-child):after{content:'';position:absolute;top:27px;left:63%;right:-37%;height:2px;background:#EDE3DA}

/* ===== M端断点 ===== */
@media (max-width:768px){
  body{padding-bottom:70px}
  .wrap{padding:0 16px}
  .topbar .wrap{font-size:12px}
  .topbar b.tel{font-size:16px}
  .topbar .slogan .s3{display:none}          /* 窄屏按"标语让位号码"逐级减字 */
  .main-nav{display:none}
  .nav-toggle{display:flex}
  .site-header.nav-open .main-nav{display:flex;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(31,42,54,.08);z-index:30}
  .site-header.nav-open .main-nav a{padding:14px 20px;border-bottom:1px solid var(--line-3);font-size:15px}
  .site-header.nav-open .main-nav a.on{border-bottom:1px solid var(--line-3);color:var(--brand)}
  .site-header{position:relative}
  .logo .mark{width:38px;height:38px;font-size:22px;border-radius:9px}
  .logo .word{font-size:19px}
  .section{padding:36px 0}
  .sec-head h2{font-size:19px}
  .sec-head p{font-size:13px}
  .hero .wrap{grid-template-columns:1fr;gap:24px;padding-top:28px;padding-bottom:30px}
  .hero h1{font-size:25px}
  .hero .hl-line{font-size:17px}
  .hero .sub{font-size:14px}
  .page-head h1{font-size:22px}
  /* 头图在窄屏别缩成小方块干杵着(右边一大片空白), 整条铺满 */
  .sku-head{display:block}
  .sku-head .pic{width:100%;margin-bottom:14px;border-radius:14px}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr 1fr}
  /* 图+名+价 三件套挤在半屏里, 名字会被压成一列一个字, 窄屏直接单列 */
  .grid.sku-row{grid-template-columns:1fr}
  .g6,.g8{grid-template-columns:repeat(3,1fr)}
  .link-grid,.link-grid.lg-3,.link-grid.lg-5,.link-grid.lg-6,.link-grid.lg-8{grid-template-columns:1fr 1fr}
  .with-side,.with-side.w340{grid-template-columns:1fr;gap:20px;padding:18px 0 36px}
  /* 0728 M端: 桌面右侧栏(本页目录/CTA卡)单列后沉底无用, 且CTA与底部固定条重复 */
  .with-side>aside{display:none}
  .price-table{font-size:12.5px}
  .price-table th,.price-table td{padding:9px 10px}
  .statwall{gap:24px}
  .statwall .num{font-size:26px}
  .hero-stats{flex-wrap:wrap;gap:16px 0}
  .hero-stats .s{flex-basis:50%;padding:0}
  .hero-stats .div{display:none}
  .hero-stats .v{font-size:24px}
  .cta-band h2{font-size:20px}
  .steps{flex-wrap:wrap;gap:18px 0}
  .steps .st{flex-basis:50%}
  .steps .st:after{display:none}
  .m-bottom{display:flex}
  .btn-primary,.btn-ghost{height:46px;font-size:15px}
  .site-footer .cols{gap:24px;padding:28px 0 18px}
}

/* 自诊估价工具(0709 产品件): 选症状→选情况→真实价区间+留号 */
.diag{background:#fff;border:1.5px solid #F0E3D8;border-radius:16px;padding:20px 22px;margin-top:26px}
.diag .dg-q{font-size:13.5px;font-weight:700;color:var(--ink-2);margin:14px 0 8px}
.diag .dg-opts{display:flex;flex-wrap:wrap;gap:8px}
.diag .dg-opt{font-size:13px;color:var(--ink-2);background:var(--bg-warm);border:1.5px solid #F2EAE2;padding:7px 14px;border-radius:9px;cursor:pointer;user-select:none}
.diag .dg-opt.on{background:#FDEFE8;border-color:var(--brand);color:var(--brand);font-weight:700}
.diag .dg-result{display:none;margin-top:16px;background:var(--bg-warm);border-radius:12px;padding:16px}
.diag .dg-result.show{display:block}
.diag .dg-form{display:flex;gap:10px;margin-top:12px}
.diag .dg-form input[name=phone]{flex:1;min-width:0;height:46px;padding:0 13px;border:1.5px solid #E2D6CB;border-radius:9px;font-size:14.5px;font-family:inherit}
.diag .dg-form input[name=phone]:focus{outline:none;border-color:var(--brand)}
.diag .dg-form button{flex:none}
.diag .dg-link{display:inline-block;margin-top:8px;font-size:13.5px;color:#2A6FDB}
@media (max-width:768px){.diag{padding:16px}.diag .dg-form{flex-direction:column}}
.answer-card .est-cta{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:13.5px;font-weight:700;color:var(--brand);border:1.5px solid var(--brand);border-radius:9px;padding:6px 13px;text-decoration:none}
@media (max-width:768px){.answer-card .est-cta{margin-left:0;margin-top:8px}}


/* ===== 分类面板 =====
   0918 把 _catpanel.html / _catpanel_h.html 里的行内样式收口到这里。
   原来 16 个 tab 每个都挂一长串行内 style, 改一处要改十六遍;
   描边 #F2EAE2 / #F0E8E0 / #F5F1EB 三档混用也是行内硬写绕过了 --line 变量。*/
/* 竖栏版(首页/百科首页/城市首页) */
.catp{display:flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:36px;min-height:430px}
.catp-nav{flex:none;width:170px;background:#FAF7F2;padding:8px 0}
.catp-body{flex:1;min-width:0;padding:16px 20px}
.cat-tab{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;border-left:3px solid transparent}
.cat-tab .n{font-size:11.5px;color:#b8c0c9}
.cat-tab:hover{background:#F6F1EA;color:var(--brand-deep)}
.cat-tab.on{background:#fff;border-left-color:var(--brand);color:var(--brand-deep);font-weight:700}
.cat-tab.on .n{color:var(--brand)}
.catp-head{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.catp-head h3{font-size:16px;margin:0}
.catp-head h3 a,.catp-head h3 .cur{color:var(--brand)}
.catp-head .note{font-size:12px;color:var(--ink-3,var(--gray-2))}
.catp-empty{font-size:13.5px;color:#7a8896}
.catp-empty a{color:var(--blue);font-weight:600}
/* 条目后缀(如「3篇」) 竖排横排共用 */
.ex{color:var(--brand);font-size:12px}

/* 横排版(维修问答/维修知识首页 + 首页移动端) */
.cph-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cph-tab{flex:none;display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer}
.cph-tab .cph-n{font-size:11px;color:#b8c0c9}
.cph-tab:hover{border-color:var(--brand);color:var(--brand)}
.cph-tab.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.cph-tab.on .cph-n{color:#FFD9C7}
.cph-tab.on:hover{color:#fff}
.cph-box{border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:36px;min-height:300px}
.cph-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 34px}
/* 虚线改实线: 虚线在小字号下边缘发毛, 一屏几十条时噪点很重 */
.cph-list a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;min-width:0;font-size:14px;color:var(--ink-2);line-height:1.6;padding:7px 0;border-bottom:1px solid var(--line-3)}
.cph-list a .t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cph-list a .d{flex:none;font-size:12px;color:var(--gray-2)}
.cph-list a:hover .t{color:var(--brand-deep)}
@media(max-width:768px){
  .catp-nav{width:108px}
  .cat-tab{padding:9px 12px;font-size:13px}
  .cph-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .cph-tabs::-webkit-scrollbar{display:none}
  .cph-tabs+.cph-box{max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
  .cph-list{grid-template-columns:minmax(0,1fr)}
}


/* ===== 首页服务大类卡(维修价格区) =====
   0918 实测: 8 张卡的卡片高(404)、图高(132)、价格行距卡底(19px)本来就齐,
   模板也早有 [:4] 限 4 个标签——唯一不齐的是标签区高度(149 / 110 两档),
   根因是标签长短差太多("电热水器清洗（不拆机）"独占一行)而非数量。*/
.cat-chips{align-content:flex-start;margin:6px 0 16px}
/* 价格行加上分隔线。
   注意: 给 .cat-chips 加 min-height 是无效的——卡片本来就等高(grid stretch),
   价格行又已 margin-top:auto 贴底, 空白总量固定, min-height 只是把同样多的空白
   从标签区下面挪到标签区里面, 视觉一模一样。真正收住参差留白的是这条线。*/
.cat-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line-2)}
.cat-foot .go{font-size:14px;font-weight:700;color:var(--brand-deep)}
.cat-body{padding:16px 20px 18px;display:flex;flex-direction:column;flex:1}
.cat-card{padding:0;overflow:hidden}
.cat-card img{width:100%;height:132px;object-fit:cover;display:block}
/* 这里原本按说明书加过 white-space:nowrap + 省略号, 已撤回:
   桌面实测根本没有标签被截断(卡片放得下), 而 375px 下卡片只有 164px 宽,
   「挂机空调安装_1-1.5P」「柜机空调安装_2-3P」双双被截成「X机空调安装_...」,
   两个服务在手机上无法区分, 「冰箱清洗（三门）」也丢了「三门」。
   维修站看清是什么服务 > 排版齐整, 所以宁可让长标签占一行。 */

/* ===== 服务词条详情页视觉改版(0918, 依据《服务详情页优化说明》) =====
   要点: 暖色只留导读框和报价卡两处, 正文纯白、靠分隔线+间距分节, 橙色只出现在
   导读框左竖条/主按钮/价格数字/hover。只作用于 .topic-page(百科词条页, 含
   城市×词条、省×词条), 首页与其它页型一律不受影响——首页样式 0917 刚定版,
   改全局会连带破掉。 */
.topic-page,.fuwu-page{--tp-line:#E8E9EC;--tp-ink:#1A1F26;--tp-ink2:#4A535E;--tp-ink3:#8A939E;--tp-soft:#F7F8FA}
/* 导读框: 降饱和, 唯一保留的橙竖条放这; 次级按钮收白底 */
.topic-page .answer-card,.fuwu-page .answer-card{background:#FFF9F5;border:1px solid #F5E2D6;border-left:3px solid var(--brand);border-radius:10px;padding:22px 24px}
.topic-page .answer-card p,.fuwu-page .answer-card p{font-size:15px;line-height:1.85;color:var(--tp-ink2);max-width:44em}
.topic-page .answer-card .est-cta{background:#fff;color:var(--tp-ink);border-color:#E3D5CA}
/* h1 下权威信息行 */
.topic-page .svc-meta,.fuwu-page .svc-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--tp-ink3);border-top:1px solid var(--tp-line);padding-top:14px;margin-top:14px}
.topic-page .svc-meta b,.fuwu-page .svc-meta b{color:var(--tp-ink2);font-weight:500}
/* 版块: 去橙竖条, 改字号分级 + 上分隔线 */
.topic-page .svc-sec{margin:0 0 40px}
.topic-page .svc-sec+.svc-sec{border-top:1px solid var(--tp-line);padding-top:36px}
.topic-page .svc-sec>h2,.topic-page .sec-h2,.topic-page .linkbox h2,.fuwu-page .linkbox h2{font-size:21px;font-weight:700;line-height:1.45;color:var(--tp-ink);letter-spacing:-.01em;border:none;padding:0;margin:0 0 14px}
.topic-page .sec-h2,.fuwu-page .sec-h2{margin:36px 0 14px;padding-top:36px;border-top:1px solid var(--tp-line)}
/* 版块导语(答案前置那句): 不给底色——每节一个色块等于没有重点, 这正是改版前
   浅橙底的毛病; 靠墨色比正文深一档做层级就够 */
.topic-page .sec-lead{font-size:15.5px;line-height:1.9;color:var(--tp-ink);margin:0 0 14px;max-width:38em}
.topic-page .sec-p{font-size:15.5px;line-height:1.9;color:var(--tp-ink2);max-width:38em;margin:0 0 12px}
.topic-page .sec-list{font-size:15px;line-height:1.95;color:var(--tp-ink2);max-width:38em;margin:0 0 12px;padding-left:22px}
.topic-page .sec-p b,.topic-page .sec-p strong,.topic-page .sec-lead b{color:var(--tp-ink);font-weight:700}
/* 参考价表: 表头改中性灰, 只有价格一列留品牌色 */
.topic-page .price-table th{background:var(--tp-soft);color:var(--tp-ink3);font-weight:500;font-size:13px;border-color:var(--tp-line)}
.topic-page .price-table td{border-color:var(--tp-line);color:var(--tp-ink)}
.topic-page .price-table td.p{color:var(--brand-deep);font-weight:700}
/* 常见问题: 5 张同款描边卡 → 一张分隔线列表 */
.topic-page .faq-list,.fuwu-page .faq-list{border:1px solid var(--tp-line);border-radius:10px;background:#fff;margin-bottom:14px}
.topic-page .faq-list .faq-item,.fuwu-page .faq-list .faq-item{border:none;border-radius:0;margin:0;padding:20px 24px;background:none}
.topic-page .faq-list .faq-item+.faq-item,.fuwu-page .faq-list .faq-item+.faq-item{border-top:1px solid var(--tp-line)}
.topic-page .faq-list .faq-item h3,.fuwu-page .faq-list .faq-item h3{font-size:15.5px;font-weight:700;color:var(--tp-ink);margin:0 0 8px}
.topic-page .faq-list .faq-item p,.fuwu-page .faq-list .faq-item p{font-size:14.5px;line-height:1.85;color:var(--tp-ink2)}
/* 31 省覆盖: 描边方框 → 纯文字链, 链接一条不少, 高度降一半以上 */
.topic-page .link-grid.prov-flat{display:flex;flex-wrap:wrap;gap:0 4px;border:1px solid var(--tp-line);border-radius:10px;background:#fff;padding:14px 18px}
.topic-page .link-grid.prov-flat a{display:inline-block;text-align:left;border:none;background:none;padding:7px 10px;border-radius:6px;font-size:14px;color:var(--tp-ink2);white-space:nowrap}
.topic-page .link-grid.prov-flat a:hover{background:var(--tp-soft);color:var(--brand-deep);border:none}
/* 在线估价框: 描边收中性, 它不是本页第三块暖色 */
.topic-page .diag{border:1px solid var(--tp-line);border-radius:10px}
.topic-page .diag .dg-result{background:var(--tp-soft)}
/* 自诊选项原来是暖底 chip, 那会让本页暖色变三处; 未选中一律中性, 选中态才上橙 */
.topic-page .diag .dg-opt{background:var(--tp-soft);border-color:var(--tp-line);color:var(--tp-ink2)}
.topic-page .diag .dg-opt.on{background:#FDEFE8;border-color:var(--brand);color:var(--brand)}
/* 右侧栏: 目录序号改浅灰(目录不需要强调), 相关百科改墨色分隔线列表 */
.topic-page aside .card,.fuwu-page aside .card{border-color:var(--tp-line);border-radius:10px}
.topic-page .toc-item{display:flex;gap:8px;align-items:baseline;padding:7px 0;font-size:13.5px;color:var(--tp-ink2);line-height:1.5}
.topic-page .toc-item:hover{color:var(--brand-deep)}
.topic-page .toc-num{flex:none;width:18px;font-size:12px;font-weight:500;color:#C4CAD2}
.topic-page .rel-list a,.fuwu-page .rel-list a{display:block;padding:9px 0;font-size:14px;color:var(--tp-ink2)}
.topic-page .rel-list a+a,.fuwu-page .rel-list a+a{border-top:1px solid #F1F2F4}
.topic-page .rel-list a:hover,.fuwu-page .rel-list a:hover{color:var(--brand-deep)}
/* 报价卡: 全页唯一该抢眼的地方, 保持暖色 */
.topic-page aside .card.warm-bg,.fuwu-page aside .card.warm-bg{background:#FFF9F5;border-color:#F5E2D6}
.topic-page aside .card.warm-bg .price,.fuwu-page aside .card.warm-bg .price{color:var(--brand-deep);letter-spacing:-.02em}
/* 相关/家族服务卡片 */
.topic-page .grid.g3 .card{border-color:var(--tp-line);border-radius:10px}
.topic-page .grid.g3 .card:hover{border-color:var(--brand)}
@media (max-width:768px){
  .topic-page .svc-sec{margin-bottom:28px}
  .topic-page .svc-sec+.svc-sec,.topic-page .sec-h2,.fuwu-page .sec-h2{padding-top:24px}
  .topic-page .sec-h2,.fuwu-page .sec-h2{margin-top:24px}
  .topic-page .svc-sec>h2,.topic-page .sec-h2,.topic-page .linkbox h2,.fuwu-page .linkbox h2{font-size:19px}
  .topic-page .faq-list .faq-item,.fuwu-page .faq-list .faq-item{padding:16px 16px}
  .topic-page .answer-card,.fuwu-page .answer-card{padding:18px}
}

/* ===== 服务项目页(/fuwu/ SKU 页)视觉改版(0918, 依据《服务项目页优化说明》) =====
   与词条页同一套底: 暖色只留导读框和报价卡; FAQ/相关百科/元信息行复用上面的共享规则,
   这里只写这一页独有的部分。同样圈在 .fuwu-page 里, 不动全局。 */
/* h1 区: 缩略图右边原来空掉半屏, 把参考价/质保/更新日期补上去 */
.fuwu-page .sku-head{align-items:flex-start;gap:28px}
.fuwu-page .sku-head .pic{width:200px;aspect-ratio:1;border-radius:10px;border-color:var(--tp-line);background:var(--tp-soft)}
.fuwu-page .svc-hd-main{flex:1;min-width:0}
.fuwu-page .svc-hd-main h1{margin:4px 0 0;font-size:clamp(26px,2.6vw,34px);line-height:1.3;letter-spacing:-.015em;color:var(--tp-ink)}
.fuwu-page .svc-meta{font-size:13.5px;gap:10px 28px;margin-top:18px;padding-top:16px}
.fuwu-page .svc-meta b{color:var(--tp-ink);font-weight:700}
.fuwu-page .svc-hd-note{font-size:13px;color:#A8AFB8;margin:10px 0 0}
/* 正文行宽 + 表下小字说明 */
.fuwu-page .with-side>div>p{max-width:40em}
.fuwu-page .sec-sub{font-size:13.5px;color:var(--tp-ink3);margin:0 0 16px;max-width:40em}
/* 参考价目表: 原来 th 和 td 各带一圈边框=双线, 改成一圈外框 + 行间横线 */
.fuwu-page .price-table{border:1px solid var(--tp-line);border-radius:10px;border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff}
.fuwu-page .price-table th{background:var(--tp-soft);color:var(--tp-ink3);font-weight:500;font-size:13px;border:none;padding:13px 20px}
.fuwu-page .price-table td{border:none;border-top:1px solid var(--tp-line);padding:16px 20px;font-size:15px;color:var(--tp-ink)}
.fuwu-page .price-table td.p{font-weight:700;color:var(--brand-deep)}
/* 右侧相关服务: 七行一模一样的「¥98 起」信息量为零, 改成服务名 + 箭头 */
.fuwu-page .svc-row{padding:12px 0;border-bottom-color:#F1F2F4;font-size:14px;color:var(--tp-ink2)}
.fuwu-page .svc-row:hover{color:var(--brand-deep)}
.fuwu-page .svc-row .go{flex:none;font-size:15px;color:#C4CAD2}
.fuwu-page .svc-row:hover .go{color:var(--brand-deep)}
/* 报价卡: 全页唯一该抢眼的地方, 数字放大; 两个按钮等高 */
.fuwu-page aside .card.warm-bg .price{font-size:30px;line-height:1.1;margin-bottom:14px}
.fuwu-page aside .card.warm-bg .btn{width:100%;height:46px}
@media (max-width:768px){
  .fuwu-page .sku-head .pic{width:100%;aspect-ratio:3/2}
  .fuwu-page .svc-hd-main h1{font-size:22px}
  .fuwu-page .price-table td,.fuwu-page .price-table th{padding:11px 12px}
}
/* 导读框/FAQ 正文里的价格改墨色(说明书 P1-4): 橙色留给按钮和报价卡 */
.fuwu-page .answer-card p b,.fuwu-page .answer-card p strong,
.fuwu-page .faq-list .faq-item p strong{color:var(--tp-ink);font-weight:700}
/* 报价卡 sticky 会把后面「相关服务/相关百科」的标题盖住(原来就有, 加了 sticky 更明显):
   让后续卡片滚上来时压在它上面, 报价卡自然让位 */
.fuwu-page aside .card:not(.warm-bg){position:relative;z-index:1}

/* ===== 城市服务页(城市×词条)0918, 依据《城市服务页优化说明》 =====
   这页的骨架(更新日期/右侧目录/sticky 报价卡)已经比别的页型好, 问题集中在
   街道列表的体量。只加 .topic-page 下的新 class, 上面词条页那批规则照旧生效。 */
.topic-page .sec-sub{font-size:13px;color:var(--tp-ink3);margin:0 0 14px;max-width:40em}
/* 服务区域: 11 行 × 每行 20 多个街道名, 字号 12.5px, 是全页最重的一块——用户不会读,
   但它把品牌/价格/流程这些真正要看的内容挤到了下面。默认只展开前 3 个区。
   🔴 折叠是纯 CSS: display:none 的内容百度和大模型照样抓得到, JS 按需加载的抓不稳;
   街道链接一条不删。 */
.topic-page .area-grid{border:1px solid var(--tp-line);border-radius:10px;background:#fff;padding:4px 22px;position:relative;margin-bottom:26px}
.topic-page .area-row{display:flex;gap:20px;padding:14px 0;align-items:baseline}
.topic-page .area-row+.area-row{border-top:1px solid #F4F5F7}
.topic-page .area-k{flex:none;width:56px;font-size:14.5px;font-weight:700;color:var(--brand-deep)}
/* 原来 12.5px 太小; 街道里链接和纯文本两种都有(只有开了放量页的街道才带链接),
   全刷成一个灰会看不出哪些能点, 所以链接留深一档 + hover 上橙 */
.topic-page .area-v{font-size:13px;line-height:2;color:var(--tp-ink3)}
.topic-page .area-v a{color:var(--tp-ink2)}
.topic-page .area-v a:hover{color:var(--brand-deep)}
.topic-page .area-cb{position:absolute;opacity:0;pointer-events:none}
.topic-page .area-row.is-more{display:none}
.topic-page .area-cb:checked ~ .area-row.is-more{display:flex}
.topic-page .area-toggle{display:block;text-align:center;cursor:pointer;font-size:13.5px;color:var(--tp-ink3);padding:14px 0;border-top:1px solid #F4F5F7}
.topic-page .area-toggle:hover{color:var(--brand-deep)}
.topic-page .area-cb:checked ~ .area-toggle{visibility:hidden;height:0;padding:0;border:none}
/* 相关的服务: 固定三列会让第四张单独掉行, 改自适应网格 */
/* 说明书给的是 auto-fill minmax(230px): 本页正文列实测 808px(.wrap 1200 - 两侧 padding
   - 右栏 300 - gap 28), 230px 只排得下 3 列, 4 张卡还是 3+1——正是要治的毛病。
   改 170px + auto-fit: 桌面 4 列(4 张一行排完), 平板 2 列(2+2), 手机 1 列;
   auto-fit 会把空轨道收掉, 所以只有 2-3 张卡时也能铺满不留空档。 */
.topic-page .rel-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:10px}
.topic-page .rel-svc-grid a{display:flex;align-items:center;gap:12px;border:1px solid var(--tp-line);border-radius:10px;padding:14px;background:#fff}
.topic-page .rel-svc-grid a:hover{border-color:var(--brand)}
.topic-page .rel-svc-grid img{width:44px;height:44px;object-fit:cover;border-radius:9px;border:1px solid #F2EAE2;flex:none}
.topic-page .rel-svc-grid .n{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--tp-ink);line-height:1.5}
.topic-page .rel-svc-grid .go{flex:none;font-size:15px;color:#C4CAD2}
.topic-page .rel-svc-grid a:hover .go{color:var(--brand-deep)}
@media (max-width:768px){
  /* 375px: 区名一行、街道一行, 不再挤成两列 */
  .topic-page .area-grid{padding:2px 16px}
  .topic-page .area-row{flex-direction:column;gap:4px;padding:12px 0}
  .topic-page .area-k{width:auto}
  .topic-page .rel-svc-grid{grid-template-columns:1fr}
}