/* U28-inspired audience invitation. Content remains independent of motion. */
.si-invitation {
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(40px,6vw,88px);
  padding-block:clamp(48px,6vw,80px);
}
.si-copy,.si-audiences {min-width:0;}
.platform-page .pf-main .si-copy h2 {margin:0;}
.si-copy h2>span {display:block;}
.platform-page .pf-main .si-copy>p {margin:24px 0 32px;max-width:45ch;}
.si-action {width:fit-content;gap:24px;}
.si-action svg,.si-role-list svg,.si-motion-toggle svg {
  width:24px;height:24px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.si-audience-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--pearl-line);}
.platform-page .pf-main .si-audience-heading h3 {margin:0;font:600 18px/1.4 var(--pearl-font-display);letter-spacing:-0.01em;}
.si-motion-toggle {display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0 8px 8px;border:0;background:transparent;color:var(--pearl-muted);font:400 14px/1.4 var(--pearl-font-body);cursor:pointer;}
.si-motion-toggle[hidden] {display:none;}
.si-motion-toggle:hover {color:var(--pearl-ink);}
.si-motion-toggle svg {width:18px;height:18px;}
.si-play {display:none;}
.si-motion-toggle[aria-pressed="true"] .si-pause {display:none;}
.si-motion-toggle[aria-pressed="true"] .si-play {display:block;}
.si-all-roles {border:0;}
.si-all-roles>summary {display:none;}
.si-role-list {list-style:none;padding:0;margin:0;}
.si-role-list li {margin:0;}
.si-role-list a {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding-block:12px;border-bottom:1px solid var(--pearl-line);color:var(--pearl-ink);text-decoration:none;font:400 16px/1.5 var(--pearl-font-body);}
.si-role-list a>span {min-width:0;overflow-wrap:anywhere;}
.si-role-list a>svg {width:18px;height:18px;}
.si-role-list a:hover {color:var(--pearl-accent-text);background:var(--pearl-alt);}
.si-role-list a:focus-visible {outline-offset:var(--pearl-focus-offset);}
.si-window {display:none;}
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .si-invitation[data-si-enhanced="true"] .si-all-roles>summary {
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:48px;padding-block:12px;color:var(--pearl-muted);
    font:400 14px/1.5 var(--pearl-font-body);cursor:pointer;list-style:none;
  }
  .si-all-roles>summary::-webkit-details-marker {display:none;}
  .si-all-roles>summary>span {width:9px;height:9px;margin-right:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);}
  .si-all-roles[open]>summary>span {transform:rotate(225deg);}
  .si-invitation[data-si-enhanced="true"] .si-all-roles:not([open])+.si-window {display:block;height:304px;overflow:hidden;}
  .si-track {animation:si-audiences 34s linear infinite;animation-play-state:paused;}
  .si-invitation[data-si-running="true"] .si-track {animation-play-state:running;}
  /* Pause only while the pointer rests on the moving list itself, so a visitor can read a name.
     The earlier rule paused on hover or focus anywhere in the column. The Pause/Resume button lives
     in that column, so after "Resume" its own focus kept the list frozen while the label said it was
     running. The button is the keyboard and assistive-technology control; it needs no focus rule. */
  .si-window:hover .si-track {animation-play-state:paused;}
  .si-audience-name {display:flex;align-items:center;min-height:76px;padding-block:16px;border-bottom:1px solid var(--pearl-line);color:var(--pearl-ink);font:500 clamp(18px,1.5vw,24px)/1.4 var(--pearl-font-display);letter-spacing:-0.01em;overflow-wrap:anywhere;}
  @keyframes si-audiences {to {transform:translateY(-50%);}}
}
@media (max-width:900px) {
  .si-invitation {grid-template-columns:1fr;gap:40px;}
  .platform-page .pf-main .si-copy>p {max-width:65ch;}
  .si-role-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;}
  .si-role-list li {display:flex;}
  .si-role-list a {width:100%;}
}
@media (max-width:480px) {
  .si-role-list {grid-template-columns:1fr;}
  .si-audience-heading {align-items:flex-start;}
  .platform-page .pf-main .si-copy>p {margin-block:24px;}
}