/* Clickable feature points that switch the dashboard screen. */
.fit-features.is-interactive li{padding:0}
.fit-feature-button{position:relative;display:flex;align-items:flex-start;gap:18px;width:100%;margin:0;padding:22px 52px 22px 18px;border:0;border-radius:14px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .35s ease}
.fit-feature-button::before{position:absolute;top:18px;bottom:18px;left:0;width:2px;border-radius:2px;background:var(--lime);content:'';opacity:0;transform:scaleY(.2);transform-origin:top;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.fit-feature-button h3{color:#aab4a0;transition:color .3s ease}
.fit-feature-button p{opacity:.72;transition:opacity .3s ease,color .3s ease}
.fit-feature-button .fit-feature-index{transition:color .3s ease}
.fit-feature-arrow{position:absolute;top:22px;right:16px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #37442a;border-radius:50%;color:#8e9887;opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .35s ease,background-color .3s ease,color .3s ease,border-color .3s ease}
.fit-feature-arrow svg{width:14px;height:14px}
.fit-feature-button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.is-active>.fit-feature-button{background:linear-gradient(90deg,rgba(198,255,29,.1),rgba(198,255,29,.015) 80%)}
.is-active>.fit-feature-button::before{opacity:1;transform:none}
.is-active>.fit-feature-button h3{color:#f5f7ef}
.is-active>.fit-feature-button p{opacity:1;color:#c2cab9}
.is-active>.fit-feature-button .fit-feature-index{color:var(--lime)}
.is-active>.fit-feature-button .fit-feature-arrow{border-color:var(--lime);background:var(--lime);color:#11170d;opacity:1;transform:none}
@media(hover:hover){.fit-feature-button:hover{background:rgba(255,255,255,.025)}.fit-feature-button:hover h3{color:#edf1e7}.fit-feature-button:hover .fit-feature-arrow{opacity:1;transform:none}.fit-screen-tags>button:hover{border-color:#7b9632;color:#edf1e7}}
.fit-feature-button .fit-feature-index{min-width:26px}
.fit-shot-stage{position:relative;overflow:hidden;aspect-ratio:3576/1994;background:#121510}
.fit-browser .fit-shot-stage img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:top center;--shot-scale:1;--shot-enter:1;--shot-y:0px;transform:translateY(var(--shot-y)) scale(calc(var(--shot-scale) * var(--shot-enter)));transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .55s ease;will-change:transform,opacity}
.fit-browser .fit-shot-stage img.is-entering{opacity:0;--shot-enter:1.035;--shot-y:10px;filter:blur(6px)}
.fit-browser .fit-shot-stage img.is-leaving{opacity:0;--shot-enter:.985;filter:blur(3px)}
.fit-shot-stage::after{position:absolute;right:0;bottom:0;left:0;height:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent);content:'';opacity:0;transform:scaleX(0);transition:opacity .3s ease,transform .6s ease}
.fit-shot-stage.is-switching::after{opacity:1;transform:scaleX(1)}
.fit-shot-count{color:#78826f;font-variant-numeric:tabular-nums}
.fit-shot-count b{color:var(--lime);font-weight:500}
.fit-screen-tags>button{padding:7px 11px;border:1px solid #37442a;border-radius:6px;background:transparent;color:#b2c1a2;font:inherit;font-size:13px;line-height:1.3;cursor:pointer;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.fit-screen-tags>button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.fit-screen-tags>button.is-active{border-color:var(--lime);background:var(--lime);color:#11170d}
@media(max-width:800px){.fit-chapter-body.is-interactive .fit-chapter-visual{order:-1}.fit-chapter-body.is-interactive .fit-screen{scroll-margin-top:90px}.fit-feature-button{padding:18px 48px 18px 14px}.fit-feature-arrow{top:18px;right:12px}}
@media(max-width:480px){.fit-screen-tags>button{font-size:11px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.fit-browser .fit-shot-stage img{transition:none!important}}
/* Member-app phone paired with the dashboard screen. */
.fit-app-peek{position:absolute;z-index:4;margin:0;pointer-events:none;width:clamp(118px,15%,168px);right:-38px;bottom:104px;transform:rotate(4deg);animation:fit-app-float 7s ease-in-out infinite}
.fit-app-peek img{display:block;width:100%;height:auto}
.fit-app-peek figcaption{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;padding:5px 11px;border:1px solid #3d4a2e;border-radius:999px;background:#10150e;color:#c9d6bb;font-size:11px;line-height:1.3;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.fit-app-peek-hero{width:clamp(150px,18%,215px);right:auto;left:-64px;bottom:40px;transform:rotate(-6deg);animation-delay:-2s}
@media(min-width:1100px){.fit-chapter:nth-child(even) .fit-app-peek:not(.fit-app-peek-hero){right:auto;left:-34px;transform:rotate(-4deg)}.fit-chapter:nth-child(even) .fit-app-peek figcaption{transform:translateX(-50%) rotate(4deg)}}
@keyframes fit-app-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:1100px){.fit-app-peek-hero{left:-18px}}
@media(max-width:800px){.fit-chapter-visual.has-app{position:relative}.fit-app-peek{width:86px;right:-4px;bottom:74px}.fit-app-peek figcaption{display:none}.fit-app-peek-hero{width:104px;left:auto;right:-2px;bottom:40px;transform:rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.fit-app-peek{animation:none}}