/* Bridgemont Life rotating steps ("How it works"). No background of its own: it sits on whatever band holds it.
   Base (no JS, or prefers-reduced-motion): the three steps side by side, stacked on phones.
   .is-on (steps-rotate.js): tabs with progress lines, then one featured step. Every step shares one grid cell, so the tallest step
   reserves the height and nothing below moves while it rotates. Only opacity and transform animate. --rs-dur = time per step. */
.steps-rotate{--rs-dur:5.5s;--rs-gap:clamp(12px,2.4vw,32px);margin-top:clamp(40px,5vw,64px)}
.rs-steps{list-style:none;margin:0;padding:0;display:grid;gap:36px}
@media(min-width:760px){.rs-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,48px)}}
.rs-step{margin:0;padding-top:22px;border-top:1px solid rgba(11,18,32,.1)}
.rs-n{display:block;width:max-content;padding-bottom:.06em;font-size:clamp(44px,5vw,60px);font-weight:600;line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--royal);background:linear-gradient(120deg,var(--royal) 15%,var(--sky));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rs-step h3{margin-top:18px;font-size:clamp(20px,2vw,24px)}
.rs-step p{margin-top:10px;color:var(--ink-soft);font-size:clamp(16px,1.3vw,17.5px);line-height:1.6;max-width:44ch}
.rs-tabs{display:none}

/* Tabs: a hairline per step; the active one fills left to right over --rs-dur, and finished steps stay filled. */
.is-on .rs-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--rs-gap)}
.rs-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:48px;padding:18px 0 4px;border:0;background:none;font:inherit;text-align:left;color:var(--ink-soft);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .4s var(--ease)}
.rs-tab:hover,.rs-tab[aria-selected=true]{color:var(--ink)}
.rs-tn{font-size:13px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.rs-tab[aria-selected=true] .rs-tn{color:var(--royal)}
.rs-tt{font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
@media(max-width:759px){.rs-tt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.rs-track{position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px;overflow:hidden;background:rgba(11,18,32,.1)}
.rs-track i{position:absolute;inset:0;background:linear-gradient(90deg,var(--royal),var(--sky));transform-origin:0 50%;opacity:0;transition:opacity .6s var(--ease)}
.rs-tab.is-done i,.rs-tab[aria-selected=true] i{opacity:1}
.is-auto .rs-tab[aria-selected=true] i{animation:rs-fill var(--rs-dur) linear both}
.is-auto:is(:hover,:focus-within,.is-held) .rs-tab i{animation-play-state:paused} /* same specificity as the rule above, so it wins */
@keyframes rs-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Featured step. Leaving: a quick fade in place. Arriving: number, title and line rise 16px into place, a beat apart. */
.is-on .rs-steps{grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(44px,6vw,80px)}
.is-on .rs-step{grid-area:1/1;padding:0;border:0;visibility:hidden;transition:visibility 0s .34s}
.is-on .rs-step.is-active{visibility:visible;transition:none}
.is-on .rs-step>*{opacity:0;transform:translate3d(0,16px,0);transition:opacity .34s cubic-bezier(.4,0,1,1),transform 0s .34s}
.is-on .rs-step.is-active>*{opacity:1;transform:none;transition:opacity .9s var(--ease) .3s,transform 1.1s var(--ease) .3s}
.is-on .rs-step.is-active>h3{transition-delay:.38s}
.is-on .rs-step.is-active>p{transition-delay:.46s}
.is-on .rs-n{font-size:clamp(88px,12.5vw,176px);line-height:.8}
.is-on .rs-step h3{margin-top:26px;font-size:clamp(27px,3.3vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.08;max-width:20ch}
.is-on .rs-step p{margin-top:16px;font-size:clamp(17px,1.5vw,20px);max-width:42ch}
@media(min-width:760px){
  /* On the tabs' three columns: the number under step 1's tab, the words under steps 2 and 3. */
  .is-on .rs-step{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;column-gap:var(--rs-gap);align-content:center}
  .is-on .rs-n{grid-row:1/3;align-self:center}
  .is-on .rs-step h3,.is-on .rs-step p{grid-column:2/4}
  .is-on .rs-step h3{margin-top:0;align-self:end}
  .is-on .rs-step p{align-self:start}
}
/* Reduced motion switched on mid-visit: the JS stops the rotation; this removes the fades. (On load, the JS never starts.) */
@media(prefers-reduced-motion:reduce){.steps-rotate *{transition:none!important;animation:none!important}}