/* V300.343 Role & Button section — a mirrored Red Carpet layout.
   All selectors are scoped; the hero and previous Red Carpet remain untouched. */
body.arx-public-home-space-page .arx-role-section {
  padding-top: 18px;
  padding-bottom: clamp(58px,6vw,90px);
}
body.arx-public-home-space-page .arx-role-layout {
  grid-template-columns: minmax(0,1.07fr) minmax(340px,.93fr);
  gap: clamp(24px,3.4vw,52px);
  align-items: stretch;
  background: linear-gradient(135deg,rgba(14,20,29,.86),rgba(9,13,22,.86) 65%,rgba(11,24,26,.76));
}
body.arx-public-home-space-page .arx-role-info {
  order: 0;
  min-height:100%;
  align-self: stretch;
  justify-content: flex-start;
}
body.arx-public-home-space-page .arx-role-preview {
  order: 1;
  width: 100%;
  max-width: 500px;
  justify-self: end;
  align-self: start;
  border-color: rgba(132,184,204,.24);
  box-shadow:0 14px 48px rgba(0,0,0,.38),0 0 34px rgba(64,166,180,.095);
}
/* Full bleed, no padding or artificial height; keep every frame of the tall GIF. */
body.arx-public-home-space-page .arx-role-preview .arx-carpet-preview-body {padding:0; margin:0; max-height:none;}
body.arx-public-home-space-page .arx-role-preview .arx-carpet-preview-body img {
  display:block; width:100%; height:auto;
  max-width:none;max-height:none;
  aspect-ratio:434 / 982;
  object-fit:contain;
}
body.arx-public-home-space-page .arx-role-section .arx-carpet-eyebrow {color:#b6e9e8;}
body.arx-public-home-space-page .arx-role-section .arx-carpet-index {
  border-color:rgba(87,202,191,.49);
  background:rgba(65,189,176,.08);
  color:#8bf3da;
}
body.arx-public-home-space-page .arx-role-section .arx-carpet-intro h2 > span {color:#ffd45a;}
body.arx-public-home-space-page .arx-role-section .arx-carpet-live-note {
  border-inline-start-color:rgba(106,213,195,.76);
  background:rgba(49,100,111,.12);
}
body.arx-public-home-space-page .arx-role-lower {
  flex:1 1 auto;
  min-height:185px;
  margin-top:0;
  isolation:isolate;
}
body.arx-public-home-space-page .arx-role-plan-label {
  margin-inline-start:auto;
  margin-inline-end:0;
  color:#c6f7d9;
  border-color:rgba(109,225,156,.32);
  background:rgba(46,157,109,.095);
}
body.arx-public-home-space-page .arx-role-mascot {
  inset-inline-end:auto;
  right:auto;
  left:0;
  bottom:-14px;
  width:auto;
  height:min(calc(100% - 54px), 570px);
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:left bottom;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.39));
}
@media (min-width:851px) and (max-width:1100px) {
  body.arx-public-home-space-page .arx-role-layout {grid-template-columns:minmax(0,1fr) minmax(315px,.91fr);gap:24px;}
  body.arx-public-home-space-page .arx-role-info {gap:14px;}
  body.arx-public-home-space-page .arx-role-lower {min-height:190px;}
  body.arx-public-home-space-page .arx-role-mascot {height:min(calc(100% - 55px),420px);max-width:94%;}
}
/* On narrower screens, copy and mascot come first; the full-width portrait GIF is below. */
@media (max-width:850px) {
  body.arx-public-home-space-page .arx-role-layout {grid-template-columns:minmax(0,1fr);gap:25px;}
  body.arx-public-home-space-page .arx-role-info {order:0;min-height:0;}
  body.arx-public-home-space-page .arx-role-preview {order:1;width:min(100%,500px);justify-self:center;}
  body.arx-public-home-space-page .arx-role-lower {flex:none;min-height:300px;}
  body.arx-public-home-space-page .arx-role-mascot {height:auto;width:min(330px,54%);max-width:54%;bottom:-12px;}
}
@media (max-width:700px) {
  body.arx-public-home-space-page .arx-role-section {padding-top:0;padding-bottom:62px;}
  body.arx-public-home-space-page .arx-role-layout {padding:17px;gap:25px;}
  body.arx-public-home-space-page .arx-role-info {gap:15px;}
  body.arx-public-home-space-page .arx-role-lower {min-height:224px;}
  body.arx-public-home-space-page .arx-role-mascot {width:min(226px,63%);max-width:63%;bottom:-12px;}
}
@media (max-width:360px) {
  body.arx-public-home-space-page .arx-role-lower {min-height:202px;}
  body.arx-public-home-space-page .arx-role-mascot {width:min(190px,67%);max-width:67%;}
}
