/* Continue each deep-dive hero's top strip behind its fixed header. */
.deep-dive:is(.stage-page, .performer-page, .connectors-page) {
  --deep-dive-hero-background: linear-gradient(180deg, #edf7fb 0px, var(--bg) 500px);
}
.deep-dive:is(.stage-page, .performer-page, .connectors-page) .hero::before,
.deep-dive:is(.stage-page, .performer-page, .connectors-page) .nav.home-nav {
  background: var(--deep-dive-hero-background);
}
.deep-dive:is(.stage-page, .performer-page, .connectors-page) .nav.home-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Shared routes between the four Deep Dives. */
.deep-dive-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 24px;
}
.deep-dive-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/1.5 var(--font-body);
  color: var(--t2);
}
.deep-dive-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--t2);
  text-decoration: none;
}
.deep-dive-nav a:hover,
.deep-dive-nav a[aria-current='page'] {
  color: var(--hd);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.deep-dive-nav a[aria-current='page'] {
  font-weight: 600;
}
.deep-dive-nav a:focus-visible {
  outline: 2px solid var(--hd);
  outline-offset: 3px;
  border-radius: 2px;
}
.deep-dive-return {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Deep-dive cards use index.html's editorial tokens from style.css.
   Heroes and section introductions retain their original smaller scale. */
.deep-dive .h1 {
  font: 300 clamp(32px, 5vw, 52px) / 1.15 var(--font-display);
  letter-spacing: -1.5px;
}
.deep-dive .h2 {
  font: 300 clamp(24px, 3.5vw, 36px) / 1.2 var(--font-display);
  letter-spacing: var(--tracking-h2);
}
.deep-dive .h3,
.deep-dive .performer-example-title,
.deep-dive .performer-group-title,
.deep-dive .symphony-card-header h3,
.deep-dive .symphony-group h3.symphony-group-title,
.deep-dive .deep-dive-card-title,
.deep-dive .orchestra-benefits h3,
.deep-dive .arch-eng-name,
.deep-dive .arch-source-title {
  font: var(--type-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--tx);
}
.deep-dive .bl,
.deep-dive .orchestra-intro {
  font: 400 17px / 1.7 var(--font-body);
  color: var(--t2);
}
.deep-dive .bl {
  max-width: 640px;
}
.deep-dive .hero .bl {
  font: 400 17px / 1.7 var(--font-body);
  max-width: 900px;
}
.deep-dive .hero .lb,
.deep-dive .hero .eyebrow {
  line-height: 1.5;
}
.deep-dive .bd,
.deep-dive .symphony-group-body > .orchestra-intro,
.deep-dive .field-value,
.deep-dive .field-value .performer-note,
.deep-dive .project-card p,
.deep-dive .task-list li,
.deep-dive .performer-report-grid p,
.deep-dive .orchestra-performer p,
.deep-dive .symphony-flow p,
.deep-dive .symphony-result,
.deep-dive .arch-eng-desc,
.deep-dive .arch-source-desc {
  font: var(--type-body);
  color: var(--t2);
}
.deep-dive .lb,
.deep-dive .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  line-height: normal;
  text-transform: uppercase;
}
.deep-dive .deep-dive-card-title,
.deep-dive .orchestra-benefits h3 {
  margin-bottom: 8px;
}
.deep-dive .performer-note,
.deep-dive .performer-example-team,
.deep-dive .symphony-example-team,
.deep-dive .symphony-example-note {
  font: var(--type-caption);
}
.deep-dive .field-label,
.deep-dive .arch-eng-label,
.deep-dive .arch-source-label {
  font: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t2);
  margin-bottom: 8px;
}
.deep-dive .performer-email {
  font: inherit;
}
.deep-dive .field-value strong,
.deep-dive .project-card h4,
.deep-dive .orchestra-performer h4,
.deep-dive .symphony-flow h4 {
  font: var(--type-body);
  font-weight: 600;
  color: var(--tx);
}

/* Match the homepage's white cards, neutral dividers, and blue top accent. */
.deep-dive .performer-group,
.deep-dive .symphony-group {
  border: 1px solid var(--bd);
  border-top: 2.25px solid var(--hd);
  border-radius: 14px;
  background: var(--sf);
}
.deep-dive .performer-group-title,
.deep-dive .symphony-group h3.symphony-group-title,
.deep-dive .arch-source-hd {
  border-bottom: 1px solid var(--bd);
  background: var(--sf);
}
.deep-dive .agent-field {
  border-bottom-color: var(--bd);
}
.deep-dive .project-card {
  padding: 0;
  margin: 0 0 16px;
  border-radius: 0;
}
.deep-dive .project-card:last-child {
  margin-bottom: 0;
}
.deep-dive .project-card:hover {
  transform: none;
  box-shadow: none;
}
.deep-dive .task-list li::before {
  font: var(--type-caption);
  color: var(--t2);
}

