/* G1-08 Batch B: page-owned CSS extracted from canonical projects/zhending/index.html. Production Shared Header/Footer remain separately owned. */
:root{--paper:#fff;--soft:#f6f7f8;--ink:#0a0c0f;--muted:#646b74;--line:#dfe3e7;--navy:#0d3977;--dark:#0d1117;--accent:#5b39ff;--max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;width:100%}
a{color:inherit}
p,h1,h2,h3{margin-top:0}
.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}
.eyebrow,.kicker{margin:0 0 14px;font-size:10px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.eyebrow{color:#ef6a38}
.kicker{color:#808791}
.hero{padding:86px 0 78px}
.trigger{display:grid;grid-template-columns:170px minmax(0,1fr);gap:28px;padding:18px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:44px}
.trigger span{font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:#8b9199}
.trigger strong{font-size:18px;line-height:1.4;font-weight:720}
.hero-copy{max-width:940px}
.hero h1{margin:0 0 22px;font-size:clamp(52px,5.6vw,76px);line-height:.98;letter-spacing:-.058em;font-weight:780}
.hero-lead{max-width:840px;margin:0;color:var(--muted);font-size:18px;line-height:1.66}
.meta{margin-top:50px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.meta>div{padding:22px 22px 23px 0}
.meta>div+div{padding-left:22px;border-left:1px solid var(--line)}
.meta span{display:block;margin-bottom:7px;color:#8a9098;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.meta strong{font-size:14px;line-height:1.45;font-weight:690}
.section{padding:92px 0;border-top:1px solid var(--line)}
.section.soft{background:var(--soft)}
.section-head{max-width:860px;margin-bottom:42px}
.section-head h2{margin:0 0 15px;font-size:clamp(40px,4vw,58px);line-height:1.03;letter-spacing:-.05em;font-weight:760}
.section-head p{margin:0;color:var(--muted);font-size:16px;line-height:1.68}
.narrow{max-width:800px}
.narrow p{margin:0;color:#373d45;font-size:20px;line-height:1.62}
.narrow strong{color:#0d1014}
.hero-image,.visual-large{border:1px solid var(--line);background:#fff;overflow:hidden}
.hero-image img,.visual-large img{width:100%;height:auto}
.visual-caption{margin-top:12px;color:#7b828b;font-size:10px;line-height:1.55}
.statement{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.statement h3{margin:0;font-size:34px;line-height:1.08;letter-spacing:-.04em}
.statement p{margin:0;color:#626a74;font-size:16px;line-height:1.7}
.logic{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logic div{padding:22px 18px}
.logic div+div{border-left:1px solid var(--line)}
.logic span{display:block;margin-bottom:8px;color:#8b9199;font-size:9px;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.logic strong{display:block;font-size:18px;line-height:1.25}
.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.image-card{border:1px solid var(--line);background:#fff}
.image-card img{width:100%}
.image-label{display:flex;justify-content:space-between;gap:16px;padding:12px 0 10px;color:#777f89;font-size:10px}
.image-label strong{color:#15191e;font-size:11px}
.view-compare{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:22px;align-items:center}
.view-col{min-width:0}
.view-kicker{display:block;margin-bottom:8px;color:#8a9098;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.view-title{margin:0 0 13px;font-size:21px;line-height:1.2;letter-spacing:-.03em}
.view-image{border-top:1px solid var(--line);padding-top:14px}
.view-image img{width:100%;border:1px solid var(--line);background:#fff}
.view-caption{margin:10px 0 0;color:#747c86;font-size:11px;line-height:1.55}
.view-arrow{display:flex;align-items:center;justify-content:center;color:#969da6;font-size:30px;font-weight:400}
.view-arrow:before{content:"→"}
.change-table{width:100%;border-collapse:collapse;table-layout:fixed;border-top:1px solid var(--line)}
.change-table th,.change-table td{padding:20px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.change-table th{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#848b94}
.change-table th:first-child,.change-table td:first-child{width:24%;padding-left:0}
.change-table td{font-size:14px;line-height:1.55;color:#444b54}
.change-table td:first-child{color:#11151a;font-weight:750}
.change-table td strong{color:#11151a}
.proof-pair{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
.proof-copy{padding-top:8px}
.proof-copy h3{margin:0 0 16px;font-size:34px;line-height:1.08;letter-spacing:-.04em}
.proof-copy p{margin:0 0 22px;color:#626a74;font-size:16px;line-height:1.7}
.proof-list{display:grid;gap:0;border-top:1px solid var(--line)}
.proof-list div{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}
.bottomline{padding:90px 0;border-top:1px solid var(--line)}
.bottomline h2{margin:0 0 18px;max-width:900px;font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.052em}
.bottomline p{max-width:820px;margin:0;color:#515861;font-size:17px;line-height:1.65}
.boundary{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);max-width:840px;color:#7c838b;font-size:10px;line-height:1.6}
.case-cta{padding:88px 0 94px;background:var(--dark);color:#fff}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:64px;align-items:end}
.case-cta h2{margin:0 0 17px;font-size:clamp(44px,4.6vw,64px);line-height:1;letter-spacing:-.052em}
.case-cta .lead{max-width:720px;margin:0;color:#aab2bc;font-size:15px;line-height:1.65}
.cta-side{border-left:1px solid #303741;padding-left:28px}
.cta-side strong{display:block;margin-bottom:8px;font-size:18px}
.cta-side p{margin:0 0 19px;color:#8f98a4;font-size:12px;line-height:1.55}
.buttons{display:flex;flex-direction:column;gap:9px}
.button{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;text-decoration:none;font-size:11px;font-weight:800}
.button.primary{background:var(--accent);color:#fff}
.button.secondary{border:1px solid #37404c;color:#fff}
@media (max-width:900px){.wrap{width:min(100% - 36px,var(--max))}
.hero{padding-top:58px}
.trigger,.meta,.statement,.logic,.image-grid,.proof-pair,.cta-grid{grid-template-columns:1fr}
.view-compare{grid-template-columns:1fr;gap:26px}
.view-arrow{justify-content:flex-start;font-size:24px}
.view-arrow:before{content:"↓"}
.trigger{gap:8px}
.meta>div,.meta>div+div{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}
.meta>div:last-child{border-bottom:0}
.logic div,.logic div+div{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}
.logic div:last-child{border-bottom:0}
.change-table{display:block;overflow-x:auto}
.change-table th,.change-table td{min-width:180px}
.cta-side{border-left:0;border-top:1px solid #303741;padding:24px 0 0}
.section{padding:70px 0}
.hero h1{font-size:49px}}
@media (max-width:560px){.wrap{width:calc(100% - 28px)}
.hero h1{font-size:42px}
.hero-lead{font-size:16px}
.section-head h2,.bottomline h2,.case-cta h2{font-size:38px}
.statement h3,.proof-copy h3{font-size:30px}}
/* =========================================================
   ZHENDING V1 — case-system optimization
   Scope: current Case Study brand system + What Changed hierarchy + single CTA.
   Content story and frozen sections remain unchanged.
   ========================================================= */
:root{--paper:#fff;
  --bg:#f6f6f4;
  --soft:#f3f4f5;
  --ink:#0b0b0d;
  --muted:#646872;
  --line:#dcdde1;
  --violet:#5a46f6;
  --dark:#0b0c0f;
  --accent:#5a46f6;
  --max:1380px;}
body{background:var(--paper);color:var(--ink)}
.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}
/* Frozen Case Study Header */
/* Brand signals */
.eyebrow,.kicker{margin:0 0 14px;font-size:10px;line-height:1.2;letter-spacing:.15em;text-transform:uppercase;font-weight:800}
.eyebrow{color:var(--violet)}
.kicker{color:#81858d}
/* Hero — retain ZHENDING composition, reduce old-template weight */
.hero{padding:82px 0 88px;background:#f8f8f6}
.trigger{max-width:920px;grid-template-columns:155px minmax(0,1fr);gap:28px;padding:17px 0 19px;margin-bottom:40px;border-top:1px solid var(--line);border-bottom:0}
.trigger span{color:#8b9098;font-size:9px}
.trigger strong{max-width:690px;color:#3a3e45;font-size:16px;line-height:1.5;font-weight:640}
.hero-copy{max-width:1040px}
.hero h1{max-width:1020px;margin:0 0 24px;font-size:clamp(54px,5vw,78px);line-height:.99;letter-spacing:-.058em;font-weight:760}
.hero-lead{max-width:830px;color:var(--muted);font-size:17px;line-height:1.68}
.meta{max-width:1160px;margin-top:46px;border-color:var(--line)}
.meta>div{padding:20px 20px 21px 0}
.meta>div+div{padding-left:20px;border-color:var(--line)}
.meta span{color:#8a8e96;font-size:8.5px}
.meta strong{color:#34373d;font-size:13px;line-height:1.45;font-weight:650}
/* Shared section system */
.section{padding:96px 0;border-top:1px solid var(--line)}
.section.soft{background:var(--soft)}
.section-head{max-width:900px;margin-bottom:44px}
.section-head h2{max-width:860px;margin:0 0 15px;font-size:clamp(42px,4.3vw,62px);line-height:1.03;letter-spacing:-.052em;font-weight:750}
.section-head p{max-width:720px;color:var(--muted);font-size:16px;line-height:1.7}
.narrow{max-width:820px}
.narrow p{color:#3d4249;font-size:20px;line-height:1.62}
/* Never upscale case evidence images. Scale down only when needed. */
.hero-image img,.visual-large img,.image-card img,.view-image img{width:auto;
  max-width:100%;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  object-fit:contain;}
.hero-image,.visual-large,.image-card,.view-image img{border-color:var(--line)}
/* Signature section: Factory View → Buyer View */
.view-compare{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:30px}
.view-kicker{color:#858d98;font-size:9px}
.view-title{font-size:22px;line-height:1.22;font-weight:720;color:#24282e}
.view-image{border-color:var(--line);padding-top:15px}
.view-caption{color:#777e88;line-height:1.58}
.view-arrow{color:var(--violet);opacity:.7;font-size:28px}
/* What Changed — relationship, not audit table */
.change-stack{border-top:1px solid var(--line)}
.change-row{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,.82fr) 48px minmax(0,1.46fr);gap:26px;align-items:start;padding:30px 0 32px;border-bottom:1px solid var(--line)}
.change-area{padding-top:21px;color:#20242a;font-size:13px;line-height:1.45;font-weight:760}
.change-before,.change-after{position:relative;padding-top:21px;line-height:1.58}
.change-before{color:#747b85;font-size:14px}
.change-after{color:#191d23;font-size:18px;font-weight:710;letter-spacing:-.01em}
.change-before::before,.change-after::before{position:absolute;top:0;left:0;font-size:8px;line-height:1;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:#969da7}
.change-before::before{content:"Internal-company view"}
.change-after::before{content:"Buyer-facing view"}
.change-arrow{align-self:center;position:relative;height:1px;background:#c7ccd2;margin-top:30px}
.change-arrow::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1px solid var(--violet);border-right:1px solid var(--violet);transform:translateY(-50%) rotate(45deg)}
/* Buyer Research */
.proof-pair{grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.proof-copy{max-width:560px;padding-top:0}
.proof-copy h3{font-size:clamp(34px,3.2vw,48px);line-height:1.06;letter-spacing:-.045em;font-weight:740}
.proof-copy p{color:#626873;line-height:1.7}
.proof-list{border-color:var(--line)}
.proof-list div{border-color:var(--line);color:#292d33}
/* Bottom line */
.bottomline{padding:96px 0 100px;background:var(--bg);border-top:1px solid var(--line)}
.bottomline h2{max-width:980px;font-size:clamp(46px,4.5vw,66px);line-height:1.01;letter-spacing:-.054em;font-weight:755}
.bottomline p{max-width:820px;color:#515861;font-size:17px;line-height:1.68}
.boundary{border-color:var(--line);color:#81858c;font-size:11px;line-height:1.62}
/* Final CTA — one action */
.case-cta{padding:94px 0 100px;background:var(--dark);color:#fff}
.cta-grid{grid-template-columns:minmax(0,1fr) 330px;gap:72px;align-items:end}
.case-cta .eyebrow{color:#aaa1ff}
.case-cta h2{max-width:920px;font-size:clamp(44px,4.4vw,64px);line-height:1.01;letter-spacing:-.052em;font-weight:745}
.case-cta .lead{color:#aab2bc;line-height:1.66}
.cta-side{border-left:0;border-top:1px solid rgba(255,255,255,.11);padding:22px 0 0}
.cta-side .fit-note{margin:0 0 20px;color:#8f98a4;font-size:12px;line-height:1.62}
.buttons{display:flex;flex-direction:column;gap:9px}
.button{min-height:52px;padding:0 16px;border-radius:6px;font-size:12px;font-weight:760}
.button.primary{background:linear-gradient(135deg,#533bff,#654fff);color:#fff}
@media (max-width:1040px){.wrap{width:min(100% - 48px,var(--max))}
.proof-pair,.cta-grid{grid-template-columns:1fr}
.proof-pair{gap:38px}
.cta-grid{gap:46px}
.change-row{grid-template-columns:130px minmax(0,.88fr) 38px minmax(0,1.28fr);gap:18px}}
@media (max-width:900px){.wrap{width:min(100% - 36px,var(--max))}
.hero{padding:64px 0 72px}
.trigger{grid-template-columns:1fr;gap:7px}
.meta{grid-template-columns:1fr 1fr}
.meta>div,.meta>div+div{padding:16px 18px 17px 0;border-left:0;border-bottom:1px solid var(--line)}
.meta>div:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}
.section{padding:78px 0}
.view-compare{grid-template-columns:1fr;gap:26px}
.view-arrow{justify-content:flex-start;font-size:24px}
.view-arrow:before{content:"↓"}}
@media (max-width:560px){.wrap{width:calc(100% - 28px)}
.hero{padding:54px 0 66px}
.hero h1{font-size:43px}
.hero-lead{font-size:16px}
.meta{grid-template-columns:1fr}
.meta>div,.meta>div+div,.meta>div:nth-child(even){padding:14px 0;border-left:0;border-bottom:1px solid var(--line)}
.meta>div:last-child{border-bottom:0}
.section{padding:72px 0 76px}
.section-head{margin-bottom:34px}
.section-head h2,.bottomline h2,.case-cta h2{font-size:38px}
.change-row{grid-template-columns:1fr;gap:12px;padding:24px 0 26px}
.change-area{padding-top:0}
.change-before,.change-after{padding-top:19px}
.change-arrow{width:26px;margin:2px 0 0}
.proof-copy h3{font-size:34px}
.case-cta{padding:72px 0 78px}}
/* =========================================================
   ZHENDING V2 — final kicker specificity lock
   Fix only: prevent paragraph rules from overriding case labels.
   ========================================================= */
.section-head .kicker,.proof-copy .kicker,.bottomline .kicker{margin:0 0 14px;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:800;
  color:#81858d;}
.case-cta .eyebrow{margin:0 0 14px;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:800;
  color:#aaa1ff;}
@media (max-width:560px){.hero .eyebrow{font-size:9px;
    line-height:1.2;
    letter-spacing:.15em;}}