.dark .eyebrow{color:var(--tungsten);}

.cs-hero{
  background:var(--tungsten);
  color:var(--ink);
  padding:64px 0 0;
}
.cs-hero__top{
  display:grid;
  grid-template-columns:1fr minmax(230px, 420px);
  gap:52px;
  align-items:center;
}
.cs-hero__art{display:block;}
.cs-hero__art img{display:block;width:100%;height:auto;}
@media (max-width:900px){
  .cs-hero__top{grid-template-columns:1fr;gap:0;}
  .cs-hero__art{display:none;}
}

.cs-hero .kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
}
.cs-hero .kicker::before{content:"";width:22px;height:1.5px;background:var(--ink);opacity:.6;}

.cs-hero h1{
  font-family:var(--font-display);font-weight:var(--wt-head);
  font-size:clamp(34px,5.4vw,66px);letter-spacing:-.03em;
  max-width:16ch;
  line-height:1.26;
}
.cs-hero h1 em{
  font-style:normal;
  color:var(--paper);
  background:var(--ink);
  padding:.02em .16em .06em;
  border-radius:3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.cs-hero--light-mark h1 em{
  color:var(--ink);
  background:var(--paper);
}

.cs-hero .sub{
  margin-top:22px;max-width:56ch;
  font-size:clamp(15px,1.4vw,18px);line-height:1.5;
  color:var(--ink);
}
.cs-hero .meta{
  margin-top:26px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink);
}

.cs-stats{
  margin-top:52px;
  border-top:1px solid rgba(23,25,29,.28);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.cs-stats div{
  padding:24px 20px 30px 0;
  border-right:1px solid rgba(23,25,29,.16);
}
.cs-stats div:last-child{border-right:0;}
.cs-stats b{
  display:block;
  font-family:var(--font-display);font-weight:var(--wt-head);
  font-size:clamp(24px,2.9vw,36px);line-height:1;letter-spacing:-.02em;
}
.cs-stats span{
  display:block;margin-top:8px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;
}

.cs-band{
  --pxl-h: clamp(200px, 26vw, 480px);
  --pxl-over: 1.50;
  position:relative;
  height:var(--pxl-h);
  overflow:hidden;
  overflow-anchor:none;
  background:
    linear-gradient(135deg, #2A2140 0%, var(--ink-2) 55%, var(--ink) 100%);
}
.cs-band img{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:calc(var(--pxl-h) * var(--pxl-over));
  object-fit:cover;
  object-position:center;
  display:block;
  transform:translate3d(0,calc((1 - var(--pxl-over)) * var(--pxl-h)),0);
  will-change:transform;
}
@supports (animation-timeline: view()) {
  .cs-band{
    view-timeline-name:--cs-band;
    view-timeline-axis:block;
  }
  .cs-band img{
    animation: cs-drift linear both;
    animation-timeline: --cs-band;
    animation-range: cover;
  }
  @keyframes cs-drift{
    from{ transform:translate3d(0,calc(var(--pxl-h) * (1 - var(--pxl-over))),0); }
    to  { transform:translate3d(0,0,0); }
  }
  @media (prefers-reduced-motion:reduce){
    .cs-band img{ animation:none; top:50%; transform:translate3d(0,-50%,0); }
  }
}

.cs-band figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:40px var(--wrap-pad) 16px;
  background:linear-gradient(180deg, transparent, rgba(23,25,29,.72));
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);
}
.cs-band figcaption span{max-width:var(--wrap-max);margin:0 auto;display:block;}
@media (max-width:700px){
  .cs-band{--pxl-h:clamp(150px, 46vw, 230px);}
}

@media (prefers-reduced-motion: reduce){
  .cs-band img{will-change:auto;}
}

.cs-lede{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--ink);max-width:62ch;}
.cs-prose{max-width:66ch;}
.cs-prose p{margin-top:16px;font-size:15.5px;line-height:1.65;color:var(--muted);}
.cs-prose p:first-child{margin-top:0;}
.cs-prose p b,.cs-prose p strong{color:var(--ink);font-weight:600;}
.dark .cs-prose p{color:var(--body-dk);}
.dark .cs-prose p b,.dark .cs-prose p strong{color:var(--paper);}

.cs-reqs{list-style:none;margin-top:32px;display:grid;gap:2px;}
.cs-reqs li{
  display:grid;grid-template-columns:26px 1fr;gap:14px;
  padding:16px 0;border-top:1px solid var(--line);
  font-size:15px;line-height:1.55;color:var(--muted);
}
.cs-reqs li:last-child{border-bottom:1px solid var(--line);}
.cs-reqs li b{color:var(--ink);font-weight:600;}
.cs-reqs .n{
  font-family:var(--font-mono);font-size:11px;color:var(--tungsten-ink);
  padding-top:3px;
}