/* Native catalog buttons retain the existing full-row appearance. */
.deep-dive :is(.div-header, .dept-header, .agent-header, .cat-header) {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}
.deep-dive :is(.dept-header, .agent-header) {
  background: transparent;
}
.deep-dive .dept-header {
  border: 0;
  color: var(--t2);
}
.deep-dive :is(.dept-header.open, .dept-header:hover) {
  color: var(--tx);
}
.deep-dive :is(.agent-header.open, .agent-header:hover, .dept-header:hover) {
  background: var(--bg2);
}
.deep-dive :is(.div-header, .dept-header, .agent-header, .cat-header):focus-visible {
  outline: 3px solid var(--hd);
  outline-offset: 3px;
}
.deep-dive .catalog-mode-note {
  margin: 18px 0 24px;
  font: var(--type-caption);
  color: var(--t2);
}

/* Shared visual treatment for the concrete outputs of each product. */
.deep-dive .stage-benefits > .cd,
.deep-dive .performer-benefits > .cd {
  background: linear-gradient(120deg, #edf7fb, #fff);
}

/* Align heading and description rows without fixing mobile card heights. */
@media (min-width: 769px) {
  .deep-dive :is(.stage-benefits, .performer-benefits, .connectors-benefits) {
    row-gap: 0;
  }
  .deep-dive :is(.stage-benefits, .performer-benefits, .connectors-benefits) > .cd {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
}
@media (max-width: 700px) {
  .deep-dive .deep-dive-return {
    gap: 12px;
  }
  .deep-dive .deep-dive-return > .lbtn {
    margin-top: 0;
  }
}

/* Separate the deliverables from the detailed product walkthrough. */
.deep-dive-takeaway-divider {
  height: 0;
  margin: 72px 0;
  border: 0;
  border-top: 1px solid var(--bd);
}
.deep-dive-takeaway-divider + .stage-benefits {
  margin-top: 0;
}

@media (max-width: 800px) {
  .deep-dive-takeaway-divider {
    margin-block: 56px;
  }
}

/* Shared spanning outcome and three compact product deliverables. */
.takeaway-header {
  position: relative;
  isolation: isolate;
  padding: 18px 36px 30px;
  text-align: center;
}
.takeaway-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid #cbdfe5;
  border-top: 2px solid var(--hd);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(120deg, #edf7fb, #fff);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
  mask-image: linear-gradient(to bottom, #000 35%, transparent);
}
.deep-dive p,
.deep-dive .bd,
.deep-dive .bl,
.deep-dive .hero .section-intro {
  text-wrap: balance;
}

.takeaway-header .bd {
  max-width: 760px;
  margin-inline: auto;
  line-height: 1.6;
}
.deep-dive .takeaway-group .takeaway-cards {
  margin-top: 0;
}
@media (max-width: 768px) {
  .takeaway-header {
    padding: 18px 22px 28px;
    text-align: left;
  }
}

/* Quiet labels and clear deliverables give the takeaway group a shared hierarchy. */
.deep-dive .takeaway-group .deep-dive-card-title {
  margin: 0 0 10px;
  font: 400 23px / 1.25 var(--font-display);
  letter-spacing: -0.35px;
  text-wrap: balance;
}
.takeaway-prefix {
  display: block;
  margin-bottom: 5px;
  color: #287f99;
  font: 600 10px / 1.4 var(--font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.takeaway-title {
  display: block;
}
.deep-dive .takeaway-group .takeaway-cards {
  column-gap: 18px;
}
.deep-dive .takeaway-group .takeaway-cards > .cd {
  padding: 18px 26px;
  border: 1px solid #d4e4e9;
  border-top: 2px solid #66aec3;
  border-radius: 12px;
  background: linear-gradient(145deg, #edf7fb, #f9fcfd 80%);
  box-shadow: 0 3px 12px rgb(32 67 80 / 3%);
  transform: none;
}
.deep-dive .takeaway-group .bd {
  color: #52636b;
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .deep-dive .takeaway-group .takeaway-cards > .cd {
    padding: 16px 22px;
  }
  .deep-dive .takeaway-group .deep-dive-card-title {
    font-size: 22px;
  }
}

.takeaway-outcomes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 0 0 10px;
  color: #287f99;
  font: 600 16px / 1.5 var(--font-body);
}
@media (max-width: 768px) {
  .takeaway-outcomes {
    justify-content: flex-start;
  }
}

/* Use Stage's card heading scale for the other product explanations. */
.deep-dive .project-card h4 {
  font: var(--type-h3);
  letter-spacing: var(--tracking-h3);
}