/* Phase 2 additions. The approved Phase 1 stylesheet is reused unchanged. */
.sp2-detail .ss-hero .ss-split { align-items: center; }
.sp2-detail .ss-hero .ss-copy { }
.sp2-detail .sp2-document-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 38px;
}
.sp2-detail .sp2-document-type { border-top: 1px solid var(--ss-line); padding-top: 28px; }
.sp2-detail .sp2-document-type .ss-eyebrow { margin-bottom: 24px; }
.sp2-detail .sp2-document-type h2 { }
.sp2-detail .sp2-document-type > p:last-child {
  margin: 20px 0 0; color: var(--ss-copy);
}
.sp2-detail .sp2-products {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px; margin-top: 48px;
}
.sp2-detail .sp2-products a {
  padding: 24px 0; border-bottom: 1px solid var(--ss-line);
  color: var(--ss-ink); text-decoration: none;
}
.sp2-detail .sp2-products a:hover { color: var(--ss-copy); }
.sp2-detail .sp2-products a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sp2-detail .sp2-document-groups { margin-top: 52px; }
.sp2-detail .sp2-document-group {
  display: grid; grid-template-columns: 1fr 2fr; gap: 72px;
  padding: 36px 0; border-top: 1px solid var(--ss-line);
}
.sp2-detail .sp2-document-group:last-child { border-bottom: 1px solid var(--ss-line); }
.sp2-detail .sp2-document-group > h3 { padding-top: 5px; }
.sp2-detail .sp2-document-group ul { list-style: none; margin: 0; padding: 0; min-width: 0; }
.sp2-detail .sp2-document-group li { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.sp2-detail .sp2-document-group li + li { border-top: 1px solid var(--ss-line); padding-top: 28px; margin-top: 28px; }
.sp2-detail .sp2-document-group h4 { margin: 0; }
.sp2-detail .sp2-document-meta { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 5px; margin: 12px 0 0; color: var(--ss-copy); }
.sp2-detail .sp2-document-group .ss-link { margin: 0; flex-shrink: 0; min-height: 44px; min-width: 44px; text-align: center; }
.sp2-detail .sp2-signal-path { max-width: 1000px; margin: 60px auto 0; padding: 30px; background: #fff; }
.sp2-detail .sp2-learning-path { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 44px; }
.sp2-detail .sp2-learning-path li { border-top: 1px solid var(--ss-line); padding-top: 24px; }
.sp2-detail .sp2-learning-path p { margin: 22px 0 0; }
@media (max-width: 1100px) {
  .sp2-detail .sp2-document-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .sp2-detail .sp2-products { column-gap: 32px; }
  .sp2-detail .sp2-products a { }
  .sp2-detail .sp2-document-group { gap: 40px; }
  .sp2-detail .sp2-learning-path { gap: 36px; }
  .sp2-detail .sp2-learning-path p { }
}
@media (max-width: 800px) {
  .sp2-detail .sp2-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp2-detail .sp2-document-group { grid-template-columns: 1fr; gap: 24px; }
  .sp2-detail .sp2-document-group > h3 { padding-top: 0; }
  .sp2-detail .sp2-learning-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp2-detail .sp2-signal-path { padding: 0; margin-top: 40px; }
}
@media (max-width: 560px) {
  .sp2-detail .sp2-document-types { grid-template-columns: 1fr; gap: 32px; }
  .sp2-detail .sp2-document-type { padding-top: 24px; }
  .sp2-detail .sp2-document-type .ss-eyebrow { margin-bottom: 16px; }
  .sp2-detail .sp2-document-type > p:last-child { margin-top: 14px; }
  .sp2-detail .sp2-products { grid-template-columns: 1fr; margin-top: 30px; }
  .sp2-detail .sp2-products a { padding: 20px 0; }
  .sp2-detail .sp2-document-groups { margin-top: 36px; }
  .sp2-detail .sp2-document-group { padding: 28px 0; }
  .sp2-detail .sp2-document-group h4 { }
  .sp2-detail .sp2-document-group li { gap: 16px; align-items: start; }
  .sp2-detail .sp2-document-meta { display: block; }
  .sp2-detail .sp2-document-meta span { display: block; }
  .sp2-detail .sp2-learning-path { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .sp2-detail .sp2-learning-path li { display: grid; grid-template-columns: 28px 1fr; gap: 18px; padding: 24px 0; }
  .sp2-detail .sp2-learning-path .ss-number { padding-top: 4px; }
  .sp2-detail .sp2-learning-path p { margin: 0; }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .sp2-detail #official-training h2 { text-wrap: balance; }
  .sp2-detail #official-training h2 br { display: none; }
}