/* Compact role capability cards with one Xiaoce-aligned 3D orange icon language. */
@media(min-width:761px){
  #role-tabs .duo-grid .duo-role{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,3.2vw,46px);padding:38px clamp(28px,3.2vw,46px)}
  #role-tabs .advisor-profile,#role-tabs .writer-copy{width:100%;max-width:430px;min-width:0}
  #role-tabs .advisor-stage{width:100%;max-width:650px;min-width:0;padding-left:22px}
  #role-tabs .writer-role .role-art{width:100%;max-width:650px;min-width:0}
}

#role-tabs .advisor-traits{gap:10px}
#role-tabs .advisor-traits>div{grid-template-columns:38px minmax(0,1fr);gap:9px;min-height:64px;padding:9px 11px;border-color:#f1e9e5;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgb(36 36 36 / 4%)}
#role-tabs .advisor-trait-icon,#role-tabs .writer-capability-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border:0;border-radius:0;background:transparent}
#role-tabs .advisor-trait-icon img,#role-tabs .writer-capability-icon img{display:block;width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 4px 6px rgb(255 96 61 / 12%))}
#role-tabs .advisor-traits dt{margin:0 0 1px;font-size:14px;line-height:1.35;font-weight:600}
#role-tabs .advisor-traits dd{font-size:10px;line-height:1.45}

#role-tabs .writer-capability-cards{gap:8px}
#role-tabs .writer-capability-cards li{min-height:62px;gap:8px;padding:9px 10px;border-color:#f1e9e5;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgb(36 36 36 / 4%)}
#role-tabs .writer-capability-cards strong{font-size:13px;font-weight:600;white-space:nowrap}

/* Stable document flow: the second role never covers the first one. */
.duo-section.has-role-stack #role-tabs>.duo-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:28px;padding-bottom:0}
.duo-section.has-role-stack .duo-role,
.duo-section.has-role-stack .advisor-role,
.duo-section.has-role-stack .writer-role{position:relative;top:auto;margin-top:0;border:0;box-shadow:0 16px 48px rgb(31 38 47 / 7%)}
.duo-section.has-role-stack .advisor-role.is-behind{transform:none;filter:none;box-shadow:0 16px 48px rgb(31 38 47 / 7%)}

/* Borderless, quiet capability cards. */
#role-tabs .advisor-traits>div,
#role-tabs .writer-capability-cards li{border:0;background:#faf9f8;box-shadow:none}
#role-tabs .advisor-traits>div:nth-child(2n),
#role-tabs .writer-capability-cards li:nth-child(2n){background:#fff7f3}
#role-tabs .advisor-trait-icon,#role-tabs .writer-capability-icon{width:32px;height:32px;flex-basis:32px}
#role-tabs .advisor-trait-icon,#role-tabs .writer-capability-icon{display:grid;place-items:center;border-radius:50%;background:#fff1ec}
#role-tabs .advisor-trait-icon svg,#role-tabs .writer-capability-icon svg{display:block;width:22px;height:22px;overflow:visible}

@media(max-width:920px) and (min-width:761px){
  #role-tabs .duo-grid .duo-role{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:24px;padding:28px}
  #role-tabs .advisor-profile,#role-tabs .writer-copy{max-width:360px}
  #role-tabs .advisor-stage,#role-tabs .writer-role .role-art{max-width:520px}
  #role-tabs .writer-capability-cards{grid-template-columns:1fr}
}
@media(max-width:760px){
  #role-tabs .advisor-traits{grid-template-columns:repeat(2,minmax(0,1fr))}
  #role-tabs .writer-capability-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:520px){
  #role-tabs .advisor-traits{grid-template-columns:1fr 1fr}
  #role-tabs .writer-capability-cards{grid-template-columns:1fr}
}

/* 2026-10-07 layout repair: role cards always stack; content never collapses into vertical text. */
.duo-section > .duo-grid,
.duo-section #role-tabs > .duo-grid,
.duo-section.has-role-stack #role-tabs > .duo-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:28px!important;
  width:100%!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-bottom:0!important;
}
.duo-section .duo-role,
.duo-section #role-tabs .duo-role,
.duo-section.has-role-stack .duo-role{
  position:relative!important;
  top:auto!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  transform:none!important;
  filter:none!important;
}
.duo-section .advisor-profile,
.duo-section .writer-copy,
.duo-section .advisor-stage,
.duo-section .writer-role .role-art{
  min-width:0!important;
}

@media(min-width:1025px){
  .duo-section #role-tabs .duo-grid .duo-role,
  .duo-section.has-role-stack #role-tabs .duo-grid .duo-role{
    grid-template-columns:minmax(360px,.82fr) minmax(520px,1.18fr)!important;
    gap:clamp(36px,4vw,56px)!important;
    padding:40px clamp(36px,4vw,54px)!important;
  }
  .duo-section #role-tabs .advisor-profile,
  .duo-section #role-tabs .writer-copy{
    width:100%!important;
    max-width:460px!important;
  }
  .duo-section #role-tabs .advisor-stage,
  .duo-section #role-tabs .writer-role .role-art{
    width:100%!important;
    max-width:680px!important;
  }
}

@media(max-width:1024px){
  .duo-section #role-tabs .duo-grid .duo-role,
  .duo-section.has-role-stack #role-tabs .duo-grid .duo-role{
    grid-template-columns:minmax(0,1fr)!important;
    gap:34px!important;
    padding:30px 26px!important;
  }
  .duo-section #role-tabs .advisor-profile,
  .duo-section #role-tabs .writer-copy,
  .duo-section #role-tabs .advisor-stage,
  .duo-section #role-tabs .writer-role .role-art{
    width:100%!important;
    max-width:680px!important;
    margin-inline:auto!important;
  }
}

/* Restore the original scroll-driven role-card stack on desktop. */
@media(min-width:1025px){
  .duo-section.has-role-stack{--stack-top:138px;padding-bottom:48px}
  .duo-section.has-role-stack #role-tabs{position:relative}
  .duo-section.has-role-stack #role-tabs > .duo-grid{
    display:block!important;
    padding-bottom:24px!important;
  }
  .duo-section.has-role-stack #role-tabs .duo-role{
    position:sticky!important;
    min-height:540px!important;
    overflow:hidden;
    isolation:isolate;
    transform-origin:50% 0;
    transition:transform .45s cubic-bezier(.16,1,.3,1),filter .35s ease,box-shadow .35s ease!important;
  }
  .duo-section.has-role-stack #role-tabs .advisor-role{
    top:var(--stack-top)!important;
    z-index:1;
    scroll-margin-top:var(--stack-top);
  }
  .duo-section.has-role-stack #role-tabs .writer-role{
    top:calc(var(--stack-top) + 10px)!important;
    z-index:2;
    margin-top:32px!important;
    scroll-margin-top:calc(var(--stack-top) + 10px);
  }
  .duo-section.has-role-stack #role-tabs .advisor-role.is-behind{
    transform:translateY(-12px) scale(.972)!important;
    filter:saturate(.88)!important;
    box-shadow:0 12px 38px rgba(31,38,47,.06)!important;
  }
}

@media(max-width:1024px){
  .duo-section.has-role-stack #role-tabs > .duo-grid{display:grid!important;padding-bottom:0!important}
  .duo-section.has-role-stack #role-tabs .duo-role{position:relative!important;top:auto!important;margin-top:0!important}
  .duo-section.has-role-stack #role-tabs .advisor-role.is-behind{transform:none!important;filter:none!important}
}

@media(prefers-reduced-motion:reduce){
  .duo-section.has-role-stack #role-tabs .duo-role{transition:none!important}
}