/* G1-08 Batch B: page-owned CSS extracted from canonical projects/vazpo/index.html. Production Shared Header/Footer remain separately owned. */
:root{--paper:#fff;--bg:#f5f6f7;--ink:#0a0c0f;--muted:#626974;--line:#dfe3e7;
  --line-strong:#c7cdd4;--navy:#0d3977;--orange:#f15b2a;--dark:#0d1117;--max:1240px;
  --pad:clamp(22px,4vw,64px);--section:clamp(84px,9vw,132px);}
*{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;text-rendering:optimizeLegibility}
img{display:block;width:100%}
a{color:inherit}
p,h1,h2,h3,figure{margin-top:0}
.wrap{width:min(var(--max),calc(100% - (var(--pad) * 2)));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:var(--orange)}
.kicker{color:#7f8790}
.section{padding:var(--section) 0;border-top:1px solid var(--line)}
.section.soft{background:var(--bg)}
.section-head h2,.bottomline h2,.case-cta h2{letter-spacing:-.052em}
/* 01 — HERO / 7:5 */
.hero{padding:clamp(64px,7vw,100px) 0 0}
.hero-shell{display:grid;grid-template-columns:minmax(0,7fr) minmax(360px,5fr);gap:clamp(44px,6vw,86px);align-items:stretch}
.hero-copy{padding:8px 0 56px}
.business-trigger{margin:0 0 28px;padding:0 0 18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:145px minmax(0,1fr);gap:24px;align-items:start}
.business-trigger span{font-size:9px;line-height:1.45;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#8a9098}
.business-trigger strong{font-size:16px;line-height:1.5;letter-spacing:-.015em;font-weight:680;color:#24282e}
.hero h1{margin:0 0 24px;max-width:760px;font-size:clamp(52px,5.05vw,74px);line-height:.975;letter-spacing:-.058em;font-weight:780}
.hero-lead{max-width:760px;margin:0;color:var(--muted);font-size:18px;line-height:1.7}
.hero-dossier{border-left:1px solid var(--line);padding:8px 0 56px clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.dossier-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#858c95;font-weight:800}
.dossier-client{margin:12px 0 34px;font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:-.045em;font-weight:760}
.dossier-results{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.result{padding:26px 20px 28px 0}
.result+.result{padding-left:24px;border-left:1px solid var(--line)}
.result strong{display:block;color:var(--navy);font-size:clamp(46px,4.6vw,68px);line-height:.92;letter-spacing:-.06em}
.result span{display:block;margin-top:9px;color:#636a73;font-size:11px;line-height:1.55}
.result-note{margin:12px 0 0;color:#8b9198;font-size:10px;line-height:1.55}
.dossier-meta{margin-top:34px;display:grid;gap:0;border-top:1px solid var(--line)}
.dossier-meta>div{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.dossier-meta{margin-top:30px;padding-top:2px;border-top:1px solid var(--line)}
.dossier-meta span{color:#8a9098;font-size:8px;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.dossier-meta strong{font-size:12px;line-height:1.45;font-weight:680}
/* 02 — TRANSFORMATION / 38:62 */
.transformation{background:#fff}
.transform-intro{display:grid;grid-template-columns:minmax(0,.82fr) minmax(340px,1.18fr);gap:clamp(34px,5vw,72px);align-items:end;margin-bottom:28px}
.transform-intro .section-head{margin:0}
.section-head{max-width:870px}
.section-head h2{margin:0 0 16px;font-size:clamp(42px,4.4vw,62px);line-height:1.01;font-weight:760}
.section-head p{margin:0;color:var(--muted);font-size:16px;line-height:1.68}
.transform-intro .section-head p:last-child{max-width:600px}
.transform-intro .section-head h2{font-size:clamp(38px,3.55vw,52px);line-height:1.01;margin-bottom:0}
.transform-intro .section-head:last-child{padding-bottom:3px}
.transform-grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(22px,3vw,38px);align-items:stretch}
.compare-panel{min-width:0;display:flex;flex-direction:column}
.compare-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;font-size:10px;color:#747b84}
.compare-title strong{color:#11151a;font-size:11px;letter-spacing:.02em}
.snapshot{border:1px solid #d8dde2;background:#fff;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;flex:1}
.compare-panel:hover .snapshot{border-color:#b9c0c8;transform:translateY(-2px);box-shadow:0 18px 50px rgba(13,17,23,.06)}
.compare-panel.after .snapshot{border-color:#b7c3d2}
.browser-bar{height:34px;border-bottom:1px solid #e3e6e9;background:#f7f8f9;display:flex;align-items:center;gap:6px;padding:0 12px}
.browser-dot{width:7px;height:7px;border-radius:50%;background:#c8cdd2}
.snapshot-body{padding:clamp(18px,2vw,28px)}
.product-top{display:grid;grid-template-columns:32% 68%;gap:clamp(16px,2vw,28px);align-items:center}
.before .product-top{grid-template-columns:38% 62%}
.product-img{aspect-ratio:1/1.08;background:#f8fafc;border:1px solid #eceff2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.product-copy h3{margin:0 0 9px;font-size:clamp(19px,2vw,28px);line-height:1.05;letter-spacing:-.04em}
.product-copy .small{margin:0 0 14px;color:#68707a;font-size:11px;line-height:1.55}
.focus-label,.option-label{display:block;margin:0 0 7px;color:#7d858e;font-size:8px;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
.legacy-action{display:inline-flex;align-items:center;justify-content:center;padding:13px 16px;background:var(--navy);color:#fff;text-decoration:none;font-size:11px;font-weight:800;border-radius:2px}
.new-path{display:inline-flex;margin:0 0 8px;padding:5px 8px;border:1px solid #ffd4c5;background:#fff4ef;color:var(--orange);font-size:8px;letter-spacing:.11em;text-transform:uppercase;font-weight:800;border-radius:999px}
.options{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.option{padding:7px 10px;border:1px solid #d8dde3;background:#fff;font-size:10px}
.option.active{border-color:var(--navy);color:var(--navy);font-weight:800}
.qty{display:flex;align-items:center;width:108px;border:1px solid #d8dde3;margin-bottom:12px}
.qty span{width:34px;text-align:center;padding:8px 0;font-size:11px}
.qty strong{width:40px;text-align:center;font-size:11px}
.action-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.action{display:flex;align-items:center;justify-content:center;padding:12px 10px;text-decoration:none;font-size:10px;font-weight:800;border-radius:2px}
.action.sample{background:var(--orange);color:#fff}
.action.bulk{border:1px solid var(--navy);color:var(--navy)}
.compare-caption{margin:12px 0 0;color:#78808a;font-size:10px;line-height:1.5}
/* 03 — PROBLEM / RISK / 45:55 */
.problem-grid{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(48px,7vw,110px);align-items:start}
.problem-grid .section-head{position:sticky;top:118px;margin:0}
.problem-copy{padding-top:34px;border-top:1px solid var(--line-strong)}
.problem-copy p{margin:0;color:#353b43;font-size:clamp(20px,2vw,28px);line-height:1.58;letter-spacing:-.018em}
.problem-copy strong{color:#0d1014}
.problem-signal{margin-top:54px;border-top:1px solid var(--line)}
.problem-signal div{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.problem-signal span{font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#8b9198;font-weight:800}
.problem-signal strong{font-size:13px;line-height:1.5;font-weight:680}
/* 04 — DECISION / full width x3 */
.decision{background:#fff}
.decision-head{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:clamp(44px,6vw,88px);align-items:end;margin-bottom:54px}
.decision-head h3{margin:0;max-width:760px;font-size:clamp(30px,3vw,42px);line-height:1.08;letter-spacing:-.045em}
.decision-stack{border-top:1px solid var(--ink)}
.decision-row{display:grid;grid-template-columns:minmax(130px,.58fr) minmax(0,.95fr) 72px minmax(0,1.17fr);column-gap:clamp(20px,3vw,44px);align-items:center;padding:42px 0 46px;border-bottom:1px solid var(--line);position:relative;transition:background .2s ease}
.decision-row:hover{background:linear-gradient(90deg,rgba(13,57,119,.025),rgba(13,57,119,0) 68%)}
.decision-row .label{align-self:start;padding-top:23px;font-size:10px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:#5f6771;font-weight:800}
.decision-row .before-text,.decision-row .after-text{position:relative;padding-top:23px;font-size:clamp(17px,1.45vw,21px);line-height:1.5;letter-spacing:-.018em}
.decision-row .before-text{color:#6a717a}
.decision-row .after-text{color:#15191e}
.decision-row .before-text::before,.decision-row .after-text::before{position:absolute;top:0;left:0;font-size:8px;line-height:1;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#9aa0a7}
.decision-row .before-text::before{content:"Before"}
.decision-row .after-text::before{content:"After"}
.decision-row .after-text strong{color:#11151a;font-weight:720}
.decision-row::after{content:"";grid-column:3;grid-row:1;justify-self:stretch;height:1px;background:#b8bec5;position:relative}
.decision-row::before{content:"";grid-column:3;grid-row:1;justify-self:end;width:7px;height:7px;border-top:1px solid #7e8791;border-right:1px solid #7e8791;transform:rotate(45deg);z-index:1}
.decision-colhead{display:none}
/* 05 — EVIDENCE / full width ledger */
.evidence{background:#f8f9fa}
.evidence-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;margin-bottom:40px}
.evidence-head .section-head{margin:0;max-width:760px}
.evidence-counts{display:grid;grid-template-columns:1fr 1fr;min-width:360px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.evidence-counts div{padding:18px 18px 20px 0}
.evidence-counts div+div{border-left:1px solid var(--line);padding-left:22px}
.evidence-counts strong{display:block;color:var(--navy);font-size:34px;line-height:1;letter-spacing:-.05em}
.evidence-counts span{display:block;margin-top:7px;color:#6f7680;font-size:9px;line-height:1.5}
.ledger{border-top:2px solid #161a1f;background:transparent}
.ledger table{width:100%;border-collapse:collapse;table-layout:fixed}
.ledger th,.ledger td{padding:20px 10px;border-bottom:1px solid #cfd4d9;text-align:left;vertical-align:top}
.ledger th:first-child,.ledger td:first-child{padding-left:0}
.ledger th:last-child,.ledger td:last-child{padding-right:0}
.ledger th{padding-top:12px;padding-bottom:12px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#858c95;font-weight:800;border-bottom-color:#aeb5bc}
.ledger td{font-size:11.5px;line-height:1.58;color:#3f464e;transition:color .18s ease,background .18s ease}
.ledger tbody .evidence-record:hover td{background:rgba(255,255,255,.46);color:#1d2228}
.ledger tbody .evidence-record.is-open td{background:rgba(255,255,255,.64);color:#171c21;border-bottom-color:transparent}
.ledger td:first-child{font-weight:650;color:#151a20}
.ledger td:last-child{color:#2d343c}
.ledger code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#10151b;font-size:10.5px;line-height:1.55;overflow-wrap:anywhere}
.ledger td:last-child code{font-weight:750;background:rgba(13,57,119,.05);padding:2px 4px}
.record-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.record-toggle:focus-visible{outline:2px solid rgba(13,57,119,.38);outline-offset:5px;border-radius:2px}
.record-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:-2px;border:1px solid #c4c9cf;color:#626b75;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1;transition:border-color .18s ease,color .18s ease,background .18s ease}
.evidence-record.is-open .record-mark{border-color:#7f8892;background:#fff;color:#161b20}
.evidence-detail td{padding:0!important;background:rgba(255,255,255,.66)!important;border-bottom:1px solid #aeb5bc!important}
.evidence-detail-panel{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:42px;padding:22px 28px 26px 0}
.evidence-detail-block span{display:block;margin-bottom:7px;color:#8a9199;font-size:8px;line-height:1.2;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.evidence-detail-block p{margin:0;color:#30373f;font-size:12px;line-height:1.65}
.evidence-detail-block code{font-size:11px;font-weight:750}
.state{display:inline-flex;padding:2px 0 4px;border-radius:0;background:transparent!important;font-size:8px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid currentColor}
.keep{color:#1e6a3e}
.redirect{color:#275b9b}
.hold{color:#a54b28}
.review{color:#7b6514}
.evidence-note{max-width:860px;margin:18px 0 0;color:#747b84;font-size:10px;line-height:1.6}
/* 06 — RESULT / 55:45 */
.bottomline{padding:var(--section) 0;border-top:1px solid var(--line)}
.result-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(48px,7vw,110px);align-items:start}
.result-main h2{margin:0 0 22px;max-width:720px;font-size:clamp(46px,4.6vw,66px);line-height:.99;font-weight:760}
.result-main>p{max-width:720px;margin:0;color:#515861;font-size:17px;line-height:1.7}
.result-main>p strong{color:#11151a}
.boundary{margin:0;padding:26px 0 0;border-top:1px solid var(--line-strong);color:#666e77;font-size:11px;line-height:1.7}
/* 07 — FULL WIDTH CTA */
.case-cta{padding:clamp(92px,9vw,132px) 0;background:var(--dark);color:#fff}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.52fr);gap:clamp(54px,7vw,100px);align-items:end}
.case-cta h2{margin:0 0 18px;max-width:860px;font-size:clamp(48px,4.8vw,68px);line-height:.98;font-weight:760}
.case-cta .lead{max-width:760px;margin:0;color:#abb3bd;font-size:15px;line-height:1.7}
.cta-side{border-top:1px solid #3a424c;padding-top:24px}
.cta-side strong{display:block;margin-bottom:8px;font-size:18px}
.cta-side p{margin:0 0 22px;color:#929ba6;font-size:12px;line-height:1.6}
.buttons{display:flex;flex-direction:column;gap:9px}
.button{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;text-decoration:none;font-size:11px;font-weight:800;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.button:hover{transform:translateY(-2px)}
.button.primary{background:#5b39ff;color:#fff}
.button.secondary{border:1px solid #3b444f;color:#fff}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.reveal{opacity:1;transform:none;transition:none}
.snapshot,.button,.decision-row{transition:none}}
@media (max-width:1020px){.hero-shell,.transform-intro,.problem-grid,.decision-head,.evidence-head,.result-grid,.cta-grid{grid-template-columns:1fr}
.hero-dossier{border-left:0;border-top:1px solid var(--line);padding:34px 0 44px}
.transform-grid{grid-template-columns:1fr}
.compare-panel.after{margin-top:16px}
.problem-grid .section-head{position:static}
.problem-copy{padding-top:0}
.decision-head{gap:18px}
.decision-row{grid-template-columns:130px minmax(0,1fr) 54px minmax(0,1.08fr);column-gap:20px}
.evidence-counts{min-width:0;max-width:520px}
.cta-grid{align-items:start}}
@media (max-width:720px){:root{--pad:18px;--section:72px}
/* Mobile P0 — keep Situation + Proof together, without changing Desktop */
.hero{padding-top:42px}
.hero-copy{padding:4px 0 28px}
.business-trigger{grid-template-columns:1fr;gap:6px;margin-bottom:20px;padding-bottom:14px}
.hero h1{font-size:clamp(42px,12vw,58px);margin-bottom:18px}
.hero-lead{font-size:16px;line-height:1.62}
.hero-dossier{padding:22px 0 34px}
.hero-dossier>div:first-child{display:flex;flex-direction:column}
.dossier-results{order:0;grid-template-columns:1fr 1fr;border-top:0;border-bottom:1px solid var(--line)}
.dossier-results .result{padding:15px 12px 18px 0}
.dossier-results .result+.result{border-top:0;border-left:1px solid var(--line);padding-left:14px}
.dossier-results .result strong{font-size:clamp(38px,10vw,48px)}
.dossier-results .result span{font-size:9.5px;line-height:1.42;margin-top:6px}
.dossier-label{order:1;margin-top:17px}
.dossier-client{order:2;margin:6px 0 0;font-size:22px;line-height:1.05}
.result-note{order:3;margin:10px 0 0;font-size:9px}
.dossier-meta{margin-top:18px}
.dossier-meta>div{grid-template-columns:92px 1fr;gap:12px;padding:10px 0}
/* Mobile P1 — Before is compact evidence; After remains the full proof */
.transform-intro{gap:12px;margin-bottom:20px}
.transform-intro .section-head h2{font-size:clamp(36px,9.4vw,44px)}
.transform-grid{gap:0}
.compare-panel.before{margin-bottom:10px}
.compare-panel.after{margin-top:10px}
.compare-title{margin-bottom:8px}
.compare-title span{display:none}
.before .snapshot{flex:0 0 auto}
.before .browser-bar{height:26px;padding:0 9px}
.before .browser-dot{width:6px;height:6px}
.before .snapshot-body{padding:12px}
.before .product-top{grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center}
.before .product-img{aspect-ratio:1/1}
.before .product-copy h3{font-size:17px;line-height:1.08;margin-bottom:5px}
.before .product-copy .small{font-size:9.5px;line-height:1.4;margin-bottom:8px}
.before .focus-label{margin-bottom:5px}
.before .legacy-action{padding:9px 11px;font-size:9.5px}
.before .compare-caption{margin-top:8px}
.after .product-top{grid-template-columns:1fr}
.after .product-img{aspect-ratio:16/10}
.action-stack{grid-template-columns:1fr}
.evidence-counts{grid-template-columns:1fr}
.evidence-counts div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
.section-head h2,.bottomline h2,.case-cta h2{font-size:clamp(38px,10vw,48px)}
.problem-signal div{grid-template-columns:1fr;gap:5px}
.decision-colhead{display:none}
.decision-row{grid-template-columns:1fr;gap:18px;padding:30px 0 34px}
.decision-row .label{padding-top:0;margin-bottom:2px}
.decision-row .before-text,.decision-row .after-text{padding-top:20px;font-size:16px}
.decision-row::before,.decision-row::after{display:none}
/* Mobile P1 — preserve the technical ledger and make horizontal handling discoverable */
.ledger-mobile-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-10px 0 10px;padding:7px 0;color:#707780;font-size:9px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;font-weight:800;border-bottom:1px solid var(--line);transition:opacity .2s ease,max-height .2s ease,margin .2s ease,padding .2s ease}
.ledger-mobile-hint::after{content:"→";font-size:13px;letter-spacing:0;color:#4f5964}
.ledger-mobile-hint.is-dismissed{opacity:0;max-height:0;margin:0;padding:0;border:0;overflow:hidden}
.ledger{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;position:relative}
.ledger table{min-width:760px}
.ledger th,.ledger td{padding:14px 12px}
.record-mark{width:24px;height:24px;margin-top:-4px}
.evidence-detail-panel{grid-template-columns:1fr;gap:16px;padding:18px 18px 22px 0}
.evidence-detail-block p{font-size:11.5px}}
@media (min-width:721px){.ledger-mobile-hint{display:none}}
/* =========================================================
   RONGJING visual-brand unification
   Master reference: index (2).html
   Scope: visual system only — case-study content and behavior preserved
   ========================================================= */
:root{--paper:#f7f7f8;
  --bg:#f3f4f6;
  --ink:#090909;
  --muted:#6d7485;
  --line:#dddddf;
  --line-strong:#cfd3d8;
  --violet:#533bff;
  --violet2:#634cff;
  --dark:#101927;
  --dark-deep:#090c11;
  --max:1260px;
  --pad:clamp(24px,4vw,48px);
  --section:clamp(88px,8vw,112px);}
html{scroll-padding-top:96px}
body{background:var(--paper);
  color:var(--ink);
  letter-spacing:-.005em;}
::selection{background:rgba(83,59,255,.16)}
/* Header — same scale and restraint as the master homepage */
/* Shared editorial system */
.wrap{width:min(var(--max),calc(100% - (var(--pad) * 2)))}
.section,.bottomline{border-top:1px solid var(--line)}
.eyebrow,.kicker{color:#7b8491;
  font-size:10.5px;
  line-height:1.15;
  letter-spacing:.14em;
  font-weight:780;}
.eyebrow{color:var(--violet)}
.section-head h2,.bottomline h2,.case-cta h2{color:#111318;
  letter-spacing:-.047em;
  text-wrap:balance;}
.section-head p{color:var(--muted);font-size:15px;line-height:1.68}
/* 01 — Hero: editorial, wide, light, no boxed-card styling */
.hero{min-height:680px;
  padding:96px 0 86px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  overflow:hidden;}
.hero-shell{grid-template-columns:minmax(0,7fr) minmax(360px,5fr);
  gap:clamp(64px,7vw,104px);
  align-items:start;}
.hero-copy{padding:4px 0 0}
.business-trigger{margin:0 0 30px;
  padding:0 0 20px;
  grid-template-columns:150px minmax(0,1fr);
  gap:28px;
  border-bottom:1px solid #d8dadd;}
.business-trigger span{color:#818a97;font-size:9.5px;letter-spacing:.13em}
.business-trigger strong{color:#242832;font-size:15px;line-height:1.6;font-weight:650}
.hero h1{max-width:760px;
  margin:0 0 26px;
  font-size:clamp(54px,4.6vw,68px);
  line-height:.99;
  letter-spacing:-.055em;
  font-weight:760;
  text-wrap:balance;}
.hero-lead{max-width:700px;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.72;}
.hero-dossier{border-left:1px solid #d8dadd;
  padding:4px 0 0 clamp(34px,3vw,48px);
  min-height:100%;}
.dossier-label{color:#7b8491;font-size:10px;letter-spacing:.14em}
.dossier-client{margin:12px 0 34px;
  color:#111318;
  font-size:clamp(32px,3vw,44px);
  font-weight:750;
  letter-spacing:-.045em;}
.dossier-results{border-color:#d8dadd}
.result{padding:28px 20px 30px 0}
.result+.result{border-color:#d8dadd}
.result strong{color:var(--violet);
  font-size:clamp(46px,4vw,62px);
  letter-spacing:-.055em;}
.result span{color:#69727f;font-size:11px;line-height:1.55}
.result-note{margin-top:14px;color:#939aa5;font-size:10px;line-height:1.55}
.dossier-meta{margin-top:32px;border-color:#d8dadd}
.dossier-meta>div{grid-template-columns:112px 1fr;padding:15px 0;border-color:#d8dadd}
.dossier-meta span{color:#858d98;font-size:8.5px}
.dossier-meta strong{color:#252a32;font-size:12px;font-weight:650}
/* 02 — Transformation: master-style light editorial evidence */
.transformation{background:#fcfcfd}
.transform-intro{grid-template-columns:minmax(0,.9fr) minmax(360px,.72fr);
  gap:clamp(56px,6vw,84px);
  align-items:end;
  margin-bottom:44px;}
.transform-intro .section-head h2{max-width:720px;
  font-size:clamp(40px,3.7vw,52px);
  line-height:1.035;}
.transform-intro .section-head:last-child{justify-self:end;max-width:460px}
.transform-intro .section-head:last-child p{font-size:15px}
.transform-grid{gap:clamp(26px,3vw,40px)}
.compare-title{margin-bottom:13px;
  color:#858d98;
  font-size:10px;
  letter-spacing:.01em;}
.compare-title strong{color:#252a32;font-size:11px;font-weight:720}
.snapshot{border:1px solid #dfe3e8;
  background:#fff;
  box-shadow:none;}
.compare-panel:hover .snapshot{border-color:#c9ced6;
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(15,23,42,.055);}
.compare-panel.after .snapshot{border-color:rgba(83,59,255,.28)}
.browser-bar{background:#f7f7f8;border-color:#e5e7eb}
.browser-dot{background:#c9cdd3}
.product-img{background:#f7f8fa;border-color:#e9ebef}
.product-copy h3{color:#15181d;font-weight:720}
.product-copy .small,.compare-caption{color:#757e8a}
.legacy-action{background:#1b2028;
  color:#fff;
  border-radius:4px;}
.new-path{border-color:rgba(83,59,255,.24);
  background:rgba(83,59,255,.055);
  color:var(--violet);}
.option{border-color:#d9dde3;background:#fff}
.option.active{border-color:var(--violet);color:var(--violet)}
.qty{border-color:#d9dde3}
.action{border-radius:4px}
.action.sample{background:linear-gradient(135deg,var(--violet),var(--violet2));
  color:#fff;
  box-shadow:0 8px 16px rgba(83,59,255,.14);}
.action.bulk{border-color:#1d232c;color:#1d232c}
/* 03 — Business / website gap becomes the dark narrative anchor */
.section.soft{background:var(--dark);
  color:#f7f9fc;
  border-top-color:rgba(255,255,255,.06);}
.section.soft .kicker{color:#8693a6}
.section.soft .section-head h2{color:#f8fafc;
  font-size:clamp(42px,4.2vw,58px);
  line-height:1.02;}
.problem-grid{gap:clamp(64px,7vw,108px)}
.problem-grid .section-head{top:116px}
.problem-copy{padding-top:32px;border-color:rgba(255,255,255,.15)}
.problem-copy p{color:#b8c2d0;
  font-size:clamp(20px,1.8vw,27px);
  line-height:1.55;}
.problem-copy strong{color:#fff}
.problem-signal{margin-top:50px;border-color:rgba(255,255,255,.11)}
.problem-signal div{padding:17px 0;border-color:rgba(255,255,255,.09)}
.problem-signal span{color:#7f8c9f}
.problem-signal strong{color:#e8edf4;font-weight:650}
/* 04 — Decisions: open editorial rows with one violet signal */
.decision{background:var(--paper)}
.decision-head{grid-template-columns:minmax(220px,.68fr) minmax(0,1.32fr);
  gap:clamp(56px,7vw,96px);
  margin-bottom:42px;}
.decision-head h3{max-width:760px;
  color:#111318;
  font-size:clamp(34px,3vw,44px);
  line-height:1.08;
  font-weight:730;
  letter-spacing:-.043em;
  text-wrap:balance;}
.decision-stack{border-top:1px solid #bfc4ca}
.decision-row{grid-template-columns:minmax(130px,.56fr) minmax(0,.94fr) 76px minmax(0,1.2fr);
  padding:40px 0 44px;
  border-color:#dadddf;}
.decision-row:hover{background:linear-gradient(90deg,rgba(83,59,255,.035),rgba(83,59,255,0) 72%)}
.decision-row .label{color:#69727e}
.decision-row .before-text{color:#7a818b}
.decision-row .after-text{color:#1d2127}
.decision-row .after-text strong{color:#111318}
.decision-row::after{background:#b8bec7}
.decision-row::before{border-color:var(--violet)}
/* 05 — Evidence: quiet grey field, violet counts, technical table stays technical */
.evidence{background:#f3f4f6}
.evidence-head{grid-template-columns:minmax(0,1fr) auto;
  gap:64px;
  margin-bottom:42px;}
.evidence-head .section-head h2{max-width:760px;
  font-size:clamp(42px,4vw,56px);
  line-height:1.02;}
.evidence-counts{min-width:380px;
  border-color:#cfd4da;}
.evidence-counts div{padding:20px 20px 22px 0}
.evidence-counts div+div{border-color:#d9dde2}
.evidence-counts strong{color:var(--violet);
  font-size:38px;
  font-weight:780;}
.evidence-counts span{color:#6d7580;font-size:9.5px}
.ledger{border-top:1px solid #171b20;background:transparent}
.ledger th,.ledger td{border-color:#cfd3d8}
.ledger th{color:#7f8792;border-bottom-color:#aeb4bc}
.ledger td{color:#434a53}
.ledger tbody .evidence-record:hover td{background:rgba(255,255,255,.58);color:#1d2228}
.ledger tbody .evidence-record.is-open td{background:rgba(255,255,255,.74)}
.ledger td:last-child code{background:rgba(83,59,255,.055)}
.record-toggle:focus-visible{outline-color:rgba(83,59,255,.42)}
.record-mark{border-color:#c4c9cf;color:#646d78}
.state{font-weight:800}
.keep{color:#375f4b}
.redirect{color:var(--violet)}
.hold{color:#8b5d45}
.review{color:#786b38}
.evidence-note{color:#7a828d}
/* 06 — Bottom line: same open two-column editorial rhythm as homepage sections */
.bottomline{padding:var(--section) 0;
  background:#fcfcfd;}
.result-grid{grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);
  gap:clamp(64px,7vw,108px);
  align-items:end;}
.result-main h2{max-width:720px;
  font-size:clamp(46px,4.4vw,62px);
  line-height:1;
  font-weight:750;}
.result-main>p{color:#59616d;font-size:16px;line-height:1.72}
.result-main>p strong{color:#171a1f}
.boundary{padding:24px 0 0;
  border-color:#d5d9df;
  color:#747c87;
  font-size:11px;
  line-height:1.72;}
/* 07 — Closing CTA: same dark + violet system, less sales-card styling */
.case-cta{padding:clamp(92px,8vw,116px) 0;
  background:var(--dark);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.055);}
.cta-grid{grid-template-columns:minmax(0,1.15fr) minmax(330px,.52fr);
  gap:clamp(64px,7vw,104px);}
.case-cta .eyebrow{color:#9c92ff}
.case-cta h2{max-width:840px;
  color:#f8fafc;
  font-size:clamp(46px,4.4vw,62px);
  line-height:1.01;
  letter-spacing:-.047em;}
.case-cta .lead{color:#9da9ba;font-size:15px;line-height:1.7}
.cta-side{border-color:rgba(255,255,255,.18);padding-top:24px}
.cta-side strong{font-size:18px;font-weight:700}
.cta-side p{color:#919daf;font-size:12px}
.buttons{gap:10px}
.button{min-height:52px;
  padding:0 18px;
  border-radius:6px;
  font-size:12px;
  font-weight:740;}
.button.primary{background:linear-gradient(135deg,var(--violet),var(--violet2));
  box-shadow:0 10px 20px rgba(83,59,255,.18);}
.button.primary:hover{box-shadow:0 14px 26px rgba(83,59,255,.24)}
.button.secondary{border-color:rgba(255,255,255,.22);color:#eef2f7;background:transparent}
.button.secondary:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.035)}
/* Footer — master dark editorial tone */
/* Motion kept subtle and consistent */
.reveal{transform:translateY(14px);transition:opacity .48s ease,transform .48s cubic-bezier(.2,.7,.2,1)}
@media (max-width:1280px){.hero h1{font-size:56px}}
@media (max-width:1020px){:root{--pad:24px}
.hero{min-height:auto;padding:74px 0 70px}
.hero-shell,.transform-intro,.problem-grid,.decision-head,.evidence-head,.result-grid,.cta-grid{grid-template-columns:1fr}
.hero-dossier{border-left:0;border-top:1px solid var(--line);padding:30px 0 0}
.transform-intro{gap:22px}
.transform-intro .section-head:last-child{justify-self:start;max-width:620px}
.section.soft .section-head h2{max-width:760px}
.problem-grid .section-head{position:static}
.problem-copy{padding-top:0}
.decision-head{gap:18px}
.decision-row{grid-template-columns:130px minmax(0,1fr) 54px minmax(0,1.08fr);column-gap:20px}
.evidence-counts{min-width:0;max-width:520px}
.result-grid{align-items:start}
.cta-grid{align-items:start}}
@media (max-width:720px){:root{--pad:16px;--section:70px}
.hero{padding:52px 0 56px}
.hero-copy{padding:0}
.business-trigger{grid-template-columns:1fr;gap:7px;margin-bottom:22px;padding-bottom:15px}
.hero h1{font-size:clamp(42px,12vw,54px);line-height:1.01;margin-bottom:20px}
.hero-lead{font-size:15.5px;line-height:1.65}
.hero-dossier{padding-top:24px}
.dossier-results{grid-template-columns:1fr 1fr}
.dossier-results .result{padding:16px 12px 18px 0}
.dossier-results .result+.result{padding-left:14px}
.dossier-results .result strong{font-size:clamp(38px,10vw,46px)}
.dossier-client{font-size:24px;margin-bottom:20px}
.transform-intro{margin-bottom:26px}
.transform-intro .section-head h2{font-size:clamp(36px,9.4vw,44px)}
.compare-panel.after{margin-top:14px}
.section.soft .section-head h2{font-size:clamp(38px,10vw,48px)}
.problem-copy p{font-size:19px}
.decision-head h3{font-size:clamp(30px,8vw,38px)}
.decision-row{grid-template-columns:1fr;gap:18px;padding:30px 0 34px}
.decision-row::before,.decision-row::after{display:none}
.decision-row .label{padding-top:0}
.evidence-head .section-head h2,.result-main h2,.case-cta h2{font-size:clamp(38px,10vw,48px)}
.evidence-counts{grid-template-columns:1fr 1fr;width:100%;max-width:none}
.evidence-counts div+div{border-top:0;border-left:1px solid var(--line);padding-left:16px}
.evidence-counts strong{font-size:32px}
.case-cta{padding:70px 0 76px}
.cta-grid{gap:42px}
.button{width:100%}}
/* =========================================================
   V7 calibration — align VAZPO closer to homepage brand rhythm
   Scope per review: Hero calibration, Screen 03 chapter break,
   Screen 04/05 information hierarchy, Final CTA simplification.
   ========================================================= */
/* 01 — Hero: reduce startup noise, keep the same composition */
.hero .eyebrow{margin:0 0 18px;
  color:#98a1ad;
  font-size:9px;
  letter-spacing:.16em;
  opacity:.82;}
.business-trigger{display:block;
  max-width:640px;
  margin:0 0 20px;
  padding:0;
  border:0;}
.business-trigger span{display:block;
  margin:0 0 6px;
  color:#9aa3af;
  font-size:7.8px;
  letter-spacing:.14em;
  opacity:.78;}
.business-trigger strong{display:block;
  max-width:620px;
  color:#5f6672;
  font-size:14px;
  line-height:1.58;
  font-weight:590;}
.hero h1{max-width:720px;
  margin:0 0 22px;}
.hero-lead{max-width:620px;
  color:#6d7485;
  font-size:15.5px;
  line-height:1.68;}
.hero-dossier{padding-top:10px}
.dossier-label{color:#99a2ae;
  font-size:8.5px;}
.dossier-client{margin:10px 0 28px}
.result-note{margin-top:12px;
  color:#9aa2ad;
  font-size:9.5px;}
.dossier-meta{margin-top:22px}
.dossier-meta>div{grid-template-columns:98px 1fr;
  padding:11px 0;
  opacity:.88;}
.dossier-meta span{color:#99a1ac;
  font-size:7.5px;
  letter-spacing:.14em;}
.dossier-meta strong{color:#4c5561;
  font-size:11px;
  line-height:1.5;
  font-weight:610;}
/* 03 — Dark chapter break: more air, one dominant judgment */
.section.soft{padding:clamp(106px,9.4vw,136px) 0;}
.problem-grid{grid-template-columns:minmax(0,46fr) minmax(0,42fr);
  gap:clamp(90px,10vw,164px);
  align-items:start;}
.problem-grid .section-head{max-width:560px;}
.section.soft .section-head h2{max-width:540px;
  font-size:clamp(46px,4vw,60px);
  line-height:1.01;}
.problem-copy{max-width:500px;
  padding-top:6px;
  border-top:0;}
.problem-copy p{max-width:34ch;
  color:#bac4d0;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.76;}
.problem-signal{max-width:420px;
  margin-top:34px;
  border-top-color:rgba(255,255,255,.10);}
.problem-signal div{grid-template-columns:92px 1fr;
  gap:18px;
  padding:12px 0;
  border-color:rgba(255,255,255,.085);}
.problem-signal span{color:#758296;
  font-size:7.4px;
  letter-spacing:.14em;}
.problem-signal strong{color:#d8dfe7;
  font-size:11px;
  line-height:1.58;
  font-weight:560;}
/* 04 — Decisions: AFTER carries the visual weight */
.decision-head{grid-template-columns:minmax(200px,.62fr) minmax(0,1.38fr);
  gap:clamp(56px,7vw,100px);}
.decision-stack{border-top-color:#c7ccd2}
.decision-row{grid-template-columns:minmax(112px,.38fr) minmax(0,.86fr) 48px minmax(0,1.56fr);
  column-gap:26px;
  align-items:start;}
.decision-row .label{padding-top:24px;
  color:#6f7782;}
.decision-row .before-text,.decision-row .after-text{padding-top:24px;}
.decision-row .before-text{color:#757e89;
  font-size:15px;
  line-height:1.58;
  padding:24px 18px 18px;
  background:#f1f3f5;
  border:1px solid #e0e4e8;
  border-radius:8px;}
.decision-row .before-text::before,.decision-row .after-text::before{top:10px;
  left:18px;}
.decision-row .after-text{color:#171c22;
  font-size:clamp(19px,1.56vw,24px);
  line-height:1.48;
  font-weight:620;}
.decision-row .after-text strong{font-weight:740;}
.decision-row::after{background:#c1c7cf}
/* 05 — Evidence: counts become the secondary anchor, ledger steps back */
.evidence-head{grid-template-columns:minmax(0,.88fr) minmax(360px,.52fr);
  gap:clamp(60px,8vw,96px);
  margin-bottom:34px;}
.evidence-head .section-head{max-width:620px;}
.evidence-head .section-head p:last-child{max-width:430px;
  color:#838b96;
  font-size:14px;
  line-height:1.62;}
.evidence-counts{min-width:420px;
  align-self:end;}
.evidence-counts strong{font-size:clamp(44px,4.1vw,56px);
  line-height:.92;}
.evidence-counts span{font-size:10px;
  line-height:1.52;}
.ledger{margin-top:10px;}
.ledger th{color:#8a929d;
  font-size:7.5px;}
.ledger td{color:#59616c;
  font-size:11px;
  line-height:1.54;}
.ledger td:first-child{color:#2b3138}
.ledger tbody .evidence-record:hover td{background:rgba(255,255,255,.34);
  color:#2d333b;}
.evidence-note{max-width:760px;
  margin-top:16px;
  font-size:9.5px;}
/* 07 — Final CTA: one dominant action only */
.cta-side strong{color:#e8edf4;
  font-size:16px;
  font-weight:680;}
.cta-side p{max-width:320px;
  color:#8e99a9;
  font-size:11.5px;
  line-height:1.62;}
.buttons{max-width:320px;}
@media (max-width:1020px){.problem-grid{grid-template-columns:1fr;
    gap:42px;}
.problem-copy,.problem-signal,.evidence-head .section-head p:last-child{max-width:none;}
.decision-row{grid-template-columns:112px minmax(0,.82fr) 40px minmax(0,1.38fr);
    column-gap:18px;}
.evidence-head{grid-template-columns:1fr;
    gap:26px;}
.evidence-counts{min-width:0;
    max-width:560px;}}
@media (max-width:720px){.hero .eyebrow{margin-bottom:14px}
.business-trigger{margin-bottom:16px}
.business-trigger strong{font-size:13px;line-height:1.56}
.hero-lead{font-size:15px;line-height:1.62}
.dossier-meta>div{grid-template-columns:88px 1fr}
.section.soft{padding:76px 0}
.problem-copy{padding-top:0}
.problem-copy p{max-width:none;font-size:18px;line-height:1.68}
.problem-signal{margin-top:24px}
.problem-signal div{grid-template-columns:1fr;gap:5px;padding:10px 0}
.decision-row{grid-template-columns:1fr;
    gap:16px;
    padding:28px 0 32px;}
.decision-row .label{padding-top:0}
.decision-row .before-text,.decision-row .after-text{padding-top:20px}
.decision-row .before-text{padding:20px 16px 16px}
.decision-row .before-text::before,.decision-row .after-text::before{top:10px;left:16px}
.decision-row .after-text{font-size:18px}
.evidence-counts{grid-template-columns:1fr 1fr;
    width:100%;
    max-width:none;}
.evidence-counts strong{font-size:34px}
.ledger td{font-size:10.5px}
.buttons{max-width:none}}
/* =========================================================
   V8 final visual calibration
   Only two approved changes:
   1) Screen 04 BEFORE returns to typography + rule
   2) Final CTA right column becomes quieter
   ========================================================= */
/* P0 — Screen 04: remove SaaS-card treatment from BEFORE */
.decision-row .before-text{color:#7b838e;
  font-size:15px;
  line-height:1.62;
  padding:24px 0 0;
  background:transparent;
  border:0;
  border-radius:0;}
.decision-row .before-text::before{top:0;
  left:0;
  color:#a0a6ae;}
.decision-row .after-text::before{top:0;
  left:0;}
/* P1 — Final CTA: keep two-column logic, reduce module separation */
.cta-side{border-top-color:rgba(255,255,255,.10);
  padding-top:20px;}
.cta-side strong{color:#d9dfe7;
  font-size:15px;
  line-height:1.45;
  font-weight:640;}
.cta-side p{margin-bottom:20px;
  color:#8793a3;
  font-size:11px;
  line-height:1.68;}
.button.primary{box-shadow:0 8px 16px rgba(83,59,255,.14);}
.button.primary:hover{box-shadow:0 10px 20px rgba(83,59,255,.18);}
@media (max-width:720px){.decision-row .before-text{padding:20px 0 0;}
.decision-row .before-text::before,.decision-row .after-text::before{left:0;
    top:0;}}
/* =========================================================
   V9 P0 — Screen 05 heading clipping fix
   Root cause: evidence-head inherited the vertical reveal transform.
   Long/stitch captures can sample the element while that transform is settling.
   Keep the fade, remove only the vertical movement for this header.
   ========================================================= */
.evidence-head.reveal{transform:none;
  transition:opacity .48s ease;}
.evidence-head.reveal.is-visible{transform:none;}
@media (prefers-reduced-motion:reduce){.evidence-head.reveal{transform:none;transition:none}}
/* =========================================================
   V10 P0 — Screen 05 heading glyph-clip fix
   Root cause: 56px text at 1.02 line-height paints ~6px above
   the H2 box in the current font metrics. Give the heading its
   own paint safety area; do not alter section spacing/layout.
   ========================================================= */
.evidence-head .section-head h2{padding-block-start:.14em;
  overflow:visible;
  clip-path:none;
  contain:none;}

/* G1-08 Batch B runtime containment: canonical final override order reintroduced a desktop decision grid after the mobile collapse. Preserve the frozen mobile reading order without page-level overflow. */
@media (max-width: 680px) {
  .decision-head { grid-template-columns: 1fr; gap: 18px; }
}