/* ============================================================
   标准版套餐详情页（package-standard.html）页面专属样式
   布局特征：压图首屏 + 左图右文画像 + 纵向时间轴优势 +
             三列清单 + 竖轴周节奏 + 不对称图文 CTA
   依赖：base.css
   ============================================================ */

/* ---------- ① 压图首屏 ---------- */
.s-hero{ position:relative; overflow:hidden; }
.s-hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.s-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(255,246,220,.96) 30%, rgba(255,228,240,.78) 62%, rgba(255,228,240,.35));
}
.s-hero-inner{ position:relative; padding:70px 0 80px; }
.s-crumb{ margin-bottom:26px; }
.s-hero-card{ max-width:560px; }
.s-hero-card h1{ margin:14px 0 16px; }
.s-hero-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }

/* ---------- ② 适用对象 ---------- */
.s-who{ padding:60px 0 10px; }
.s-who-grid{
  display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center;
}
.s-who-photo img{
  border-radius:var(--r-l); border:3px dashed var(--pink-mid);
  box-shadow:var(--shadow-m);
}
.s-who-text h2{ margin:12px 0 14px; }
.s-who-points{ margin-top:16px; }
.s-who-points li{
  position:relative; padding:8px 0 8px 30px; font-size:15px; font-weight:600;
}
.s-who-points li::before{
  content:""; position:absolute; left:2px; top:14px;
  width:14px; height:14px; border-radius:50%;
  background:var(--pink-mid);
}

/* ---------- ③ 纵向时间轴优势 ---------- */
.s-why{ padding:60px 0 10px; }
.why-line{
  position:relative; max-width:780px; margin:0 auto;
  padding-left:0;
}
.why-line::before{
  content:""; position:absolute; left:19px; top:8px; bottom:8px;
  width:3px; border-left:3px dashed var(--pink-mid);
}
.why-line li{
  position:relative; padding:0 0 26px 60px;
}
.why-line li:last-child{ padding-bottom:6px; }
.why-dot{
  position:absolute; left:8px; top:4px;
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  box-shadow:0 0 0 6px var(--pink-soft);
}
.why-body{
  background:var(--white); border-radius:var(--r-m);
  padding:20px 24px; box-shadow:var(--shadow-s);
  border:2px dashed transparent;
  transition:border-color .2s ease, transform .25s ease;
}
.why-body:hover{ border-color:var(--pink-mid); transform:translateX(5px); }
.why-body h3{ font-size:18px; margin-bottom:6px; }
.why-body p{ margin:0; font-size:14.5px; }

/* ---------- ④ 三列清单 ---------- */
.s-list{ padding:60px 0 10px; }
.s-list-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s-list-col{
  background:var(--white); border-radius:var(--r-l);
  padding:28px 26px; box-shadow:var(--shadow-s);
  border-top:5px solid var(--pink);
}
.s-list-col:nth-child(2){ border-top-color:var(--yellow); }
.s-list-col:nth-child(3){ border-top-color:var(--green); }
.s-list-col h3{ font-size:18px; margin-bottom:16px; padding-bottom:12px; border-bottom:2px dashed var(--pink-mid); }
.s-list-col:nth-child(2) h3{ border-bottom-color:var(--yellow-soft); }
.s-list-col:nth-child(3) h3{ border-bottom-color:var(--green-mid); }
.s-list-col ul li{
  position:relative; padding:7px 0 7px 24px; font-size:14.5px;
}
.s-list-col ul li::before{
  content:""; position:absolute; left:2px; top:13px;
  width:10px; height:10px; border-radius:50%;
  background:var(--pink-mid);
}
.s-list-col:nth-child(2) ul li::before{ background:var(--yellow); }
.s-list-col:nth-child(3) ul li::before{ background:var(--green); }

/* ---------- ⑤ 竖轴周节奏 ---------- */
.s-track{ padding:60px 0 10px; }
.track-line{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative; margin-bottom:18px;
}
.track-line li{
  position:relative; padding:0 16px 0 0;
}
.track-line li::before{
  content:""; display:block; height:6px; width:100%;
  background:repeating-linear-gradient(90deg, var(--pink-mid) 0 10px, transparent 10px 20px);
  border-radius:3px; margin-bottom:14px;
}
.track-line b{
  display:inline-block; font-size:13px; font-weight:800;
  background:var(--pink-soft); color:var(--pink-deep);
  padding:4px 14px; border-radius:var(--r-full);
}
.track-line h3{ font-size:17px; margin:10px 0 6px; }
.track-line p{ margin:0; font-size:13.5px; }
.track-note{ text-align:center; font-size:14px; margin:0; }
.track-note a{ color:var(--pink-deep); font-weight:700; }

/* ---------- ⑥ FAQ ---------- */
.s-faq{ padding:60px 0 10px; }
.s-faq-wrap{ max-width:860px; }
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:var(--white); border-radius:var(--r-m);
  border:2px dashed var(--yellow-soft); padding:6px 24px;
}
.faq-item[open]{ border-color:var(--pink-mid); }
.faq-item summary{
  cursor:pointer; font-weight:800; color:var(--ink);
  padding:14px 34px 14px 0; list-style:none; position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:10px; height:10px; border-right:2.5px solid var(--pink-deep);
  border-bottom:2.5px solid var(--pink-deep);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.faq-item p{ padding:0 0 16px; margin:0; font-size:14.5px; }
.faq-item p a{ color:var(--pink-deep); font-weight:700; }

/* ---------- ⑦ CTA（不对称图文块） ---------- */
.s-cta{ padding:60px 0 20px; }
.s-cta-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--white); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--shadow-m);
  border:2px dashed var(--pink-mid);
}
.s-cta-photo img{ height:100%; width:100%; object-fit:cover; }
.s-cta-text{ padding:48px 44px; align-self:center; }
.s-cta-text h2{ margin-bottom:12px; }
.s-cta-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; }

/* ================= 响应式 ================= */
@media (max-width:1023.98px){
  .s-who-grid{ grid-template-columns:1fr; gap:26px; }
  .s-list-grid{ grid-template-columns:1fr; }
  .track-line{ grid-template-columns:1fr 1fr; gap:22px; }
  .track-line li::before{ display:none; }
  .s-cta-grid{ grid-template-columns:1fr; }
  .s-cta-text{ padding:30px 24px; }
}
@media (max-width:767.98px){
  .track-line{ grid-template-columns:1fr; }
  .s-hero-inner{ padding:50px 0 56px; }
  .s-hero-btns .btn{ width:100%; }
  .s-cta-btns .btn{ width:100%; }
}