/* DongFeng Resources — B2B redesign, scoped to .df-resources (FSE-safe, never touches global header/footer) */
.df-resources{
  --ink:#0a0a0a; --ink-soft:#161616;
  --paper:#f6f6f4; --paper-2:#efefec;
  --line:#e1e1dd; --line-strong:#cfcfca;
  --muted:#6f6f6a; --muted-2:#9a9a94;
  --maxw:1200px;
  --pad-x:clamp(1.25rem,5vw,4rem);
  --sec-y:clamp(3.5rem,8vw,6.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --display:"Archivo",'Noto Sans SC',system-ui,sans-serif;
  --body:"Inter",'Noto Sans SC',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-family:var(--body); color:var(--ink); line-height:1.6; font-size:clamp(15px,1.05vw,17px); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.df-resources *,.df-resources *::before,.df-resources *::after{box-sizing:border-box; margin:0; padding:0}
.df-resources img,.df-resources svg{display:block; max-width:100%}
.df-resources a{color:inherit; text-decoration:none}
.df-resources ::selection{background:var(--ink); color:#fff}
.df-resources .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x)}
.df-resources .eyebrow{font-family:var(--mono); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.7rem; margin-bottom:.7rem}
.df-resources .eyebrow::before{content:""; width:34px; height:1px; background:var(--ink)}
.df-resources h1,.df-resources h2,.df-resources h3{font-family:var(--display); font-weight:700; line-height:1.04; letter-spacing:-.02em}
.df-resources h2{font-size:clamp(1.8rem,4vw,3rem)}
.df-resources h3{font-size:1.12rem; letter-spacing:-.01em}
.df-resources p{max-width:62ch}
.df-resources p:empty{display:none!important;margin:0!important;padding:0!important}
.df-resources .lead{font-size:clamp(.7rem,1vw,.85rem); color:var(--ink-soft); line-height:1.4}
.df-resources .btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--body); font-weight:600; font-size:.95rem; padding:.85rem 1.5rem; border:1.5px solid var(--ink); transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease); cursor:pointer; background:var(--ink); color:#fff}
.df-resources .btn:hover{transform:translateY(-2px)}
.df-resources .btn--ghost{background:transparent; color:var(--ink)}
.df-resources .btn--ghost:hover{background:var(--ink); color:#fff}
.df-resources .btn .arw{transition:transform .35s var(--ease)}
.df-resources .btn:hover .arw{transform:translateX(4px)}
.df-resources .hero{background:var(--ink); color:#fff; overflow:hidden}
.df-resources .hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(1.3rem,3.3vw,2.7rem); align-items:center; padding-block:clamp(1.3rem,3.1vw,2.5rem)}
.df-resources .hero .eyebrow{color:#b9b9b4}
.df-resources .hero .eyebrow::before{background:#fff}
.df-resources .hero h1{font-size:clamp(1.4rem,3.3vw,2.4rem); line-height:1.08; max-width:16ch; margin-bottom:.6rem; color:#fff!important}
.df-resources .hero .lead{color:#e2e2de; max-width:48ch}
.df-resources .hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem}
.df-resources .hero .btn--ghost{border-color:#fff; color:#fff}
.df-resources .hero .btn--ghost:hover{background:#fff; color:var(--ink)}
.df-resources .hero-aside{border-left:1px solid rgba(255,255,255,.18); padding-left:clamp(.8rem,2vw,1.6rem)}
.df-resources .hero-stat .n{font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,2.3vw,1.7rem); line-height:1}
.df-resources .hero-stat + .hero-stat{margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.18)}
.df-resources .hero-stat .l{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#9a9a94; margin-top:.3rem}
.df-resources section.res{padding-block:var(--sec-y)}
.df-resources .sec-head{max-width:62ch; margin-bottom:clamp(2rem,5vw,3rem)}
.df-resources .sec-head h2{margin-bottom:1rem}
.df-resources .res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.5vw,1.8rem)}
.df-resources .res-card{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.df-resources .res-card:hover{transform:translateY(-4px); border-color:var(--ink); box-shadow:0 22px 40px -30px rgba(0,0,0,.5)}
.df-resources .res-thumb{aspect-ratio:16/10; overflow:hidden; background:var(--paper-2)}
.df-resources .res-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.df-resources .res-card:hover .res-thumb img{transform:scale(1.04)}
.df-resources .res-thumb-ph{width:100%; display:grid; place-items:center; background:linear-gradient(135deg,var(--paper-2),#e4e4df); color:var(--muted-2); font-family:var(--display); font-weight:700; font-size:1.6rem; letter-spacing:.06em}
.df-resources .res-body{padding:clamp(1.1rem,2vw,1.5rem); display:flex; flex-direction:column; gap:.6rem; flex:1}
.df-resources .res-tag{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.df-resources .res-card h3{line-height:1.2}
.df-resources .res-ex{font-size:.92rem; color:var(--muted); line-height:1.55; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis}
.df-resources .res-more{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); display:inline-flex; gap:.4rem; margin-top:auto}
.df-resources .res-empty{grid-column:1/-1; padding:2.5rem; border:1px dashed var(--line-strong); color:var(--muted); text-align:center}
.df-resources .ed{background:var(--ink); color:#fff}
.df-resources .ed .eyebrow{color:#9a9a94}
.df-resources .ed .eyebrow::before{background:#fff}
.df-resources .ed h2{color:#fff}
.df-resources .ed-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); margin-top:2.5rem}
.df-resources .ed-item{border-top:1px solid rgba(255,255,255,.2); padding-top:1.3rem}
.df-resources .ed-item .k{font-family:var(--display); font-weight:700; font-size:1.35rem; margin-bottom:.5rem}
.df-resources .ed-item p{color:#c9c9c5; font-size:.94rem}
.df-resources section.faq{padding-block:clamp(2.4rem,5.5vw,4rem)}
.df-resources .faq .sec-head{margin-bottom:clamp(1.4rem,3.5vw,2rem)}
.df-resources .faq-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.df-resources .faq-list{border-top:1px solid var(--line)}
.df-resources .faq-item{border-bottom:1px solid var(--line)}
.df-resources .faq-q{width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--ink); padding:.78rem 0; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.df-resources .faq-q .pm{flex:none; width:22px; height:22px; position:relative}
.df-resources .faq-q .pm::before,.df-resources .faq-q .pm::after{content:""; position:absolute; background:var(--ink); transition:.35s var(--ease)}
.df-resources .faq-q .pm::before{top:10px; left:0; width:22px; height:2px}
.df-resources .faq-q .pm::after{left:10px; top:0; width:2px; height:22px}
.df-resources .faq-item.open .pm::after{transform:scaleY(0)}
.df-resources .faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease); color:var(--muted); font-size:.96rem}
.df-resources .faq-a p{color:var(--muted); padding-bottom:.85rem; font-size:.96rem}
.df-resources .faq-item.open .faq-a{max-height:640px}
.df-resources .cta{background:var(--ink); color:#fff; text-align:center; padding-block:clamp(3.5rem,8vw,6rem)}
.df-resources .cta h2{color:#fff; max-width:20ch; margin-inline:auto}
.df-resources .cta p{color:#c9c9c5; margin:1rem auto 2rem; max-width:50ch}
.df-resources .cta .hero-actions{justify-content:center}
.df-resources .cta .btn--ghost{border-color:#fff; color:#fff}
.df-resources .cta .btn--ghost:hover{background:#fff; color:var(--ink)}
/* safe CSS-only reveal: content is visible by default, gently rises on load */
.df-resources .reveal{animation:df-rise .7s var(--ease) both}
@keyframes df-rise{from{transform:translateY(18px)} to{transform:none}}
@media(max-width:980px){
  .df-resources .hero-grid{grid-template-columns:1fr; gap:clamp(1.8rem,5vw,2.6rem)}
  .df-resources .hero-aside{border-left:0; border-top:1px solid rgba(255,255,255,.18); padding-left:0; padding-top:1.6rem}
  .df-resources .res-grid{grid-template-columns:repeat(2,1fr)}
  .df-resources .ed-grid{grid-template-columns:1fr}
  .df-resources .faq-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .df-resources .res-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .df-resources .reveal{animation:none}
}

.df-resources{margin-top:0!important}
/* ============================================================
   Shared content-section components for category-landing pages
   De-scoped from product.css (.df-resources.product-single -> .df-resources.cat-landing)
   so the 4 product-category landing pages reuse the SAME component
   design system as the single-chamber product page, from one source.
   Scoped to .cat-landing so /machine and product pages are untouched.
   ============================================================ */

/* Section rhythm + container */
.df-resources.cat-landing .sec{ padding-block: var(--sec-y); }
.df-resources.cat-landing .sec > .wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.df-resources.cat-landing .sec-head{ max-width: 62ch; margin-bottom: clamp(2rem,5vw,3rem); }
.df-resources.cat-landing .sec-head h2{ margin-bottom: 1rem; }
.df-resources.cat-landing .sec-head .lead{ font-size: clamp(.7rem,1vw,.85rem); color: var(--ink-soft); line-height: 1.55; }

/* Grids */
.df-resources.cat-landing .grid-2,
.df-resources.cat-landing .grid-3,
.df-resources.cat-landing .grid-4{ display: grid; gap: clamp(1.2rem,3vw,2rem); }
.df-resources.cat-landing .grid-2{ grid-template-columns: 1fr; }
.df-resources.cat-landing .grid-3{ grid-template-columns: 1fr; }
.df-resources.cat-landing .grid-4{ grid-template-columns: 1fr; }
@media (min-width: 680px){
  .df-resources.cat-landing .grid-2{ grid-template-columns: 1fr 1fr; }
  .df-resources.cat-landing .grid-3{ grid-template-columns: repeat(3,1fr); }
  .df-resources.cat-landing .grid-4{ grid-template-columns: repeat(4,1fr); }
}

/* Definition box + note + placeholder */
.df-resources.cat-landing .def-box{ background: none; border: 0; border-radius: 0; padding: 0; }
.df-resources.cat-landing .def-box p{ margin: .2rem 0 .9rem; font-size: 1.06rem; line-height: 1.72; color: var(--ink); font-weight: 500; }
.df-resources.cat-landing .note{ font-size: .9rem; color: var(--muted); margin-top: 1rem; }
.df-resources.cat-landing .ph{ aspect-ratio: 1/1; display: grid; place-items: center; background: linear-gradient(135deg,var(--paper-2),#e4e4df); border: 1px solid var(--line); color: var(--muted-2); font-family: var(--display); font-weight: 700; font-size: clamp(1rem,2vw,1.4rem); text-align: center; padding: 1.5rem; border-radius: 4px; }

/* Advantages */
.df-resources.cat-landing .adv-item{ border: 1px solid var(--line); padding: clamp(1.2rem,3vw,1.8rem); background: #fff; border-radius: 4px; }
.df-resources.cat-landing .adv-item .ic{ font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--muted-2); margin-bottom: .6rem; }
.df-resources.cat-landing .adv-item h3{ font-size: 1.1rem; margin-bottom: .5rem; }
.df-resources.cat-landing .adv-item p{ font-size: .92rem; color: var(--muted); margin: 0; }

/* Spec / Compare tables (horizontal scroll on mobile) */
.df-resources.cat-landing .spec-table,
.df-resources.cat-landing .cmp-table{ border-collapse: collapse; font-size: .92rem; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; width: auto; max-width: 100%; }
.df-resources.cat-landing .spec-table thead th,
.df-resources.cat-landing .cmp-table thead th{ background: var(--ink); color: #fff; text-align: left; padding: .7rem .8rem; font-family: var(--display); font-weight: 600; }
.df-resources.cat-landing .spec-table th,
.df-resources.cat-landing .cmp-table th{ text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; }
.df-resources.cat-landing .spec-table td,
.df-resources.cat-landing .cmp-table td{ padding: .7rem .8rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.df-resources.cat-landing .spec-table tbody tr:last-child td,
.df-resources.cat-landing .spec-table tbody tr:last-child th,
.df-resources.cat-landing .cmp-table tbody tr:last-child td,
.df-resources.cat-landing .cmp-table tbody tr:last-child th{ border-bottom: 0; }
.df-resources.cat-landing .sec > .wrap > .spec-table,
.df-resources.cat-landing .sec > .wrap > .cmp-table{ display: block; overflow-x: auto; white-space: nowrap; }
@media (min-width: 720px){
  .df-resources.cat-landing .sec > .wrap > .spec-table,
  .df-resources.cat-landing .sec > .wrap > .cmp-table{ display: table; overflow: visible; white-space: normal; }
}

/* Steps */
.df-resources.cat-landing .steps{ display: grid; gap: 1.2rem; }
.df-resources.cat-landing .step{ display: flex; gap: 1rem; align-items: flex-start; }
.df-resources.cat-landing .step .num{ flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; }
.df-resources.cat-landing .step h3{ font-size: 1.05rem; margin-bottom: .3rem; }
.df-resources.cat-landing .step p{ font-size: .92rem; color: var(--muted); margin: 0; }

/* Applications */
.df-resources.cat-landing .app-item{ display: block; border: 1px solid var(--line); padding: clamp(1.2rem,3vw,1.8rem); background: #fff; border-radius: 4px; text-decoration: none; color: var(--ink); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.df-resources.cat-landing .app-item:hover{ border-color: var(--ink); transform: translateY(-3px); }
.df-resources.cat-landing .app-item .t{ font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.df-resources.cat-landing .app-item h3{ font-size: 1.05rem; margin: .4rem 0 0; }

/* Selection cards */
.df-resources.cat-landing .sel-card{ border: 1px solid var(--line); padding: clamp(1.2rem,3vw,1.8rem); background: var(--paper); border-radius: 4px; }
.df-resources.cat-landing .sel-card h3{ font-size: 1.05rem; margin-bottom: .5rem; }
.df-resources.cat-landing .sel-card p{ font-size: .92rem; color: var(--muted); margin: 0; }

/* Price cards */
.df-resources.cat-landing .price-grid{ display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 680px){ .df-resources.cat-landing .price-grid{ grid-template-columns: repeat(3,1fr); } }
.df-resources.cat-landing .price-card{ border: 1px solid var(--line); padding: clamp(1.4rem,3vw,2rem); background: #fff; border-radius: 4px; display: flex; flex-direction: column; gap: .4rem; }
.df-resources.cat-landing .price-card.feature{ border-color: var(--ink); box-shadow: 0 18px 40px -30px rgba(0,0,0,.5); }
.df-resources.cat-landing .price-card .pc-name{ font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.df-resources.cat-landing .price-card .pc-range{ font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.df-resources.cat-landing .price-card ul{ list-style: none; padding: 0; margin: .4rem 0 0; font-size: .9rem; color: var(--muted); }
.df-resources.cat-landing .price-card li{ padding: .25rem 0; border-top: 1px solid var(--line); }

/* Cross-sell */
.df-resources.cat-landing .res-grid{ display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 680px){ .df-resources.cat-landing .res-grid{ grid-template-columns: repeat(3,1fr); } }
.df-resources.cat-landing .cross-item{ display: block; border: 1px solid var(--line); background: #fff; border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.df-resources.cat-landing .cross-item:hover{ border-color: var(--ink); transform: translateY(-3px); }
.df-resources.cat-landing .cross-item .res-thumb-ph{ aspect-ratio: 1/1; display: grid; place-items: center; background: linear-gradient(135deg,var(--paper-2),#e4e4df); color: var(--muted-2); font-family: var(--display); font-weight: 700; font-size: 1.2rem; padding: 1rem; text-align: center; }
.df-resources.cat-landing .cross-item h3{ font-size: 1.05rem; margin: .8rem 1rem .2rem; }
.df-resources.cat-landing .cross-item .res-more{ margin: .2rem 1rem .9rem; }

/* Product type / spec tags (also fixes /machine rail labels) */
.df-resources.cat-landing .prod-type{ position: absolute; top: .8rem; left: .8rem; z-index: 2; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--ink); padding: .38rem .6rem; }
.df-resources.cat-landing .prod-spec{ font-family: var(--mono); font-size: .66rem; letter-spacing: .03em; color: var(--muted); line-height: 1.55; margin-top: .15rem; }
/* —— 恢复分类筛选条 UI(原 2026-07-16 版 subnav/chip 规则) —— */
.df-resources .subnav{border-block:1px solid var(--line); background:var(--paper)}
.df-resources .subnav-inner{display:flex; flex-wrap:wrap; gap:.6rem; padding-block:1rem}
.df-resources .chip{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.55rem 1rem; border:1px solid var(--line-strong); color:var(--ink-soft); transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.df-resources .chip:hover,.df-resources .chip[aria-current="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}

/* How-it-works: steps + flowchart - desktop 2 columns, mobile stack */
.df-resources.cat-landing .how-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.df-resources.cat-landing .how-media img{ width:100%; height:auto; border:1px solid var(--line); border-radius:6px; background:#fff; display:block; }
@media (max-width:860px){
  .df-resources.cat-landing .how-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .df-resources.cat-landing .how-media{ order:2; }
}