/* ============================================================
   fuwu-liucheng.css —— 服务流程与保障（L3 之字画廊）
   斜线 hero、图文之字交错、各块高度边距错开
   ============================================================ */

.eyebrow-light{ color:var(--brown-500) !important; }
.eyebrow-light::before{ background:var(--brown-500); }

/* ---------- Hero：斜线窄条 ---------- */
.hero3{
  position:relative; padding:calc(var(--header-h) + 70px) 0 90px; overflow:hidden;
  background:var(--green-950); color:var(--cream-50);
}
.hero3__strip{
  position:absolute; left:0; right:0; bottom:-1px; height:60px;
  background:var(--cream-50);
  clip-path:polygon(0 100%,0 40%,30% 100%,100% 100%,100% 0);
}
.hero3 .breadcrumb{ color:rgba(251,248,241,.6); margin-bottom:20px; }
.hero3 .breadcrumb a{ color:var(--cream-100); }
.hero3__eyebrow{ font-size:13px; letter-spacing:.34em; color:var(--brown-500); margin-bottom:18px; }
.hero3 h1{ color:var(--cream-50); font-size:clamp(32px,4.6vw,56px); margin-bottom:22px; }
.hero3__lead{ color:rgba(251,248,241,.74); max-width:560px; font-size:16.5px; margin-bottom:30px; }
.hero3__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero3 .btn-line{ border-color:var(--cream-50); color:var(--cream-50); }
.hero3 .btn-line:hover{ background:var(--cream-50); color:var(--green-900); }

/* ---------- 时间轴：三列 ---------- */
.tl3{ max-width:900px; margin-inline:auto; }
.tl3__row{
  display:grid; grid-template-columns:110px 40px 1fr; align-items:stretch;
}
.tl3__time{ text-align:right; padding-top:6px; }
.tl3__time b{ font-family:var(--font-serif); font-size:26px; color:var(--brown-500); display:block; line-height:1.1; }
.tl3__time span{ font-size:12.5px; color:var(--muted); }
.tl3__axis{ position:relative; }
.tl3__axis::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line-strong);
}
.tl3__axis i{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%; background:var(--cream-50);
  border:3px solid var(--green-700);
}
.tl3__content{ padding:0 0 34px 20px; }
.tl3__content h3{ margin-bottom:6px; }
.tl3__content p{ font-size:14.5px; }
.tl3__content a{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 之字图文块 ---------- */
.zig3__block{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,60px);
  align-items:center; margin-bottom:clamp(40px,6vw,70px);
}
.zig3__block--flip{ grid-template-columns:.9fr 1.1fr; }
.zig3__block--flip .zig3__pic{ order:2; }
.zig3__pic img{ box-shadow:var(--shadow-md); }
.zig3__block:nth-child(2) .zig3__pic img{ transform:translateY(20px); }
.zig3__block:nth-child(3) .zig3__pic img{ transform:translateY(-14px); }
.zig3__tag{
  display:inline-block; font-size:12.5px; letter-spacing:.24em; color:var(--brown-700);
  border-bottom:2px solid var(--brown-500); padding-bottom:4px; margin-bottom:14px;
}
.zig3__text h3{ margin-bottom:12px; }
.zig3__text p{ font-size:15.5px; }

/* ---------- 三保障 ---------- */
.guar3__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.guar3{
  background:var(--green-900); color:var(--cream-50); border-radius:var(--radius-m);
  padding:34px 28px; position:relative; overflow:hidden;
}
.guar3::before{
  content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%;
  border:24px solid rgba(176,141,102,.16);
}
.guar3 b{ font-family:var(--font-serif); font-size:24px; display:block; margin-bottom:10px; }
.guar3 p{ color:rgba(251,248,241,.74); font-size:14.5px; position:relative; z-index:1; }
.guar3 a{ color:var(--brown-500); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 费用 ---------- */
.fee3__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.fee3__copy p{ margin:14px 0 24px; }
.fee3__list{ display:grid; gap:0; }
.fee3__list li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid rgba(251,248,241,.14);
}
.fee3__list b{ font-family:var(--font-serif); color:var(--cream-100); font-size:18px; flex:none; }
.fee3__list span{ color:rgba(251,248,241,.66); font-size:14px; text-align:right; }

/* ---------- 反馈 ---------- */
.fb3__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.fb3{
  border:1.5px solid var(--line-strong); border-radius:var(--radius-m); padding:28px 26px;
  transition:all .35s var(--ease); display:block; background:var(--white);
}
.fb3:hover{ border-color:var(--green-800); transform:translateY(-5px); }
.fb3 h3{ margin-bottom:8px; }
.fb3 p{ font-size:14px; }
.fb3 a{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; }

/* ---------- FAQ ---------- */
.faq3__list{ max-width:800px; margin-inline:auto; display:grid; gap:12px; }
.faq3-item{ background:var(--white); border-radius:var(--radius-s); padding:4px 20px; border:1px solid var(--line); }
.faq3-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center;
  padding:16px 0; font-weight:600; color:var(--green-900); font-size:15px;
}
.faq3-item summary span{ flex:none; width:26px; height:26px; position:relative; }
.faq3-item summary span::before{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:1.6px; background:var(--brown-600); transform:translate(-50%,-50%);
}
.faq3-item summary span::after{
  content:""; position:absolute; left:50%; top:50%; width:1.6px; height:14px; background:var(--brown-600); transform:translate(-50%,-50%); transition:transform .3s;
}
.faq3-item[open] summary span::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq3-item p{ padding:0 0 16px; font-size:14.5px; }
.faq3-item a{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; }

/* ---------- CTA ---------- */
.book3__inner{
  background:
    radial-gradient(circle at 85% 20%, rgba(176,141,102,.22), transparent 45%),
    var(--cream-100);
  border:1px solid var(--line); border-radius:var(--radius-l);
  padding:clamp(34px,5vw,60px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.book3__copy h2{ margin-bottom:10px; }
.book3__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .zig3__block,.zig3__block--flip{ grid-template-columns:1fr; }
  .zig3__block--flip .zig3__pic{ order:0; }
  .guar3__grid,.fb3__grid,.fee3__grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .tl3__row{ grid-template-columns:76px 28px 1fr; }
  .tl3__content{ padding-left:12px; }
}