/* ==========================================================================
扩展样式（extend.css）
说明：base.css 为原型原有样式，一字未改。
        （--blue / --orange / --cream / --radius / --shadow …）；

/* ---------- 无障碍 & 基础补强 ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* base.css 只全局重置了 ul，ol 的原生序号（1. 2. 3.）会漏出来，这里补齐 */
ol{list-style:none;padding-left:0;}
.modal{position:relative;}                    /* 原型 .modal .close 依赖定位父级 */
.mobile-menu{position:relative;}
.faq-q:hover{color:var(--blue);}
.faq-item.open .faq-q{color:var(--blue);}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px;border-radius:6px;}

/* ---------- 首页常见问题（可见 FAQ 模块）
   用原生 <details>/<summary> 实现，不依赖 JS：
   即使脚本被拦截或未加载，问答依然可见可展开，这对 FAQPage 结构化数据是硬要求
   （Google 要求结构化数据里的问答必须对用户可见）。
   编号 01/02/03 是刻意的视觉锚点——它暗示「这是按重要性排的」，帮用户判断先看哪条。 */
.faq-head{margin-bottom:34px;}
.faq-head .lead{max-width:620px;margin:12px auto 0;}

/* 双排布局：左 5 条、右 5 条。
   用 grid 2 列而不是 CSS columns——grid 可以精确控制「哪 5 条在左」，
   而且每列各自独立换行，展开/收起时不会像 columns 那样把后续条目挤到另一列。
   窄屏回落成单列，保持阅读顺序。
   注意：两列的 .faq-item 高度不相等（答案长度不同），
   所以用 align-content:start 让它们各自贴顶排列，不互相拉伸。 */
.faq-list{
  max-width:1060px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:12px 26px;
  align-content:start;
  align-items:start;
}
@media (min-width:900px){
  .faq-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* 两列怎么分？——这里踩过坑，说明清楚。

     错误做法：用 nth-child 把前 5 条钉在第 1 列、后 5 条钉在第 2 列
       .faq-item:nth-child(-n+5){grid-column:1;}
       .faq-item:nth-child(n+6){grid-column:2;}
     结果**不是左右并排**，而是「左上右下」：5 条全挤在左列纵向堆叠，
     右列另起一竖排，看起来像瀑布错位。

     正确做法：不指定列号，让 grid 按行自动填充。
     条目会「第1条左、第2条右、第3条左、第4条右……」逐行排开，
     这才叫左右并排。

     唯一要处理的是「高度不齐」：展开某条会让那一行变高，
     同一行的另一条被拉高（align-items:stretch）。
     用 align-items:start 让两条各自贴顶，互不拉伸。 */
  .faq-list .faq-item{grid-column:auto;}
}
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:0;                 /* 间距交给 grid 的 gap，避免双列下高低不齐 */
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
/* 展开态的高亮。两套标记都要覆盖：
   首页是原生 <details open>（属性选择器命中），
   内页是 JS 加的 .open 类（类选择器命中）。只写 [open] 会让内页没有高亮。 */
.faq-item[open],
.faq-item.open{
  border-color:var(--blue-2);
  box-shadow:var(--shadow);
}
.faq-q{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 22px;
  cursor:pointer;
  list-style:none;                 /* 去掉 Safari/Chrome 的默认三角 */
  font-weight:600;
  color:var(--ink);
  font-size:15.5px;
  line-height:1.6;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{color:var(--blue);}
.faq-item[open] .faq-q,
.faq-item.open .faq-q{color:var(--blue);}
.faq-num{
  flex:0 0 auto;
  font-family:var(--serif);
  font-size:14px;
  font-weight:700;
  color:var(--blue-2);
  letter-spacing:.5px;
  padding-top:2px;
}
.faq-text{flex:1 1 auto;}
/* 加号图标：展开时用 transform 转成减号，比换图标更省事也更顺滑 */
.faq-icon{
  flex:0 0 20px;
  width:20px;height:20px;
  margin-top:2px;
  position:relative;
}
.faq-icon::before,.faq-icon::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:var(--blue-2);
  border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .2s ease,opacity .2s ease;
}
.faq-icon::before{width:14px;height:2px;}
.faq-icon::after{width:2px;height:14px;}
.faq-item[open] .faq-icon::after,
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{
  padding:0 22px 20px 56px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--muted);
}
/* 内页（div 结构）答案：字号提一档、行高放松、颜色加深一点，
   长段落不再糊成一片浅灰。首页 <details> 不受影响。 */
