/* Case pages v2 (2026-10-28): tighter story layout. Loads after case.css and the page's own styles.
   Arc: The Day Before + What We Found (side by side) → The Fix (one picture) → What It Does Now
   (Before / Now rows, each with its graphic) → What Changed For The Team → close. */

/* ---------- open at the top ---------- */
/* No smooth scrolling on these pages: the load script jumps to the top (or to #section) instantly. */
html,html.ready{scroll-behavior:auto}

/* ---------- hero ---------- */
.hero.v2-hero{padding:56px 0 0}
.v2-hero .cs-h1{margin:18px 0 18px}
.v2-hero .cs-lede{max-width:38ch;font-size:clamp(20px,2.3vw,27px)}
.v2-art{margin:36px 0 0}
.v2-cap{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--mute);max-width:80ch}

/* ---------- sections ---------- */
.v2-sec{padding-top:72px}
.v2-num{display:block;font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-text);margin-bottom:10px}
.v2-sec h2,.v2-card h2{font-size:clamp(30px,3.6vw,46px);font-weight:900;font-variation-settings:"wdth" 82;line-height:1;letter-spacing:-.01em;color:var(--white)}
.v2-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px 48px;align-items:start;margin-bottom:26px}
.v2-head .v2-txt{padding-top:4px}
.v2-txt p,.v2-txt li{font-size:17px;line-height:1.6;color:var(--gray)}
.v2-txt p + p,.v2-txt ul + p,.v2-txt p + ul{margin-top:14px}

/* 01 + 02 side by side */
.v2-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.v2-card{border:1px solid var(--line);border-radius:22px;background:var(--panel);padding:clamp(22px,3vw,34px);position:relative;overflow:hidden}
.v2-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--risk)}
.v2-card.found::before{background:var(--live-hi)}
.v2-card h2{font-size:clamp(28px,3vw,38px);margin-bottom:16px}
.v2-card .v2-num{color:var(--mute)}
.v2-card.found .v2-num{color:var(--acc-text)}
/* the team's own words, as speech rows */
.v2-says{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.v2-says li{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--ink);font-size:15.5px;line-height:1.45;color:var(--gray)}
.v2-says li q{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 88;font-size:17px;line-height:1.2;color:var(--white);quotes:"\201C" "\201D"}
.v2-says li q::before,.v2-says li q::after{color:var(--risk);font-weight:800}
.v2-root{margin-top:14px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--live-hi) 8%,transparent);border:1px solid color-mix(in srgb,var(--live-hi) 30%,transparent)}
.v2-root p{color:var(--white)}

