/* Owner review, 19 October: shared messenger canvas and aligned section edges. */
:root { --messenger-canvas:#e8f2fb; --messenger-line:#cbddeb; }
:root[data-theme="dark"] { --messenger-canvas:#223443; --messenger-line:#425b6d; }
#landing-copy-wireframes { --section-outset:25px; }
#landing-copy-wireframes>section {
  width:calc(100% + 2 * var(--section-outset));
  max-width:none;
  margin-inline:calc(-1 * var(--section-outset));
}
#landing-copy-wireframes>.solution,
#landing-copy-wireframes>.tools-band,
#landing-copy-wireframes>#benefits,
#landing-copy-wireframes>#control { padding-inline:var(--section-outset); }
/* The image fills the right side to its outer edges, so no inner rectangle remains. */
body .hero.hero--conveyor {
  background:linear-gradient(110deg,#fff 12%,#f7faff 48%,#edf5fb 100%);
  grid-template-columns:minmax(0,48%) minmax(0,52%);
}
.hero--conveyor .hero-copy { z-index:2; padding-left:clamp(30px,4.2vw,64px); }
.hero-conveyor-visual { align-self:stretch; display:flex; align-items:stretch; }
.hero-conveyor-visual img {
  width:100%; height:100%; min-height:0; aspect-ratio:auto;
  object-fit:cover; object-position:center;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 5%,#000 17%);
}
body .pain .pain-scenario,body #solution .stage-visual,
.study-page .study-transcript,.study-page .case-conversation {
  background:var(--messenger-canvas);
}
.study-transcript .study-message { border-top-color:var(--messenger-line); }
.study-transcript .study-message.agent { border-left-color:var(--connection-lime); }
/* Integration role descriptions are shared by every case, with the same order. */
.study-connections { margin-top:40px; padding-top:32px; border-top:1px solid var(--panel-line); scroll-margin-top:170px; }
.study-page .study-connections>h3 { font-size:24px; margin-bottom:12px; }
.study-page .study-connections>p { font-size:14px; max-width:72ch; }
.study-connections ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 48px; list-style:none; margin:30px 0 0; padding:0; }
.study-connections li { padding-top:20px; border-top:1px solid var(--panel-line); min-width:0; }
.study-connections .study-brand { min-height:36px; margin-bottom:12px; font-size:15px; }
.study-connections .study-brand img { width:32px; height:32px; }
.study-connections .study-brand.brand-wordmark img { width:96px; height:32px; }
.study-page .study-connections li p { font-size:14px; line-height:1.75; max-width:60ch; }
/* Marks and the link get their own rows when a case has several integrations. */
.study-card-bottom { gap:14px; }
.study-card-brands { width:100%; min-height:34px; }
body .study-card .case-link { margin-left:auto; }
@media(min-width:901px) {
  body .hero.hero--conveyor { min-height:clamp(660px,calc(100svh - 112px),820px); }
}
@media(max-width:900px) {
  body .hero.hero--conveyor { grid-template-columns:1fr; }
  .hero--conveyor .hero-copy { padding-left:30px; padding-right:30px; }
  .hero-conveyor-visual { aspect-ratio:1; display:block; }
  .hero-conveyor-visual img {
    height:auto; aspect-ratio:1; object-fit:contain;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 94%,transparent 100%),linear-gradient(to right,transparent,#000 4%,#000 97%,transparent);
    mask-composite:intersect;
  }
}
@media(max-width:750px) {
  #landing-copy-wireframes { --section-outset:20px; }
  .hero--conveyor .hero-copy { padding-inline:24px; }
}
@media(max-width:650px) {
  .study-connections { margin-top:32px; padding-top:26px; }
  .study-page .study-connections>h3 { font-size:23px; }
  .study-connections ul { grid-template-columns:1fr; gap:20px; margin-top:24px; }
  .study-page .study-connections li p { font-size:14px; }
}
@media(max-width:360px) {
  #landing-copy-wireframes { --section-outset:16px; }
  .hero--conveyor .hero-copy { padding-inline:20px; }
}