/* The supplied screens keep their original proportions in every viewport. */
.family-flow-demo .phone-viewport{aspect-ratio:720/1600}
.family-flow-scene{position:absolute;inset:0;overflow:hidden;visibility:hidden;pointer-events:none;scrollbar-width:thin;scrollbar-color:#aeb4bd transparent}
.family-flow-scene:first-child{visibility:visible}
.family-flow-scroll{will-change:transform}
.family-flow-demo .scene-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.family-flow-demo .scene-button{display:flex;align-items:center;min-height:68px;padding:16px 18px}
.family-flow-demo .scene-button>span{font-size:16px;line-height:1.3;letter-spacing:-.02em}
.family-flow-picker{display:none}

/* Selecting a step stops playback and lets the whole original screen scroll. */
.family-flow-demo[data-view] .family-flow-scene{animation:none;visibility:hidden}
.family-flow-demo[data-view] .family-flow-scene .family-flow-scroll{animation:none;transform:none;will-change:auto}
.family-flow-picker:focus-visible{outline:2px solid #fff;outline-offset:4px}
.family-flow-scene:focus-visible,.family-flow-gallery .phone-viewport:focus-visible{outline:2px solid #79818e;outline-offset:-3px}
.family-flow-gallery .phone-viewport{aspect-ratio:720/1624;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aeb4bd transparent}

@media(max-width:800px) and (min-width:641px){
  .family-flow-demo .scene-button{min-height:64px;padding:13px 12px}
  .family-flow-demo .scene-button>span{font-size:14px}
}
@media(max-width:640px){
  .family-flow-demo .scene-controls{display:none}
  .family-flow-picker{display:block;width:100%;min-height:56px;padding:16px 46px 16px 20px;border:0;border-radius:17px;color:#fff;background:#ffffff0f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center;font:inherit;font-size:16px;line-height:1.5;appearance:none;cursor:pointer}
  .family-flow-picker option{background:#171817;color:#fff}
  .family-flow-demo .demo-controls{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .family-flow-scroll{will-change:auto}
}

/* A single shared clock switches screens cleanly, without overlapping fades. */
.family-flow-scene[data-scene="overview"]{animation:family-flow-scene-01 91s step-end infinite}
.family-flow-scene[data-scene="overview"] .family-flow-scroll{animation:family-flow-scroll-01 91s linear infinite}
.family-flow-demo[data-view="overview"] .family-flow-scene[data-scene="overview"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-01{0%{visibility:visible}17.582418%{visibility:hidden}100%{visibility:visible}}
@keyframes family-flow-scroll-01{0%,2.637363%{transform:translateY(0)}14.065934%,17.582418%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="tariff"]{animation:family-flow-scene-02 91s step-end infinite}
.family-flow-scene[data-scene="tariff"] .family-flow-scroll{animation:family-flow-scroll-02 91s linear infinite}
.family-flow-demo[data-view="tariff"] .family-flow-scene[data-scene="tariff"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-02{0%{visibility:hidden}17.582418%{visibility:visible}28.571429%,100%{visibility:hidden}}
@keyframes family-flow-scroll-02{0%,19.230769%{transform:translateY(0)}26.373626%,28.571429%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="add-number"]{animation:family-flow-scene-03 91s step-end infinite}
.family-flow-scene[data-scene="add-number"] .family-flow-scroll{animation:family-flow-scroll-03 91s linear infinite}
.family-flow-demo[data-view="add-number"] .family-flow-scene[data-scene="add-number"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-03{0%{visibility:hidden}28.571429%{visibility:visible}35.164835%,100%{visibility:hidden}}
@keyframes family-flow-scroll-03{0%,29.56044%{transform:translateY(0)}33.846154%,35.164835%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="choose-role"]{animation:family-flow-scene-04 91s step-end infinite}
.family-flow-scene[data-scene="choose-role"] .family-flow-scroll{animation:family-flow-scroll-04 91s linear infinite}
.family-flow-demo[data-view="choose-role"] .family-flow-scene[data-scene="choose-role"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-04{0%{visibility:hidden}35.164835%{visibility:visible}41.758242%,100%{visibility:hidden}}
@keyframes family-flow-scroll-04{0%,36.153846%{transform:translateY(0)}40.43956%,41.758242%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="child-role"]{animation:family-flow-scene-05 91s step-end infinite}
.family-flow-scene[data-scene="child-role"] .family-flow-scroll{animation:family-flow-scroll-05 91s linear infinite}
.family-flow-demo[data-view="child-role"] .family-flow-scene[data-scene="child-role"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-05{0%{visibility:hidden}41.758242%{visibility:visible}50.549451%,100%{visibility:hidden}}
@keyframes family-flow-scroll-05{0%,43.076923%{transform:translateY(0)}48.791209%,50.549451%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="benefits"]{animation:family-flow-scene-06 91s step-end infinite}
.family-flow-scene[data-scene="benefits"] .family-flow-scroll{animation:family-flow-scroll-06 91s linear infinite}
.family-flow-demo[data-view="benefits"] .family-flow-scene[data-scene="benefits"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-06{0%{visibility:hidden}50.549451%{visibility:visible}61.538462%,100%{visibility:hidden}}
@keyframes family-flow-scroll-06{0%,52.197802%{transform:translateY(0)}59.340659%,61.538462%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="invitation"]{animation:family-flow-scene-07 91s step-end infinite}
.family-flow-scene[data-scene="invitation"] .family-flow-scroll{animation:family-flow-scroll-07 91s linear infinite}
.family-flow-demo[data-view="invitation"] .family-flow-scene[data-scene="invitation"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-07{0%{visibility:hidden}61.538462%{visibility:visible}68.131868%,100%{visibility:hidden}}
@keyframes family-flow-scroll-07{0%,62.527473%{transform:translateY(0)}66.813187%,68.131868%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="numbers"]{animation:family-flow-scene-08 91s step-end infinite}
.family-flow-scene[data-scene="numbers"] .family-flow-scroll{animation:family-flow-scroll-08 91s linear infinite}
.family-flow-demo[data-view="numbers"] .family-flow-scene[data-scene="numbers"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-08{0%{visibility:hidden}68.131868%{visibility:visible}78.021978%,100%{visibility:hidden}}
@keyframes family-flow-scroll-08{0%,69.615385%{transform:translateY(0)}76.043956%,78.021978%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="profile"]{animation:family-flow-scene-09 91s step-end infinite}
.family-flow-scene[data-scene="profile"] .family-flow-scroll{animation:family-flow-scroll-09 91s linear infinite}
.family-flow-demo[data-view="profile"] .family-flow-scene[data-scene="profile"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-09{0%{visibility:hidden}78.021978%{visibility:visible}90.10989%,100%{visibility:hidden}}
@keyframes family-flow-scroll-09{0%,79.835165%{transform:translateY(0)}87.692308%,90.10989%{transform:translateY(calc(-1 * var(--scroll-distance)))}100%{transform:translateY(0)}}
.family-flow-scene[data-scene="role-details"]{animation:family-flow-scene-10 91s step-end infinite}
.family-flow-scene[data-scene="role-details"] .family-flow-scroll{animation:family-flow-scroll-10 91s linear infinite}
.family-flow-demo[data-view="role-details"] .family-flow-scene[data-scene="role-details"]{visibility:visible;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
@keyframes family-flow-scene-10{0%{visibility:hidden}90.10989%{visibility:visible}100%{visibility:hidden}}
@keyframes family-flow-scroll-10{0%,91.593407%{transform:translateY(0)}98.021978%,100%{transform:translateY(calc(-1 * var(--scroll-distance)))}}