/* Fixed editorial frames. Overlaps live in the padding, never over copy. */
.solved { margin-top: clamp(100px, 11vw, 160px); padding-top: 20px; border-top: 1px solid var(--line); }
.solved-heading { position: relative; margin-bottom: 32px; }
.solved-eyebrow { margin-bottom: 25px; color: var(--muted); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.solved-heading h2 { font-size: clamp(42px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -.06em; }
.solved-intro { max-width: 570px; margin-top: 22px; color: var(--muted); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.solved-pause { position: absolute; right: 0; bottom: 0; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.solved-pause:hover { color: var(--ink); border-color: var(--ink); }
.solved-pause[hidden] { display: none; }
.solved-collage { position: relative; isolation: isolate; width: min(1120px, 100%); height: 616px; margin-inline: auto; }
.solved-frame { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: 1px; background: #f8f8f3; box-shadow: 0 3px 12px rgb(37 38 33 / 4%); }
.solved-category { display: block; margin-bottom: 15px; color: var(--accent); font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .11em; text-transform: uppercase; }
.solved-copy { transition: opacity 330ms ease-in-out; }
.solved-copy h3 { margin-bottom: 12px; font-size: 26px; font-weight: 500; line-height: 1.12; letter-spacing: -.035em; text-wrap: pretty; }
.solved-copy p { color: var(--muted); font-size: 15px; line-height: 1.48; text-wrap: pretty; }
.solved-frame.is-changing .solved-copy { opacity: 0; }
.solved-frame--automation { left: 27.6786%; top: 0; width: 40.1786%; height: 210px; z-index: 3; }
.solved-frame--workflow { left: 0; top: 160px; width: 37.5%; height: 216px; padding-right: 42px; z-index: 2; }
.solved-frame--opensource { left: 65.1786%; top: 84px; width: 25.8929%; height: 350px; padding-left: 46px; z-index: 1; }
.solved-frame--internal { left: 35.1786%; top: 190px; width: 26.7857%; height: 340px; z-index: 4; }
.solved-frame--automation h3, .solved-frame--internal h3, .solved-frame--opensource h3 { font-size: 28px; }
.solved-frame--analytics { left: 2.8571%; top: 350px; width: 34.8214%; height: 210px; padding: 40px 44px 24px 24px; z-index: 1; }
.solved-frame--analytics h3 { font-size: 24px; }
.solved-frame--ai { right: 0; top: 406px; width: 40.5357%; height: 210px; padding-left: 44px; z-index: 2; }
.solved-footer { max-width: 1120px; margin: 30px auto 0; color: var(--ink); font-size: 16px; line-height: 1.6; }
.solved-footer span { color: var(--muted); }
.solved + .work-closing { margin-top: clamp(72px, 8vw, 112px); }

/* Keep the full installation readable on narrower desktops. */
@media (min-width: 901px) and (max-width: 1200px) {
  .solved-collage { height: 680px; }
  .solved-frame--automation { left: 27%; width: 46%; height: 230px; }
  .solved-frame--workflow { top: 204px; width: 42%; height: 230px; padding-right: 50px; }
  .solved-frame--opensource { left: auto; right: 1%; top: 102px; width: 28%; height: 370px; padding-left: 32px; }
  .solved-frame--internal { left: 38%; top: 208px; width: 30%; height: 340px; }
  .solved-frame--analytics { left: 2.5%; top: 408px; width: 40%; height: 220px; padding-right: 60px; }
  .solved-frame--ai { top: 446px; width: 36%; height: 234px; padding-left: 48px; }
}
/* A second, narrower installation preserves readable type on tablets. */
@media (min-width: 701px) and (max-width: 900px) {
  .solved-heading { margin-bottom: 30px; }
  .solved-intro { max-width: 540px; padding-right: 60px; }
  .solved-collage { height: 952px; }
  .solved-frame { padding: 26px; }
  .solved-frame--automation { left: 22%; top: 0; width: 60%; height: 210px; }
  .solved-frame--workflow { left: 0; top: 190px; width: 48.5%; height: 220px; }
  .solved-frame--opensource { left: auto; right: 0; top: 210px; width: 43%; height: 360px; }
  .solved-frame--internal { left: 3%; top: 392px; width: 43%; height: 360px; }
  .solved-frame--analytics { left: 49%; top: 544px; width: 51%; height: 210px; padding-top: 40px; }
  .solved-frame--ai { right: 4%; top: 742px; width: 60%; height: 210px; padding-top: 32px; z-index: 0; }
}
@media (max-width: 700px) {
  .solved { margin-top: 76px; padding-top: 16px; }
  .solved-heading { margin-bottom: 30px; }
  .solved-eyebrow { margin-bottom: 22px; }
  .solved-intro { margin-top: 19px; font-size: 16px; }
  .solved-pause { position: static; margin-top: 16px; }
  .solved-collage { display: flex; flex-direction: column; gap: 14px; height: auto; }
  .solved-frame { position: relative; inset: auto; width: 100%; height: auto; min-height: 244px; padding: 24px; }
  .solved-frame--opensource, .solved-frame--internal { width: calc(100% - 20px); min-height: 300px; align-self: flex-end; }
  .solved-frame--internal { align-self: flex-start; }
  .solved-copy h3, .solved-frame--analytics h3 { font-size: 26px; }
  .solved-footer { margin-top: 28px; font-size: 15px; }
  .solved + .work-closing { margin-top: 64px; }
}
@media (max-width: 360px) {
  .solved-frame { min-height: 320px; }
  .solved-frame--opensource, .solved-frame--internal { min-height: 350px; }
}
@media (prefers-reduced-motion: reduce) {
  .solved-copy { transition: none; }
  .solved-frame.is-changing .solved-copy { opacity: 1; }
}