/* Shared CTA treatment: text-only outlined buttons and animated primary arrows. */
.roll,.roll .arrow,.roll-copy>span{transition:none}
.roll:hover{transform:none}
.roll:hover .arrow{transform:rotate(-45deg)}
.roll:hover .roll-copy>span:first-child{transform:none}
.roll:hover .roll-copy>span+span{transform:translateY(120%)}
.hero-actions{gap:12px}
.hero-actions .roll{gap:16px;padding:8px 8px 8px 22px;font-size:14px}
.roll.roll-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.roll.roll-outline .arrow{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px currentColor}
.roll.roll-outline:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.practice-links .roll{margin-block:5px;font-size:13px;gap:18px;justify-content:space-between}
.practice-links .roll .arrow{width:34px;height:34px}
.editorial-pair .roll,.next-step .roll{margin-top:25px}
.work-head>.roll{flex:none}
.roll-back .arrow{transform:rotate(180deg)}
.roll-back:hover .arrow{transform:rotate(225deg)}
.hero-button-spotlight{position:fixed;inset:0;width:100%;height:100dvh;z-index:2147483000;pointer-events:none!important;overflow:hidden;color:rgba(0,0,0,.62)}
.hero-button-spotlight path{fill:currentColor;pointer-events:none!important}
html[data-theme=light] .hero-button-spotlight{color:rgba(248,246,237,.78)}
@media(max-width:767px){.hero-actions .roll{font-size:13px;padding:6px 6px 6px 18px}.hero-actions .roll .arrow{width:36px;height:36px}}
@media(max-width:767px){.practice-links{grid-column:1/-1}.practice-links .roll{gap:12px}}
@media(forced-colors:active){.hero-button-spotlight{display:none}.roll.roll-outline,.roll.roll-outline .arrow{outline:1px solid ButtonText}}

.roll.roll-outline{min-height:56px;padding:16px 24px;justify-content:center;gap:0}
.roll.roll-outline .arrow{display:none}
.hero-actions .roll.roll-outline{min-height:56px;padding:16px 24px}
.roll:not(.roll-outline) .arrow{transition:transform .34s cubic-bezier(.22,1,.36,1)}
.roll:not(.roll-outline):hover .arrow{transform:rotate(-45deg)}
@media(max-width:767px){.roll.roll-outline,.hero-actions .roll.roll-outline{min-height:48px;padding:12px 20px}}
@media(prefers-reduced-motion:reduce){.roll:not(.roll-outline) .arrow{transition:none}}