.faq-item:not(details) .faq-a{
  padding:0 22px 22px 56px;
  font-size:15px;
  line-height:1.9;
  color:#5B6A74;
}
@media (max-width:640px){
  .faq-item:not(details) .faq-a{padding:0 16px 18px 44px;}
}
.faq-foot{
  max-width:1060px;
  margin:28px auto 0;
  text-align:center;
}
.faq-foot a{color:var(--blue);font-weight:600;}
@media (max-width:640px){
  .faq-q{padding:15px 16px;font-size:15px;gap:10px;}
  .faq-a{padding:0 16px 16px 44px;}
  .faq-list{max-width:820px;}
}

/* ---------- 内页 FAQ 分组（/faq.html）
   faq.php 把每一类问答包在 .faq-block 里，标题用的是 h2.h2。
   原来 extend.css 里没有 .faq-block 的任何规则，实际表现是：
   三组问答首尾相接、组间 0 间距，34px 的衬线标题直接贴在列表上，
   像一堵墙，读起来很挤。
   这里只做两件事：给分组留出呼吸感，把分组标题降为无衬线小标题
   —— 它只是列表的分类名，不该跟页面主标题抢层级。 */
.faq-block{margin-top:56px;scroll-margin-top:96px;}
.tabs + .faq-block{margin-top:0;}   /* tabs 自身 margin-bottom 已有 26px */
.faq-block .h2{
  font-family:var(--sans);
  font-size:20px;
  font-weight:700;
  line-height:1.5;
  margin:0 0 16px;
  padding-left:12px;
  border-left:3px solid var(--blue-2);
}

/* ---------- 区块标题（h2.eyebrow）
   升为 <h2> 后需要承担二级标题的视觉层级，故在此放大字号、加重字重。
   仅针对 h2.eyebrow，不影响其它位置的 .eyebrow（如首屏小标签、内页小标签）。*/
h2.eyebrow{
  font-family:var(--serif);
  font-size:clamp(26px,4.5vw,34px);
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.35;
  margin-bottom:12px;
}
/* 深色底（.why 区块）：base.css 的 `.why .eyebrow{color:#fff}` 优先级更高，
   此处只需在被覆盖时补回白色；用 h2 提高权重以保持与其它区块一致的字号。*/
.why h2.eyebrow{color:#fff;}
@media(max-width:480px){
  h2.eyebrow{font-size:22px;letter-spacing:.02em;}
}

/* ---------- 面包屑（复用 .crumb，补充语义与层次）---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:13.5px;line-height:1.6;color:var(--muted);}
.crumb a{color:var(--blue);transition:color .2s;}
.crumb a:hover{text-decoration:underline;}
/* 中间层级之间补一个分隔符（模板输出的是纯文本 " / "，这里改用伪元素更可控） */
.crumb > span:last-child{color:var(--ink);font-weight:500;}
/* 末级标题过长时截断，避免撑破一行 */
.crumb > span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:640px){
  .crumb{font-size:12.5px;gap:6px;margin-bottom:14px;}
  .crumb > span:last-child{white-space:normal;}
}

