/* Homepage only: the 12px type floor (type.css) applied to the diagram text that
   was still below it on desktop and tablet. Phones already use 12px
   (home-mobile.css). The hero pipeline, platform diagram and timeline are shared
   with other pages, so the floor lives here rather than in site-sections.css. */

/* Hero pipeline: scales with the diagram, so keep the scale and add a floor. */
.ph-role { font-size: max(12px, calc(12 * var(--u))); }
.ph-diagram--roles .ph-pill { font-size: max(12px, calc(13.5 * var(--u))); }

/* Hero tool cards. At 1440px and up they match site-sections.css exactly; below
   ~1400px the type, icons, rows and padding stop shrinking at a floor, so the
   tool names stay at 12px. Cards are then:
   - anchored by their bottom edge (--cb, the y where each card's connector
     starts: 480 for Create, 458.7 Segment, 439.7 ESP) and grow upward;
   - centred on their connector (--cx) and only as narrow as their longest word;
   - for Segment and ESP, wide enough that "Marketing Cloud" (96px at 12px)
     stays on one line beside its icon. */
.ph-diagram--roles .ph-card {
  min-width: min-content;
  left: calc(var(--cx) * var(--u));
  transform: translateX(-50%);
  top: auto;
  bottom: calc((724 - var(--cb)) * var(--u));
}
.ph-diagram--roles .ph-card--brief,
.ph-diagram--roles .ph-card--design,
.ph-diagram--roles .ph-card--write { --cb: 480; }
.ph-diagram--roles .ph-card--segment { --cb: 458.7; }
.ph-diagram--roles .ph-card--esp { --cb: 439.7; }
.ph-diagram--roles .ph-card--segment,
.ph-diagram--roles .ph-card--esp {
  width: max(calc(var(--cw) * var(--u)), calc(96px + 2 * max(8px, calc(12.304 * var(--u))) + max(18px, calc(26.365 * var(--u))) + max(6px, calc(8.788 * var(--u))) + 2px));
}
.ph-diagram--roles .ph-card-header { height: max(32px, calc(43.942 * var(--u))); padding: 0 max(10px, calc(15.819 * var(--u))); }
.ph-diagram--roles .ph-card-title { font-size: max(14px, calc(17.577 * var(--u))); }
.ph-diagram--roles .ph-card-icon { width: max(16px, calc(21.092 * var(--u))); height: max(16px, calc(21.092 * var(--u))); }
.ph-diagram--roles .ph-card-list { padding: max(4px, calc(5.273 * var(--u))) 0; }
.ph-diagram--roles .ph-card--brief .ph-card-list { padding: max(5px, calc(7 * var(--u))) 0; }
.ph-diagram--roles .ph-card-row {
  height: auto;
  min-height: max(28px, calc(38.669 * var(--u)));
  padding: max(4px, calc(4 * var(--u))) max(8px, calc(12.304 * var(--u)));
  gap: max(6px, calc(8.788 * var(--u)));
}
.ph-diagram--roles .ph-row-icon { width: max(18px, calc(26.365 * var(--u))); height: max(18px, calc(26.365 * var(--u))); }
.ph-diagram--roles .ph-card--write .ph-row-icon { width: max(20px, calc(30 * var(--u))); height: max(20px, calc(30 * var(--u))); }
.ph-diagram--roles .ph-row-label { font-size: max(12px, calc(12.304 * var(--u))); }

/* Platform diagram */
.compare-section--sandbox .pdiagram .pd-lbl,
.compare-section--sandbox .pdiagram .pd-more,
.compare-section--sandbox .pdiagram .pd-pii,
.compare-section--sandbox .pdiagram .pd-num,
.compare-section--sandbox .pdiagram .pd-gov-pills span,
.compare-section--sandbox .pdiagram .pd-context-sub span { font-size: 12px; }

/* "Where enterprise AI stops" timeline */
.st-fig .st-name,
.st-fig .tl-name,
.st-fig .tl-part--make .tl-name,
.st-fig .tl-handoff-label { font-size: 12px; }
/* The chips sit close together; trim their padding and tracking so the 12px
   chips don't touch at narrower widths ("Brief" / "Imagery" at 1024px,
   "Approve" / "Build" at 768px). */
.st-fig .tl-name { padding: 0 8px 0 7px; letter-spacing: .02em; }
.st-fig .tl-part--make .tl-name { padding: 0 6px 0 5px; }