/* ---------- 04 features ---------- */
.v2-feats{display:grid;gap:56px}
.v2-feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 48px;align-items:start;padding-top:28px;border-top:1px solid var(--line)}
.v2-feat > .v2-media{grid-column:1 / -1}
.v2-feat h3{font-size:clamp(24px,2.4vw,30px);font-weight:900;font-variation-settings:"wdth" 84;line-height:1.05;color:var(--white)}
.v2-feat .k{display:block;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.v2-bn{display:grid;gap:10px}
.v2-bn p{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;font-size:16.5px;line-height:1.55;color:var(--gray)}
.v2-bn b{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding-top:6px}
.v2-bn .before b{color:var(--risk)}
.v2-bn .before{color:var(--mute)}
.v2-bn .now b{color:var(--acc-text)}
.v2-media{display:grid;gap:18px;margin-top:6px}
.v2-media.narrow{max-width:900px}
.v2-media figure,.v2-art,figure.v2-art{margin-left:0;margin-right:0}
.v2-media figure{margin-top:0;margin-bottom:0}

/* ---------- real screens, with numbered callouts ---------- */
.v2-shot{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 30px 60px -30px rgba(0,0,0,.35)}
.v2-shot .bar{display:flex;gap:6px;padding:9px 14px;background:#E6E8EC;border-bottom:1px solid #D6D9DE}
.v2-shot .bar i{width:9px;height:9px;border-radius:50%;background:#C4C8CF}
.v2-shot .crop{position:relative;overflow:hidden;aspect-ratio:var(--ar)}
.v2-shot .crop > .stage{position:relative;width:var(--w,100%);margin-left:var(--ml,0);margin-top:var(--mt,0);background:none;border:0;padding:0;box-shadow:none;border-radius:0}
.v2-shot img{display:block;width:100%;height:auto}
.v2-hs{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2}
.v2-hs .dot{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#002FA7;color:#FFFFFF;font:600 13px/1 var(--mono);box-shadow:0 0 0 4px rgba(61,99,255,.3),0 0 22px #3D63FF}
.v2-hs .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #3D63FF;animation:v2ping 2.4s infinite}
.v2-hs .lbl{position:absolute;top:-17px;left:24px;white-space:nowrap;background:rgba(17,17,17,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#FFFFFF;border:1px solid rgba(61,99,255,.55);border-radius:10px;padding:7px 11px;font:700 13.5px/1.2 var(--body);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.v2-hs .lbl small{display:block;font:400 11px/1.3 var(--mono);color:#7D99FF;letter-spacing:.03em;margin-top:2px}
.v2-hs.l .lbl{left:auto;right:24px}
.v2-hs.b .lbl{top:22px;left:-20px}
.v2-hs.b.l .lbl{left:auto;right:-20px}
.v2-hs.t .lbl{top:auto;bottom:22px;left:-20px}
.v2-hs.t.l .lbl{left:auto;right:-20px}
@keyframes v2ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2);opacity:0}}
/* callout key: shown when the labels are too small to sit on the screen */
.v2-key{display:none;list-style:none;margin:12px 0 0;padding:0;gap:6px}
.v2-key li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;line-height:1.4;color:var(--gray)}
.v2-key li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#002FA7;color:#fff;font:600 11px/1 var(--mono)}
.v2-key li small{color:var(--mute)}

/* ---------- dark graphic stages (old product pages' look) ---------- */
.v2-stage{border:1px solid #2E2E2E;border-radius:24px;background:radial-gradient(80% 90% at 50% 0%,#1f2433 0%,#181818 60%,#151515 100%);padding:clamp(18px,3vw,34px);position:relative;overflow:hidden;color:#EAEAEA;
  --ink:#161616;--panel:#1F1F1F;--charcoal:#2B2B2B;--white:#FFFFFF;--gray:#EAEAEA;--mute:#9C9C9A;--line:#3A3A3A;--acc-text:#7D99FF;--live-hi:#3D63FF}
.v2-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff12 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.v2-stage > *{position:relative}
.v2-stage .ill-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.v2-stage .ill-cap .mono{color:#9C9C9A}
:root[data-theme="light"] .v2-stage{box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px rgba(0,0,0,.12)}
/* old stages carry their own frame; inside a v2 stage they sit flush */
.v2-stage .stage,.v2-stage .stage-ill{border:0;background:none;box-shadow:none;padding:0;margin:0;border-radius:0}

/* Graphic: five programs before, one job now */
.v2-ba{display:grid;grid-template-columns:minmax(0,1.1fr) 48px minmax(0,1fr);gap:18px;align-items:stretch}
.v2-ba .side{border:1px solid #333;border-radius:18px;padding:18px;background:rgba(0,0,0,.25);display:grid;align-content:start;gap:14px}
.v2-ba .side.now{border-color:rgba(61,99,255,.55);box-shadow:0 0 0 1px rgba(61,99,255,.2),0 0 40px rgba(61,99,255,.15)}
.v2-ba .sh{font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#F27A6D}
.v2-ba .now .sh{color:#7D99FF}
.v2-ba .progs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;position:relative}
.v2-ba .pg{display:grid;justify-items:center;gap:8px;text-align:center}
.v2-ba .pg .ic{width:100%;max-width:64px;aspect-ratio:1;border-radius:16px;background:#262626;border:1px solid #444;display:grid;place-items:center;position:relative}
.v2-ba .pg .ic svg{width:52%;height:52%;stroke:#9C9C9A;fill:none;stroke-width:1.6}
.v2-ba .pg span{font:500 10.5px/1.25 var(--mono);color:#BDBDBD;letter-spacing:.02em}
.v2-ba .pg i{position:absolute;top:-8px;right:-8px;font:500 9px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;background:#F27A6D;color:#2a0f0c;padding:3px 5px;border-radius:999px;font-style:normal}
.v2-ba .hand{display:flex;align-items:center;gap:10px;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#F27A6D}
.v2-ba .hand::before,.v2-ba .hand::after{content:"";flex:1;border-top:2px dashed rgba(242,122,109,.55)}
.v2-ba .qs{display:grid;gap:6px}
.v2-ba .qs span{font-size:13.5px;color:#BDBDBD;padding-left:14px;position:relative}
.v2-ba .qs span::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#F27A6D}
.v2-ba .arrow{display:grid;place-items:center}
.v2-ba .arrow svg{width:44px;height:44px;stroke:#3D63FF;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px #3D63FF)}
.v2-ba .core{border-radius:14px;padding:14px 16px;background:linear-gradient(160deg,#1f2a4a,#161c2e);border:1px solid rgba(61,99,255,.6);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.v2-ba .core b{font-family:var(--display);font-weight:800;font-size:20px;color:#fff}
.v2-ba .core small{display:block;font:400 11px/1.3 var(--mono);color:#7D99FF;letter-spacing:.06em;text-transform:uppercase}
.v2-ba .core em{font-style:normal;font-family:var(--mono);color:#fff;font-size:15px}
.v2-ba .chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;counter-reset:c}
.v2-ba .chain li{counter-increment:c;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;border:1px solid #3a3a3a;border-radius:12px;padding:9px 11px;background:#202020}
.v2-ba .chain li::before{content:counter(c,decimal-leading-zero);grid-row:span 2;font:500 11px/1 var(--mono);color:#7D99FF}
.v2-ba .chain b{font-size:14.5px;color:#fff;line-height:1.15}
.v2-ba .chain small{font-size:12px;color:#9C9C9A;line-height:1.2}
.v2-ba .chain li.all{grid-column:1 / -1;border-color:rgba(61,99,255,.5)}
@media (max-width:900px){
  .v2-ba{grid-template-columns:minmax(0,1fr)}
  .v2-ba .arrow{transform:rotate(90deg);height:40px}
}
@media (max-width:520px){
  .v2-ba .progs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
  .v2-ba .chain{grid-template-columns:minmax(0,1fr)}
  .v2-ba .side{padding:14px}
}

/* ---------- 05 what changed ---------- */
.v2-changed{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v2-changed li{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:20px 20px 22px;display:grid;gap:12px;align-content:start;font-size:16.5px;line-height:1.5;color:var(--gray)}
.v2-changed li::before{content:"";width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--live-hi) 14%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D63FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}

/* ---------- close ---------- */
.v2-close{margin-top:88px}
.v2-close p{max-width:62ch}

/* ---------- widths ---------- */
@media (max-width:1000px){
  .v2-changed{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .v2-head,.v2-feat{grid-template-columns:minmax(0,1fr)}
  .v2-pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .v2-hs .lbl{display:none}
  .v2-hs .dot{width:22px;height:22px;left:-11px;top:-11px;font-size:11px}
  .v2-key{display:grid}
  .v2-sec{padding-top:52px}
  .hero.v2-hero{padding-bottom:0}
  .v2-feats{gap:44px}
  .v2-feat{padding-top:22px}
}
@media (max-width:600px){
  .hero.v2-hero{padding-top:36px}
  .v2-changed{grid-template-columns:minmax(0,1fr)}
  .v2-bn p{grid-template-columns:minmax(0,1fr);gap:4px}
  .v2-bn b{padding-top:0}
  .v2-close{margin-top:64px}
}

/* lowest vs awarded: keep the podium a sensible size */
.v2-podium{max-width:620px}
.v2-ba .side.before{align-content:center;gap:18px}
.v2-ba .side.before .sh{align-self:start}
.v2-ba .pg span{font-size:10px;letter-spacing:0}
.v2-ba .progs{gap:6px}

/* Graphic (round 2): four public sources feed one tool; insights come out the other side */
.v2-net{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,.8fr) 72px minmax(0,1.1fr);align-items:center;gap:0}
.v2-net .col{display:grid;gap:10px}
.v2-net .colh{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9C9C9A;margin-bottom:2px}
.v2-net .src{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;border:1px solid #3a3a3a;border-radius:12px;padding:10px 12px;background:#1f1f1f}
.v2-net .src svg{width:34px;height:34px;padding:7px;border-radius:9px;background:#262626;border:1px solid #444;stroke:#9C9C9A;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v2-net .src b{font-size:14.5px;color:#fff;line-height:1.2}
.v2-net .src small{display:block;font-size:12px;color:#9C9C9A;line-height:1.3;margin-top:2px}
.v2-net .wires{width:100%;height:100%;min-height:260px;overflow:visible}
.v2-net .wires path{fill:none;stroke:rgba(61,99,255,.75);stroke-width:1.6;vector-effect:non-scaling-stroke}
.v2-net .wires .run{stroke:#fff;stroke-width:2;stroke-dasharray:4 60;animation:v2run 2.6s linear infinite;opacity:.8}
@keyframes v2run{to{stroke-dashoffset:-64}}
.v2-net .hub{border-radius:20px;padding:22px 18px;text-align:center;background:linear-gradient(160deg,#1f2a4a,#161c2e);border:1px solid rgba(61,99,255,.7);box-shadow:0 0 0 1px rgba(61,99,255,.25),0 0 46px rgba(61,99,255,.35);display:grid;gap:8px;justify-items:center}
.v2-net .hub .ring{width:56px;height:56px;border-radius:50%;border:2px solid #3D63FF;display:grid;place-items:center;box-shadow:0 0 22px #3D63FF}
.v2-net .hub .ring i{width:14px;height:14px;border-radius:3px;background:#3D63FF}
.v2-net .hub b{font-family:var(--display);font-weight:800;font-size:19px;color:#fff;line-height:1.1}
.v2-net .hub small{font:400 11px/1.4 var(--mono);color:#7D99FF;letter-spacing:.06em;text-transform:uppercase}
.v2-net .ins{border:1px solid rgba(61,99,255,.45);border-left:3px solid #3D63FF;border-radius:12px;padding:11px 14px;background:#1b1f2b}
.v2-net .ins b{font-size:14.5px;color:#fff;line-height:1.2;display:block}
.v2-net .ins small{display:block;font-size:12.5px;color:#BDBDBD;line-height:1.35;margin-top:3px}
.v2-net .down{display:none}
@media (max-width:900px){
  .v2-net{grid-template-columns:minmax(0,1fr);gap:0}
  .v2-net .wires{display:none}
  .v2-net .down{display:grid;place-items:center;height:44px}
  .v2-net .down svg{width:28px;height:28px;stroke:#3D63FF;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px #3D63FF)}
  .v2-net .col.srcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2-net .col.srcs .colh{grid-column:1 / -1}
}
@media (max-width:520px){.v2-net .col.srcs{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.v2-net .wires .run{animation:none;display:none}}
.v2-net .wires .glow{stroke:rgba(61,99,255,.9);stroke-width:7}
.v2-net .ins small{color:#9C9C9A}
.v2-net .hub{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;width:auto;height:auto;aspect-ratio:auto;min-height:0;position:relative;inset:auto;transform:none}
.v2-net .hub b{white-space:normal;text-wrap:balance}
.v2-net .hub{gap:10px;padding:22px 18px}
@media (min-width:901px){.v2-net{align-items:stretch}.v2-net .col{align-content:space-around}.v2-net .col.outs{grid-template-rows:repeat(4,1fr);align-content:stretch}.v2-net .ins{display:grid;align-content:center}.v2-net .hub{align-self:center}}
