/* ============================================================
   baoming-feiyong.html · H6胶片齿孔条带 + E3进度条 +
   C3标签云 + F3标签页 + G3电话横幅
   ============================================================ */

/* ---------- 题头：H6 胶片齿孔条带 ---------- */
.fy-hero{
  background:var(--brown-900);
  padding-top:calc(var(--header-h) + 60px);
  padding-bottom:56px;
}
.fy-perforation{
  height:18px;
  background:radial-gradient(circle,var(--cream-50) 3.5px,transparent 4px) repeat-x;
  background-size:28px 18px;background-position:center;
  opacity:.35;
}
.fy-perforation-bottom{margin-top:30px}
.fy-hero h1{
  font-size:clamp(34px,4.6vw,54px);color:var(--cream-50);margin:16px 0 12px;letter-spacing:.04em;
}
.fy-hero-inner > p{color:var(--cream-200);font-size:16px;max-width:560px}
.fy-hero .crumb a{color:var(--brass-light)}

/* ---------- E3 进度条组 ---------- */
.fy-compose{background:var(--cream-50)}
.compose-wrap{max-width:880px;margin:0 auto}
.compose-item{margin-bottom:26px}
.compose-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.compose-head h3{font-size:18px;color:var(--brown-800)}
.compose-pct{font-size:13px;color:var(--brass);font-weight:600;letter-spacing:.08em}
.compose-bar{
  height:14px;background:var(--cream-200);border-radius:var(--r-xs);overflow:hidden;
  border:1px solid var(--line);
}
.compose-fill{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--brass),var(--brass-light));
}
.fill-55{width:55%}
.fill-25{width:25%}
.fill-20{width:20%}
.compose-item > p{margin-top:8px;font-size:14.5px;color:var(--ink-soft);line-height:1.8}
.compose-note{
  margin-top:24px;padding:16px 20px;background:var(--cream-100);
  border-left:3px solid var(--brass);font-size:13.5px;color:var(--muted);line-height:1.8;
}

/* ---------- C3 标签云：缴费方式 ---------- */
.fy-pay{border-top:1px solid var(--line)}
.pay-wrap{
  display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center;
  background:var(--cream-50);padding:24px;border:1px solid var(--line);border-radius:var(--r-md);
}
.pay-wrap img{width:100%;height:280px;object-fit:cover;border-radius:var(--r-sm)}
.pay-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.pay-tag{
  display:inline-block;padding:8px 16px;background:var(--brown-800);color:var(--brass-light);
  border:1.5px solid var(--brass);border-radius:var(--r-xs);font-size:13.5px;font-weight:600;
}
.pay-notes{list-style:none}
.pay-notes li{
  padding:7px 0 7px 20px;position:relative;color:var(--ink-soft);font-size:14.5px;
  border-bottom:1px dashed var(--line);
}
.pay-notes li:last-child{border-bottom:none}
.pay-notes li::before{content:"✓";position:absolute;left:0;color:var(--green-600);font-weight:700}

/* ---------- F3 标签页 ---------- */
.fy-tab{background:var(--cream-50)}
.tab-btns{
  display:flex;gap:0;border-bottom:2px solid var(--brown-700);margin-bottom:24px;flex-wrap:wrap;
}
.js-tab-btn{
  padding:12px 22px;font-size:15px;font-weight:600;color:var(--muted);
  border:1.5px solid transparent;border-bottom:none;background:transparent;
  transition:all .2s;
}
.js-tab-btn.active{
  background:var(--brown-800);color:var(--brass-light);
  border-color:var(--brown-700);
}
.js-tab-panel{display:none}
.js-tab-panel.active{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.js-tab-panel h3{font-size:20px;margin-bottom:10px;color:var(--brown-800)}
.js-tab-panel p{color:var(--ink-soft);line-height:1.9;margin-bottom:12px;font-size:15px}

/* ---------- G3 电话横幅 ---------- */
.fy-cta{
  background:var(--green-900);border-top:4px solid var(--brass);
}
.fy-cta-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;padding:40px 0}
.fy-cta-media img{width:100%;height:280px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line-dark)}
.fy-cta-text h2{color:var(--cream-50);font-size:clamp(24px,3vw,34px);margin-bottom:10px}
.fy-cta-text p{color:var(--cream-200);margin-bottom:20px}
.fy-cta-text .btn-ghost{color:var(--cream-50)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .pay-wrap,.fy-cta-inner{grid-template-columns:1fr}
}

/* ---------- 扩充：费用误区 ---------- */
.fy-myth{background:var(--cream-50)}
.fy-myth-list{max-width:900px}
.fy-myth-row{
  display:grid;grid-template-columns:1fr 1.4fr;
  border:1.5px solid var(--brown-700);margin-bottom:14px;
}
.fy-myth-wrong{
  background:#f3e2d0;color:var(--brown-900);padding:18px 20px;
  font-size:14.5px;line-height:1.7;border-right:1.5px solid var(--brown-700);
}
.fy-myth-right{
  background:var(--cream-100);padding:18px 20px;
  font-size:14.5px;color:var(--ink-soft);line-height:1.8;
}

/* ---------- 扩充：不同人群花费 ---------- */
.fy-who{border-top:1px solid var(--line)}
.fy-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}
.fy-who-card{
  background:var(--cream-50);border:1.5px solid var(--brown-700);
  padding:24px 22px;border-top:3px solid var(--brass);
}
.fy-who-card h3{font-size:17px;color:var(--brown-800);margin-bottom:8px}
.fy-who-card p{font-size:14px;color:var(--ink-soft);line-height:1.85}
.fy-who-note{
  padding:16px 20px;background:var(--cream-100);
  border-left:4px solid var(--brass);font-size:13.5px;color:var(--muted);line-height:1.8;
}

@media (max-width:900px){
  .fy-myth-row{grid-template-columns:1fr}
  .fy-myth-wrong{border-right:none;border-bottom:1.5px solid var(--brown-700)}
  .fy-who-grid{grid-template-columns:1fr}
}

/* ---------- 扩充：说明段 ---------- */
.lc-note,.cl-note,.fy-note,.xx-note,.jz-note,.kt-note,.kd-note,.tx-note{background:var(--cream-50)}
.lc-note .narrow,.cl-note .narrow,.fy-note .narrow,.xx-note .narrow,.jz-note .narrow,.kt-note .narrow,.kd-note .narrow,.tx-note .narrow{max-width:820px}
.note-body p{color:var(--ink-soft);line-height:2;margin-bottom:14px;font-size:15.5px}