/* round 10: middle (owned by the middle design pass; overrides site.css) */
/* section heads: the sticker is slapped onto the end of the title, not parked at the far edge */
.sec-head { grid-template-columns: auto 1fr; }
.sec-head .sec-sticker { justify-self: start; align-self: start; margin: 4px 0 0 -12px; font-size: 17px; position: relative; z-index: 2; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; } .sec-head .sec-sticker { margin: -8px 0 0 6px; font-size: 14px; } }

/* the board: label tiles that read as flaps on a desktop, plain lines on a phone */
.dep__k .flap { background: linear-gradient(#2e2b27 0 49%, #23211e 51% 100%); color: #ffe27a; }
@media (max-width: 600px) {
  .dep__k { column-gap: .55em; row-gap: 2px; font-size: 12px; letter-spacing: .08em; }
  .dep__k .fw { gap: 0; }
  .dep__k .flap { min-width: 0; height: auto; padding: 0; background: none; box-shadow: none; color: rgba(255, 216, 74, .78); }
  .dep__k .flap::after { display: none; }
  .dep__v { font-size: 34px; }
}

/* service cards: the proof is the hero of each card, the copy sits beside it */
.svc__name { max-width: 54%; }
.svc__foot { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); max-width: 56%; column-gap: 24px; row-gap: 16px; }
.svc__btn { grid-column: 1 / -1; justify-self: start; }
.svc__proof { right: 3.5%; top: 48%; }
.svc__proof--browser .svc__frame { width: clamp(320px, 40vw, 680px); }
.svc__proof--phone .svc__frame { width: clamp(190px, 15.5vw, 290px); border-width: 9px; border-radius: 34px; }
.svc__proof figcaption { font-size: 12px; padding: 6px 10px 5px; }
@media (max-width: 1100px) { .svc__foot { max-width: 52%; grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .svc__name, .svc__foot { max-width: none; }
  .svc__proof--browser .svc__frame { width: 76vw; }
  .svc__proof--phone .svc__frame { width: 34vw; border-width: 6px; border-radius: 22px; }
}

/* how it works: each step is a die-cut card on the track, numbers filled in ink */
.how .step { background: #fffdf7; border-radius: 18px; padding: 22px 22px 28px; box-shadow: 0 0 0 3px #fff, 0 1px 0 3px rgba(0, 0, 0, .05), 0 34px 44px -26px rgba(110, 80, 0, .5); }
.how .step__i { background: var(--ink); color: var(--s-yellow); border-color: var(--ink); }
.how .step__d { color: rgba(20, 20, 20, .76); }
.how .step--you { background: transparent; box-shadow: none; padding: 0; }
@media (min-width: 901px) { .how .step { min-height: 330px; } .how__line { top: 84px; } }
@media (max-width: 900px) { .svc__proof { top: auto; right: auto; margin-bottom: 14px; } }

/* automations: the proof is this site's own inquiry flow, a signal travelling down three stickers */
.svc__proof--flow .flow { position: relative; display: grid; gap: 22px; justify-items: start; width: clamp(280px, 30vw, 470px); padding: 28px 28px 30px; background: #fffdf7; border-radius: 16px; box-shadow: 0 0 0 3px #fff, 0 30px 50px -24px rgba(0, 0, 0, .45); }
.flow::before { content: ""; position: absolute; left: 46px; top: 46px; bottom: 46px; border-left: 2.5px dashed rgba(20, 20, 20, .45); }
.flow__step { position: relative; font-size: clamp(16px, 1.45vw, 22px); padding: 10px 14px 9px; animation: flowPulse 2.1s var(--ease) infinite; animation-delay: var(--d); }
.flow__step:nth-child(2) { margin-left: 36px; }
.flow__step:nth-child(3) { margin-left: 72px; }
@keyframes flowPulse {
  0%, 40%, 100% { transform: rotate(var(--r, 0deg)) translateY(0) scale(1); box-shadow: 0 0 0 3px #fff, 0 1px 0 3px rgba(0, 0, 0, .06), 0 14px 22px -10px rgba(0, 0, 0, .38); }
  12% { transform: rotate(0deg) translateY(-4px) scale(1.07); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink), 0 18px 26px -10px rgba(0, 0, 0, .45); }
}
@media (prefers-reduced-motion: reduce) { .flow__step { animation: none; } }
@media (max-width: 900px) { .svc__proof--flow .flow { width: 76vw; padding: 20px; gap: 16px; } .flow::before { left: 36px; } }