/* ==========================================================================
   youxiaoqi.html — 有效期与复审
   模块：内页hero / 6年周期横向时间轴 / 超期处理分类卡 / 复审流程表
        / 常见误区卡
   ========================================================================== */

/* 内页 hero 背景 */
.yx-hero{background-image:url('../../images/svc-fushen.jpg')}

/* CTA 条通用排布 */
.cta-flex{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-kicker{display:inline-block;color:var(--gold);font-size:13px;letter-spacing:.2em;font-weight:600;margin-bottom:14px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.container-narrow{max-width:860px}

/* ---------- 模块一：横向周期时间轴（grid：节点 / 轴线） ---------- */
.cycle{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.cycle::before{
  content:"";position:absolute;left:12%;right:12%;top:30px;height:2px;background:var(--gold-line);
}
.cycle-node{text-align:center;position:relative;padding-top:0}
.cycle-node .dot{
  width:16px;height:16px;border-radius:50%;background:var(--gold);margin:22px auto 18px;
  box-shadow:0 0 0 5px var(--paper-warm);position:relative;z-index:1;
}
.cycle-node .when{font-family:var(--serif);font-size:14px;color:var(--gold-deep);letter-spacing:.05em}
.cycle-node h3{font-size:18px;margin:8px 0 8px}
.cycle-node p{font-size:13.5px;color:var(--muted);line-height:1.75;max-width:260px;margin:0 auto}

/* ---------- 模块二：超期处理分类卡 ---------- */
.late-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.late-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;border-top:4px solid var(--gold-line)}
.late-card.ok{border-top-color:#3f7d4e}
.late-card.warn{border-top-color:#c9a45c}
.late-card.bad{border-top-color:#b23a2e}
.late-card .lv{display:inline-block;font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 12px;margin-bottom:14px;background:var(--paper-warm);color:var(--ink-soft)}
.late-card.ok .lv{background:#eff7f1;color:#2e5b3a}
.late-card.warn .lv{background:#fdf6ea;color:#8a5a13}
.late-card.bad .lv{background:#fdf0ee;color:#9c3226}
.late-card h3{font-size:16.5px;margin-bottom:8px}
.late-card p{font-size:13.5px;color:var(--muted);margin:0 0 10px;line-height:1.75}
.late-card p:last-child{margin-bottom:0}

/* ---------- 模块三：复审流程表容器 ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}

/* ---------- 模块四：常见误区卡 ---------- */
.mis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mis-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);padding:22px 24px}
.mis-card h3{font-size:15.5px;color:#b23a2e;margin-bottom:8px;display:flex;gap:8px;align-items:flex-start}
.mis-card h3 svg{flex:0 0 auto;margin-top:3px;color:#b23a2e}
.mis-card .truth{font-size:14px;color:var(--text);line-height:1.8;padding-top:10px;border-top:1px dashed var(--line)}
.mis-card .truth b{color:var(--gold-deep)}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .cycle{grid-template-columns:1fr;gap:20px}
  .cycle::before{display:none}
  .cycle-node .dot{margin:10px auto 12px}
  .late-grid{grid-template-columns:1fr}
  .mis-grid{grid-template-columns:1fr}
}