/* One continuous pale-blue surface for the partnership and selection sections. */
.term-section, .process-design { background: var(--bone); }
.term-section { border-bottom: 0; }
.process-design { border-top: 0; }
.process-design::before { content: none; }

/* Share one gap at the join, instead of adding two full section paddings.
   Phones retain the shared section rhythm defined in mobile-layout.css. */
@media (min-width: 681px) {
  .term-section { padding-bottom: calc(var(--rhythm-section) / 2); }
  .process-design { padding-top: calc(var(--rhythm-section) / 2); }
}

/* Give the stacked term and capacity panels their own breathing room. */
@media (max-width: 1080px) {
  .term-section .partnership-frame { background: transparent; border: 0; }
  .term-section .partnership-frame .commitment-grid { row-gap: var(--mobile-card-pad, 24px); }
  .term-section .partnership-frame .term-feature,
  .term-section .partnership-frame .capacity { border: 1px solid #cfdae4; }
  .term-section .partnership-frame .capacity { background: #fff; }
}
@media (max-width: 1080px) and (forced-colors: active) {
  .term-section .partnership-frame .term-feature,
  .term-section .partnership-frame .capacity { border-color: CanvasText; }
  .term-section .partnership-frame .capacity { background: Canvas; }
}

/* Shape only the white panel: the term summary stacks above it on tablets.
   Decorative covers leave content and focus outlines unclipped. */
.term-section .partnership-frame .capacity,
.process-design .selection-frame .capacity {
  --panel-cut: 32px;
  --panel-edge: #cfdae4;
  position: relative;
}
.term-section .partnership-frame .capacity::after,
.process-design .selection-frame .capacity::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  width: var(--panel-cut);
  height: var(--panel-cut);
  pointer-events: none;
}
.term-section .partnership-frame .capacity::after {
  right: -1px;
  background: linear-gradient(45deg,
    transparent calc(50% - .5px), var(--panel-edge) calc(50% - .5px),
    var(--panel-edge) calc(50% + .5px), var(--bone) calc(50% + .5px));
}
.process-design .selection-frame .capacity::after {
  left: -1px;
  background: linear-gradient(135deg,
    var(--bone) calc(50% - .5px), var(--panel-edge) calc(50% - .5px),
    var(--panel-edge) calc(50% + .5px), transparent calc(50% + .5px));
}
@media (max-width: 680px) {
  .term-section .partnership-frame .capacity,
  .process-design .selection-frame .capacity { --panel-cut: 20px; }
}
@media (forced-colors: active) {
  .term-section, .process-design { background: Canvas; }
  .term-section .partnership-frame .capacity::after,
  .process-design .selection-frame .capacity::after { display: none; }
}