/* Motion adapted from the supplied SMS Home reference. */
.practice-motion .practice-row{position:relative}.practice-motion .practice-row:before{content:"";background:var(--color-cream);transform-origin:0;opacity:.55;height:1px;position:absolute;top:-1px;left:0;right:0}.practice-motion .number{isolation:isolate;justify-content:center;align-items:center;display:inline-flex;position:relative}.practice-motion .number:before{content:"";z-index:-1;opacity:0;border:1px solid #f4f0e470;border-radius:50%;width:44px;height:44px;transition:opacity .3s,transform .4s,background .3s;position:absolute;transform:scale(.75)}.practice-motion .practice-row:focus-within .number:before{opacity:1;background:var(--color-cream);transform:scale(1)}.practice-motion .practice-row:focus-within .number{color:var(--ink)}@media (hover:hover){.practice-motion .practice-row:hover .number:before{opacity:1;background:var(--color-cream);transform:scale(1)}.practice-motion .practice-row:hover .number{color:var(--ink)}}@media (prefers-reduced-motion:no-preference){.practice-motion .is-revealed:before{animation:.95s cubic-bezier(.22,1,.36,1) both practice-line}.practice-motion .is-revealed .number{animation:.65s cubic-bezier(.22,1,.36,1) both practice-number}.practice-motion .number{transition:color .3s}.practice-motion h3{transition:transform .35s}.practice-motion .practice-row:focus-within h3{transform:translate(4px)}}@media (prefers-reduced-motion:no-preference) and (hover:hover){.practice-motion .practice-row:hover h3{transform:translate(4px)}}@keyframes practice-line{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes practice-number{0%{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:no-preference) {
 .text-enter{animation:.7s cubic-bezier(.22,1,.36,1) both text-arrive}
 @keyframes text-arrive{from{opacity:.35;translate:0 8px}to{opacity:1;translate:0}}
}
.hero .bird-motion{width:32px;height:39.38461538461539px;overflow:visible;border:0;flex-shrink:0;pointer-events:none}
@media(max-width:600px){.hero .bird-motion{align-self:center;width:32px;height:39.38461538461539px}}
@media(prefers-reduced-motion:reduce){.text-enter,.practice-motion .is-revealed:before,.practice-motion .is-revealed .number{animation:none!important}}

/* Shared button typography, compact spacing, and subtly rounded corners. */
body :is(.button,button){font:400 15px/22px var(--body)!important;padding:8px 16px!important;border-radius:2px!important;min-height:0}
body .dialog-close span{font-size:inherit}
body .practice-button{gap:8px}

/* The fill stays behind the label and reveals from the left. */
body :is(.button,button){
 --button-base:var(--green);--button-fill:var(--color-cream);--button-text:var(--color-cream);--button-hover-text:var(--green);
 position:relative;isolation:isolate;overflow:hidden;
 background:var(--button-base);color:var(--button-text);
 transition:color .35s ease;
}
body .button.light{--button-base:var(--color-cream);--button-fill:var(--green);--button-text:var(--green);--button-hover-text:var(--color-cream)}
body :is(.button.outline,.menu-toggle){--button-base:transparent;--button-fill:var(--color-cream);--button-hover-text:var(--green)}
body :is(.dialog-close,#dialog-content li button){--button-base:transparent;--button-fill:var(--green);--button-text:var(--green);--button-hover-text:var(--color-cream)}
body :is(.button,button)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--button-fill);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1);pointer-events:none}
body :is(.button,button):is(:hover,:focus-visible){background:var(--button-base);color:var(--button-hover-text);transform:none}
body :is(.button,button):is(:hover,:focus-visible)::before{transform:scaleX(1)}


@media(prefers-reduced-motion:reduce){body :is(.button,button),body :is(.button,button)::before{transition:none!important}}

.pattern-pair-cover{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pattern-pair-cover span{position:absolute;top:0;bottom:0;background:var(--color-cream);opacity:1;transition:opacity .32s ease}
.pattern-pair-cover.is-revealed span{opacity:0}
@media(prefers-reduced-motion:reduce){.pattern-pair-cover{display:none}}

/* Move each judgment label while its number and rule stay in place. */
.approach-steps .judgment-word{width:auto;min-width:0;flex-shrink:1;font:inherit;letter-spacing:inherit;transition:transform .35s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.approach-steps li:hover .judgment-word{transform:translateX(20px)}}
@media(prefers-reduced-motion:reduce){.approach-steps .judgment-word{transition:none}}

/* Match the practice-area number highlight in the judgment rows. */
.approach-steps li>span:first-child{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;transition:color .3s}
.approach-steps li>span:first-child::before{content:"";position:absolute;z-index:-1;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:var(--ink);opacity:0;transform:scale(.75);transition:opacity .3s,transform .4s,background .3s}
@media(hover:hover){.approach-steps li:hover>span:first-child{color:var(--sky)}.approach-steps li:hover>span:first-child::before{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.approach-steps li>span:first-child,.approach-steps li>span:first-child::before{transition:none!important}}

/* Reset instantly offscreen so every entry starts with the full pattern covered. */
.pattern-pair-cover:not(.is-revealed) span{transition:none!important}