/* ---------- 分页 ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;margin:36px 0 6px;}
.pager__num,.pager__arrow{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 13px;border:1.5px solid var(--line);border-radius:11px;background:#fff;font-size:14px;color:var(--ink);transition:.2s;}
.pager__num:hover,.pager__arrow:hover{border-color:var(--blue-2);color:var(--blue);}
.pager__num.is-active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500;}
.pager__arrow.is-disabled{opacity:.45;color:var(--muted);}
.pager__dots{color:var(--muted);padding:0 2px;}
.pager__info{width:100%;text-align:center;font-size:12.5px;color:var(--muted);margin-top:6px;}

/* ---------- GEO / AI 摘要区 ---------- */
/* 头部只放「摘要」徽章，不再有文字标题——徽章和标题重复。
   故 .geo-answer__head 的 margin-bottom 收到 8px，只隔开徽章与正文。 */
.geo-answer{background:var(--blue-4);border:1px solid var(--blue-3);border-left:4px solid var(--blue-2);border-radius:14px;padding:18px 20px;margin:0 0 26px;}
.geo-answer__head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.geo-answer__badge{font-size:11px;letter-spacing:.06em;background:var(--blue);color:#fff;padding:3px 9px;border-radius:999px;}
.geo-answer__tldr{font-size:15px;color:var(--ink);margin-bottom:10px;}
.geo-answer__list{padding-left:20px;}
.geo-answer__list li{list-style:disc;font-size:14px;color:var(--muted);margin-bottom:6px;}
.geo-answer__list li:last-child{margin-bottom:0;}

/* ---------- 文章详情增强 ---------- */
.article .a-body h3{font-family:var(--serif);font-size:18px;margin:22px 0 10px;color:var(--ink);}
.article .a-body blockquote{border-left:3px solid var(--blue-2);background:var(--blue-4);padding:14px 18px;border-radius:0 12px 12px 0;margin:0 0 18px;color:var(--muted);font-size:15px;}
.article .a-body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px;}
.article .a-body th,.article .a-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;}
.article .a-body th{background:var(--blue-4);font-weight:500;}
.article .a-body img{border-radius:14px;margin:0 0 18px;}
.article .a-body a{color:var(--blue);text-decoration:underline;}

/* 表格前的引导句（例如「把三个放一起看比较清楚。」）
   它本身很短，单独成行会显得零散。
   这里把它和下面的表格贴成一个视觉整体：
   缩小间距、加一条左侧引导线、字号略小当说明文字用。 */
.article .a-body p:has(+ table){
  margin-bottom:8px;
  padding-left:12px;
  border-left:2px solid var(--blue-3);
  color:var(--muted);
  font-size:14.5px;
}
.article .a-body p + table{margin-top:0;}
.article .a-body h2 + p:has(+ table){margin-top:0;}
.article-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.article-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);}
.article-nav{display:grid;grid-template-columns:1fr;gap:12px;}
.article-nav a{display:block;background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px;font-size:14px;transition:.2s;}
.article-nav a:hover{border-color:var(--blue-2);color:var(--blue);}
.article-nav span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;}
@media(min-width:640px){.article-nav{grid-template-columns:1fr 1fr;}}

/* ---------- 相关推荐 ---------- */
.related{margin-top:40px;}
.related h2{font-family:var(--serif);font-size:20px;margin-bottom:18px;}

/* ---------- 列表页工具条 ---------- */
.list-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:6px;}
.list-head .count{font-size:13px;color:var(--muted);}

/* ---------- 文章尾部常见问答（Q：/A：可见形式，便于 AI 直接摘录）---------- */
.a-faq{margin-top:38px;padding-top:30px;border-top:2px solid var(--blue-3);}
.a-faq-title{font-family:var(--serif);font-size:clamp(22px,3.6vw,27px);font-weight:700;line-height:1.35;color:var(--ink);margin-bottom:20px;}
.qa-list{display:flex;flex-direction:column;gap:14px;}
.qa-item{background:var(--blue-4);border:1px solid var(--blue-3);border-radius:14px;padding:18px 20px;}
.qa-q{font-size:15.5px;font-weight:600;line-height:1.65;color:var(--ink);margin-bottom:9px;}
.qa-a{font-size:15px;line-height:1.8;color:var(--muted);}
.qa-mark{font-family:var(--serif);font-weight:700;color:var(--blue);margin-right:2px;}
.qa-mark--a{color:var(--blue-2);}