.cs-phases{margin-top:8px;}
.cs-phase{
  position:relative;
  padding:0 0 38px 78px;
  border-left:1px solid var(--line);
  margin-left:22px;
}
.cs-phase:last-child{border-left-color:transparent;padding-bottom:0;}
.cs-phase .pn{
  position:absolute;left:-22px;top:0;
  width:44px;height:44px;border-radius:50%;
  background:var(--paper);border:1px solid var(--tungsten);
  color:var(--tungsten-ink);
  font-family:var(--font-mono);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.cs-phase h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(18px,2vw,23px);letter-spacing:-.015em;
  padding-top:9px;
}
.cs-phase h3 .when{
  display:block;margin-top:7px;
  font-family:var(--font-mono);font-size:11px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.cs-phase .quick{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--ink);max-width:62ch;}

@media (max-width:700px){
  .cs-phase{padding-left:52px;}
  .cs-phase .pn{width:36px;height:36px;left:-18px;font-size:12px;}
}

.cs-more{margin-top:16px;max-width:64ch;}
.cs-more > summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tungsten-ink);
  padding:6px 0;
  transition:color .2s ease;
}
.cs-more > summary::-webkit-details-marker{display:none;}
.cs-more > summary:hover{color:var(--ink);}
.cs-more > summary:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px;}
.cs-more > summary::before{
  content:"+";
  width:18px;height:18px;flex-shrink:0;
  border:1px solid var(--tungsten);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
}
.cs-more[open] > summary::before{content:"–";}

.cs-more .body{
  padding:6px 0 4px;
  font-size:14.5px;line-height:1.65;color:var(--muted);
  border-left:2px solid var(--tungsten);
  padding-left:18px;margin-top:8px;
}
.cs-more .body b,.cs-more .body strong{color:var(--ink);font-weight:600;}
.dark .cs-more > summary{color:var(--tungsten);}
.dark .cs-more > summary:hover{color:var(--paper);}
.dark .cs-more .body{color:var(--body-dk);}
.dark .cs-more .body b,.dark .cs-more .body strong{color:var(--paper);}

.cs-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.cs-card{
  border:1px solid var(--line-dk);border-radius:var(--radius-lg);
  padding:28px;background:var(--ink-2);
}
.cs-card h3{
  font-family:var(--font-display);font-weight:600;font-size:19px;
  letter-spacing:-.015em;color:var(--paper);
}
.cs-card .quick{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--lede-dk);}
@media (max-width:860px){ .cs-cards{grid-template-columns:1fr;} }

.cs-evo{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;}
.cs-evo li{padding:22px 22px 0 0;border-top:2px solid var(--tungsten);}
.cs-evo .h{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tungsten-ink);
}
.dark .cs-evo .h{color:var(--tungsten);}
.cs-evo p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--muted);}
.dark .cs-evo p{color:var(--body-dk);}
@media (max-width:900px){ .cs-evo{grid-template-columns:1fr 1fr;gap:24px 0;} }
@media (max-width:560px){ .cs-evo{grid-template-columns:1fr;} }

.cs-impact{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.cs-impact li{padding:22px 0;border-bottom:1px solid var(--line);font-size:15px;
  line-height:1.6;color:var(--muted);}
.cs-impact li b{display:block;color:var(--ink);font-weight:600;margin-bottom:6px;font-size:15.5px;}
@media (max-width:800px){ .cs-impact{grid-template-columns:1fr;} }

.cs-fig{margin:34px 0 0;max-width:800px;}
.cs-fig img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);border:1px solid var(--line-dk);
  background:var(--screen);
}
.cs-fig figcaption{
  margin-top:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);
}
.dark .cs-fig figcaption{color:var(--muted-dk);}

.cs-band-fig{margin:34px 0 0;}
.cs-band-fig figcaption{
  max-width:var(--wrap-max);margin:12px auto 0;padding:0 var(--wrap-pad);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);
}
.dark .cs-band-fig figcaption{color:var(--muted-dk);}
.cs-band--screens{
  --pxl-h:clamp(130px, 31.4vw, 439px);
  --pxl-over:1.40;
}
@supports (animation-timeline: view()){
  .cs-band--screens{view-timeline-name:--cs-band-screens;}
  .cs-band--screens img{animation-timeline:--cs-band-screens;}
}

