/* Clay material treatments for the existing dynamic next-step control. */
.next-step[data-cta-style]{--cta-fill:var(--activity-fill,#FF00A1);--cta-base:color-mix(in srgb,var(--cta-fill),#0B1220 30%);position:relative;isolation:isolate;display:block;width:100%;padding:0!important;border:0;text-align:left;color:var(--activity-ink,#FFE600);transition:transform .16s,box-shadow .16s;overflow:visible}
.next-step[data-cta-style]>.cta-face{position:relative;display:block;padding:22px 24px;min-width:0;border-radius:inherit;color:inherit}
.next-step[data-cta-style] .cta-face>small{display:block;font-size:14px;line-height:1.25;font-weight:900;letter-spacing:.035em}
.next-step[data-cta-style] .cta-face>strong{display:block;font-family:Bricolage,Nunito,sans-serif;font-size:26px;line-height:1.12;margin:10px 0;letter-spacing:-.025em}
.next-step[data-cta-style] .cta-face>span{display:block;font-size:15px;line-height:1.45}
.next-step[data-cta-style] .cta-face>b{display:block;font-size:16px;line-height:1.3;margin-top:17px}
.next-step[data-cta-style]:hover{filter:none}
.next-step[data-cta-style]:focus-visible{outline:3px solid #0B1220;outline-offset:6px}
/* A continuous cap outline hides the base at the top corners; depth stays below. */
.next-step[data-cta-style="key"]{padding:0 0 10px!important;border-radius:18px;background:transparent;box-shadow:none}
.next-step[data-cta-style="key"]:before{content:"";position:absolute;inset:5px 0 0;z-index:-1;border-radius:18px;background:linear-gradient(90deg,color-mix(in srgb,var(--cta-fill),#0B1220 26%),color-mix(in srgb,var(--cta-fill),white 8%) 18%,color-mix(in srgb,var(--cta-fill),#0B1220 14%) 80%,color-mix(in srgb,var(--cta-fill),#0B1220 28%));box-shadow:0 5px 8px #0B122026,0 1px 2px #0B12201F;pointer-events:none}
.next-step[data-cta-style="key"]:after{content:none}
.next-step[data-cta-style="key"]>.cta-face{padding:18px 22px;border-radius:18px;background:linear-gradient(110deg,color-mix(in srgb,var(--cta-fill),white 7%),var(--cta-fill) 30%,var(--cta-fill) 75%,color-mix(in srgb,var(--cta-fill),#0B1220 6%));border:1px solid #FFFFFF45;box-shadow:inset 0 1px 0 #FFFFFF44,inset 0 -1px 0 #FFFFFF55;transition:transform .16s}
.next-step[data-cta-style="key"] .cta-face>strong{margin:8px 0}
.next-step[data-cta-style="key"] .cta-face>b{margin-top:14px}
.next-step[data-cta-style="key"]:active{transform:none;box-shadow:none}
.next-step[data-cta-style="key"]:active>.cta-face{transform:translateY(3px)}
.next-step[data-cta-style="key"]:active:before{box-shadow:0 2px 4px #0B122026,0 1px 2px #0B12201F}
.next-step[data-cta-style="soft"]{border-radius:34px;background:linear-gradient(145deg,color-mix(in srgb,var(--cta-fill),white 18%),var(--cta-fill) 65%,color-mix(in srgb,var(--cta-fill),#0B1220 12%));box-shadow:inset 5px 5px 8px #FFFFFF5C,inset -5px -6px 9px #0B122026,0 5px 0 var(--cta-base)}
.next-step[data-cta-style="soft"]>.cta-face{padding:29px 29px 27px}
.next-step[data-cta-style="soft"]:active{transform:translateY(3px);box-shadow:inset 3px 3px 7px #0B122028,inset -2px -2px 7px #FFFFFF40,0 2px 0 var(--cta-base)}
.next-step[data-cta-style="cartridge"]{padding:9px 12px 15px!important;border-radius:13px 13px 20px 20px;background:linear-gradient(110deg,color-mix(in srgb,var(--cta-fill),white 20%),var(--cta-fill) 40%,var(--cta-base));box-shadow:0 7px 0 var(--cta-base);border-bottom:2px solid #FFFFFF33}
.next-step[data-cta-style="cartridge"]>.cta-face{padding:22px 19px;border-radius:8px 8px 12px 12px;background:var(--cta-fill);border:1px solid #0B122025;box-shadow:inset 0 2px 2px #FFFFFF50,inset 0 -2px 0 #0B122018}
.next-step[data-cta-style="cartridge"]:before,.next-step[data-cta-style="cartridge"]:after{content:"";position:absolute;top:36%;width:3px;height:40%;background:repeating-linear-gradient(to bottom,#FFFFFF70 0 2px,transparent 2px 7px);z-index:2;border-radius:2px}
.next-step[data-cta-style="cartridge"]:before{left:4px}.next-step[data-cta-style="cartridge"]:after{right:4px}
.next-step[data-cta-style="cartridge"]:active{transform:translateY(3px);box-shadow:0 4px 0 var(--cta-base)}
@media(prefers-reduced-motion:reduce){.next-step[data-cta-style]{transition:none}.next-step[data-cta-style]:active{transform:none}}

@media(prefers-reduced-motion:reduce){.next-step[data-cta-style="key"]>.cta-face{transition:none}.next-step[data-cta-style="key"]:active>.cta-face{transform:none}}