/* online.html · 在线咨询表单 —— 专属命名空间 .pg-online */
.pg-online { background: var(--c-cream); }

.online-hero { padding: 150px 0 80px; background:
  linear-gradient(120deg, rgba(51,80,60,.8), rgba(51,80,60,.45)),
  url("../images/banner-online.jpg") center/cover no-repeat; color: var(--c-cream); }
.online-hero .crumb { color: rgba(251,247,240,.85); margin-bottom: 1rem; }
.online-hero .crumb a { color: var(--c-sage); }
.online-hero h1 { color: var(--c-cream); font-size: clamp(2rem,4.5vw,3rem); margin-bottom: .8rem; }
.online-hero p { max-width: 620px; color: #E9EFE4; }

.online-main { padding: 80px 0; }
.online-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 2.5rem; align-items: start; }

/* 表单卡 */
.online-form { background: var(--c-white); border-radius: var(--radius); padding: 2.4rem; box-shadow: var(--shadow-card); border-top: 5px solid var(--c-green-d); }
.online-form h2 { font-size: 1.5rem; margin-bottom: .4rem; }
.online-form .form-sub { font-size: .9rem; color: var(--c-ink); margin-bottom: 1.5rem; }
.online-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.online-form textarea { min-height: 140px; resize: vertical; }
.online-form .btn { width: 100%; margin-top: .5rem; }
.online-form .form-tip { font-size: .8rem; color: var(--c-ink); opacity: .75; margin-top: .8rem; text-align: center; }

/* 侧栏 */
.online-side .side-block { background: var(--c-white); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-card); margin-bottom: 1.3rem; }
.online-side .side-block h3 { font-size: 1.05rem; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--c-line); }
.contact-line { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; font-size: .95rem; }
.contact-line .cl-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--c-sage); display: flex; align-items: center; justify-content: center; }
.notice-list li { position: relative; padding-left: 1.3rem; margin-bottom: .55rem; font-size: .88rem; color: var(--c-ink); }
.notice-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-apricot-d); }
.online-side img { border-radius: 12px; margin-top: .5rem; }
.online-side .side-cap { margin-top: .6rem; font-size: .85rem; color: var(--c-ink); opacity: .85; }

/* 底部安心条 */
.online-peace { padding: 0 0 80px; }
.peace-band { background: var(--c-sand); border-radius: var(--radius); padding: 2.2rem 2.5rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.peace-band img { border-radius: 12px; width: 220px; height: 140px; object-fit: cover; }
.peace-band h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.peace-band p { font-size: .92rem; color: var(--c-ink); }

/* 大家都来问什么 */
.online-who { padding: 70px 0 20px; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.who-item { background: var(--c-white); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-card); }
.who-item h3 { font-size: 1.05rem; margin-bottom: .5rem; color: var(--c-forest); }
.who-item p { font-size: .92rem; color: var(--c-ink); }

/* 办理流程六问 */
.online-flow { padding: 60px 0 10px; }
.flow6 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; }
.f6-item { background: var(--c-white); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-card); border-top: 4px solid var(--c-green); }
.f6-item h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--c-forest); }
.f6-item p { font-size: .88rem; color: var(--c-ink); }
.flow-note { margin-top: 1.3rem; font-size: .92rem; color: var(--c-ink); opacity: .9; }
@media (max-width: 768px) { .flow6 { grid-template-columns: 1fr; } }

.what-happens { margin-top: 2rem; background: var(--c-white); border-radius: var(--radius); padding: 1.8rem 2rem; box-shadow: var(--shadow-card); border-left: 4px solid var(--c-green-d); }
.what-happens h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.what-happens p { font-size: .92rem; color: var(--c-ink); margin-bottom: .6rem; }

/* 关于费用 */
.online-fee { padding: 40px 0 10px; }
.fee-wrap { background: var(--c-white); border-radius: var(--radius); padding: 2.2rem 2.5rem; box-shadow: var(--shadow-card); border-left: 5px solid var(--c-gold); }
.fee-wrap h2 { font-size: 1.35rem; margin-bottom: .8rem; }
.fee-wrap p { font-size: .95rem; color: var(--c-ink); margin-bottom: .8rem; }

@media (max-width: 768px) { .who-grid { grid-template-columns: 1fr; } }

/* 常见问题表单预答 */
.online-qna { padding: 60px 0 10px; }
.qna-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: center; }
.qna-img img { border-radius: var(--radius); width: 100%; height: auto; box-shadow: var(--shadow-card); }
.qna-body h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.qna-body p { font-size: .92rem; color: var(--c-ink); margin-bottom: .7rem; }

/* 咨询后服务示意 */
.online-after { padding: 50px 0 10px; }
.after-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: center; background: var(--c-white); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-card); }
.after-wrap img { border-radius: 12px; width: 100%; height: auto; }
.after-wrap h2 { font-size: 1.25rem; margin-bottom: .7rem; }
.after-wrap p { font-size: .93rem; color: var(--c-ink); margin-bottom: .6rem; }

/* 常见顾虑 */
.online-worry { padding: 50px 0 30px; }
.worry-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: center; background: var(--c-white); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-card); }
.worry-wrap img { border-radius: 12px; width: 100%; height: auto; }
.worry-wrap h2 { font-size: 1.25rem; margin-bottom: .7rem; }
.worry-wrap p { font-size: .92rem; color: var(--c-ink); margin-bottom: .5rem; }
@media (max-width: 768px) { .worry-wrap { grid-template-columns: 1fr; } }

@media (max-width: 1024px) {
  .online-grid { grid-template-columns: 1fr; }
  .peace-band { grid-template-columns: 1fr; }
  .qna-grid { grid-template-columns: 1fr; }
  .after-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .online-form .form-row { grid-template-columns: 1fr; }
  .online-form { padding: 1.6rem; }
}