/* Case Study 2 keeps its Paper compositions separate from the shared baseline. */
.case-study-2 .back-icon img { filter: url(#case-2-nav-ink); }
.case-study-2 #case-2-title { scroll-margin-top: 32px; }
.case-study-2 .metadata-label { color: var(--case-color-heading); }
.case-study-2 .showcase-metrics { grid-template-columns: minmax(0,480fr) minmax(0,280fr); }
.case-study-2 .showcase-metrics .showcase { height: auto; object-fit: contain; align-self: center; }
.case-study-2 .metrics li { background: var(--color-background); }
.case-study-2 .showcase-bottom { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.case-study-2 .divider span { border-style: solid; color: var(--color-text-secondary); }
.cs2-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-32); }
.cs2-grid-three { grid-template-columns: 240fr 207fr 207fr; }
.case-study-2 h3 { font-family: var(--font-body); font-weight: var(--font-weight-medium); line-height: var(--line-height-body); }
.case-study-2 h2 .cs2-heading-muted { color: var(--color-text-secondary); }
.cs2-confidentiality { padding-bottom: 23px; }
.cs2-question p { color: var(--case-color-heading); font: 600 24px/36px var(--font-project-title); letter-spacing: -.3px; }
.cs2-question p > [aria-hidden="true"] > span { color: var(--color-text-secondary); }
.case-study-2 .next-project-preview img { height: auto; }
.cs2-figure { min-width: 0; }
.cs2-collage, .cs2-modal-art {
  overflow: hidden;
  border: var(--case-overview-border-width) solid var(--color-border);
  border-radius: var(--case-image-frame-radius);
}
.cs2-diagram {
  container-type: inline-size; overflow: hidden;
  border-radius: var(--case-image-frame-radius);
}
.cs2-diagram .diagram-inner {
  width: var(--cs2-art-width);
  transform: scale(var(--diagram-scale,calc(100cqw / var(--cs2-art-width))));
}
/* Shared enhancement sets the scale; the perimeter stays outside the artwork. */
.cs2-diagram.is-fitted { overflow: hidden; }
.cs2-tokens .cs2-diagram { background: #FAFAFA; }
.cs2-merger, .cs2-tokens,
.cs2-playbook, .cs2-checklist,
.cs2-log-1, .cs2-log-2 {
  border: 1px solid var(--color-border);
  border-radius: var(--case-image-frame-radius);
  padding-bottom: var(--space-24);
}
.cs2-tokens { background: #FAFAFA; }
.cs2-contrast { padding: 32px 16px 24px; border: 1px solid var(--color-border); border-radius: var(--case-image-frame-radius); gap: var(--space-32); }
/* SVG artwork uses the original slots; captions and perimeters remain HTML/CSS. */
.cs2-svg-art { position: relative; width: 100%; overflow: hidden; }
.cs2-svg-art img { position: absolute; inset: 0 auto auto 0; width: 100%; height: auto; }
.cs2-merger .cs2-svg-art { border-radius: var(--case-image-frame-radius); }
.cs2-merger .cs2-svg-art img {
  width: calc(100% * 467 / 718);
  left: calc(100% * 116 / 718); top: calc(100% * 31 / 228);
}
.cs2-modal { padding: 24px 32px; background: #FAFAFA; border: 1px solid var(--color-border); border-radius: var(--case-image-frame-radius); gap: var(--space-24); }
.cs2-modal-art {
  border: 0; border-radius: 6.62252px;
  box-shadow: 0 0 9.09px #0000000A;
  outline: .2px solid var(--color-border); outline-offset: -.2px;
}
.cs2-collage { position: relative; container-type: inline-size; }
.cs2-collage img { position: absolute; height: auto; }
/* Restore the perimeter clipped from the supplied rotated WebP bounds.
   The artwork remains at its natural ratio, with its rotation baked only once. */
.cs2-art-surround { position: absolute; }
.cs2-art-surround img {
  position: relative; width: 100%;
  clip-path: var(--art-rounded-clip,polygon(var(--art-clip)));
}
.cs2-art-surround::before {
  content: ''; position: absolute;
  left: var(--art-left,0%); top: var(--art-top,0%);
  width: var(--art-width,100%); height: var(--art-height,100%);
  background: white; border-radius: .561798cqw;
  outline: var(--art-border) solid white;
  transform: rotate(var(--art-angle,0deg)); transform-origin: 0 0;
  filter: drop-shadow(0 0 .140449cqw #00000014) drop-shadow(0 .280899cqw .421348cqw #0000001A);
}
.cs2-notion { --art-border: .842697cqw; }
.cs2-ninode { --art-border: .561798cqw; }
/* A spread preserves Paper’s fractional border scale without outline rounding. */
.cs2-ninode .cs2-art-surround::before {
  outline: none; box-shadow: 0 0 0 var(--art-border) white;
}
/* Rotations present in supplied WebPs are baked once; positions use their bounds. */
.cs2-notion .cs2-collage { aspect-ratio: 712 / 240; }
.cs2-notion .cs2-art-surround:nth-child(1) {
  width: 72.776685%; left: -3.994382%; top: 15.3%;
  --art-width: 91.669347%; --art-height: 87.380862%;
  --art-left: 0.000000%; --art-top: 13.241618%; --art-angle: -7deg;
  --art-clip: 0.000000% 13.241618%, 90.986058% 0.000000%, 99.970443% 86.729539%, 8.984385% 99.971156%;
}
.cs2-notion .cs2-art-surround:nth-child(2) {
  width: 72.448502%; left: 21.891854%; top: 14.933333%;
  --art-width: 92.084006%; --art-height: 89.707476%;
  --art-left: 8.389296%; --art-top: 0.000000%; --art-angle: 6deg;
  --art-clip: 8.389296% 0.000000%, 99.968856% 10.758618%, 91.579560% 99.974667%, 0.000000% 89.216049%;
}
.cs2-notion .cs2-art-surround:nth-child(3) {
  width: 69.826779%; left: 55.617978%; top: 29.588%;
  --art-width: 95.541401%; --art-height: 87.341772%;
  --art-left: 0.000000%; --art-top: 12.970261%; --art-angle: -4.95deg;
  --art-clip: 0.000000% 12.970261%, 95.185068% 0.000000%, 99.975219% 87.016020%, 4.790152% 99.986281%;
}
.cs2-playbook .cs2-collage, .cs2-checklist .cs2-collage {
  aspect-ratio: 712 / 242;
  border: 0;
  border-radius: var(--case-image-frame-radius) var(--case-image-frame-radius) 0 0;
}
.cs2-playbook img { filter: drop-shadow(0 .421348cqw .294944cqw #0000001A); }
.cs2-playbook img:nth-child(1) { width: 54.560393%; left: 2.949438%; top: 9.504132%; }
.cs2-playbook img:nth-child(2) { width: 54.539326%; left: 42.050562%; top: 43.966942%; }
.cs2-changelog .cs2-collage { aspect-ratio: 712 / 300; background: #FAFAFA; }
.cs2-changelog .cs2-art-surround:first-child {
  width: 73.689139%; left: 2.808989%; top: 5.66%;
  --art-width: 95.298602%; --art-height: 86.060606%;
  --art-left: 0%; --art-top: 14.285855%; --art-angle: -5.41deg;
  --art-border: 0px;
  --art-clip: 0% 14.285855%, 94.874005% 0%, 99.977764% 85.677185%, 5.103759% 99.963041%;
}
.cs2-changelog .cs2-art-surround::before { border-radius: 1.123596cqw; }
.cs2-changelog img:nth-child(2) {
  width: 70.224719%; left: 25.140449%; top: 25%; border-radius: 1.123596cqw;
  filter: drop-shadow(0 0 .140449cqw #00000014) drop-shadow(0 .280899cqw .421348cqw #0000001A);
}
.cs2-ninode .cs2-collage { aspect-ratio: 712 / 276; background: #FAFAFA; }
.cs2-ninode .cs2-art-surround:nth-child(1) {
  width: 25.005618%; left: 46.961133463%; top: 4.771348315cqw;
  --art-width: 95.720430%; --art-height: 97.420719%;
  --art-left: 4.323034%; --art-top: 0.000000%; --art-angle: 2deg;
  --art-clip: 4.323034% 0.000000%, 99.985154% 2.627275%, 95.662119% 99.988648%, -0.000000% 97.361373%;
  --art-rounded-clip: url(#case-2-ninode-retry-corners);
}
.cs2-ninode .cs2-art-surround:nth-child(2) {
  width: 30.337079%; left: -2.106741573%; top: 6.601311933cqw;
  --art-width: 90.074074%; --art-height: 83.329577%;
  --art-left: 0.000000%; --art-top: 17.751357%; --art-angle: -9.32deg;
  --art-clip: 0.000000% 17.751357%, 88.885028% -0.000000%, 99.974737% 82.229564%, 11.089709% 99.980921%;
  --art-rounded-clip: url(#case-2-ninode-create-corners);
}
.cs2-ninode .cs2-art-surround:nth-child(3) {
  width: 28.206461%; left: 70.752716607%; top: 10.533286517cqw;
  --art-width: 91.148260%; --art-height: 94.314941%;
  --art-left: 9.148861%; --art-top: 0.000000%; --art-angle: 4.56deg;
  --art-clip: 9.148861% 0.000000%, 100.008603% 5.939216%, 90.859741% 99.955615%, -0.000000% 94.016399%;
  --art-rounded-clip: url(#case-2-ninode-draft-corners);
}
.cs2-ninode .cs2-art-surround:nth-child(4) {
  width: 26.825843%; left: 22.331461%; top: 10.393258427cqw;
  --art-width: 100.000000%; --art-height: 100.000000%;
  --art-left: 0.000000%; --art-top: 0.000000%; --art-angle: 0deg;
  --art-clip: 0.000000% 0.000000%, 100.000000% 0.000000%, 100.000000% 100.000000%, 0.000000% 100.000000%;
  --art-rounded-clip: url(#case-2-ninode-authorization-corners);
}
.cs2-ninode .cs2-art-surround:nth-child(5) {
  width: 23.876404%; left: -1.544943820%; top: 24.173282922cqw;
  --art-width: 98.076923%; --art-height: 95.252226%;
  --art-left: 0.000000%; --art-top: 4.779957%; --art-angle: -1.81deg;
  --art-clip: 0.000000% 4.779957%, 98.027989% 0.000000%, 99.977768% 95.204701%, 1.949779% 99.984658%;
  --art-rounded-clip: url(#case-2-ninode-notes-corners);
}
.cs2-ninode .cs2-art-surround:nth-child(6) {
  width: 23.595506%; left: 49.719101%; top: 21.348314607cqw;
  --art-width: 100.000000%; --art-height: 100.000000%;
  --art-left: 0.000000%; --art-top: 0.000000%; --art-angle: 0deg;
  --art-clip: 0.000000% 0.000000%, 100.000000% 0.000000%, 100.000000% 100.000000%, 0.000000% 100.000000%;
  --art-rounded-clip: url(#case-2-ninode-fulfillment-corners);
}
.cs2-checklist img { width: 48.244382%; border-radius: 8px; }
.cs2-checklist img:nth-child(1) { left: 8.146067%; top: 9.504132%; }
.cs2-checklist img:nth-child(2) { left: 43.258427%; top: 30.578512%; }
.cs2-playbook .cs2-media-fade, .cs2-checklist .cs2-media-fade,
.cs2-log-1 .cs2-media-fade, .cs2-log-2 .cs2-media-fade {
  display: block; position: absolute; inset: 76.446281% 0 auto; height: 46.694215%;
  background: linear-gradient(in oklab 0deg,white 55.5%,rgb(255 255 255 / 0%) 104.5%); pointer-events: none;
}
.cs2-log-1 .cs2-media-fade, .cs2-log-2 .cs2-media-fade { top: 80.524345%; height: 40.449438%; }
.cs2-log-1 .cs2-collage, .cs2-log-2 .cs2-collage { border: 0; border-radius: 0; aspect-ratio: 340 / 267; }
.cs2-log-1 img, .cs2-log-2 img { width: 72.352941%; left: 13.823529%; top: 8.614232%; }
.cs2-impact-label { display: flex; align-items: center; gap: var(--space-4); font-weight: var(--font-weight-medium); }
.case-study-2 .impact { gap: var(--space-16); }
.case-study-2 .cs2-total-impact { gap: var(--space-8); }
.cs2-total-impact li { background: var(--case-quote-background); padding: 8px 16px; }
#case-2-outcome > p { margin-top: var(--space-8); }
.cs2-learnings h2 { font-size: 20px; line-height: 32px; }
.cs2-text-link { display: inline-flex; align-items: center; gap: var(--space-8); width: fit-content; font-size: 14px; line-height: 20px; font-weight: var(--font-weight-medium); }
.cs2-text-link:is(:hover,:focus-visible,:active) { color: var(--case-color-heading); text-decoration: underline dashed var(--color-name-underline); text-decoration-thickness: var(--case-text-link-underline-thickness); text-underline-offset: var(--case-text-link-underline-offset); }
.cs2-quotes { grid-template-columns: 240fr 360fr; max-width: 632px; margin-bottom: var(--space-16); }
.cs2-quotes .speech { border: 1px solid var(--color-border); }
.case-study-2 .case-footer .next-project-title { font-family: var(--font-project-title); font-weight: var(--font-weight-semibold); line-height: 24px; }
@media (min-width: 900px) {
  /* Paper uses a 718px reading track, with distinct 712px source groups. */
  .case-study-2 .case-body { grid-template-columns: minmax(0,1fr) minmax(0,718px) minmax(0,1fr); }
  #case-2-problem, #aligning-patterns, #handoff-practices > :is(.cs2-grid,.case-media-pair) { max-width: 712px; }
  .cs2-figure { max-width: 712px; }
  .cs2-merger { max-width: 718px; }
  .case-study-2 .outcome-divider { width: 100vw; max-width: none; margin-left: calc((718px - 100vw) / 2); }
}
@media (max-width: 899px) {
  .case-study-2 #case-2-title { scroll-margin-top: calc(88px + env(safe-area-inset-top)); }
  .cs2-question p { font-size: 20px; line-height: 28px; }
  .case-study-2 h3 { line-height: 20px; }
  .cs2-learnings h2 { line-height: 28px; }
}
@media (max-width: 619px) {
  .cs2-grid { grid-template-columns: minmax(0,1fr); }
  .cs2-confidentiality { padding-bottom: 0; }
  .cs2-question { gap: var(--space-24); }
  .cs2-learnings, #case-2-outcome { margin-top: calc(var(--case-closing-section-gap-mobile) - var(--case-section-gap-mobile)); }
  /* Text stays readable instead of inheriting the Overview's artwork scale. */
  .case-study-2 .showcase-metrics { grid-template-columns: minmax(0,1fr); }
  .case-study-2 .metrics li { padding: var(--space-16); }
  .case-study-2 .metric-number { font-size: 28px; line-height: 42px; }
  .case-study-2 .metric-description { font-size: 14px; line-height: 22px; margin-top: var(--space-8); letter-spacing: var(--tracking-body); }
  .case-study-2 .case-footer .next-project-title { font-size: 14px; line-height: 22px; }
}