.empty{text-align:center;color:var(--muted);padding:54px 0;font-size:15px;}

/* ---------- 站点地图 ---------- */
.sitemap-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px;}
.sitemap-col{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
.sitemap-col h3{font-family:var(--serif);font-size:17px;margin-bottom:14px;color:var(--blue);}
.sitemap-col ul li{margin-bottom:9px;}
.sitemap-col ul a{font-size:14.5px;color:var(--ink);}
.sitemap-col ul a:hover{color:var(--blue);}
.sitemap-col .date{font-size:12px;color:var(--muted);margin-left:8px;}
@media(min-width:640px){.sitemap-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.sitemap-grid{grid-template-columns:repeat(3,1fr);}}

/* ---------- 课程卡片（课程体系列表，独立页面用） ---------- */
.course-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:34px;}
.course-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.25s;}
.course-card:hover{transform:translateY(-4px);}
.course-card img{width:100%;height:200px;object-fit:cover;}
.course-card .cc-body{padding:22px;display:flex;flex-direction:column;flex:1;}
.course-card .cc-age{font-size:12px;color:var(--blue);background:var(--blue-3);padding:4px 10px;border-radius:999px;display:inline-block;margin-bottom:10px;}
.course-card h3{font-family:var(--serif);font-size:19px;margin-bottom:8px;}
.course-card p{font-size:14px;color:var(--muted);margin-bottom:16px;flex:1;}
.course-card .cc-link{color:var(--blue);font-size:14px;font-weight:500;}
.course-card .cc-link:hover{text-decoration:underline;}
@media(min-width:600px){.course-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.course-grid{grid-template-columns:repeat(3,1fr);}}

/* ---------- 数据表（课程参数 / 营业信息）---------- */
.data-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:18px 0;}
.data-table th,.data-table td{border-bottom:1px solid var(--line);padding:12px 6px;text-align:left;vertical-align:top;}
.data-table th{width:120px;color:var(--muted);font-weight:500;}

/* ---------- 评价 / 数据条 ---------- */
.trust-bar{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;}
.trust-bar div{flex:1;min-width:140px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;}
.trust-bar b{font-family:var(--serif);font-size:20px;color:var(--blue);display:block;}
.trust-bar span{font-size:12.5px;color:var(--muted);}

/* ---------- 友链 ---------- */
.link-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.link-list a{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 14px;}
.link-list a:hover{color:var(--blue);border-color:var(--blue-2);}

/* ---------- 表单错误提示 ---------- */
.form-tip{font-size:13px;margin-top:10px;color:var(--muted);}
.form-tip.is-error{color:#c0392b;}
.form-tip.is-ok{color:#2f8f5b;}

/* ---------- 页脚二维码 ---------- */
.foot-qr{display:flex;align-items:center;gap:12px;margin-top:12px;}
.foot-qr img{width:88px;height:88px;border-radius:10px;background:#fff;padding:4px;}
.foot-qr span{font-size:12.5px;color:#9fb8c4;}

/* ---------- 分龄成长体系 · 三阶段并列卡片 ---------- */
.stage-grid{margin-top:34px;display:grid;grid-template-columns:1fr;gap:20px;}
.stage-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 22px 22px;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease;}
.stage-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(44,127,168,.16);}
/* 顶部色条：随阶段加深，暗示成长递进 */
.stage-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--blue-3);}
.stage-card:nth-child(2)::before{background:var(--blue-2);}
.stage-card:nth-child(3)::before{background:var(--blue);}

