/* =============================================================
   responsive-website.html 专属样式 —— 左文+三设备 mockup 首屏
   ============================================================= */

/* ---------- 首屏 ---------- */
.rs-hero{
  background:var(--paper);
  padding:calc(var(--topbar-h) + var(--header-h) + 80px) 0 100px;
  overflow:hidden;
}
.rs-hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;
}
.rs-kicker{font-size:12.5px;letter-spacing:.45em;color:var(--earth-deep);margin-bottom:22px}
.rs-title{font-size:clamp(32px,4.6vw,52px);line-height:1.35;margin-bottom:22px}
.rs-title span{color:var(--earth-deep)}
.rs-sub{font-size:15.5px;line-height:2;color:var(--ink-soft);margin-bottom:32px}

/* 三设备 mockup（纯 CSS） */
.rs-devices{display:flex;align-items:flex-end;justify-content:center;gap:18px}
.rs-device{background:var(--dark);border-radius:10px 10px 0 0;padding:10px 10px 0;position:relative}
.rs-screen{
  background:linear-gradient(135deg,var(--earth-light),var(--brown));
  border-radius:4px 4px 0 0;position:relative;overflow:hidden;
}
.rs-screen::before{
  content:"";position:absolute;left:12%;right:12%;top:18%;height:8px;background:rgba(255,255,255,.55);
  box-shadow:0 22px 0 rgba(255,255,255,.35),0 44px 0 rgba(255,255,255,.2);
}
.rs-desktop{width:300px}
.rs-desktop .rs-screen{height:190px}
.rs-tablet{width:150px}
.rs-tablet .rs-screen{height:200px}
.rs-phone{width:90px}
.rs-phone .rs-screen{height:210px}

/* ---------- 为什么 ---------- */
.rs-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.rs-why-grid .num{font-family:var(--font-serif);font-size:52px;color:var(--earth-deep);display:block;margin-bottom:14px}
.rs-why-grid .num small{font-size:24px}
.rs-why-note{font-size:14px;color:var(--ink-soft);line-height:1.9;max-width:320px;margin:0 auto}

/* ---------- 断点表 ---------- */
.rs-break{margin-top:0}
.rs-break-table{max-width:880px;margin:0 auto;border:1px solid var(--line)}
.rs-break-row{
  display:grid;grid-template-columns:180px 200px 1fr;gap:20px;
  padding:18px 24px;border-bottom:1px dashed var(--line);font-size:14.5px;align-items:center;
}
.rs-break-row:last-child{border-bottom:none}
.rs-break-row>span:first-child{color:var(--earth-deep);font-weight:600;font-family:var(--font-serif)}
.rs-break-row>span:nth-child(2){color:var(--ink-soft)}
.rs-break-row>span:last-child{color:var(--ink)}
.rs-break-row--head{
  background:var(--dark);color:#EFE9DC;font-size:13px;letter-spacing:.15em;
}
.rs-break-row--head>span{color:#EFE9DC;font-family:var(--font-serif)}
.rs-break-note{margin-top:22px;font-size:14px;color:var(--ink-soft);text-align:center}
.rs-break-note a{color:var(--earth-deep);border-bottom:1px dashed var(--earth)}

/* ---------- 三端细节 ---------- */
.rs-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.rs-detail-card{padding:30px 28px;background:var(--paper);border:1px solid var(--line);border-bottom:3px solid var(--brown-light)}
.rs-detail-card h3{font-size:19px;margin-bottom:12px;color:var(--earth-deep)}
.rs-detail-card p{font-size:14px;color:var(--ink-soft);line-height:1.95}

/* ---------- 性能（深色） ---------- */
.rs-perf{margin-top:0}
.rs-perf-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.rs-perf-photo img{width:100%;box-shadow:var(--shadow)}
.rs-perf-copy p{font-size:14.5px;color:#B0A896;line-height:2;margin:14px 0 14px}
.rs-perf-copy a{color:var(--earth-light);border-bottom:1px dashed rgba(201,169,104,.5)}

/* ---------- 测试 ---------- */
.rs-test-list{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.rs-test-list>div{padding:26px 22px;background:var(--paper);border:1px solid var(--line)}
.rs-test-list h3{font-size:16px;margin-bottom:10px;color:var(--earth-deep)}
.rs-test-list p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- 对比 ---------- */
.rs-compare{margin-top:0}
.rs-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:880px;margin:0 auto}
.rs-compare-grid>div{background:var(--paper);border:1px solid var(--line);padding:30px 30px 26px}
.rs-compare-grid h3{font-size:18px;margin-bottom:16px;color:var(--earth-deep);padding-bottom:12px;border-bottom:2px solid var(--earth)}
.rs-compare-grid ul li{font-size:14px;color:var(--ink-soft);padding:7px 0 7px 22px;position:relative;line-height:1.8}
.rs-compare-grid ul li::before{content:"—";position:absolute;left:0;color:var(--earth)}
.rs-compare-grid a{color:var(--earth-deep);border-bottom:1px dashed var(--earth)}

/* ---------- 适用 ---------- */
.rs-test-photo,.rs-compare-photo,.rs-fit-photo{max-width:880px;margin:30px auto 0}
.rs-test-photo img,.rs-compare-photo img,.rs-fit-photo img{width:100%;box-shadow:var(--shadow)}
.rs-fit-tags{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.rs-fit-note{font-size:14px;color:var(--ink-soft);line-height:1.9}
.rs-fit-note a{color:var(--earth-deep);border-bottom:1px dashed var(--earth)}

/* ---------- FAQ ---------- */
.rs-faq{margin-top:0}
.rs-faq-wrap{max-width:860px}
.rs-faq .section-head{margin-bottom:34px}

/* ---------- CTA ---------- */
.rs-cta{background:var(--paper-deep);padding:96px 0;text-align:center}
.rs-cta-inner h2{font-size:clamp(26px,3.4vw,38px);line-height:1.5;margin-bottom:30px}
.rs-cta-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.rs-cta-row a{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-soft)}
.rs-cta-row svg{width:16px;height:16px;fill:var(--earth)}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .rs-hero-inner{grid-template-columns:1fr;gap:44px}
  .rs-why-grid{grid-template-columns:1fr;gap:36px}
  .rs-break-row{grid-template-columns:1fr;gap:6px}
  .rs-detail-grid,.rs-test-list{grid-template-columns:1fr 1fr}
  .rs-perf-wrap{grid-template-columns:1fr;gap:30px}
  .rs-compare-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .rs-detail-grid,.rs-test-list{grid-template-columns:1fr}
  .rs-tablet{display:none}
}