.cs-quote{
  margin:0;padding:36px 0 36px 30px;
  border-left:3px solid var(--tungsten);
  max-width:60ch;
}
.cs-quote p{
  font-family:var(--font-display);font-weight:var(--wt-head);
  font-size:clamp(19px,2.3vw,27px);line-height:1.3;letter-spacing:-.02em;
  color:var(--ink);
}
.dark .cs-quote p{color:var(--paper);}
.cs-quote footer{
  margin-top:18px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted);
}
.dark .cs-quote footer{color:var(--muted-dk);}
.cs-quote--empty{border-left-style:dashed;border-left-color:var(--line);}
.cs-quote--empty p{color:var(--muted);}

.cs-stack{
  margin-top:44px;padding-top:30px;
  border-top:1px solid var(--line-dk);
}
.cs-stack h3{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tungsten);
  font-weight:400;
}

.cs-chips{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:18px;
}
.cs-chips li{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  border:1px solid var(--line-dk);border-radius:100px;
  padding:8px 16px;color:var(--lede-dk);
  background:var(--ink-2);
}

.cs-diagram{
  background:var(--ink);
  padding:60px 0 64px;
}
.cs-diagram__scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:0 var(--wrap-pad);
}
.cs-diagram__inner{
  width:100%;
  min-width:1280px;
  max-width:1600px;
  margin:0 auto;
}
.cs-diagram svg{display:block;width:100%;height:auto;}

.cs-diagram figcaption{
  max-width:var(--wrap-max);
  margin:22px auto 0;
  padding:0 var(--wrap-pad);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted-dk);
}
.cs-diagram__hint{display:none;}
@media (max-width:1360px){
  .cs-diagram__hint{
    display:block;
    max-width:var(--wrap-max);margin:0 auto 16px;padding:0 var(--wrap-pad);
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--tungsten);
  }
}

.cs-close{background:var(--tungsten);color:var(--ink);padding:78px 0;text-align:center;}
.cs-close h2{
  font-family:var(--font-display);font-weight:var(--wt-head);
  font-size:clamp(27px,3.8vw,44px);letter-spacing:-.025em;line-height:1.05;
  max-width:22ch;margin:0 auto;
}
.cs-close p{
  margin:20px auto 0;max-width:56ch;
  font-size:15.5px;line-height:1.6;color:var(--ink);
}
.cs-close .actions{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

@media (max-width:860px){
  .cs-stats{grid-template-columns:1fr 1fr;}
  .cs-stats div{border-right:0;border-bottom:1px solid rgba(23,25,29,.16);padding-right:0;}
  .cs-stats div:last-child{border-bottom:0;}
}

@media (prefers-reduced-motion: reduce){
  .cs-more > summary{transition:none;}
}

.cs-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:start;
  gap:22px;
}
.cs-grid figure{margin:0;}
.cs-grid img{
  display:block;
  width:100%;
  height:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.dark .cs-grid img{background:var(--ink-2);border-color:var(--line-dk);}
@media (max-width:900px){ .cs-grid{grid-template-columns:1fr 1fr;gap:18px;} }
@media (max-width:560px){ .cs-grid{grid-template-columns:1fr;gap:16px;} }

.cs-fig--board{max-width:1024px;}
.cs-fig--banner{max-width:803px;}
.cs-fig--board img,
.cs-fig--banner img{background:transparent;}
.cs-fig + .cs-fig{margin-top:40px;}

.js .cs-grid.reveal{opacity:1;transform:none;transition:none;}
.js .cs-grid.reveal figure{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
}
.js .cs-grid.reveal.in figure{opacity:1;transform:none;}
.js .cs-grid.reveal figure:nth-child(1){transition-delay:0ms;}
.js .cs-grid.reveal figure:nth-child(2){transition-delay:60ms;}
.js .cs-grid.reveal figure:nth-child(3){transition-delay:120ms;}
.js .cs-grid.reveal figure:nth-child(4){transition-delay:180ms;}
.js .cs-grid.reveal figure:nth-child(5){transition-delay:240ms;}
.js .cs-grid.reveal figure:nth-child(6){transition-delay:300ms;}
.js .cs-fig.reveal img{
  transform:scale(1.02);
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.js .cs-fig.reveal.in img{transform:none;}
@media (prefers-reduced-motion: reduce){
  .js .cs-grid.reveal figure,
  .js .cs-grid.reveal.in figure{opacity:1;transform:none;transition:none;transition-delay:0ms;}
  .js .cs-fig.reveal img,
  .js .cs-fig.reveal.in img{transform:none;transition:none;}
}