/* The closing survey band of the pages of the site: block 7 D of the approved home page (web/home.css), without the
   invitation to colleagues. An ink stage inside the light band carries the survey heading and the largest button
   of the page; the light strip under the stage keeps the ink footer clearly separate. Used by the Founders,
   Kazakhstan and Privacy pages. Colours only from tokens.css. */
.closing-d { background: var(--cap-turquoise-12); padding: 96px 0 72px; }
.d-stage { --d-cut: 24px; padding: 72px 64px 64px; clip-path: polygon(0 0, calc(100% - var(--d-cut)) 0, 100% var(--d-cut), 100% 100%, 0 100%); }
.d-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: end; }
.closing-d .kicker { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-gold); }
.closing-d .kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-gold); }
.closing-d h2 { font: var(--cap-text-h1); color: var(--cap-white); margin-top: 20px; text-wrap: balance; }
.d-lede { margin-top: var(--cap-space-4); color: var(--cap-ink-10); max-width: 30em; }
.d-act { padding-bottom: 4px; }
/* The survey button: larger than every other button on the page, white on ink */
.d-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 80px; margin: 0; padding: 24px 32px; font: 600 20px/24px var(--cap-font-sans); text-decoration: none; }
.d-cta svg { flex: none; width: 22px; height: 22px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .d-cta:hover svg { transform: translateX(3px); } }

/* Entry: the stage rises, its texts follow, the survey button arrives last on the stage */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .closing-d[data-block]:not(.is-in) .d-stage, .js-reveal .closing-d[data-block]:not(.is-in) .rv { opacity: 0; }
  .closing-d[data-block].is-in .d-stage { animation: d-rise 560ms var(--ease-out) both; }
  .closing-d[data-block].is-in .d-text .rv { animation: d-rise 520ms var(--ease-out) both; }
  .closing-d[data-block].is-in .d-text .rv:nth-child(1) { animation-delay: 120ms; }
  .closing-d[data-block].is-in .d-text .rv:nth-child(2) { animation-delay: 180ms; }
  .closing-d[data-block].is-in .d-text .rv:nth-child(3) { animation-delay: 240ms; }
  .closing-d[data-block].is-in .d-act.rv { animation: d-rise-cta 520ms var(--ease-out) 320ms both; }
}
@keyframes d-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes d-rise-cta { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  .d-stage { padding: 56px 40px 48px; }
  .d-grid { grid-template-columns: 1fr; align-items: start; gap: 32px; }
  .d-act { max-width: 440px; }
}
@media (max-width: 767px) {
  .closing-d { padding: 32px 0 48px; }
  /* On the phone the stage runs edge to edge */
  .d-stage { --d-cut: 16px; margin: 0 -16px; padding: 40px 16px 32px; }
  .closing-d h2 { margin-top: var(--cap-space-3); }
  .d-grid { gap: 28px; }
  .d-act { max-width: none; }
  .d-cta { min-height: 64px; padding: 20px 20px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .closing-d *, .closing-d *::before, .closing-d *::after { animation: none !important; transition: none !important; }
}