/* Course covers sit against a wall-only crop of the approved hero photograph. */
.course-art::before {
  /* This framing stays inside the clear wall above the monitor at every card size. */
  background: url('../images/desk-room-wide-v2.webp') center 8% / auto 350% no-repeat;
  opacity: 1;
}
.course-art { background: #19374b; }
/* Keep the training descriptor legible without squeezing the header links. */
.site-nav .wordmark-training { font-size: 10px; letter-spacing: .035em; }
.art-annotation { top: 24px; left: 26px; right: 20px; z-index: 1; }
.course-cover { box-shadow: 4px 12px 16px #071b2870, 0 2px 3px #071b2850; }
.course-description .course-button {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 100%; min-height: 52px; padding: 14px 22px;
  border-radius: 30px; border: 1px solid var(--mint);
  background: var(--mint); color: var(--blue); font-size: 14px;
  font-weight: 600; line-height: 1.4; text-decoration: none;
  transition: background 160ms ease-out, transform 160ms ease-out;
}
.course-button > span:last-child { flex-shrink: 0; }
.course-button:active { transform: translateY(1px); }
.course-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.collection-close::before {
  inset: auto 0 0; height: 620px;
  background: url('../images/desk-study.webp') center bottom / cover;
  mask-image: linear-gradient(transparent, #000 68%); opacity: 1;
}
.collection-close { padding-bottom: 240px; }
.templates-route > .button { flex-shrink: 0; max-width: 100%; }
.collection-close .bundle-stack { transform: none; padding: 20px 12px 20px 0; }
.collection-close .bundle-stack > a {
  --entry-delay: 0ms;
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 74px; margin-bottom: 12px; padding: 20px 23px;
  border-radius: 3px 6px 6px 3px; border-left: 7px solid #19374b25;
  background: #d0dfd6; color: var(--blue); font: 23px/1.3 var(--serif);
  box-shadow: 2px 9px 15px -7px #081e3180;
  transform: rotate(-2deg); transform-origin: left center;
  transition: transform 220ms ease-out, box-shadow 180ms ease-out;
}
.collection-close .bundle-stack > a:nth-child(2) { --entry-delay: 60ms; background: #e9dfc2; margin-left: 12px; margin-right: -12px; }
.collection-close .bundle-stack > a:nth-child(3) { --entry-delay: 120ms; background: #8fbbb1; }
.collection-close .bundle-stack > a:nth-child(4) { --entry-delay: 180ms; background: #d1d6df; margin-left: 8px; margin-right: -8px; }
.collection-close .bundle-stack > .bundle-included { --entry-delay: 240ms; background: var(--paper); font-size: 20px; }
.bundle-stack .spine-arrow { font: 22px/1 var(--sans); flex-shrink: 0; }
.bundle-stack .spine-meta { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.collection-close .bundle-stack > a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; transform: translateX(6px); }
.collection-close .bundle-stack > a:active { transform: translateX(3px); }
.js-ready .collection-close .bundle-stack:not(.visible) > a { opacity: 0; transform: translateX(36px) rotate(-4deg); }
.js-ready .collection-close .bundle-stack.visible > a { animation: spine-arrive 560ms cubic-bezier(.23,1,.32,1) var(--entry-delay) backwards; }
@keyframes spine-arrive { from { opacity: 0; transform: translateX(36px) rotate(-4deg); } to { opacity: 1; transform: rotate(-2deg); } }

/* No fixed-height stage is allowed to crop the connected-chart caption. */
.handoff-act { height: auto; }
.handoff-stage { position: relative; height: auto; min-height: 0; padding-block: 64px; overflow: visible; }
.handoff-stage > * { flex-shrink: 0; }
.handoff-desk { padding-right: 0; }
.handoff-note { position: relative; inset: auto; max-width: none; padding: 0; margin: 20px 0 0; }
.handoff-caption { padding: 24px 0 0; gap: 24px; flex-wrap: wrap; }
.handoff-caption p { flex: 1 1 320px; max-width: 52ch; min-width: 0; }
.handoff-caption a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; max-width: 100%; }
.handoff-can-pin { height: 310svh; }
.handoff-can-pin .handoff-stage { position: sticky; height: 100svh; padding-block: 36px; }
.handoff-fit .handoff-stage { padding-block: 24px; }
.handoff-fit .handoff-heading h2 { font-size: 36px; margin: 8px 0 16px; }
.handoff-fit .handoff-heading h2 br { display: none; }
.handoff-fit .handoff-desk { margin-top: 16px; }
.handoff-fit .handoff-note { margin-top: 12px; }
.handoff-fit .handoff-caption { padding-top: 16px; }
.handoff-fit .handoff-caption p { flex-basis: 280px; }
@media (hover: hover) and (pointer: fine) {
  .course-button:hover { background: #d0e8dc; }
  .collection-close .bundle-stack > a:hover { transform: translateX(8px) rotate(0); box-shadow: 2px 12px 18px -7px #081e3199; }
}
@media (max-width: 1100px) {
  .course-description .course-button { font-size: 13px; padding-inline: 18px; gap: 12px; }
  .collection-close .bundle-stack > a { font-size: 20px; padding: 18px; }
}
@media (max-width: 760px) {
  .templates-route > .button { margin-top: 24px; }
  .collection-close { padding-bottom: 175px; }
  .collection-close::before { height: 500px; background-size: auto 100%; }
  .handoff-stage { padding: 60px 20px; }
  .handoff-caption { display: block; }
  .handoff-caption a { margin-top: 14px; }
  .collection-close .bundle-stack { margin-inline: 0; padding-right: 12px; }
  .collection-close .bundle-stack > a { font-size: 19px; padding: 18px 14px; }
  .bundle-included .spine-meta { gap: 8px; }
  .bundle-included b { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .handoff-can-pin { height: auto; }
  .handoff-can-pin .handoff-stage { position: relative; height: auto; }
  .collection-close .bundle-stack > a,
  .js-ready .collection-close .bundle-stack.visible > a,
  .js-ready .collection-close .bundle-stack:not(.visible) > a { opacity: 1; transform: none; animation: none; transition: none; }
  .course-art:hover .course-cover { transform: none; }
}