/* 阶段头：序号 + 阶段名 */
.stage-card .sc-head{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.stage-card .sc-step{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:var(--serif);color:var(--blue);background:var(--blue-4);border:1.5px solid var(--blue-3);}
.stage-card:nth-child(2) .sc-step{border-color:var(--blue-2);}
.stage-card:nth-child(3) .sc-step{border-color:var(--blue);}
.stage-card .sc-stage{font-size:13px;color:var(--muted);letter-spacing:.06em;}

/* 月龄：视觉主体，字号最大 */
.stage-card .sc-age{font-family:var(--serif);font-size:27px;line-height:1.15;color:var(--blue);margin-bottom:4px;}
.stage-card .sc-name{font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:18px;}

/* 规格：标签 + 值，同排两端对齐 */
.stage-card .sc-specs{margin:0 0 18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:9px;}
.stage-card .sc-spec{display:flex;align-items:baseline;gap:10px;font-size:13.5px;}
.stage-card .sc-spec dt{flex:0 0 auto;color:var(--muted);min-width:60px;}
.stage-card .sc-spec dd{margin:0;color:var(--ink);font-weight:500;}

/* 课程目标：勾选清单 */
.stage-card .sc-goals{flex:1 1 auto;}
.stage-card .sc-goals h4{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:11px;letter-spacing:.04em;}
.stage-card .sc-goals ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.stage-card .sc-goals li{position:relative;padding-left:23px;font-size:13.5px;color:var(--muted);line-height:1.6;}
.stage-card .sc-goals li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;background:var(--blue-3);}
.stage-card .sc-goals li::after{content:"";position:absolute;left:4.5px;top:7.5px;width:4px;height:8px;border:solid var(--blue);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}

/* 卡片底部按钮 */
.stage-card .sc-link{margin-top:20px;display:block;text-align:center;padding:11px 16px;border:1px solid var(--blue-3);border-radius:999px;color:var(--blue);font-size:14px;font-weight:500;text-decoration:none;transition:background .25s ease,border-color .25s ease;}
.stage-card .sc-link:hover{background:var(--blue-3);border-color:var(--blue-2);}
.stage-more{text-align:center;margin-top:30px;}
@media(min-width:860px){
  .stage-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
}

/* ---------- 分龄课程对照表（GEO：结构化表格，便于 AI 整表引用）---------- */
.cmp-wrap{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;}
.cmp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px;}
.cmp-table caption{text-align:left;padding:0;}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;}
.cmp-table thead th{background:var(--blue-3);color:var(--blue);font-weight:600;font-size:13.5px;white-space:nowrap;border-bottom:1px solid transparent;}
.cmp-table tbody th{font-weight:600;color:var(--ink);white-space:nowrap;}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none;}
.cmp-table tbody tr:hover{background:#f7fbfd;}
.cmp-table a{color:var(--blue);font-weight:500;}
.cmp-table a:hover{text-decoration:underline;}
.cmp-note{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.7;}
@media(max-width:640px){
  .cmp-table{font-size:13.5px;}
  .cmp-table th,.cmp-table td{padding:11px 12px;}
}

/* ---------- 联系页：到店信息与到店指南 ---------- */
/* 页面已移除预约表单，电话成为唯一转化入口，故电话卡做成主视觉。 */
.visit-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;}
.visit-grid .info-block{margin-bottom:0;}

.contact-card{background:linear-gradient(158deg,var(--blue) 0%,#1f6285 100%);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow);color:#fff;}
.cc-eyebrow{font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.72);margin-bottom:10px;}
.cc-phone{display:block;font-family:var(--serif);font-size:clamp(27px,7vw,36px);font-weight:700;line-height:1.2;letter-spacing:.01em;color:#fff;transition:.2s;}
.cc-phone:hover{opacity:.85;}
.cc-meta{font-size:13px;color:rgba(255,255,255,.82);margin-top:10px;}
.cc-tip{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.94);margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);}
.cc-list{margin-top:16px;display:flex;flex-direction:column;gap:9px;}
.cc-list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.9);}
.cc-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.65);}

