/* Compact role badges; load after homepage-icons.css. */
.feature-showcase .showcase-both-role .homepage-role-heading {
  --role-icon-size:80px;
  --role-icon-trim-start:.08612440;
  --role-icon-trim-end:.07814992;
  --role-icon-center-y:-.00518341;
  --role-title-trim-start:.079em;
  --role-title-trim-end:-.027em;
  --role-title-center-y:.0775em;
  max-width:430px;
  height:112px;
  padding:12px 16px;
  gap:0;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.feature-showcase .showcase-both-role .homepage-role-icon {
  width:var(--role-icon-size);
  height:var(--role-icon-size);
  /* Exclude the supplied PNG's transparent canvas from flex spacing. */
  margin-inline:calc(var(--role-icon-size) * var(--role-icon-trim-start) * -1) calc(5px - var(--role-icon-size) * var(--role-icon-trim-end));
  translate:0 calc(var(--role-icon-size) * var(--role-icon-center-y));
}
.feature-showcase .showcase-both-role[aria-labelledby="showcase-employee-title"] .homepage-role-heading {
  --role-icon-trim-start:.10366826;
  --role-icon-trim-end:.09569378;
  --role-icon-center-y:.01355662;
  --role-title-trim-start:.03em;
  --role-title-trim-end:.03em;
  --role-title-center-y:.0795em;
  width:max-content;
  max-width:calc(100% - 40px);
  padding-inline:24px;
}
.feature-showcase .showcase-both-role .showcase-role-title {
  font-size:clamp(26px,2.1vw,34px);
  font-weight:700;
  font-synthesis:weight;
  line-height:1.2;
  text-align:center;
  /* Glyph bearings include the existing -.04em trailing letter spacing. */
  margin-inline:calc(var(--role-title-trim-start) * -1) calc(var(--role-title-trim-end) * -1);
  translate:0 var(--role-title-center-y);
}
.feature-showcase .showcase-both-role .homepage-role-heading.has-role-entry-motion {
  clip-path:inset(0 50% 0 50% round 18px);
  opacity:0;
  transition:clip-path 720ms cubic-bezier(.22,1,.36,1),opacity 260ms ease;
}
.feature-showcase .showcase-both-role .homepage-role-heading.is-role-revealed {
  clip-path:inset(0 0 0 0 round 18px);
  opacity:1;
}
.feature-showcase .showcase-both-role-copy { text-align:center; }
.feature-showcase .showcase-both-role { padding-top:54px; }
.feature-showcase .showcase-both .showcase-description {
  max-width:100%;
  margin-inline:auto;
  font-size:clamp(22px,1.45vw,24px);
  line-height:1.65;
  text-align:center;
  text-wrap:pretty;
}
.feature-showcase .showcase-both .showcase-link {
  justify-content:center;
  width:min(260px,100%);
  min-height:56px;
  padding:14px 20px;
  gap:10px;
  border:0;
  border-radius:12px;
  background:#146eeb;
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  transition:background-color 180ms ease,transform 220ms cubic-bezier(.22,1,.36,1);
}
.feature-showcase .showcase-both .showcase-link:is(:hover,:focus-visible) { background:#0b56c5; transform:scale(1.025); }
.feature-showcase .showcase-both .showcase-link:active { transform:scale(.98); }
@media(min-width:901px) {
  /* Shared tracks keep copy, buttons and photos level even when copy wraps. */
  .feature-showcase .showcase-both-columns { grid-template-rows:auto auto auto; row-gap:14px; }
  .feature-showcase .showcase-both-role { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:14px; }
  .feature-showcase .showcase-both-role-copy { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:14px; }
  .feature-showcase .showcase-both .showcase-description { display:flex; flex-direction:column; justify-content:space-between; width:100%; align-self:stretch; }
  .feature-showcase .showcase-both .showcase-description > br { display:none; }
  .feature-showcase .showcase-both .showcase-link { margin-top:0; justify-self:center; align-self:start; }
  .feature-showcase .showcase-both-media { margin-top:14px; }
}
@media(min-width:901px) and (max-width:1099px) {
  .feature-showcase .showcase-both-role .homepage-role-heading { --role-icon-size:64px; }
}
@media(max-width:900px) {
  .feature-showcase .showcase-both-role { padding-top:60px; }
  .feature-showcase .showcase-both-role .homepage-role-heading { --role-icon-size:68px; height:124px; padding:12px; gap:0; }
  .feature-showcase .showcase-both-role .showcase-role-title { font-size:28px; }
  .feature-showcase .showcase-both .showcase-description { font-size:20px; }
}
@media(max-width:600px) {
  .feature-showcase .showcase-both-role .homepage-role-heading { --role-icon-size:60px; gap:0; }
  .feature-showcase .showcase-both-role .homepage-role-icon { margin-inline-end:calc(var(--role-icon-size) * var(--role-icon-trim-end) * -1); margin-bottom:-2px; }
  .feature-showcase .showcase-both-role .showcase-role-title { font-size:24px; }
  .feature-showcase .showcase-both .showcase-description { font-size:clamp(18px,5vw,20px); }
}
@media(prefers-reduced-motion:reduce) {
  .feature-showcase .showcase-both-role .homepage-role-heading.has-role-entry-motion { clip-path:none; opacity:1; transition:none; }
  .feature-showcase .showcase-both .showcase-link { transition:none; }
  .feature-showcase .showcase-both .showcase-link:is(:hover,:focus-visible,:active) { transform:none; }
}
