/* "The approval stamp" (enterprise-stamp.js): an audit checklist card beside the four answers; a rubber stamp marks
   each line "Answered" as the visitor scrolls past its answer, then "Ready for review" lands on the card. */
#questions .container.has-art-stamp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); column-gap: clamp(40px, 5vw, 96px); }
#questions .container.has-art-stamp > * { grid-column: 1; }
#questions .container.has-art-stamp > .section-head { grid-row: 1; }
#questions .container.has-art-stamp > .four-list { grid-row: 2; }
#questions .container.has-art-stamp > .es-stage { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) { #questions .container.has-art-stamp { display: block; } .es-stage { display: none; } }

.es-sticky { position: sticky; top: 130px; }
.es-label { margin: 0 0 18px; font-size: 16.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); }
.es-card { position: relative; padding: 24px 26px 22px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.es-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.es-card-h span { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--faint); }
.es-lines { list-style: none; margin: 0; padding: 0; }
.es-lines li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 124px; align-items: center; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.es-n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 13px; color: var(--muted); transition: border-color 0.3s, color 0.3s; }
.es-q { margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.es-q em { display: block; margin-top: 4px; font-style: normal; font-size: 14px; font-weight: 400; color: var(--muted); opacity: 0.35; transition: opacity 0.4s ease; }
.es-slot { position: relative; height: 40px; border-radius: 8px; border: 1px dashed var(--line-strong); }
.es-mark { position: absolute; inset: 3px 2px; display: grid; place-items: center; border: 2px solid var(--turquoise); border-radius: 6px; outline: 1px solid var(--turquoise); outline-offset: -6px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise); background: var(--accent-soft);
  transform: rotate(-8deg) scale(1.5); opacity: 0; }
.es-lines li.on .es-slot { border-color: transparent; }
.es-lines li.on .es-mark { opacity: 0.94; transform: rotate(-8deg); animation: es-ink 0.34s var(--ease) both; }
.es-lines li.on .es-n { border-color: var(--turquoise); color: var(--turquoise); }
.es-lines li.on .es-q em { opacity: 1; }
@keyframes es-ink { 0% { opacity: 0; transform: rotate(-8deg) scale(1.5); } 55% { opacity: 1; transform: rotate(-8deg) scale(0.92); } 100% { opacity: 0.94; transform: rotate(-8deg) scale(1); } }

/* The last stamp, across the foot of the card. */
.es-final { position: relative; display: grid; place-items: center; height: 92px; margin-top: 10px; }
.es-wait { margin: 0; font-size: 14px; color: var(--faint); transition: opacity 0.3s ease; }
.es-final span { position: absolute; padding: 9px 22px; border: 3px solid var(--turquoise); border-radius: 10px; outline: 1px solid var(--turquoise); outline-offset: -8px;
  font-size: 21px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise); background: var(--accent-soft);
  transform: rotate(-5deg) scale(1.6); opacity: 0; }
.es-card.done .es-wait { opacity: 0; }
.es-card.done .es-final span { opacity: 0.96; transform: rotate(-5deg); animation: es-big 0.42s var(--ease) both; box-shadow: 0 0 40px rgba(132, 181, 210, 0.18); }
.es-card.done { border-color: var(--accent); transition: border-color 0.4s ease; }
@keyframes es-big { 0% { opacity: 0; transform: rotate(-5deg) scale(1.6); } 55% { opacity: 1; transform: rotate(-5deg) scale(0.93); } 100% { opacity: 0.96; transform: rotate(-5deg) scale(1); } }

/* The rubber stamp itself: it drops onto the line, presses, and lifts away. */
.es-tool { position: absolute; z-index: 4; left: 0; top: 0; width: 112px; height: 74px; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% + 12px)); }
.es-tool i { position: absolute; left: 50%; transform: translateX(-50%); display: block; }
.es-knob { top: 0; width: 30px; height: 26px; border-radius: 50%; background: linear-gradient(#3a3834, #2a2926); border: 1px solid var(--line-strong); }
.es-neck { top: 22px; width: 14px; height: 26px; background: #2e2d29; border-inline: 1px solid var(--line-strong); }
.es-base { bottom: 0; width: 112px; height: 26px; border-radius: 6px 6px 3px 3px; background: linear-gradient(#34322e 0 70%, var(--turquoise) 70%); border: 1px solid var(--line-strong); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.45); }
.es-tool.go { animation: es-press 0.64s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes es-press {
  0% { opacity: 0; transform: translate(-50%, calc(-100% - 60px)); }
  20% { opacity: 1; transform: translate(-50%, calc(-100% - 40px)); }
  44% { opacity: 1; transform: translate(-50%, calc(-100% + 14px)) scaleY(0.94); }
  56% { opacity: 1; transform: translate(-50%, calc(-100% + 12px)); }
  82% { opacity: 1; transform: translate(-50%, calc(-100% - 46px)); }
  100% { opacity: 0; transform: translate(-50%, calc(-100% - 60px)); } }
.es-card.thud { animation: es-thud 0.22s ease-out; }
@keyframes es-thud { 0% { transform: none; } 35% { transform: translateY(2px) scale(0.996); } 100% { transform: none; } }

.es-card.still .es-mark, .es-card.still .es-final span { animation: none; }
@media (prefers-reduced-motion: reduce) { .es-card, .es-card * { animation: none !important; transition: none !important; } }