.notice--wide{margin-top:22px;margin-bottom:0;align-items:center;}
.notice--wide .notice-body{flex:1;min-width:0;}
.notice--wide .notice-body p{margin:0;}

/* ol 默认会渲染 1. 2. 3. 4. 原生序号（落在卡片外面），
   与卡片内的 .vf-num 圆标重复，故清零序号、内边距与默认外边距。 */
.visit-flow{display:grid;grid-template-columns:1fr;gap:18px;list-style:none;padding:0;margin:30px 0 0;}
.vf-item{position:relative;background:#fff;border-radius:var(--radius);padding:26px 22px 22px;box-shadow:var(--shadow);border-top:4px solid var(--blue-3);transition:transform .25s,box-shadow .25s;}
.vf-item:nth-child(2){border-top-color:var(--blue-2);}
.vf-item:nth-child(3){border-top-color:var(--blue);}
.vf-item:nth-child(4){border-top-color:var(--blue);}
.vf-item:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(44,127,168,.16);}
.vf-num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--blue-3);color:var(--blue);font-family:var(--serif);font-size:16px;font-weight:700;margin-bottom:14px;}
.vf-title{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.vf-text{font-size:14px;line-height:1.75;color:var(--muted);}

.prep-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;}
.prep-card{background:#fff;border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);}
.prep-title{font-family:var(--serif);font-size:clamp(21px,3.4vw,25px);font-weight:700;line-height:1.35;color:var(--ink);margin-bottom:18px;}
.prep-list{display:flex;flex-direction:column;}
.prep-list li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px dashed var(--line);}
.prep-list li:last-child{border-bottom:none;}
.pl-mark{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--blue-3);position:relative;margin-top:3px;}
.pl-mark::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid var(--blue);border-width:0 1.8px 1.8px 0;transform:rotate(42deg);}
.pl-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pl-body b{font-size:15px;font-weight:600;color:var(--ink);}
.pl-desc{font-size:13.5px;line-height:1.7;color:var(--muted);}
.prep-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.75;color:var(--muted);}

@media(min-width:820px){
  .visit-grid{grid-template-columns:1.12fr .88fr;gap:22px;}
  .prep-grid{grid-template-columns:1fr 1fr;gap:22px;}
  .visit-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
  .vf-item::after{content:"";position:absolute;top:44px;right:-13px;width:8px;height:8px;border-top:2px solid var(--blue-2);border-right:2px solid var(--blue-2);transform:rotate(45deg);}
  .vf-item:last-child::after{display:none;}
}
@media(max-width:819px){
  .contact-card{padding:26px 22px;}
  .prep-card{padding:24px 20px;}
  .vf-item{padding:22px 20px 20px;}
}

/* ---------- 打印 ---------- */
@media print{
  .site-header,.float-wrap,.modal-mask,.cta-band,.site-footer,.pager{display:none !important;}
  .page-hero{margin-top:0;}
}

/* ---------- 文章开头的结论段 ---------- */
/* ---------- 没有标题的区块 ---------- */
/* 关于页的团队、理念、公示三块去掉了居中标题，
   网格自带的 margin-top 是给「标题 + 网格」这个组合留的，
   没有标题时这段空隙会变成一段莫名的留白，收掉。 */
.section > .container > .feature-grid:first-child,
.section > .container > .team-grid:first-child{
  margin-top:0;
}

/* ---------- 首屏行动按钮 ---------- */
/* 原来首屏只有文字，访客想预约得自己找入口。
   主按钮走预约页，电话按钮直接拨号，两个都是转化路径上最短的一步。 */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.hero-actions .btn{min-width:130px;justify-content:center;}
@media(max-width:819px){
  .hero-actions{margin-top:14px;}
  .hero-actions .btn{flex:1;min-width:0;padding:13px 16px;font-size:14px;}
}